Colección, Marcas y Búsqueda - Bsale-IO/template-docs GitHub Wiki

Las variables de colección las puedes usar en 4 tipos de páginas:
Colección, Marca, Búsqueda e Inicio

Para más detalles de Búsqueda revisar Parámetros de búsqueda

Se utiliza:

     {{collection.title}} 
     {{collection.description}}
     {{collection.link}}
     {{collection.size}}
     {{collection.limitPrice}}
     {{collection.limitPrice.maxPrice}}
     {{collection.limitPrice.minPrice}}
     {{collection.attributes}}
     {{collection.sorting}}
     {{collection.products}}
     {{collection.image}}

{% for product in collection %}
  {{product.id}}
  {{product.productId}}
  {{product.title}}
  {{product.link}}
  {{product.notice}}
  {{product.defaultImage}}
  {{product.images}}
  {{product.priceList}}
  {{product.videoUrl}}
  {{product.description}}
  {{product.descriptions}}
  {{product.variantId}}
  {{product.discountRate}}
  {{product.discountCant}}
  {{product.finalPrice}}
  {{product.fpWithoutDiscount}}
  {{product.taxPrice}}
  {{product.variantMaxDiscount}}
  {{product.variantMaxFinalPrice}}
  {{product.variantMinFinalPrice}}
  {{product.brand}}
  {{product.totalStock}}
  {{product.allowNegativeStock}}
  {{product.stockControl}}    
{% endfor%}

• Si el producto No es un servicio Válida:

  • Si el stock es menor a 1 y controla stock
  • Si el stock es menor a 1 y No permite stock negativo

• Nota: Comportamiento en packs

  • Si tan solo un producto CONTROLA STOCK dentro del pack, todo el pack pasa a CONTROLAR STOCK. La variable stockControl será igual a 1.
  • Si tan solo un producto NO PERMITE VENTA CON STOCK NEGATIVO dentro del pack, todo el pack NO PERMITIRÁ LA VENTA CON STOCK NEGATIVO. La variable allowNegativeStock será igual a 0.

{% assign outStock = false %}
{% if product.classification != 1 %}
   {% if product.totalStock < 1 and product.stockControl == 1 %}
      {% if product.allowNegativeStock == 0 %}
         {% assign outStock = true %}
         <div class="bs-stock">Sin Stock</div>
      {% endif %}
   {% endif %}
{%endif%}

Forma antigua DESCONTINUADA

Para obtener el stock del producto debes definir una nueva variable dentro del arreglo {%for%}

{% for product in collection %}
  {% assign product_stock = product.id | get_product_stock %} // define la variable producto_stock
  {{ product_stock }} // llama a la variable
{% endfor %}

• Ubicar el componente que muestra la colección.
• Dentro del componente existe la siguiente estructura de código que se debe eliminar.

//Eliminar
{%if product.classification != 1 %}
     {% assign stock = product.id | get_product_stock%}
{% endif %}

• Luego se debe ubicar la estructura de código que muestra la etiqueta sin stock

//Reemplazar por la nueva estructura
{% if stock < 1 and product.classification != 1%}
    <div class="bs-stock">Sin stock</div>
{% endif%}

• Finalmente se debe reemplazar el código anterior por la estructura nueva de código

//nueva estructura
{% assign outStock = false %}
{% if product.classification != 1 %}
   {% if product.totalStock < 1 and product.stockControl == 1 %}
      {% if product.allowNegativeStock == 0 %}
         {% assign outStock = true %}
         <div class="bs-stock">Sin Stock</div>
      {% endif %}
   {% endif %}
{%endif%}

• Cuando se cambia la nueva estructura de la etiqueta sin stock, se debe cambiar la validación que tiene el boton agregar al carro desde colección.
• Reemplazar la validación por la variable outStock
• La estructura del botón se encuentra en la parte final del componente.

//Estructura  del boton agregar al carro desde colección
{% if addToCart %}
   <div class="bs-product-cart mt-auto">
      {% if outStock %} //debe quedar así 
          <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%}

{% for product in collection.products %}
   {% for des in product.descriptions %}
      {{des.id}}
      {{des.descriptionName}}
      {{des.html}}
      {{des.default}}
      {{des.order}}
   {% endfor %}
{% endfor %}

Hay dos formas de imprimir las imágenes del producto.

1. Mediante la variable {{product.defaultImage}}

{% for product in collection %}
   ...
   <img src="{{ product.defaultImage | image_url }}" title="{{product.title}}"> 
   ...
{% endfor %}

2. Iterando dentro del objeto {{producto.images}}

{% for product in collection %}
   ...
   {% for img in product.images %}
      <img src="{{ img.href | image_url }}" title="{{product.title}}"> 
   {% endfor %}
   ...
{% endfor %}

En bsale puedes obtener el número de productos por cada página de la colección, para esto existen 2 variables

• Colección de 33 productos
• Configuracion para mostrar 20 productos por página

Mostrando {{ collection.products.size }} de {{collection.size}}

Mostrando 20 de 33

Mostrando 13 de 33

Para poder agregar esta funcionalidad en los templates, es necesario agregar el siguiente bloque de código en el componente : Coleccion - Buscador - Marca

{% if collection.image %}
     <img class="image-collection" src="{{collection.image}}">
{%endif%}

Ademas agregar un bloque de código CSS en el archivo modificaciones.css

.image-collection {
    width:100%;
    max-height: 18.75rem;
    margin-bottom:1rem;
}

Estructura final del componente

<section class="bs-collection">
    <div class="container">
       
        <!-- Bloque agregado para visualizar la imágen en la colección -->
        {% if collection.image %}
            <img class="image-collection" src="{{collection.image}}">
        {%endif%}
         

        <div class="row">
            <h1 class="col-lg-9 offset-lg-3">
                {%if current_url contains '/search?'%}
                    Resultado de busqueda: {{title}}
                {%else%}
                    {{title}}
                {%endif%}
            </h1>
            
            {{'Coleccion - Buscador - Marca > filtros' | get_component }}
            
            {% if collection.size > 0 %}
            <article class="col-lg-9">
                {{ 'Coleccion - Buscador - Marca > orden' | get_component }}
                {{'Coleccion' | get_component }}
                {{'Coleccion - Buscador - Marca > paginacion' | get_component }}
            </article>
            {% else %}
            {{'error > coleccion' | get_component }}
            {%endif%}
        </div>
    </div>
</section>