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!