Custom Cart - Bsale-IO/template-docs GitHub Wiki

<div class="container">
   {{ 'Carro desplegable' | get_cart_component }}
</div>

<!-- ícono y textos en caso de que el carro esté vacío -->
{% assign iconCart = '<i class="fas fa-shopping-cart"></i>' %}
{% assign txtCartEmpty  = 'Tu carro está vacío :c' %}

<style>

/*****************************************************/
/* Estilos para el carro desplegable  */
/*****************************************************/

.general_container {
  display: flex;
  max-width: calc(100% - 24em);
}

.container_header_main {
  width: 100%;
}

.cart_container {
  position: sticky;
  bottom:0;
  min-width: 24em;
  background-color: white;
}

.cart_dropdown {
  position: sticky;
  bottom: 0;
  top: 12%;
  right: 10.5px;
  width: 22.5em;
  height: 85vh;
  display: flex;
  border: 1px solid dimgray;
  border-radius: 0.5em;
  margin: 0rem auto;
  flex-direction: column;
  justify-content: center;
  transition: top bottom 0.4s;
}

.cart_dropdown_no_follow {
  position: absolute;
  top: auto;
  left: 5px;
  right: 5px;
  bottom: 10px;
}
 
.quantityButtons {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.quantityButtons > div:nth-child(1) {
    width: 60%;
}

button[data-bs="btnCloseDropdown"] {
    display: none;
}
 
@media screen and (max-width: 830px) {
    .general_container {
        max-width: 100%;
    }
    .cart_container {
        width: 0em;
        min-width: 0em;
    }
    .cart_dropdown {
        right: initial;
        top: initial;
        left: 0;
        width: 100%;
    }
    .cart_dropdown {
      position: fixed;
      bottom: 0;
      top: initial;
      right: 0px;
      width: 95%;
      height: 50vh;
      flex-direction: column;
      justify-content: center;
      transition: top bottom 0.4s;
    }
    .containerItemCart {
      display: flex;
      justify-content: space-between;
      max-height: 50vh;
      height: 8em;
      margin: 1.1rem 0;
    }
    .detailItemCart {
        margin-bottom: 0em;
    }
    .quantityButtons {
        position: relative;
        width: 45%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .quantityButtons > div:nth-child(1) {
        width: 100%;
    }
    button[data-bs="btnCloseDropdown"] {
        display: initial;
    }
    .containerItemsCart .cart__item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        margin-bottom: 1.5em;
    }
    .containerItemsCart .cart__item:last-child() {
        border-bottom: none;
        margin-bottom: 0em;
    }
    .btn_cart_remove {
        position: absolute;
        top: -15px;
        right: 0px;
        border-radius: 50%;
        background-color: transparent;
        color: #2f9001;
    }
}

</style>

<!-- CAMBIAR ctName por component.name-->
<div id="cart_dropdown" data-bs="cart.dropdown" class="dropdownContent cart_dropdown" data-component-name="{{ component.name }}">
    <!-- Carrito vacío -->
    <div id="containerCartEmpty" data-bs="cart.empty" class="containerCartEmpty d-none">
      <i class="fas fa-shopping-cart"></i>
      <p>{{ txtCartEmpty }}</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 class="cart__item" 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 id="footerDropdownCart" data-bs="cart.filled" class="footerDropdownCart"> 
        <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 type="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>