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

Generales

Las variables generales de data-bs para cart pueden ser impresas en cualquier pantalla y se ven afectadas de forma dinámica al interactuar con el carro, ya sea agregar o quitar productos de este.

Items del carro

<div class="cart.items">0</div>

Imprime la cantidad de items del carro de forma dinámica

Precio total del carro

<div class="cart.total">{{ 0 | money_filter }}</div>

Imprime el precio total del carro de forma dinámica

Locales

Sólo pueden ser consumidas en la plantilla de carro

Item del carro

{% for item in cart_d %}

<div data-bs="cart.item" data-info="{{item.id}}">
   <div data-bs="cart.item.discount">
     <span data-bs="cart.item.discount.value">
        -{{ item.discount }}%
     </span>
   </div>

   <div  data-bs="cart.item.unitPrice">{{ item.finalPrice | money_filter }}</div>
   <del data-bs="cart.item.oldPrice"> {{ item.price | money_filter }}</del>
                                    
                                    
   <!-- botón menos -->
   <button data-bs="cart.quantity.minus">
      - 
   </button>

   <!-- input cantidad-->
   <input data-bs="cart.quantity" value="{{ item.quantity }}" min="1">

   <!-- boton más -->
   <button data-bs="cart.quantity.plus">
     +
   </button>

   <div data-bs="cart.item.finalPrice">
      {{ item.subTotal | money_filter }}
   </div>


   <!-- boton de borrar -->
   <button data-bs="cart.remove">
      Borrar Producto
   </button>

</div><!-- cart.item end -->
{% endfor %}

Acciones

Las acciones de borrar o modificar un producto del carro es necesario realizarlas dentro de un identificar cart.item ya que este le permite a los botones identificar el ID del producto mediante data-info="{{item.id}}" y poder identificar el item sobre el cual se realizaran los cambios.

<div data-bs="cart.item" data-info="{{item.id}}">

</div>
identificador acción descripción
data-bs="cart.quantity" change cambia la cantidad de producto en el carro, no puede ser menor a 1, ni mayor al stock del producto si este controla stock
data-bs="cart.quantity.minus" click Disminuye cantidad del producto en data-bs="cart.quantity" en -1, no se puede disminuir a menos de 1
data-bs="cart.quantity.plus" click Aumenta cantidad del producto en data-bs="cart.quantity" en +1, no puede aumentar más que el stock del producto si este controla stock
data-bs="cart.remove" click Elimina producto del carro

Receptores

Una vez que se realiza una acción pueden existir cambios en los receptores, aumentando o disminuyendo el precio del producto o activando o desactivando un descuento.

identificador descripción
data-bs="cart.item.discount" Se oculta si el producto no tiene descuento, aparece si el producto posee un descuento
data-bs="cart.item.discount.value" Imprime el valor del descuento
data-bs="cart.item.oldPrice" precio Unitario del producto, Sin descuento
data-bs="cart.item.unitPrice" precio Unitario del producto, Con descuento
data-bs="cart.item.finalPrice" Precio con descuento multiplicado por la cantidad
⚠️ **GitHub.com Fallback** ⚠️