Componente Collection lazy load - Bsale-IO/template-docs GitHub Wiki
Nombre: Inicio > coleccion lazy load
Este componente es utilizado internamente en el filtro get_lazy_collection
y se encarga de agregar el "Esqueleto" de las colecciones lazy load
Para que un contenedor pueda tener "lazy loading" debe tener la clase "lazy__load"
{% for collection in collections %}
<section class="row">
<div class="col-12 lazy__load"
data-slug="{{collection.link}}"
data-param-limit="{{collection.limit}}"
data-param-offset="{{collection.offset}}"
data-param-title="{{collection.title}}"
data-param-style_component="{{collection.style_component}}">
<div class="product__content">
<!-- Template de carga (cajas grises de la carga de colecciones) -->
<div class="lazy_loading_container">
<a class="lazy_box_loading lazy_box_coll_name"><h2 class="bs-title"></h2></a>
<div class="row justify-content-between">
{% for i in (1..4) %}
<div class="lazy_box">
<div class="lazy_box_loading lazy_box_picture"></div>
<h6 class="lazy_box_loading lazy_box_title"></h6>
<div class="lazy_box_loading lazy_box_price"></div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
{%endfor %}Nombre: Productos lazy load
En este componente se carga los productos por cada colección lazy load
Este componente puede ser reemplazado por otro que sea más acorde al diseño de la tienda
{% assign discount_format = "tag"%}
<!-- Variable que permite la activación de la funcionalidad agregar al carro desde coleccion-->
{% assign addToCart = true %}
{% assign attrSize = false %}
{% for ca in collection.attributes %}
{% if ca[1].values.size > 0 %}{% assign attrSize = true %}{% endif%}
{% endfor %}
{% assign fullScreen = false %}
{%if attrSize and collection.limitPrice.minPrice != collection.limitPrice.maxPrice %}
{% assign fullScreen = false %}
{% endif%}
{% assign pixel = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
<div class="bs-collection">
<div class id="bs-collection-summary"></div>
<a href="{{link}}" title="{{title}}"><h2 class="bs-title">{{title}}</h2></a>
<div class="row row_products">
{% for product in collection %}
<div class="d-flex col-sm-6 {% if fullScreen %}col-md-4{%else%}col-md-3{%endif%} text-center row_product_item">
<div class="bs-product" data-bs="product" data-info="{{product.id}}">
<a href="{{product.link}}">
<div class="bs-img-square hover">
{% if product.discountRate > 0 %}
<div class="bs-discount {{discount_format}}">
<span>-{{ product.discountRate| round }}%</span>
</div>
{%endif%}
<!-- Etiqueta Sin Stock -->
{% assign outStock = false %}
{% case product.classification %}
{% when 0 %}
{% if product.totalStock < 1 and product.stockControl == 1 %}
{% if product.allowNegativeStock == 0 %}
{% assign outStock = true %}
<div class="bs-stock">Sin Stock</div>
{% endif %}
{% endif %}
{% when 3 %}
{% if product.totalStock < 1 %}
{% assign outStock = true %}
<div class="bs-stock">Sin Stock</div>
{% endif %}
{% endcase %}
<picture>
<img
class="lazy"
src="{{pixel}}"
{% if product.default_image.size > 0 %}
data-src="{{ product.default_image | image_url: 'L' }}"
onerror="this.onerror=null;this.src='{{product.default_image}}';"
{%else%}
data-src="{{ site.logo | image_url: 'L' }}"
{%endif%}
alt="{{ product.title }}"
title="{{ product.title }}"
>
{% if product.images.size > 1 %}
{% for img in product.images %}
{% if img.href != product.default_image %}
<img class="lazy"
src="{{pixel}}"
data-src="{{ img.href | image_url: 'L' }}"
onerror="this.onerror=null;this.src='{{img.href}}';"
alt="{{ product.title }}"
title="{{ product.title }}"
>
{% break %}
{% endif%}
{% endfor %}
{% endif %}
</picture>
</div>
</a>
<a href="{{product.link}}">
<div class="bs-product-info mt-2">
<h6 class="text-truncate">
{{product.title}}
</h6>
<div class="featured-text text-info mb-2">
{{ product.notice }}
</div>
{% if product.order > 0 %}
<span class="d-inline-block text-truncate badge badge-primary">
<i class="fas fa-star"></i>
</span>
{% endif %}
{% if product.brand and product.brand.name != "" %}
<span class="d-inline-block text-truncate badge badge-secondary">{{product.brand.name}}</span>
{% endif %}
</div>
</a>
<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>
<!-- Boton agregar al carro desde colección -->
{% if addToCart %}
<div class="bs-product-cart mt-auto">
{% if outStock %}
<button class="btn btn-primary mt-1 invisible"
disabled>
Agotado
</button>
{%else%}
<button class="btn btn-primary mt-1"
data-bs="cart.add.collection">
Agregar al carro
</button>
{%endif%}
</div>
{%endif%}
</div>
</div>
{% endfor %}
</div>
</div>