Cuando accedemos a clases se guarda como una colección de objetos HTML. Accedemos mediante el método getElementsByClassName. Para verlo bien lo mejor es un ejemplo.
var descripcioncategoria = document.getElementsByClassName("term-description");
En la variable descripcion corta hemos guardado los elementos que se encuentran en el HTML de la página web que hemos accedido que son de la clase term-descripcion (en concreto era un <div class="term-descripcion">).
En este caso solo había un div con esta clase con lo cual para acceder al HTML que hay dentro lo haremos de la siguiente manera:
var descripcioncategoria = document.getElementsByClassName("term-description")[0].innerHTML;
Aquí le estamos indicando que queremos acceder al primer elemento de la colección de objetos.
Aunque esto puede parecer obvio la falta de habito o el desconocimiento de esto nos puede crear mucha pérdida de tiempo, dolores de cabeza y frustración.
Otro dato a tener en cuenta aquí es que cuando se quiere añadir algo con innerHTML se usa las " " , como siempre lo mejor es ver un ejemplo de como se hace :
var descripcioncategoria = document.getElementsByClassName("term-description")[0].innerHTML=descripcioncategoria+" pues ya ves"
En este ejemplo he hecho sobrecarga en la variable descripcioncategoria guardando a ella misma más el texto nuevo que he añadido, en este caso el " pues ya ves".
sábado, 11 de noviembre de 2017
jueves, 9 de noviembre de 2017
One month JQuery: Como se hace un set de imagenes en Lightbox y que es
En JQuery lightbox que es una libreria JQuery para presentaciones de imágenes se puede realizar un set de estas, un set es un conjunto de imagenes supuestamente de misma tématica en la cual puedes navegar entre ellas mediante los cursores. Para eso simplemente en el campo data-lightbox deben de tener el mismo nombre todas las fotos que pertenezcan a ese set. He aquí un ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Summer Vacation</title>
<!-- CSS -->
<link href="styles.css" rel="stylesheet">
<link href="lightbox2-master/dist/css/lightbox.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<span>— My Trip to —</span>
<h1>The Golden State</h1>
</header>
<!-- Thumbnail Images -->
<a href="assets/images/image1.jpg" data-lightbox="roadtrip" data-title="Surfing">
<img src="assets/thumbnails/thumb1.jpg" alt="Surfing"/>
</a>
<a href="assets/images/image2.jpg" data-lightbox="roadtrip" data-title="Lifeguard Stand">
<img src="assets/thumbnails/thumb2.jpg" alt="Lifeguard Stand"/>
</a>
<a href="assets/images/image3.jpg" data-lightbox="roadtrip" data-title="Hot Air Balloon">
<img src="assets/thumbnails/thumb3.jpg" alt="Hot Air Balloon"/>
</a>
<a href="assets/images/image4.jpg" data-lightbox="roadtrip" data-title="Field Freedom">
<img src="assets/thumbnails/thumb4.jpg" alt="Field Freedom"/>
</a>
<a href="assets/images/image5.jpg" data-lightbox="roadtrip" data-title="Golden Gate Bridge">
<img src="assets/thumbnails/thumb5.jpg" alt="Golden Gate Bridge"/>
</a>
<a href="assets/images/image6.jpg" data-lightbox="roadtrip" data-title="Pacific Ocean Sunset">
<img src="assets/thumbnails/thumb6.jpg" alt="Pacific Ocean Sunset"/>
</a>
</div>
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="lightbox2-master/dist/js/lightbox.js"></script>
<script>
lightbox.option({
'positionFromTop': 100,
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Summer Vacation</title>
<!-- CSS -->
<link href="styles.css" rel="stylesheet">
<link href="lightbox2-master/dist/css/lightbox.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<span>— My Trip to —</span>
<h1>The Golden State</h1>
</header>
<!-- Thumbnail Images -->
<a href="assets/images/image1.jpg" data-lightbox="roadtrip" data-title="Surfing">
<img src="assets/thumbnails/thumb1.jpg" alt="Surfing"/>
</a>
<a href="assets/images/image2.jpg" data-lightbox="roadtrip" data-title="Lifeguard Stand">
<img src="assets/thumbnails/thumb2.jpg" alt="Lifeguard Stand"/>
</a>
<a href="assets/images/image3.jpg" data-lightbox="roadtrip" data-title="Hot Air Balloon">
<img src="assets/thumbnails/thumb3.jpg" alt="Hot Air Balloon"/>
</a>
<a href="assets/images/image4.jpg" data-lightbox="roadtrip" data-title="Field Freedom">
<img src="assets/thumbnails/thumb4.jpg" alt="Field Freedom"/>
</a>
<a href="assets/images/image5.jpg" data-lightbox="roadtrip" data-title="Golden Gate Bridge">
<img src="assets/thumbnails/thumb5.jpg" alt="Golden Gate Bridge"/>
</a>
<a href="assets/images/image6.jpg" data-lightbox="roadtrip" data-title="Pacific Ocean Sunset">
<img src="assets/thumbnails/thumb6.jpg" alt="Pacific Ocean Sunset"/>
</a>
</div>
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="lightbox2-master/dist/js/lightbox.js"></script>
<script>
lightbox.option({
'positionFromTop': 100,
})
</script>
</body>
</html>
jueves, 10 de agosto de 2017
Comando para permitir la gestión remota de CUPS desde el navegador
cupsctl --remote-admin Tan fácil como poner este comando con estos argumentos en la terminal :-) lunes, 17 de julio de 2017
JQuery mostrar imagen 1 o 2 según si tiene precio o el texto consultar
Este es el script que he hecho para que según contexto ponga una imagen u otra:
var nodoprecio = document.getElementsByClassName("price");
nodoprecio = nodoprecio[0].textContent;
nodoprecio = nodoprecio.trim();
var consultar = 'Consultar';
if (nodoprecio === consultar){
$(".price").after("<div id='imgportes'><img src='http://www.mundobodega.com/content/972068/consultar_mundobodega.png' /></div>");
}
else{
$(".price").after("<div id='imgportes2'><img src='http://www.mundobodega.com/content/972068/envio_mundobodega_2.png' /></div>");
}
la primera versión me daba problemas en FireFox porque en vez de textContent que es el que marca el estándar a usar usaba outerText que es propietario de MS.
Bien está lo que bien acaba.
var nodoprecio = document.getElementsByClassName("price");
nodoprecio = nodoprecio[0].textContent;
nodoprecio = nodoprecio.trim();
var consultar = 'Consultar';
if (nodoprecio === consultar){
$(".price").after("<div id='imgportes'><img src='http://www.mundobodega.com/content/972068/consultar_mundobodega.png' /></div>");
}
else{
$(".price").after("<div id='imgportes2'><img src='http://www.mundobodega.com/content/972068/envio_mundobodega_2.png' /></div>");
}
la primera versión me daba problemas en FireFox porque en vez de textContent que es el que marca el estándar a usar usaba outerText que es propietario de MS.
Bien está lo que bien acaba.
miércoles, 12 de julio de 2017
Añadir al carro y seleccionar variacion del producto desde la pagina de catalogo
Con este trozo de código pegado en el functions.php del tema que este vigente conseguiremos que en la catalog shop page (pagina que muestra los productos nos salga el añadir al carrito y escoger las variaciones si el producto dispone de ellas claro está.
El código es de Remi Corson, grande!
http://www.remicorson.com/display-woocommerce-product-variations-dropdown-on-the-shop-page/
// Display variations dropdowns on shop page for variable products
add_filter( 'woocommerce_loop_add_to_cart_link', 'woo_display_variation_dropdown_on_shop_page' );
function woo_display_variation_dropdown_on_shop_page() {
global $product;
if( $product->is_type( 'variable' )) {
$attribute_keys = array_keys( $product->get_attributes() );
?>
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo htmlspecialchars( json_encode( $product->get_available_variations() ) ) ?>">
<?php do_action( 'woocommerce_before_variations_form' ); ?>
<?php if ( empty( $product->get_available_variations() ) && false !== $product->get_available_variations() ) : ?>
<p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
<?php else : ?>
<table class="variations" cellspacing="0">
<tbody>
<?php foreach ( $product->get_attributes() as $attribute_name => $options ) : ?>
<tr>
<td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
<td class="value">
<?php
$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
?>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<div class="single_variation_wrap">
<?php
/**
* woocommerce_before_single_variation Hook.
*/
do_action( 'woocommerce_before_single_variation' );
/**
* woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
* @since 2.4.0
* @hooked woocommerce_single_variation - 10 Empty div for variation data.
* @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
*/
do_action( 'woocommerce_single_variation' );
/**
* woocommerce_after_single_variation Hook.
*/
do_action( 'woocommerce_after_single_variation' );
?>
</div>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
<?php endif; ?>
<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>
<?php } else {
echo sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
);
}
}
El código es de Remi Corson, grande!
http://www.remicorson.com/display-woocommerce-product-variations-dropdown-on-the-shop-page/
// Display variations dropdowns on shop page for variable products
add_filter( 'woocommerce_loop_add_to_cart_link', 'woo_display_variation_dropdown_on_shop_page' );
function woo_display_variation_dropdown_on_shop_page() {
global $product;
if( $product->is_type( 'variable' )) {
$attribute_keys = array_keys( $product->get_attributes() );
?>
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo htmlspecialchars( json_encode( $product->get_available_variations() ) ) ?>">
<?php do_action( 'woocommerce_before_variations_form' ); ?>
<?php if ( empty( $product->get_available_variations() ) && false !== $product->get_available_variations() ) : ?>
<p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
<?php else : ?>
<table class="variations" cellspacing="0">
<tbody>
<?php foreach ( $product->get_attributes() as $attribute_name => $options ) : ?>
<tr>
<td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
<td class="value">
<?php
$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
?>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<div class="single_variation_wrap">
<?php
/**
* woocommerce_before_single_variation Hook.
*/
do_action( 'woocommerce_before_single_variation' );
/**
* woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
* @since 2.4.0
* @hooked woocommerce_single_variation - 10 Empty div for variation data.
* @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
*/
do_action( 'woocommerce_single_variation' );
/**
* woocommerce_after_single_variation Hook.
*/
do_action( 'woocommerce_after_single_variation' );
?>
</div>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
<?php endif; ?>
<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>
<?php } else {
echo sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
);
}
}
miércoles, 28 de septiembre de 2016
Problemas borrando productos (variaciones siguen en BD pero no aparecen en la interfaz)
Este es un problema que se ve que es bastante común en WOO COMMERCE. De hecho encontré mucha gente que hablaban de este problema y muchas soluciones, desde peticiones MySQL para actualizar la base de datos borrando variaciones, etc...
Yo propongo una que le gustara a la mayoría de gente por su sencillez, sin arriesgarse a peticiones " a mano" a la base de datos ( aunque siempre se recomienda copia de seguridad, porque al fin y al cabo aunque sea por interfaz web el resultado es el mismo: una petición a la base de datos que comprobará que variaciones estan "huerfanas" (padre borrado) y las borrará, que es lo que pretendemos.
Seccion Wocommerce > Estado de sistema
En esta página arriba hay varios tabuladores, como se muestra en la captura:
escogemos el de herramientas, y allí buscamos la opción:
Delete Orphans (borrar huérfanos)
Yo propongo una que le gustara a la mayoría de gente por su sencillez, sin arriesgarse a peticiones " a mano" a la base de datos ( aunque siempre se recomienda copia de seguridad, porque al fin y al cabo aunque sea por interfaz web el resultado es el mismo: una petición a la base de datos que comprobará que variaciones estan "huerfanas" (padre borrado) y las borrará, que es lo que pretendemos.
Seccion Wocommerce > Estado de sistema
En esta página arriba hay varios tabuladores, como se muestra en la captura:
escogemos el de herramientas, y allí buscamos la opción:
Delete Orphans (borrar huérfanos)
viernes, 2 de septiembre de 2016
Botón leer más con Jquery
Aquí pego un fragmento de un botón de leer más que hemos hecho:
Explicar que el texto viene oculto desde el div con id #panel.
<strong>Prodimex Global</strong> es una empresa zapatera ubicada en Logroño (España). Ha desarrollado la marca <strong>ORIOCX</strong>, dedicada a la fabricación de <em><b><u>calzado montaña</u></b></em> para actividades al aire libre.
Los productos que presenta <strong>ORIOCX</strong> son el fruto de una larga experiencia en la fabricación de <strong><i><u>calzado</u></i></strong> de calidad que se remonta a 1948.
<strong>ORIOCX</strong> fabrica un <strong><i><u>calzado montaña</u></i></strong> cómodo y práctico para disfrutar al máximo de la actividad junto a la naturaleza.
Este <strong><i><u>zapato montaña</u></i></strong> está pensado para practicar trekking, travesía, trail running, backpacking, caza o para uso cotidiano.
Podemos encontrar <strong><i><u>botas</u></i></strong>, <strong><i><u>zapatos</u></i></strong>, <strong><i><u>deportivos</u></i></strong> y <strong><i><u>sandalias</u></i></strong>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#panel p").hide()
$("button").click(function(){
$("#panel p").slideToggle(1000, function(){
});
});
});
</script>
<style>
#panel, #flip {
text-align: center;
padding: 5px;
}
#panel {
padding: 50px;
display: none;
}
</style>
<button>Leer más</button>
<div id="panel">
<p><strong>ORIOCX</strong> trabaja en investigar y diseñar un <em><b><u>calzado montaña</u></b></em> tecnológicamente avanzado con materiales de primera calidad.
<strong>X-System,</strong> es un sistema de protección y sujeción en la zona del maléolo que permite realizar travesías por todo tipo de terrenos, aportando a los<span class="apple-converted-space"> </span><strong><i><u>zapatos montaña</u></i></strong><span class="apple-converted-space"> </span>una sujeción extra.
<strong>ULTRA LIGHT System, </strong>el uso de innovadores materiales ligeros permite crear unos <em><b><u>zapatos</u></b></em><em><u> </u></em><strong><i><u>montaña</u></i></strong> con los que se puede andar más cómodo y ligero.
<strong>Ocx2-Dry, </strong>gracias a componentes probados y controlados, y a un concepto de ensamble específico, estos <em><b><u>zapatos montaña</u></b></em> son impermeables y transpirables. La membrana Ocx2-Dry asegura una impermeabilidad duradera al <strong><i><u>calzado montaña</u></i></strong>, permitiendo la evacuación de la humedad. El cuero es naturalmente transpirable y tratado hidrófobo. Membrana OCX2DRY formada por 70% poliéster y 30% poliéter.
Forro <em><b>SYMPATEX,</b></em> se trata de una membrana ecológica de cinco micras de espesor laminada sobre base textil, que protege contra la humedad. Sus componentes hidrofílicos atraen el agua y absorben la humedad (transpiración), expulsándola desde el interior hacia el exterior, asegurando al <em><b><u>calzado montaña</u></b></em> un control óptimo del clima interno al tiempo que repele el agua.</p>
</div>
Explicar que el texto viene oculto desde el div con id #panel.
<strong>Prodimex Global</strong> es una empresa zapatera ubicada en Logroño (España). Ha desarrollado la marca <strong>ORIOCX</strong>, dedicada a la fabricación de <em><b><u>calzado montaña</u></b></em> para actividades al aire libre.
Los productos que presenta <strong>ORIOCX</strong> son el fruto de una larga experiencia en la fabricación de <strong><i><u>calzado</u></i></strong> de calidad que se remonta a 1948.
<strong>ORIOCX</strong> fabrica un <strong><i><u>calzado montaña</u></i></strong> cómodo y práctico para disfrutar al máximo de la actividad junto a la naturaleza.
Este <strong><i><u>zapato montaña</u></i></strong> está pensado para practicar trekking, travesía, trail running, backpacking, caza o para uso cotidiano.
Podemos encontrar <strong><i><u>botas</u></i></strong>, <strong><i><u>zapatos</u></i></strong>, <strong><i><u>deportivos</u></i></strong> y <strong><i><u>sandalias</u></i></strong>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#panel p").hide()
$("button").click(function(){
$("#panel p").slideToggle(1000, function(){
});
});
});
</script>
<style>
#panel, #flip {
text-align: center;
padding: 5px;
}
#panel {
padding: 50px;
display: none;
}
</style>
<button>Leer más</button>
<div id="panel">
<p><strong>ORIOCX</strong> trabaja en investigar y diseñar un <em><b><u>calzado montaña</u></b></em> tecnológicamente avanzado con materiales de primera calidad.
<strong>X-System,</strong> es un sistema de protección y sujeción en la zona del maléolo que permite realizar travesías por todo tipo de terrenos, aportando a los<span class="apple-converted-space"> </span><strong><i><u>zapatos montaña</u></i></strong><span class="apple-converted-space"> </span>una sujeción extra.
<strong>ULTRA LIGHT System, </strong>el uso de innovadores materiales ligeros permite crear unos <em><b><u>zapatos</u></b></em><em><u> </u></em><strong><i><u>montaña</u></i></strong> con los que se puede andar más cómodo y ligero.
<strong>Ocx2-Dry, </strong>gracias a componentes probados y controlados, y a un concepto de ensamble específico, estos <em><b><u>zapatos montaña</u></b></em> son impermeables y transpirables. La membrana Ocx2-Dry asegura una impermeabilidad duradera al <strong><i><u>calzado montaña</u></i></strong>, permitiendo la evacuación de la humedad. El cuero es naturalmente transpirable y tratado hidrófobo. Membrana OCX2DRY formada por 70% poliéster y 30% poliéter.
Forro <em><b>SYMPATEX,</b></em> se trata de una membrana ecológica de cinco micras de espesor laminada sobre base textil, que protege contra la humedad. Sus componentes hidrofílicos atraen el agua y absorben la humedad (transpiración), expulsándola desde el interior hacia el exterior, asegurando al <em><b><u>calzado montaña</u></b></em> un control óptimo del clima interno al tiempo que repele el agua.</p>
</div>
Suscribirse a:
Entradas (Atom)