Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Zoom de produtos em dispositivos móveis

O Zoom de produtos em dispositivos móveis é uma funcionalidade que pode ajudar muito seus clientes a visualizar melhor um produto a partir de seus celulares e assim definir se é realmente o que querem comprar.

Consiste em ver a imagem do produto maior em detalhe e poder ampliá-la através de gestos com os dedos.

Esta imagem se mostra tanto ao pressionar sobre a imagem que quer ver maior como ao fazer um toque no botão que tem um ícone de lupa.

Importante: Para poder aplicar esta funcionalidade é necessário ter a funcionalidade de como adaptar zoom de produtos para dispositivos móveis baseada no plugin bxslider. É provável que seu modelo já tenha aplicado, mas nunca é demais revisá-lo.

Para poder adicionar esta funcionalidade em sua loja, siga os seguinte passos:

1. Vamos precisar de um plugin que se chama SmartZoom o qual se pode baixar desde seu site. Vamos usar o arquivo minificado chamado e-smart-zoom-jquery.min.js

Este arquivo pode ser linkado no layout layout.tpl abaixo de tudo logo antes de fechar o body onde se encontra grande parte do javascript da loja.

2. É necessário substituir o seguinte código dentro do arquivo layout.tpl (modelo simples de exemplo):

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

});

Com o seguinte:

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. Logo abaixo do código adicionado no passo 2, você tem que adicionar o seguinte 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) No arquivo product.tpl ou product-image.tpl, dependendendo do exemplo que esteja usando, terá que adicionar a class CSS "js-product-image-container" a div que contém as imagens do produto (modelo de exemplo simples):

<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 deste container será necessário adicionar o botão que fará com que seja possível o 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) No mesmo tpl em que já está trabalhando provavelmente tenha um código para o slider de imagens dos produtos em mobile. Verá similar ao seguinte:

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

Neste código poderá ver a seguinte condição:

{% if product.images_count > 1 %}

Isto serve para determinar se será aplicado um slider pra mobile quando o produto tiver mais de uma foto, do contrário mostrará somente a única foto que tem, sem necessidade de um slider.

Para no caso de carregar muitas imagens e seja necessário utilizar um slider, substitua todos o <li> que se encontra dentro do {% for image in product.images %} pelo seguinte:

<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 outro lado, para que a imagem que se encontra no else terá que colocar dentro de uma div como o seguinte e adicionar a class de CSS "js-image-open-mobile-zoom" na imagem. Deveria ficar algo similar a isso:

{% 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 este bloco de código inteiro deveria ficar algo similar a isso:

{% 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 do mesmo tpl product.tpl e product-image.tpl (dependendo do modelo), abaixo de tudo adicione o seguinte 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, terá que adicionar o CSS relacionado a funcionalidade. Os exemplos que veremos a seguir são baseados no modelo 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);
}

Também recomendamos adicionar as seguintes classes "helpers" de CSS. Elas servem para adicionar propriedade pontuais como margins e paddings sem necessidade de criar uma regra nova. Por exemplo se quiser adicionar um margin-top:20px, simplesmente adicionado a class m-top já aplicará esta propriedade.

/****** 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}
}

Isso é tudo! 

 Eso es todo! e sua loja está pronto para mostrar imagens com zoom em dispositivos móveis!