| variable |
valor |
assign discount_format |
tipo de descuento |
assign pixel_white |
imagen 1px base64 |
capture option_slider |
según slick slider formato json |
assign slidesToShow |
cantidad de imagenes para mostrar en thumbnails |
capture option_slider_thumbnail |
según slick slider, es importante definir:
"slidesToShow" : {{slidesToShow}} para que funcione, formato json |
{% capture option_slider %}
"lazyLoad": "ondemand",
"arrows": true,
"nav":true,
"fade": true,
"pauseOnFocus": true
{% endcapture %}
<div id="bs-product-slider" data-bs="slider" data-info='{ {{option_slider | strip_newlines }} }'>
...
</div>Slider con thumbnails horizontal
{% assign discount_format = "tag"%}<!-- formato de descuento -->
{% assign slidesToShow = 4 %} <!-- imagenes pequeñas define cantidad -->
{% assign pixel_white = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"asNavFor": "#bs-product-thumbnail",
"arrows": false,
"nav":true,
"fade": true,
"draggable": false,
"pauseOnFocus": true,
"responsive": [
{
"breakpoint": 768,
"settings": {
"nextArrow": "<div class=\"slick-next\"><i class=\"fas fa-arrow-circle-right\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas fa-arrow-circle-left\"></i></div>",
"dots": false,
"vertical": false,
"draggable": false
}
}
]
{% endcapture %}
{% capture option_slider_thumbnail %}
"lazyLoad": "ondemand",
"asNavFor": "#bs-product-slider",
"focusOnSelect": true,
"slidesToScroll": 1,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas fa-arrow-circle-right\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas fa-arrow-circle-left\"></i></div>",
"slidesToShow" : {{slidesToShow}},
"responsive": [
{
"breakpoint": 768,
"settings": {
"nextArrow": "<div class=\"slick-next\"><i class=\"fas fa-arrow-circle-right\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas fa-arrow-circle-left\"></i></div>",
"dots": false,
"infinite":true,
"vertical": false
}
}
]
{% endcapture %}
<!------------------------------------------------------------------------------------------------------>
{% if slidesToShow >= product.images.size %}
<style>
#bs-product-thumbnail .slick-track{
transform: none !important;
}
</style>
{%endif%}
<!----------------------------------------------------------------------------------------------------->
<div class="row">
<section class="col-12 relative">
<div data-bs="product.discount" class="bs-discount {{discount_format}} left">
<strong data-bs="product.discount.value">
-{{ product.discountRate }}%
</strong>
</div>
{% if product.images.size > 0 %}
<div id="bs-product-slider" data-bs="slider" data-info='{ {{option_slider | strip_newlines }} }'>
{% for image in product.images %}
{%if product.defaultImage == image.href %}
<div class="item" data-info="{{image.legendImage}}">
<div class="bs-img-square" data-bs="zoom">
<picture>
<img
src="{{ image.href | image_url: 'M' }}"
data-lazy="{{ image.href | image_url: 'X' }}"
loading="lazy"
onerror="this.onerror=null;this.src='{{image.href}}';"
alt="{{ product.title }}{{forloop.index}}"
title="{{ product.title }}{{forloop.index}}">
</picture>
</div>
</div>
{% break %}
{% endif%}
{%endfor%}
{% for image in product.images %}
{%if product.defaultImage != image.href %}
<div class="item" data-info="{{image.legendImage}}">
<div class="bs-img-square" data-bs="zoom">
<picture>
<img
src="{{pixel_white}}"
data-lazy="{{ image.href | image_url: 'X' }}"
loading="lazy"
onerror="this.onerror=null;this.src='{{image.href}}';"
alt="{{ product.title }}{{forloop.index}}"
title="{{ product.title }}{{forloop.index}}">
</picture>
</div>
</div>
{% endif%}
{%endfor%}
</div>
{% else %}
<div class="bs-img-square" data-bs="zoom">
<picture>
<img
src="{{ site.logo | image_url: 'M' }}"
data-lazy="{{ site.logo | image_url: 'X' }}"
loading="lazy"
onerror="this.onerror=null;this.src='{{site.logo}}';"
alt="{{ product.title }}"
title="{{ product.title }}">
</picture>
</div>
{% endif %}
</section>
{% if images.size > 1 %}
<nav class="col-12 bs-horizontal-slider" id="bs-product-thumbnail" data-bs="slider" data-info='{ {{option_slider_thumbnail | strip_newlines }} }' class="bs-horizontal-slider my-1">
{% for image in product.images %}
{%if product.defaultImage == image.href %}
<div class="item">
<div class="bs-img-square">
<picture>
<img
src="{{pixel_white}}"
data-lazy="{{ image.href | image_url: 'X' }}"
loading="lazy"
onerror="this.onerror=null;this.src='{{image.href}}';"
alt="{{ product.title }} {{forloop.index0}}"
title="{{ product.title }} {{forloop.index0}}"
>
</picture>
</div>
</div>
{% endif %}
{%endfor%}
{% for image in product.images %}
{%if product.defaultImage != image.href %}
<div class="item">
<div class="bs-img-square">
<picture>
<img
src="{{pixel_white}}"
data-lazy="{{ image.href | image_url: 'X' }}"
loading="lazy"
onerror="this.onerror=null;this.src='{{image.href}}';"
alt="{{ product.title }} {{forloop.index}}"
title="{{ product.title }} {{forloop.index}}"
>
</picture>
</div>
</div>
{% endif %}
{%endfor%}
</nav>
{%endif%}
</div> Slider con thumbnails vertical
{% assign discount_format = "tag"%}
{% assign slidesToShow = 4 %} <!-- imagenes pequeñas define cantidad -->
{% assign pixel_white = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
{% capture option_slider %}
"lazyLoad": "ondemand",
"asNavFor": "#bs-product-thumbnail",
"arrows": false,
"fade": true,
"draggable": false,
"pauseOnFocus": true,
"responsive": [
{
"breakpoint": 768,
"settings": {
"nextArrow": "<div class=\"slick-next\"><i class=\"fas fa-arrow-circle-right\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas fa-arrow-circle-left\"></i></div>",
"dots": false,
"vertical": false,
"draggable": false
}
}
]
{% endcapture %}
{% capture option_slider_thumbnail %}
"lazyLoad": "ondemand",
"asNavFor": "#bs-product-slider",
"nextArrow": "<div class=\"slick-next\"><i class=\"fas fa-arrow-circle-right\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas fa-arrow-circle-left\"></i></div>",
"focusOnSelect": true,
"slidesToShow": {{slidesToShow}},
"centerMode":false,
"vertical": true,
"responsive": [
{
"breakpoint": 768,
"settings": {
"arrows": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas fa-arrow-circle-right\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas fa-arrow-circle-left\"></i></div>",
"dots": false,
"infinite":true,
"vertical": false
}
}
]
{% endcapture %}
<!------------------------------------------------------------------------------------------------------>
{% if slidesToShow >= product.images.size %}
<style>
#bs-product-thumbnail .slick-track{
transform: none !important;
}
</style>
{%endif%}
<!----------------------------------------------------------------------------------------------------->
<div class="row">
<section class="col-md-10 relative order-md-2">
<div data-bs="product.discount" class="bs-discount {{discount_format}}">
<strong data-bs="product.discount.value">
-{{ product.discountRate }}%
</strong>
</div>
<div id="bs-product-slider" data-bs="slider" data-info='{ {{option_slider | strip_newlines | replace: " ",""}} }'>
{% if product.images.size == 0 %}
<img
src="{{ site.logo | image_url: 'X' }}"
data-lazy="{{ site.logo | image_url: 'M' }}"
loading="lazy"
alt="{{ product.title }}"
title="{{ product.title }}"
>
{%else%}
{% for image in product.images %}
{%if product.defaultImage == image.href %}
<div class="item" data-info="{{image.legendImage}}">
<div class="bs-img-square" data-bs="zoom">
<picture>
<img
src="{{ image.href | image_url: 'M' }}"
data-lazy="{{ image.href | image_url: 'X' }}"
loading="lazy"
onerror="this.onerror=null;this.src='{{image.href}}';"
alt="{{ product.title }}{{forloop.index}}"
title="{{ product.title }}{{forloop.index}}">
</picture>
</div>
</div>
{% break %}
{% endif%}
{%endfor%}
{% for image in product.images %}
{%if product.defaultImage != image.href %}
<div class="item" data-info="{{image.legendImage}}">
<div class="bs-img-square" data-bs="zoom">
<picture>
<img class="lazy"
src="{{pixel_white}}"
data-lazy="{{ image.href | image_url: 'X' }}"
loading="lazy"
onerror="this.onerror=null;this.src='{{image.href}}';"
alt="{{ product.title }}{{forloop.index}}"
title="{{ product.title }}{{forloop.index}}">
</picture>
</div>
</div>
{% endif%}
{%endfor%}
{%endif%}
</div>
</section>
{% if images.size > 1 %}
<nav class="col-md-2 d-md-block order-md-1">
<div id="bs-product-thumbnail" data-bs="slider" data-info='{ {{option_slider_thumbnail | strip_newlines | replace: " ",""}} }'>
{% for image in product.images %}
{%if product.defaultImage == image.href %}
<div class="item">
<div class="bs-img-square">
<picture>
<img
src="{{pixel_white}}"
data-lazy="{{ image.href | image_url: 'X' }}"
loading="lazy"
onerror="this.onerror=null;this.src='{{image.href}}';"
alt="{{ product.title }} {{forloop.index0}}"
title="{{ product.title }} {{forloop.index0}}"
>
</picture>
</div>
</div>
{% endif %}
{%endfor%}
{% for image in product.images %}
{%if product.defaultImage != image.href %}
<div class="item">
<div class="bs-img-square">
<picture>
<img
src="{{pixel_white}}"
data-lazy="{{ image.href | image_url: 'X' }}"
loading="lazy"
onerror="this.onerror=null;this.src='{{image.href}}';"
alt="{{ product.title }} {{forloop.index}}"
title="{{ product.title }} {{forloop.index}}"
>
</picture>
</div>
</div>
{% endif %}
{%endfor%}
</div>
</nav>
{%endif%}
</div>