Carro accesorios y productos relacionados - Bsale-IO/template-docs GitHub Wiki
Es posible obtener los productos relacionados y accesorios desde el carro de compra siempre que los productos agregados al carro posean productos relacionados y/o accesorios
Se mostrará un máximo de 25 accesorios y 25 productos relacionados, los productos a mostrar dependerá de cuantos productos haya en carro.
- Si hay 5 productos en el carro y cada uno de ellos tiene 8 productos relacionados, se mostrarán 5 productos relacionados por cada producto en carro.
- Si hay 2 productos en el carro, uno de ellos tiene 8 productos relacionados y otro no tiene productos relacionados se mostrarán los 8 productos del primero
- Si hay 26 productos en carro y cada uno tiene 2 o más productos relacionados, se mostrarán 1 producto relacionado por cada uno de los 25 primeros productos agregados.
- Si hay dos productos en el carro y ambos tienen los mismos productos relacionados, sólo se mostrarán los productos relacionados del primero (no se repetirán productos relacionados)
Los componentes de productos relacionados y accesorios, pueden ser utilizados juntos o por separado.
1- Agregar el siguiente componente con el nombre carro> accesorios relacionados o culquiera sea de tu preferencia, en tu lista de componentes:
{% if accessories.size > 0 %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = ""%}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 4,
"responsive": [
{
"breakpoint": 768,
"settings": {
"slidesToShow": 3
}
},{
"breakpoint": 576,
"settings": {
"slidesToShow": 2
}
},{
"breakpoint": 384,
"settings": {
"slidesToShow": 1
}
}
]
{% endcapture %}
<section class="bs-product-accessories" style=" margin-top: 20px">
<h2 class="h3">ACCESORIOS</h2>
<div class="col-12">
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="bs-collection bs-horizontal-slider slider-left">
{% for product in accessories | limit: 8 %}
{% assign st = product.id | get_product_stock%}
<a class="d-flex " href="{{product.link}}">
<div class="bs-product" data-bs="product" data-info="{{product.id}}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate | round }}%</span>
</div>
{%endif%}
{% if st < 1 %}
<div class="bs-stock">Sin stock</div>
{% endif%}
<picture>
<img
src="{{pixel}}"
{% if product.default_image.size > 0 %}
data-lazy="{{ product.default_image | image_url: 'M' }}"
{%else%}
data-lazy="{{ site.logo | image_url: 'M' }}"
{%endif%}
alt="{{ product.title }}"
title="{{ product.title }}"
>
{% if product.images.size > 1 %}
{% for img in product.images %}
{% if img.href != product.default_image %}
<img
src="{{pixel}}"
data-lazy="{{ img.href | image_url: 'M' }}"
alt="{{ product.title }}"
title="{{ product.title }}"
>
{%break%}
{% endif%}
{% endfor %}
{% endif %}
</picture>
</div>
<div class="bs-product-info">
<h5 class="bs-trunc">
{{product.title}}
</h5>
{% if product.brand.name %}
<small class="bs-product-brand">{{product.brand.name}}</small>
{% endif %}
</div>
<div class="bs-product-price">
{% if product.discount_rate > 0 %}
<div class="bs-product-old-price">
<strike>{{product.fpWithoutDiscount | money_filter}}</strike>
</div>
{% endif %}
{% if product.discount_cant > 1 %}
<div class="bs-discount-condition">
<small>Por compras desde {{product.discount_cant | round}} unidades</small>
</div>
{% endif %}
<div class="bs-product-final-price">
{{product.final_price | money_filter}}
</div>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</section>
{%endif %}
2- Se debe agregar en el componente Carro lo siguiente:
{% if items > 0 %}
<div class="col-12">
{{ cart_d | get_accessories_cart: "nombre del componente creado en el paso 1" }}
</div>
{% endif %}{% for product in accessories %}
{{product.title}}
{{product.id}}
{{product.id_producto}}
{{product.notice}}
{{product.variant_price}}
{{product.variant_id}}
{{product.default_image}}
{{product.price_list}}
{{product.video_url}}
{{product.link}}
{{product.description}}
{{product.has_decimal}}
{{product.discount_rate}}
{{product.discount_name}}
{{product.discount_cant}}
{{product.final_price}}
{% endfor %}1- Agregar el siguiente componente con el nombre carro> productos relacionados o culquiera sea de tu preferencia, en tu lista de componentes:
{% if related.size > 0 %}
{% assign left = "fa-angle-left" %}
{% assign right = "fa-angle-right" %}
{% assign discount_format = ""%}
{% capture option_slider %}
"lazyLoad": "ondemand",
"infinite": true,
"nextArrow": "<div class=\"slick-next\"><i class=\"fas {{right}}\"></i></div>",
"prevArrow": "<div class=\"slick-prev\"><i class=\"fas {{left}}\"></i></div>",
"slidesToShow": 4,
"responsive": [
{
"breakpoint": 768,
"settings": {
"slidesToShow": 3
}
},{
"breakpoint": 576,
"settings": {
"slidesToShow": 2
}
},{
"breakpoint": 384,
"settings": {
"slidesToShow": 1
}
}
]
{% endcapture %}
<section class="bs-product-related" style=" margin-top: 40px">
<h2 class="h3">TAMBIEN PODRIA INTERESARTE</h2>
<div class="col-12">
<div data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: ' ', ''}} }'
class="bs-collection bs-horizontal-slider slider-left">
{% for product in related | limit: 8 %}
{% assign st = product.id | get_product_stock%}
<a class="d-flex " href="{{product.link}}">
<div class="bs-product" data-bs="product" data-info="{{product.id}}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount left {{discount_format}}">
<span>-{{ product.discountRate | floor }}%</span>
</div>
{%endif%}
{% if st < 1 %}
<div class="bs-stock">Sin stock</div>
{% endif%}
<picture>
<img
src="{{pixel}}"
{% if product.default_image.size > 0 %}
data-lazy="{{ product.default_image | image_url: 'M' }}"
{%else%}
data-lazy="{{ site.logo | image_url: 'M' }}"
{%endif%}
alt="{{ product.title }}"
title="{{ product.title }}"
>
{% if product.images.size > 1 %}
{% for img in product.images %}
{% if img.href != product.default_image %}
<img
src="{{pixel}}"
data-lazy="{{ img.href | image_url: 'M' }}"
alt="{{ product.title }}"
title="{{ product.title }}"
>
{%break%}
{% endif%}
{% endfor %}
{% endif %}
</picture>
</div>
<div class="bs-product-info">
<h5 class="bs-trunc">
{{product.title}}
</h5>
{% if product.brand.name %}
<small class="bs-product-brand">{{product.brand.name}}</small>
{% endif %}
</div>
<div class="bs-product-price">
{% if product.discount_rate > 0 %}
<div class="bs-product-old-price">
<strike>{{ product.fpWithoutDiscount | money_filter}}</strike>
</div>
{% endif %}
{% if product.discount_cant > 1 %}
<div class="bs-discount-condition">
<small>Por compras desde {{product.discount_cant | round}} unidades</small>
</div>
{% endif %}
<div class="bs-product-final-price">
{{product.final_price | money_filter}}
</div>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
<section>
{%endif %}
2- Se debe agregar en el componente Carro lo siguiente:
{% if items > 0 %}
<div class="col-12">
{{ cart_d | get_related_cart: "nombre del componente creado en el paso 1" }}
</div>
{% endif %}{% for product in related %}
{{product.title}}
{{product.id}}
{{product.id_producto}}
{{product.notice}}
{{product.variant_price}}
{{product.variant_id}}
{{product.default_image}}
{{product.price_list}}
{{product.video_url}}
{{product.link}}
{{product.description}}
{{product.has_decimal}}
{{product.discount_rate}}
{{product.discount_name}}
{{product.discount_cant}}
{{product.final_price}}
{% endfor %}