Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Zoom de productos mobile

El Zoom de productos mobile es una funcionalidad que puede ayudar mucho a tus clientes a visualizar mejor un producto desde sus celulares y así definir si es realmente lo que quieren comprar.

Consiste en ver la imagen en el detalle del producto más grande y poder agrandarla a través de gestos con los dedos.

Esta imagen se muestra tanto al presionar sobre la imagen que se quiere ver más grande como al hacer tap en el botón que tiene el icono de la lupa.

Importante: Para poder aplicar esta funcionalidad es necesario tener la funcionalidad de las imágenes de productos en mobile  basada en el plugin bxslider. Es probable que tu plantilla ya lo tenga aplicado pero nunca esta de más revisarlo.

Para poder agregar esta funcionalidad en tu tienda, seguí los siguientes pasos:

1. Vamos a necesitar un plugin que se llama SmartZoom el cual se puede descargar desde su sitio. Vamos usar el archivo minificado llamado e-smart-zoom-jquery.min.js

Este archivo puede ser linkeado desde layout.tpl debajo de todo justo antes de cerrar el body donde se encuentra gran parte del Javascript de la tienda.

2. Es necesario que reemplaces el siguiente código dentro de tu archivo layout.tpl (ejemplo de la plantilla Simple): 

slider = $('#productbxslider').bxSlider({
    nextText:'<i class="fa fa-chevron-right"></i>',
    prevText:'<i class="fa fa-chevron-left"></i>',

});

Con el siguiente:

slider = $('#productbxslider').bxSlider({
        onSliderLoad: function(){
            //Add class to active slider image
            $('.js-product-mobile-slider > li').eq(1).addClass('js-product-active-image');
            $(".js-product-image-container img, .js-product-mobile-slider > li").css("visibility", "visible");
            $(".js-product-mobile-slider-preloader").hide();
        },
        onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
            $('.js-product-mobile-slider .js-product-active-image').removeClass('js-product-active-image');
            //Add class to active slider image
            $('.js-product-mobile-slider > li').eq(currentSlideHtmlObject + 1).addClass('js-product-active-image');
        },
        nextText:'<i class="fa fa-chevron-right hidden-phone"></i>',
        prevText:'<i class="fa fa-chevron-left hidden-phone"></i>',
    
    });

3. Luego debajo del código agregado en el paso 2, tenés que agregar el siguiente Javascript:

{# Mobile Zoom #}
//Save scrolling position for fixed body on Mobile Zoom opened
var scrollPos = $(document).scrollTop();
$(window).scroll(function(){
    scrollPos = $(document).scrollTop();
});
var savedScrollPos = scrollPos;

// Add tap class to product image
if ($(window).width() < 768) {
    $(".js-image-open-mobile-zoom").addClass("js-open-mobile-zoom");
}

// Mobile zoom open event
$(".js-open-mobile-zoom").click(function(e){
    e.preventDefault();
    savedScrollPos = scrollPos;
    $('body').css({
        position: 'fixed',
        top: -scrollPos
    });
    LS.openMobileZoom();
});

// Mobile zoom close event
$(".js-close-mobile-zoom").click(function(e){
    e.preventDefault();
    LS.closeMobileZoom(150);
});

4. A) En el archivo product.tpl o product-image.tpl, dependiendo que plantilla estés usando, tenés que agregarle la class de CSS  "js-product-image-container" al div que contiene a las imágenes del producto (ejemplo de la plantilla Simple):

<div class="imagecol js-product-image-container">
    <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}}" data-zoom-url="{{ image | product_image_url('original') }}">{{ image | product_image_url('big') | img_tag(image.alt, {class: 'js-image-open-mobile-zoom'}) }}</li>
                {% endfor %}
            </ul>
        {% else %}
            <div class="js-product-active-image" data-zoom-url="{{ product.featured_image | product_image_url('original') }}">
                {{ product.featured_image | product_image_url('large') | img_tag(product.featured_image.alt, {class: 'js-image-open-mobile-zoom'})}}
            </div>
        {% endif %}
        <a href="#" class="js-open-mobile-zoom product-image_mobile-zoom-btn visible-xs btn btn-default mobile-zoom_btn">
            <i class="fa fa-search-plus"></i>
        </a>
    </div>
.....
</div>
                

B) Dentro de este contenedor necesitás agregar el botón que hará posible el Zoom:

<a href="#" class="js-open-mobile-zoom product-image_mobile-zoom-btn visible-xs btn btn-default mobile-zoom_btn">
    <i class="fa fa-search-plus"></i>
</a>

C) En el mismo tpl en el que ya estas trabajando probablemente tengas un código para el slider de las imágenes de los productos en mobile. Se verá similar a lo siguiente:

<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('huge') | img_tag(image.alt) }}</li>
            {% endfor %}
        </ul>
    {% else %}
        {{ product.featured_image | product_image_url('huge') | img_tag(product.featured_image.alt) }}
    {% endif %}
        <div class="out-of-stock-product js-stock-label" {% if product.has_stock %}style="display:none;"{% endif %}>{{ "Sin stock" | translate }}</div>
        {% if product.free_shipping %}
            <div class="free-shipping-product">{{ "Envío sin cargo" | translate }}</div>
        {% endif %}
        <div class="offer-product js-offer-label"{% if not product.compare_at_price or not product.display_price %}style="display:none;"{% endif %}>{{ "Oferta" | translate }}</div>
</div>

En este código se puede ver la siguiente condición:

{% if product.images_count > 1 %}

Esto sirve para determinar si se va aplicar un slider para mobile cuando el producto tenga más de una foto, de lo contrario solo se mostrará la única foto que tiene sin necesidad de un slider.

Para el caso donde se carguen muchas imágenes y sea necesario utilizar un slider reemplazá todo el <li> que se encuentra dentro del {% for image in product.images %} por lo siguiente:

<li class="product-slider" data-image="{{image.id}}" data-image-position="{{loop.index0}}" data-zoom-url="{{ image | product_image_url('original') }}">{{ image | product_image_url('huge') | img_tag(image.alt, {class: 'js-image-open-mobile-zoom'}) }}</li>

Por otro lado para la imagen que se encuentra en el else vas a tener que colocarla dentro de en un div como el siguiente y a la imagen agregarle la class de CSS "js-image-open-mobile-zoom". Debería quedar algo similar a esto:

{% else %}
    <div class="js-product-active-image" data-zoom-url="{{ product.featured_image | product_image_url('original') }}">
        {{ product.featured_image | product_image_url('huge') | img_tag(product.featured_image.alt, {class: 'js-image-open-mobile-zoom'}) }}
    </div>
{% endif %}

Finalmente ese segmento de código entero debería quedar similar a esto:

{% if product.images_count > 1 %}
    <ul class="bxslider js-product-mobile-slider product-mobile-slider" id="productbxslider">
        {% for image in product.images %}
          <li class="product-slider" data-image="{{image.id}}" data-image-position="{{loop.index0}}" data-zoom-url="{{ image | product_image_url('original') }}">{{ image | product_image_url('huge') | img_tag(image.alt, {class: 'js-image-open-mobile-zoom'}) }}</li>
        {% endfor %}
    </ul>
    <div class="js-product-mobile-slider-preloader product-mobile-slider_preloader p-absolute full-width full-height">
        <i class="fa fa-circle-o-notch fa-spin"></i>
    </div>
{% else %}
    <div class="js-product-active-image" data-zoom-url="{{ product.featured_image | product_image_url('original') }}">
        {{ product.featured_image | product_image_url('huge') | img_tag(product.featured_image.alt, {class: 'js-image-open-mobile-zoom'}) }}
    </div>
{% endif %}

D) Dentro el mismo tpl product.tpl product-image.tpl (dependiendo de la plantilla), debajo de todo agrega el siguiente componente:

<div class="js-mobile-zoom-panel mobile-zoom_panel">
    <a class="js-close-mobile-zoom mobile-zoom_btn btn btn-default m-right m-top">
        <i class="fa fa-times"></i>
    </a>
    <i class="js-mobile-zoom-spinner mobile-zoom_spinner fa fa-circle-o-notch fa-spin"></i>
    <div class="js-mobile-zoomed-image mobile-zoom_image-container">
       {# Container to be filled with the zoomable image #}
    </div>
</div>

5. Por último solo queda agregar el CSS relacionado a la funcionalidad. Los ejemplos que vamos a ver a continuación están basados en la plantilla Silent.

CSS normal

/* Mobile Zoom */
.product-image_mobile-zoom-btn,
.mobile-zoom_btn{
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 18px;
    z-index: 1;
    padding: 7px 9px;
    border-radius: 0;
}
.mobile-zoom_panel{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.mobile-zoom_image-container{
    margin: 15px;
    max-height: 95%;
}
.mobile-zoom_spinner{
    display: none;
    position: absolute;
    top: 40%;
    left: 50%;
    z-index: 99;
    margin-left: -15px;
    font-size: 30px;
}
.mobile-zoom_panel img{
    width: 100%;
    max-height: inherit;
}

SASS

/* Mobile Zoom*/
.mobile-zoom_panel{
    background:$back;
} 
.mobile-zoom_btn{
    background:$back;
    color:$primary;
    border-color:rgba($txt, .5);
}

También recomendamos agregar las siguientes clases "helpers" de CSS. Esta sirven para agregar propiedades puntuales como márgenes o paddings sin necesidad de crear una regla nueva. Por ejemplo si quisieras agregar un margin-top:20px, simplemente agregando la class m-top ya aplicará esta propiedad.

/****** PROPERTIES HELPERS ******/
 
/*CSS properties helpers minified, to unminify it you have to copy the code and paste it here http://unminify.com/, after that paste the unminified code here */

.text-danger{color:red}.border-box{box-sizing: border-box}.c-pointer{cursor:pointer}.f-none{float:none!important}.d-none{display:none}.d-inline{display:inline}.d-block{display:block}.d-inline-block{display:inline-block}.p-relative{position:relative!important}.p-absolute{position:absolute}.p-fixed{position:fixed}.clear-both{clear:both}.opacity-80{opacity:.8}.opacity-50{opacity:.5}.full-height{height:100%}.full-width{width:100%}.z-index-above{z-index:999999}.m-top{margin-top:20px}.m-bottom{margin-bottom:20px}.m-right{margin-right:20px}.m-left{margin-left:20px}.m-all{margin:20px}.m-half-top{margin-top:10px!important}.m-half-bottom{margin-bottom:10px!important}.m-half-right{margin-right:10px}.m-half-left{margin-left:10px!important}.m-half-all{margin:10px}.m-quarter-top{margin-top:5px!important}.m-quarter-right{margin-right:5px}.m-quarter-bottom{margin-bottom:5px}.m-quarter-left{margin-left:5px}.m-none-left{margin-left:0!important}.m-quarter-all{margin:5px}.m-double-top{margin-top:40px}.m-double-right{margin-right:40px}.m-double-bottom{margin-bottom:40px}.m-auto{margin:auto}.m-none{margin:0!important}.m-none-bottom{margin-bottom:0}.m-none-top{margin-top:0!important}.m-center{margin:0 auto;position:relative;display:block}.p-double-top{padding-top:40px!important}.p-double-right{padding-right:40px!important}.p-double-bottom{padding-bottom:40px!important}.p-double-left{padding-left:40px!important}.p-top{padding-top:20px!important}.p-none-top{padding-top:0!important}.p-right{padding-right:20px!important}.p-right-none{padding-right:0!important}.p-left-none{padding-left:0!important}.p-bottom{padding-bottom:20px!important}.p-none-bottom{padding-bottom:0!important}.p-left{padding-left:20px!important}.p-all{padding:20px!important}.p-half-top{padding-top:10px!important}.p-half-right{padding-right:10px!important}.p-half-bottom{padding-bottom:10px!important}.p-half-left{padding-left:10px!important}.p-half-all{padding:10px!important}.p-quarter-top{padding-top:5px!important}.p-quarter-right{padding-right:5px}.p-quarter-bottom{padding-bottom:5px}.p-quarter-left{padding-left:5px}.p-quarter-all{padding:5px}.p-none{padding:0!important}.col-tight{padding-left:8px;padding-right:8px}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-wrap{-ms-word-break:break-all;word-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto}.font-weight-normal{font-weight:400}.text-decoration-none{text-decoration:none}.text-line-through{text-decoration:line-through}.text-underline{text-decoration:underline}.font-italic{font-style:italic}.font-normal{font-weight:normal}.font-bold{font-weight:700}.line-height-inherit{line-height:inherit}.line-height-initial{line-height:initial}ul.list-style-none li{list-style:none}.mail-to a,.mail-to a:hover,.no-link,.no-link:focus,.no-link:hover{text-decoration:none}.border-radius-none{border-radius:0}.overflow-none{overflow:hidden}.overflow-y{overflow-y:auto}

/* Mobile Helpers */
@media (max-width: 767px) {
  .full-width-xs{width:100%!important}.clear-both-xs{clear:both}.f-none-xs{float:none!important}.pull-left-xs{float: left!important;}.d-inline-block-xs{display:inline-block!important}.p-none-xs{padding:0!important}.p-left-none-xs{padding-left:0}.p-right-none-xs{padding-right:0}.p-half-left-xs{padding-left:10px!important}.p-quarter-left-xs{padding-left:5px}.p-quarter-right-xs{padding-right:5px}.p-half-right-xs{padding-right:10px!important}.p-top-xs{padding-top:20px}.p-half-top-xs{padding-top:10px}.p-bottom-xs{padding-bottom:20px}.p-half-bottom-xs{padding-bottom:10px}.p-double-bottom-xs{padding-bottom:40px}.m-none-xs{margin:0!important}.m-bottom-xs{margin-bottom:20px}.m-half-bottom-xs{margin-bottom:10px}.m-quarter-bottom-xs{margin-bottom:5px!important}.m-top-xs{margin-top:20px!important}.m-half-top-xs{margin-top:10px}.m-quarter-top-xs{margin-top:5px}.m-none-top-xs{margin-top:0}.m-half-right-xs{margin-right:10px!important}.text-center-xs{text-align:center}.text-left-xs{text-align:left}.col-tight-xs{padding-left:8px;padding-right:8px}.drop-shadow-xs{-moz-box-shadow:0 0 3px #ccc;-webkit-box-shadow:0 0 3px #ccc;box-shadow:0 0 3px #ccc}.border-top-none-xs{border-top:0!important}.border-bottom-none-xs{border-bottom:0!important}.horizontal-container{overflow-x:scroll;width:100%;margin:0px}.horizontal-container::-webkit-scrollbar{width:1px;height:0}.horizontal-container::-webkit-scrollbar-track{background:0 0;border-radius:10px}.horizontal-container::-webkit-scrollbar-thumb{border-radius:1px}.horizontal-container ul, .horizontal-products-scroller{white-space:nowrap}
}

 Eso es todo! ya tu tienda esta lista para mostrar imágenes con Zoom en mobile!

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