Bruno Zelaia Weblog: 2017

sábado, 11 de noviembre de 2017

Apuntes javascript parte I

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".

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>

<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>

<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>

<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.

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() )
        );

    }

}

Bruno Zelaia Weblog