Producto data‐bs - Bsale-IO/template-docs GitHub Wiki

Producto

Selección variante

Si data-bs="product.variant" no está presente en la página estará seleccionada la variante por defecto del producto

Mediante Select

<select data-bs="product.variant">
   {% for var in variant %}
      <option data-info='{{var.id}}' value="{{ forloop.index }}"
              {% if var.id == product.variantId %} selected {% endif %}>
              {{var.sku}} {{ var.title }}
      </option>
   {% endfor %}
</select>

Mediante Radio Button

{% for var in variant %}
   <input data-bs="product.variant" data-info="{{var.id}}"
          type="radio" 
          value="{{ forloop.index }}" 
          id="var{{forloop.index}}"
          name="variants"
          {% if var.id == product.variantId %} checked {% endif %}>
    <label for="var{{forloop.index}}">
       {{var.title}}
    </label>
{% endfor %}

Precio

variables valor
{price} precio normal del producto
{finalPrice} precio con descuento
{discountCant} cantidad mínima de productos para aplicar descuento

liquid

<!-- define plantilla según tipo de descuento -->
    {% capture discProgresive %}
        Precio Normal {price}
        Sólo {finalPrice}
        Por compras sobre {discountCant} unidades
    {% endcapture %}
        
    {% capture discSingle %}
        Antes {price}
        Ahora {finalPrice}
    {% endcapture %}
        
<!-- donde se carga el precio --> 

<div data-bs="product.completePrice" 
     data-info='{
        "progresive" : "{{ discProgresive | strip_newlines | replace: '"','\"' | replace: "'" , '\"'}}",
        "single": "{{ discSingle | strip_newlines | replace: '"','\"' | replace: "'" , '\"'}}"}'>
       
        <span data-bs="product.finalPrice">{{ product.finalPrice | money_filter }}</span>
         
</div>

Renderizado

No tiene descuento

<div data-bs="product.completePrice" 
     data-info='{ "progresive" : "Precio Normal {price} Sólo {finalPrice} Por compras sobre {discountCant} unidades",
                  "single": "Antes {price} Ahora {finalPrice}"}'>
     <span data-bs="product.finalPrice">$ 10.000</span>  
</div>

Tiene Descuento

<div data-bs="product.completePrice" 
     data-info='{ "progresive" : "Precio Normal {price} Sólo {finalPrice} Por compras sobre {discountCant} unidades",
                  "single": "Antes {price} Ahora {finalPrice}"}'>
     Antes $ 10.000 Ahora $ 5.000 
</div>

Tiene Descuento por Cantidad de productos

<div data-bs="product.completePrice" 
     data-info='{ "progresive" : "Precio Normal {price} Sólo {finalPrice} Por compras sobre {discountCant} unidades",
                  "single": "Antes {price} Ahora {finalPrice}"}'>
     Precio Normal $ 10.000 Sólo $ 5.000 Por compras sobre 3 unidades
</div>

Stock

<div data-bs='product.stock' data-info='{"0":"agotado","full":"en stock", "unlimitedStock":"en stock"}'></div>

SKU

<div data-bs='product.sku'></div>

Imprime sku de variante seleccionada

Cantidad de producto

<!-- botón menos -->
<button data-bs="product.quantity.minus">
 - 
</button>

<!-- input cantidad-->
<input data-bs="product.quantity" value="1" min="1">

<!-- boton más -->
<button data-bs="product.quantity.plus">
+
</button>
  • Muestra la cantidad del producto data-bs="product.quantity", es posible ingresar datos directamente
  • Al presionar data-bs="product.quantity.minus" se resta una unidad a la cantidad, si la cantidad es 1 no ocurrirá la resta
  • Al presionar data-bs="product.quantity.plus" se suma una unidad a la cantidad, si la cantidad igual al stock habilitado del producto no ocurrirá nada

Agregar al Carro

<button data-bs='cart.add'>
Agregar al Carro
</button>

⚠ I M P O R T A N T E

Es necesario que la pagina tenga al menos data-bs="product.quantity" para poder agregar al carro

⚠️ **GitHub.com Fallback** ⚠️