Customizable Shopping Cart - Bsale-IO/template-docs GitHub Wiki

Componente personalizable

Nombre: Carro de compras (puede llevar cualquier otro nombre)

  • Debe respetar los atributos "**data-**attribute" para la asignación de eventos del carrito de compras
  • Adicionalmente puede crear otros componentes para el carro personalizable.
  • Para utilizar el componente es necesario el uso del filtro "get_cart_component"

Uso de get_cart_component: {{ 'Nombre de componente de carrito de compras' | get_cart_component }}

<div data-bs="cart.dropdown" class="dropdownContent" data-component-name="{{ component.name }}">
    <!-- Carrito vacío -->
    <div data-bs="cart.empty" class="containerCartEmpty d-none">
      <i class="fas fa-shopping-cart"></i>
      <p>Tu carrito está vacío</p>
      <button data-bs="btnCloseDropdown" class="btn btn-primary mx-1 w-50">Cerrar</button>
    </div>
    
    <!-- Template para el dibujado de los items del carrito -->
    <div data-bs="containerItemsCart" class="containerItemsCart">
        {% for item in cartItems %}
            <!-- Section (creado para cada item) -->
            <section data-bs="cart.item" data-info="{{ item.id }}" data-cart-item="cart_item">
            
                <div class="containerItemCart fadeIn">
                  <div class="detailItemCart">
                    <div class="bs-img-square">
                      <div data-bs="cart.item.discount" class="bs-discount tag d-none">
                          <strong data-bs="cart.item.discount.value">
                            -{{ item.discount }}%
                          </strong>
                      </div>
                      <picture>
                          <img src="{{ item.image }}" alt="{{ item.name }}" title="{{ item.name }}">
                      </picture>
                    </div>
                
                 
                    <div class="infoItemCart">
                      <a href="{{ item.link }}" title="{{ item.name }}">
                        {{ item.name }}
                      </a>
                      <span class="textPriceUnity">Precio unidad</span>
                      
                      <strike data-bs="cart.item.oldPrice">
                        {{ item.price | money_filter }}
                      </strike>
                      
                      
                      <div data-bs="cart.item.unitPrice">
                        {{ item.finalPrice | money_filter }}
                      </div>
                      
                      
                        <div data-bs="cart.stock.msg" class="d-none"></div>
                        
                    </div>
                </div>
                  
                  <div class="quantityButtons">
                      <div class="input-group">
                      
                        <div class="input-group-prepend">
                          <button data-bs="cart.quantity.minus" class="btn btn-secondary">
                            <i class="fas fa-minus"></i>
                          </button>
                        </div>
                        
                        
                        
                        <input data-bs="cart.quantity" class="form-control text-center" type="number" value="{{ item.quantity | round }}" min="1">
                        
                        <div class="input-group-append ">
                          <button data-bs="cart.quantity.plus" class="btn btn-secondary">
                            <i class="fas fa-plus"></i>
                          </button>
                        </div>
                        
                      </div>
                      <button type="button" data-bs="cart.remove" data-info="" class="btn btn-secondary btn_cart_remove">
                        <i class="fas fa-trash-alt"></i>
                      </button>
                  </div>
                  
                  
                </div>
                
            </section>
        {% endfor %}
    </div>
    
    <!-- Resumen del carrito -->
    <div data-bs="cart.filled" class="footerDropdownCart d-none"> 
        <hr>
        
        <div class="containerSubtotal">
          <h5>
            Subtotal: <span data-bs='cart.subtotal'>{{ cart.total }}</span>
          </h5>
        </div>
    
        <div class="d-none">
          <button data-bs="cart.keepbuying" class="btn btn-primary" title="Seguir Comprando">Seguir comprando</button>
        </div>

        <div class="containerButtonGoToPay">
          <button data-bs="btnCloseDropdown" class="btn btn-secondary mx-1">Cerrar</button>
          <a data-bs="cart.continue" href="/cart/display/" class="btn btn-primary mx-1"> Continuar <i class="fas fa-arrow-right"></i></a>
        </div>
        
    </div>
    
</div>
⚠️ **GitHub.com Fallback** ⚠️