Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Cómo adaptar las fotos de productos a móviles

Con la creciente proliferación de dispostivos táctiles, muchas de las interacciones en las que basábamos nuestros diseños necesitan ser reformuladas. Una de ellas es el "hover" o la acción de posicionar el puntero del mouse sobre un elemento, sin clickear. El llamado hover acompañó el desarrollo del diseño web desde el principio. Podíamos verlo accionando un menú desplegable o activando un tooltip. Hoy día si deseamos dar una experiencia completa a los usuarios de dispositivos de control táctil necesitamos reformular este recurso de interacción, ya que en una pantalla táctil no existe la diferencia entre el acto de hover click, todo se reduce al tap, ya sea doble o simple, swipe, pinch y otros recursos gestuales, pero nada que se asemeje al tan usado hover.

El feature que vamos a analizar hoy cumple la función de reemplazar el efecto de zoom que se ejecuta al hacer hover sobre una foto de producto en una interna de detalle de producto. Lo que vamos a hacer es implementar un plugin de jQuery conocido como bxSlider y en lugar del efecto de zoom vamos a ofrecer a los usuarios la posiblilidad de navegar las diferentes fotos mediante flechas. Como pueden observar en el ejemplo:

1. El primer paso será incluir el llamado al método javascript que activa el bxSlider en layout.tpl junto con el código de variante para la vista product.tpl.

{% if template == "product" %}
<script type="text/javascript">
$(document).ready(function(){
    slider = $('#productbxslider').bxSlider({
        nextText:'<i class="fa fa-chevron-right"></i>',
        prevText:'<i class="fa fa-chevron-left"></i>',
    
    });
  LS.registerOnChangeVariant(function(variant){
        var liImage = $('#productbxslider').find("[data-image='"+variant.image+"']");
        var selectedPosition = liImage.data('image-position');
        var slideToGo = parseInt(selectedPosition);
        slider.goToSlide(slideToGo);
    });
});
</script>
{% endif %}

Para asegurarte que las imágenes sigan respondiendo a los cambios de variantes debes eliminar, en caso de encontrarse, la variable bxslider. Borrar var bxslider = 

var bxslider = $('#slider').bxSlider({
                    auto: {% if settings.slider_auto and settings.slider | length > 1 %}true{% else %}false{% endif %},
                    pause: 5000,
                    autoHover: true,
                    adaptiveHeight: false,
                    prevText: '<i class="fa fa-angle-left fa-3x"></i>',
                    nextText: '<i class="fa fa-angle-right fa-3x"></i>',
                    pager: false
                });

2. Ahora debes buscar el product.tpl y agregarle la clase "desktop-featured-product" a la columna que contiene el producto destacado en la imagen. En el caso de luxury dicho contenedor tiene la clase "imagecolContent".

Una vez hecho esto, vas a copiar el siguiente código y lo pegarás arriba del "imagecolContent" que acabás de editar.

<div class="mobile-bxslider">             
    {% if product.images_count > 1 %}
        <ul class="bxslider" id="productbxslider">
            {% for image in product.images %}
              <li class="product-slider" data-image="{{image.id}}" data-image-position="{{loop.index0}}">{{ image | product_image_url('big') | img_tag(image.alt) }}</li>
            {% endfor %}
        </ul>
    {% else %}
        {{ product.featured_image | product_image_url('large') | img_tag(product.featured_image.alt) }}
    {% endif %}
      {% if not product.available %}
                <div class="circle out-of-stock">
                    <p>{{ "Sin stock" | translate }}</p>
                </div>
             {% endif %}
            {% if product.free_shipping %}
                <div class="circle free-shipping">
                    <p>{{ "Envío sin cargo" | translate }}</p>
                </div>
            {% endif %}
            {% if product.compare_at_price %}
                <div class="circle offer">
                    <p>{{ "Oferta" | translate }}</p>
                </div>
        {% endif %}
</div>

3) El tercer paso sería establecer los puntos de quiebre en los cuales queres mostrar u ocultar una u otra opción. Estos son los estilos que usamos en la plantilla Luxury por debajo de los 767px de ancho de viewport, a modo de ejemplo:

.mobile-bxslider {
    display: block;
    float: left;
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
    position: relative;
}
.imagecol .bx-wrapper{
    display: block;
}
.desktop-featured-product{
    display: none;
}
.mobile-bxslider img{
    margin: auto;
    height: auto;
    max-width: 80%!important;
    max-height: 300px;
}

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.