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!