Atualizar carrinho após alteração da quantidade do item

[wygorcesar]

Segue o cart-template.liquid, se alguém puder me dar uma força de como criar uma função. obs: já tentei utilizar o onclick no botão de + e - do seletor e ele altera após varios clicks sem sucesso!


{%- capture section_settings -%}
{
  "showShippingEstimator": {% if cart.item_count == 0 %}false{% else %}{{ section.settings.show_shipping_estimator | json }}{% endif %}
  
}
{%- endcapture -%}

<section data-section-id="{{ section.id }}" data-section-type="cart" data-section-settings='{{ section_settings }}' data-item-count="{{ cart.item_count }}">

  {%- if cart.item_count == 0 -%}
    <div class="container">
      <div class="empty-state">
        <div class="empty-state__icon">
          {%- render 'icon', icon: 'big-cart' -%}
        </div>

        <p class="empty-state__heading heading h1">{{ 'cart.general.empty' | t }}</p>
    
        {%- if settings.cart_show_free_shipping_threshold -%}
          {%- assign threshold_in_cents = settings.cart_free_shipping_threshold | times: 100 -%}
          {%- capture remaining_amount -%}<span>{{ cart.total_price | minus: threshold_in_cents | abs | money_without_trailing_zeros }}</span>{%- endcapture -%}
          <p class="empty-state__description">{{ 'cart.general.free_shipping_remaining_html' | t: remaining_amount: remaining_amount }}</p>
        {%- endif -%}

        <div class="empty-state__button-container">
          <a href="{{ settings.cart_empty_button_link | default: routes.root_url }}" class="empty-state__button button button--carrinho--segundo">{{ 'cart.general.empty_button' | t }}</a>
        </div>
      </div>
    </div>
  {%- else -%}
      <div class="container">
        <header class="page__header page__header--stack">
          <h1 class="page__title heading h1">{{ 'cart.general.title' | t }}</h1>

            {%- if settings.cart_show_free_shipping_threshold -%}
            {%- assign threshold_in_cents = settings.cart_free_shipping_threshold | times: 100 -%}

            {%- if cart.total_price >= threshold_in_cents -%}
              <p class="page__description">{{ 'cart.general.free_shipping' | t }}</p>
            {%- else -%}
              {%- capture remaining_amount -%}<span>{{ cart.total_price | minus: threshold_in_cents | abs | money_without_trailing_zeros }}</span>{%- endcapture -%}
              <p class="page__description">{{ 'cart.general.free_shipping_remaining_html' | t: remaining_amount: remaining_amount }}</p>
            {%- endif -%}
          {%- endif -%}

       </header>
    </div>

    {%- comment -%}
    <form method="post" action="{{ routes.cart_url }}" novalidate="novalidate" data-item-count="{{ cart.item_count }}">
      <input type="hidden" name="attributes[collection_products_per_page]" value="">
      <input type="hidden" name="attributes[collection_layout]" value="">
      	<div class="flex">
          <!-- button type="submit" name="checkout" class="cart-recap__checkout button button--primary button--full2 button--large">{{ 'cart.general.checkout' | t }}</button> -->
          <!-- <a class="metade" href="/collections/all"><span class="page__button-action button button--primary botaocontinuar">Adicionar mais itens</span></a> -->
      </div>
     </form>  
    {%- endcomment -%}
    
    <div class="cart-wrapper">
      <div class="cart-wrapper__inner">
        <div class="cart-wrapper__inner-inner">
          <div class="container container--flush">
            {%- comment -%}
            --------------------------------------------------------------------------------------
            LINE ITEMS
            --------------------------------------------------------------------------------------
            {%- endcomment -%}

            <div class="card">
              <div class="table-wrapper">
                <table class="line-item-table table table--loose">
                  <thead class="hidden-phone">
                    <tr>
                      <th>{{ 'customer.order.product' | t }}</th>
                      <th class="table__cell--center">{{ 'customer.order.quantity' | t }}</th>
                      <th class="table__cell--right">{{ 'customer.order.total' | t }}</th>
                    </tr>
                  </thead>

                  <tbody>
                    {%- assign gift_wrap_product = all_products[section.settings.gift_wrap_product] -%}

                    {%- for line_item in cart.items -%}
                      <tr class="line-item line-item--stack">
                        <td class="line-item__product-info">
                          <div class="line-item__product-info-wrapper">
                            <div class="line-item__image-wrapper">
                              {%- comment -%}For vertical images we force to contain them on a square ratio to avoid growing too large{%- endcomment -%}

                              {%- if line_item.image.aspect_ratio < 1 -%}
                                <div class="aspect-ratio aspect-ratio--square">
                                  <img src="{{ line_item.image | img_url: '180x' }}" alt="{{ line_item.image.alt | escape }}">
                                </div>
                              {%- else -%}
                                <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: line_item.image.aspect_ratio }}%">
                                  <img src="{{ line_item.image | img_url: '180x' }}" alt="{{ line_item.image.alt | escape }}">
                                </div>
                              {%- endif -%}
                            </div>

                            <div class="line-item__meta">
                              {%- if settings.show_vendor and gift_wrap_product.handle != line_item.product.handle -%}
                                {%- assign vendor_handle = line_item.product.vendor | handle -%}
                                {%- assign collection_for_vendor = collections[vendor_handle] -%}

                                {%- unless collection_for_vendor.empty? -%}
                                  <a class="line-item__vendor link" href="{{ collection_for_vendor.url }}">{{ line_item.product.vendor }}</a>
                                  {%- else -%}
                                  <a class="line-item__vendor link" href="{{ line_item.product.vendor | url_for_vendor }}">{{ line_item.product.vendor }}</a>
                                {%- endunless -%}
                              {%- endif -%}

                              {%- if gift_wrap_product.handle == line_item.product.handle -%}
                                <span class="line-item__title text--strong">{{ line_item.title }}</span>
                              {%- else -%}
                                <a href="{{ line_item.url }}" class="line-item__title link text--strong">{{ line_item.title }}</a>
                              {%- endif -%}

                              {%- unless line_item.properties == blank -%}
                                <ul class="line-item__property-list">
                                  {%- for property in line_item.properties -%}
                                    {%- assign first_character_in_key = property.first | truncate: 1, '' -%}

                                    {%- if property.last == blank or first_character_in_key == '_' -%}
                                      {%- continue -%}
                                    {%- endif -%}

                                    <li class="line-item__property">{{ property.first }}: {{ property.last }}</li>
                                  {%- endfor -%}
                                </ul>
                              {%- endunless -%}

                              <div class="line-item__price-list">
                                {%- if line_item.original_price > line_item.final_price -%}
                                  {%- if line_item.final_price == 0 -%}
                                    <span class="line-item__price line-item__price--highlight">{{ 'cart.general.free' | t }}</span>
                                  {%- else -%}
                                    <span class="line-item__price line-item__price--highlight">{{ line_item.final_price | money }}</span>
                                  {%- endif -%}

                                  <span class="line-item__price line-item__price--compare">{{ line_item.original_price | money }}</span>
                                {%- elsif line_item.variant.compare_at_price > line_item.variant.price -%}
                                  {%- if line_item.final_price == 0 -%}
                                    <span class="line-item__price line-item__price--highlight">{{ 'cart.general.free' | t }}</span>
                                  {%- else -%}
                                    <span class="line-item__price line-item__price--highlight">{{ line_item.final_price | money }}</span>
                                  {%- endif -%}

                                  <span class="line-item__price line-item__price--compare">{{ line_item.variant.compare_at_price | money }}</span>
                                {%- else -%}
                                  {%- if line_item.final_price == 0 -%}
                                    <span class="line-item__price">{{ 'cart.general.free' | t }}</span>
                                  {%- else -%}
                                    <span class="line-item__price">{{ line_item.final_price | money }}</span>
                                  {%- endif -%}
                                {%- endif -%}
                              </div>

                              {%- if line_item.unit_price_measurement -%}
                                <div class="line-item__price-info">
                                  <div class="unit-price-measurement">
                                    <span class="unit-price-measurement__price">{{ line_item.unit_price | money_without_trailing_zeros }}</span>
                                    <span class="unit-price-measurement__separator">/ </span>

                                    {%- if line_item.unit_price_measurement.reference_value != 1 -%}
                                      <span class="unit-price-measurement__reference-value">{{ line_item.unit_price_measurement.reference_value }}</span>
                                    {%- endif -%}

                                    <span class="unit-price-measurement__reference-unit">{{ line_item.unit_price_measurement.reference_unit }}</span>
                                  </div>
                                </div>
                              {%- endif -%}

                              {%- if line_item.line_level_discount_allocations != blank -%}
                                <ul class="line-item__discount-list">
                                  {%- for discount_allocation in line_item.line_level_discount_allocations -%}
                                    <li class="line-item__discount">
                                      {%- render 'icon', icon: 'sale' -%}{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
                                    </li>
                                  {%- endfor -%}
                                </ul>
                              {%- endif -%}

                              <div class="line-item__quantity hidden-tablet-and-up">
                                {%- comment -%}If the product has the tag "__gift", we remove the price{%- endcomment -%}

                                {%- unless line_item.product.tags contains '__gift' -%}
                                  <div class="quantity-selector">
                                    {%- assign allow_to_add_more = true -%}

                                    {%- if line_item.variant.inventory_management and line_item.variant.inventory_policy == 'deny' and line_item.quantity == line_item.variant.inventory_quantity -%}
                                      {%- assign allow_to_add_more = false -%}
                                    {%- endif -%}

                                    <button type="button" class="quantity-selector__button" data-action="decrease-quantity" data-href="{{ routes.cart_change_url }}?quantity={{ line_item.quantity | minus: 1 }}&id={{ line_item.key }}" data-quantity="{{ line_item.quantity | minus: 1 }}" data-line-id="{{ line_item.key }}" aria-label="{{ 'cart.items.decrease_quantity' | t }}" title="{{ 'cart.items.decrease_quantity' | t }}">{% render 'icon', icon: 'minus' %}</button>
                                    <input aria-label="{{ 'product.form.quantity' | t }}" class="quantity-selector__value" pattern="[0-9]*" data-current-value="{{ line_item.quantity }}" data-line-id="{{ line_item.key }}" value="{{ line_item.quantity }}" size="{{ line_item.quantity | append: '' | size | at_least: 2 }}">
                                    <button type="button" class="quantity-selector__button" data-action="increase-quantity" data-href="{{ routes.cart_change_url }}?quantity={{ line_item.quantity | plus: 1 }}&id={{ line_item.key }}" data-quantity="{{ line_item.quantity | plus: 1 }}" data-line-id="{{ line_item.key }}" {% if allow_to_add_more %}aria-label="{{ 'cart.items.increase_quantity' | t }}" title="{{ 'cart.items.increase_quantity' | t }}"{% else %}disabled="disabled" aria-label="{{ 'cart.items.no_more_stock' | t }}" data-tooltip="{{ 'cart.items.no_more_stock' | t }}" data-tooltip-position="bottom-left"{% endif %}>{% render 'icon', icon: 'plus' %}</button>
                                  </div>
                                {%- else -%}
                                  <span>{{ line_item.quantity }}</span>
                                {% endunless -%}

                                <a href="{{ routes.cart_change_url }}?quantity=0&id={{ line_item.key }}" data-action="decrease-quantity" data-quantity="0" data-line-id="{{ line_item.key }}" class="line-item__quantity-remove link">{{ 'cart.items.remove' | t }}</a>
                              </div>
                            </div>
                          </div>
                        </td>

                          <td class="line-item__quantity table__cell--center hidden-phone">
                          {%- comment -%}If the product has the tag "__gift", we remove the price{%- endcomment -%}

                          {%- unless line_item.product.tags contains '__gift' -%}
                            <div class="quantity-selector">
                              {%- assign allow_to_add_more = true -%}

                              {%- if line_item.variant.inventory_management and line_item.variant.inventory_policy == 'deny' and line_item.quantity == line_item.variant.inventory_quantity -%}
                                {%- assign allow_to_add_more = false -%}
                              {%- endif -%}

                              <button type="button" class="quantity-selector__button" data-action="decrease-quantity" data-href="{{ routes.cart_change_url }}?quantity={{ line_item.quantity | minus: 1 }}&id={{ line_item.key }}" data-quantity="{{ line_item.quantity | minus: 1 }}" data-line-id="{{ line_item.key }}" aria-label="{{ 'cart.items.decrease_quantity' | t }}" title="{{ 'cart.items.decrease_quantity' | t }}">{% render 'icon', icon: 'minus' %}</button>
                              <input aria-label="{{ 'product.form.quantity' | t }}" class="quantity-selector__value" pattern="[0-9]*" data-current-value="{{ line_item.quantity }}" data-line-id="{{ line_item.key }}" value="{{ line_item.quantity }}" size="{{ line_item.quantity | append: '' | size | at_least: 2 }}">
                              <button type="button" class="quantity-selector__button" data-action="increase-quantity" data-href="{{ routes.cart_change_url }}?quantity={{ line_item.quantity | plus: 1 }}&id={{ line_item.key }}" data-quantity="{{ line_item.quantity | plus: 1 }}" data-line-id="{{ line_item.key }}" {% if allow_to_add_more %}aria-label="{{ 'cart.items.increase_quantity' | t }}" title="{{ 'cart.items.increase_quantity' | t }}"{% else %}disabled="disabled" aria-label="{{ 'cart.items.no_more_stock' | t }}" data-tooltip="{{ 'cart.items.no_more_stock' | t }}" data-tooltip-position="bottom-left"{% endif %}>{% render 'icon', icon: 'plus' %}</button>
                            </div>
                          {%- else -%}
                            <span>{{ line_item.quantity }}</span>
                          {%- endunless -%}

                          <a href="{{ routes.cart_change_url }}?quantity=0&id={{ line_item.key }}" data-action="decrease-quantity" data-quantity="0" data-line-id="{{ line_item.key }}" class="line-item__quantity-remove link">{{ 'cart.items.remove' | t }}</a>
                        </td>

                        <td class="line-item__line-price table__cell--right hidden-phone">
                          {%- if line_item.final_line_price == 0 -%}
                            {{- 'cart.general.free' | t -}}
                          {%- else -%}
                            <span>{{ line_item.final_line_price | money }}</span>
                          {%- endif -%}
                        </td>
                      </tr>
                    {%- endfor -%}
                  </tbody>
                </table>
              </div>
            </div>

            <!-- <input type="button" value="Botão de Atualizar" onClick="window.location.reload()"> -->

            <!-- <button type="button" onClick="window.location.reload()">Atualizar!</button>

            <script>
              function setTimeout(() => {
                document.location.reload();
                }, 3000);
            </script> -->
              
            {%- comment -%}
            --------------------------------------------------------------------------------------
            GIFT WRAP
            --------------------------------------------------------------------------------------
            {%- endcomment -%}

            {%- assign gift_wrap_product = all_products[section.settings.gift_wrap_product] -%}

            {%- unless gift_wrap_product.empty? or gift_wrap_product.available == false -%}
              {%- comment -%}We also have to do another check to make sure the gift wrap product is not already in the cart{%- endcomment -%}

              {%- assign gift_wrap_in_cart = false -%}

              {%- for line_item in cart.items -%}
                {%- if line_item.product_id == gift_wrap_product.id -%}
                  {%- assign gift_wrap_in_cart = true -%}
                  {%- break -%}
                {%- endif -%}
              {%- endfor -%}

              {%- unless gift_wrap_in_cart -%}
                <div class="card">
                  <div class="gift-wrap">
                    <div class="gift-wrap__left">
                      <span class="gift-wrap__icon">{% render 'icon', icon: 'bi-gift-wrap' %}</span>

                      <p class="gift-wrap__text">
                        <span class="text--strong">{{ section.settings.gift_wrap_text | escape }}</span>

                        {%- if gift_wrap_product.price == 0 -%}
                          <span>{{ 'cart.general.free' | t }}</span>
                        {%- else -%}
                          {%- capture gift_wrap_product_price -%}<span>{{ gift_wrap_product.price | money }}</span>{%- endcapture -%}
                          <span>{{ 'cart.gift_wrap.price_html' | t: price: gift_wrap_product_price }}</span>
                        {%- endif -%}
                      </p>
                    </div>

                    {%- form 'product', gift_wrap_product, class: 'gift-wrap__form' -%}
                      <input type="hidden" name="quantity" value="1">
                      <input type="hidden" name="id" data-sku="{{ gift_wrap_product.first_available_variant.sku }}" value="{{ gift_wrap_product.first_available_variant.id }}">

                      <button type="submit" class="button button--secondary" data-action="add-to-cart">{{ section.settings.gift_wrap_button | escape }}</button>
                    {%- endform -%}
                  </div>
                </div>
              {%- endunless -%}
            {%- endunless -%}

            {%- comment -%}
            --------------------------------------------------------------------------------------
            SHIPPING ESTIMATOR
            --------------------------------------------------------------------------------------
            {%- endcomment -%}

            {%- if section.settings.show_shipping_estimator -%}
              <div class="card">
                <div class="estimate-shipping">
                  <button type="button" class="estimate-shipping__toggle" data-action="toggle-collapsible" data-collapsible-force-overflow aria-expanded="false" aria-controls="shipping-estimator">
                    <span class="estimate-shipping__icon">{% render 'icon', icon: 'bi-fast-delivery' %}</span>
                    <span class="estimate-shipping__text">{{ 'cart.shipping_estimator.title' | t }}</span>
                    <span class="estimate-shipping__arrow">{% render 'icon', icon: 'arrow-bottom' %}</span>
                  </button>

                  <div id="shipping-estimator" class="estimate-shipping__collapsible collapsible">
                    <div class="shipping-estimator form">
                      <div class="form__input-row">
                        <div class="form__input-wrapper">
                          <label for="shipping-estimator-country" class="form__label form__label--light">{{ 'cart.shipping_estimator.country' | t }}</label>

                          <div class="select-wrapper select-wrapper--primary">
                            {%- render 'icon', icon: 'arrow-bottom' -%}

                            <select name="country" id="shipping-estimator-country" data-default="{{ customer.default_address.country | default: section.settings.shipping_estimator_default_country }}" required>
                              {{- country_option_tags -}}
                            </select>
                          </div>
                        </div>

                        <div class="form__input-wrapper" style="display: none">
                          <label for="shipping-estimator-province" class="form__label form__label--light">{{ 'cart.shipping_estimator.province' | t }}</label>

                          <div class="select-wrapper select-wrapper--primary">
                            {%- render 'icon', icon: 'arrow-bottom' -%}

                            <select name="province" id="shipping-estimator-province" data-default="{{ customer.default_address.province }}"></select>
                          </div>
                        </div>

                        <div class="form__input-wrapper" style="max-width: 155px">
                          <label for="shipping-estimator-zip" class="form__label form__label--light">{{ 'cart.shipping_estimator.zip_code' | t }}</label>
                          <input type="text" name="zip" id="shipping-estimator-zip" class="form__field form__field--text" value="{{ customer.default.address.zip }}" required>
                        </div>

                        <div class="form__input-wrapper hidden-phone">
                          <button type="button" class="form__submit button button--secondary" data-action="estimate-shipping">{{ 'cart.shipping_estimator.estimate' | t }}</button>
                        </div>
                      </div>

                      <button type="button" class="form__submit button button--secondary hidden-tablet-and-up" data-action="estimate-shipping">{{ 'cart.shipping_estimator.estimate' | t }}</button>

                      <div class="shipping-estimator__results" style="display: none;"></div>
                    </div>
                  </div>
                </div>
              </div>
            {%- endif -%}

            {%- comment -%}
            --------------------------------------------------------------------------------------
            RECAP
            --------------------------------------------------------------------------------------
            {%- endcomment -%}

            <div class="cart-recap">
              <div class="cart-recap__scroller">
                <div class="card">
                  <div class="card__section">
                    {%- if cart.cart_level_discount_applications != blank -%}
                      {%- for discount_application in cart.cart_level_discount_applications -%}
                        <div class="cart-recap__price-line cart-recap__price-line--highlight text--pull">
                          <span class="cart-recap__price-line-label">{{ discount_application.title }}</span>
                          <span class="cart-recap__price-line-price">-{{ discount_application.total_allocated_amount | money }}</span>
                        </div>
                      {%- endfor -%}
                    {%- endif -%}

                    <div class="cart-recap__price-line text--pull">
                      <span class="cart-recap__price-line-label">{{ 'cart.general.total' | t }}</span>
                      <span class="cart-recap__price-line-price">{{ cart.total_price | money }}</span>
                    </div>

                    {%- comment -%}
                    To calculate the total discount, we take into account the Shopify Script (for Plus merchants), but we also add the compare at price as
                    well as potential automatic discounts at cart level
                    {%- endcomment -%}

                    {%- assign total_discount = 0 -%}

                    {%- for line_item in cart.items -%}
                      {%- if line_item.final_line_price < line_item.original_line_price -%}
                        {%- assign total_discount = total_discount | plus: line_item.total_discount -%}
                      {%- elsif line_item.variant.compare_at_price > line_item.variant.price -%}
                        {%- assign line_discount = line_item.variant.compare_at_price | minus: line_item.variant.price | times: line_item.quantity -%}
                        {%- assign total_discount = total_discount | plus: line_discount -%}
                      {%- endif -%}
                    {%- endfor -%}

                    {%- for discount_application in cart.cart_level_discount_applications -%}
                      {%- assign total_discount = total_discount | plus: discount_application.total_allocated_amount -%}
                    {%- endfor -%}

                    {%- if total_discount > 0 -%}
                      {%- capture amount_saved -%}<span>{{ total_discount | money }}</span>{%- endcapture -%}
                      <span class="cart-recap__amount-saved">{{ 'cart.general.amount_saved_html' | t: amount_saved: amount_saved }}</span>
                    {%- endif -%}

                    {%- if section.settings.enable_order_notes -%}
                      <div class="cart-recap__note">
                        <button type="button" class="cart-recap__note-button" data-action="toggle-collapsible" data-collapsible-force-overflow aria-controls="order-note" aria-expanded="false">
                          {{- 'cart.general.note_title' | t -}}
                          <span>
                            <span class="cart-recap__note-edit {% if cart.note != blank %}is-visible{% endif %}">{{ 'cart.general.edit_note' | t }}</span>
                            {%- render 'icon', icon: 'arrow-bottom' -%}
                          </span>
                        </button>
                      
                        <div id="order-note" class="collapsible" aria-hidden="true">
                          <div class="cart-recap__note-inner">
                            <textarea name="cart[note]" class="form__field form__field--textarea" rows="3" autofocus>{{ cart.note }}</textarea>
                            <button type="button" class="form__submit form__submit--tight button button--secondary" data-action="save-note">{{ 'cart.general.save_note' | t }}</button>
                          </div>
                        </div>
                      </div>
                    {%- endif -%}

                    <div class="cart-recap__notices rte">
                      <p>
                        {%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
                          {{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
                        {%- elsif shop.taxes_included -%}
                          {{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
                        {%- elsif shop.shipping_policy.body != blank -%}
                          {{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
                        {%- else -%}
                          {{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
                        {%- endif -%}
                      </p>
                    </div>
               

                    <form method="post" action="{{ routes.cart_url }}" novalidate="novalidate" data-item-count="{{ cart.item_count }}">
                      <input type="hidden" name="attributes[collection_products_per_page]" value="">
                      <input type="hidden" name="attributes[collection_layout]" value="">
                       <button type="submit" name="checkout" class="cart-recap__checkout button button--primary button--full2 button--large botaofinalizar">{{ 'cart.general.checkout' | t }}</button>
                      <a class="metade" href="/collections/all"><br><span>ADICIONAR MAIS ITENS</span></a>
                                     

                      {%- comment -%}
                      By uncommenting the additional_checkout_buttons, the express checkout buttons will be hidden from the first step of the checkout, and
                      are rather deferred to the payment step. This is a hacky trick, but it is often requested by merchants, so I prepared the code!
                      {%- endcomment -%}

                   
                    {%- comment -%}
                      {%- if additional_checkout_buttons -%}
                        <div class="additional-checkout-buttons" style="display: none !important">
                          {{ content_for_additional_checkout_buttons }}
                        </div>
                      {%- endif -%}
                      {%- endcomment -%}
                    </form>
                  </div>
                </div>


    
                {%- if section.settings.show_payment_icons -%}
                  <div class="cart-recap__secure-payment">
                    <p class="cart-recap__secure-payment-title">{% render 'icon', icon: 'lock-2' %} {{ 'cart.general.secure_payments' | t }}</p>

                    <div class="cart-recap__secure-payment-list payment-list payment-list--centered">
                      {% for type in shop.enabled_payment_types %}
                        {{ type | payment_type_svg_tag: class: 'payment-list__item' }}
                      {% endfor %}
                    </div>
                  </div>
                {%- endif -%}
              </div>
            </div>
          </div>
  
          {%- comment -%}
          --------------------------------------------------------------------------------------
          UPSELL
          --------------------------------------------------------------------------------------
          {%- endcomment -%}

          {%- assign upsell_collection = collections[section.settings.upsell_collection] -%}

          {%- if section.blocks.size > 0 or upsell_collection != empty -%}
            <div class="container">
              {%- if section.blocks.size > 0 -%}
                <div class="section">
                  <header class="section__header">
                    <h2 class="section__title heading h3">{{ section.settings.trust_heading | escape }}</h2>
                  </header>

                  <div class="text-with-icons text-with-icons--boxed">
                    {%- for block in section.blocks -%}
                      <div class="text-with-icons__item" {{ block.shopify_attributes }}>
                        <div class="text-with-icons__icon-wrapper">
                          {%- if block.settings.custom_icon != blank -%}
                            <img src="{{ block.settings.custom_icon | img_url: '60x' }}" alt="{{ block.settings.custom_icon.alt | escape }}">
                          {%- else -%}
                            {%- render 'icon', icon: block.settings.icon, stroke_width: 1.5 -%}
                          {%- endif -%}
                        </div>

                        {%- if block.settings.title != blank or block.settings.content != blank -%}
                          <div class="text-with-icons__content-wrapper">
                            {%- if block.settings.title != blank -%}
                              <p class="text-with-icons__title text--strong">{{ block.settings.title | escape }}</p>
                            {%- endif -%}

                            {%- if block.settings.content != blank -%}
                              <div class="text-with-icons__content rte">
                                {{ block.settings.content  }}
                              </div>
                            {%- endif -%}
                          </div>
                        {%- endif -%}
                      </div>
                    {%- endfor -%}
                  </div>
                </div>
              {%- endif -%}

              {%- if upsell_collection != empty -%}
                {%- comment -%}We iterate through all the products, by making sure to remove those that are already in the cart{%- endcomment -%}

                {%- capture upsell_products -%}
                  {%- assign upsell_products_count = 0 -%}

                  {%- for product in upsell_collection.products -%}
                    {%- unless product.available -%}
                      {%- continue -%}
                    {%- endunless -%}

                    {%- assign include_product = true -%}

                    {%- for line_item in cart.items -%}
                      {%- if line_item.product_id == product.id -%}
                        {%- assign include_product = false -%}
                        {%- break -%}
                      {%- endif -%}
                    {%- endfor -%}

                    {%- if include_product -%}
                      {%- render 'product-item', product: product, show_add_to_cart: true, grid_classes: '1/3--lap 1/3--desk 1/4--wide' -%}

                      {%- comment -%}Check how much products we have shown and limit{%- endcomment -%}
                      {%- assign upsell_products_count = upsell_products_count | plus: 1 -%}

                      {%- if upsell_products_count >= section.settings.upsell_products_count -%}
                        {%- break -%}
                      {%- endif -%}
                    {%- endif -%}
                  {%- endfor -%}
                {%- endcapture -%}

                {%- if upsell_products != blank -%}
                  {%- capture section_settings -%}
                  {
                    "stackable": false,
                    "layout": "vertical"
                  }
                  {%- endcapture -%}

                  <div class="section" data-section-id="{{ section.id }}-upsell" data-section-type="featured-collection" data-section-settings='{{ section_settings }}'>
                    <header class="section__header">
                      <h2 class="section__title heading h3">{{ section.settings.upsell_heading | escape }}</h2>
                    </header>

                    <div class="scroller">
                      <div class="scroller__inner">
                        <div class="product-list product-list--vertical product-list--scrollable">
                          {{ upsell_products }}
                        </div>
                      </div>
                    </div>
                  </div>

                  {%- comment -%}
                  --------------------------------------------------------------------------------------
                  QUICK VIEW CONTAINER
                  --------------------------------------------------------------------------------------
                  {%- endcomment -%}

                  <div id="modal-quick-view-{{ section.id }}" class="modal" aria-hidden="true">
                    <div class="modal__dialog modal__dialog--stretch" role="dialog">
                      <div class="modal__loader">
                        {%- render 'icon', icon: 'search-loader' -%}
                      </div>

                      <div class="modal__inner"></div>
                    </div>
                  </div>
                {%- endif -%}
              {%- endif -%}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  {%- endif -%}
</section>

{% schema %}
{
  "name": "Cart page",
  "max_blocks": 3,
  "settings": [
    {
      "type": "paragraph",
      "content": "Those settings are only applicable when the cart contains at least one product."
    },
    {
      "type": "checkbox",
      "id": "enable_order_notes",
      "label": "Enable order notes",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_payment_icons",
      "label": "Show payment icons",
      "default": true
    },
    {
      "type": "header",
      "content": "Gift wrap"
    },
    {
      "type": "paragraph",
      "content": "Gift wrap needs to be set up as a product. [Read more](https://support.maestrooo.com/article/190-cart-set-up-a-gift-wrap-product)"
    },
    {
      "type": "product",
      "id": "gift_wrap_product",
      "label": "Product"
    },
    {
      "type": "text",
      "id": "gift_wrap_text",
      "label": "Text",
      "default": "Do you want a gift wrap?"
    },
    {
      "type": "text",
      "id": "gift_wrap_button",
      "label": "Button",
      "default": "Add a gift wrap"
    },
    {
      "type": "header",
      "content": "Shipping estimator"
    },
    {
      "type": "checkbox",
      "id": "show_shipping_estimator",
      "label": "Show shipping rates calculator",
      "default": true
    },
    {
      "type": "text",
      "id": "shipping_estimator_default_country",
      "label": "Default country",
      "info": "If the customer is logged in, the country of their shipping address will be used.",
      "default": "United States"
    },
    {
      "type": "text",
      "id": "trust_heading",
      "label": "Heading",
      "default": "Our guarantees"
    },
    {
      "type": "header",
      "content": "Upsell"
    },
    {
      "type": "paragraph",
      "content": "Show additional products to encourage customers to buy more."
    },
    {
      "type": "text",
      "id": "upsell_heading",
      "label": "Heading",
      "default": "Complete your cart"
    },
    {
      "type": "collection",
      "id": "upsell_collection",
      "label": "Collection",
      "info": "Products already in cart or sold out will be hidden."
    },
    {
      "type": "range",
      "id": "upsell_products_count",
      "label": "Products to show",
      "min": 4,
      "max": 12,
      "step": 4,
      "default": 4
    }
  ],
  "blocks": [
    {
      "name": "Trust text",
      "type": "trust",
      "settings": [
        {
          "type": "select",
          "id": "icon",
          "label": "Icon",
          "options": [
            {
              "value": "bi-add-to-cart",
              "label": "Add to cart",
              "group": "Shop"
            },
            {
              "value": "bi-gift-wrap",
              "label": "Gift wrap",
              "group": "Shop"
            },
            {
              "value": "bi-gift-box",
              "label": "Gift box",
              "group": "Shop"
            },
            {
              "value": "bi-heart",
              "label": "Heart",
              "group": "Shop"
            },
            {
              "value": "bi-ecology",
              "label": "Ecology",
              "group": "Shop"
            },
            {
              "value": "bi-plant",
              "label": "Plant",
              "group": "Shop"
            },
            {
              "value": "bi-shop",
              "label": "Shop",
              "group": "Shop"
            },
            {
              "value": "bi-shop-pin",
              "label": "Shop with pin",
              "group": "Shop"
            },
            {
              "value": "bi-alert",
              "label": "Alert",
              "group": "Communication"
            },
            {
              "value": "bi-chat",
              "label": "Chat",
              "group": "Communication"
            },
            {
              "value": "bi-comment",
              "label": "Comment",
              "group": "Communication"
            },
            {
              "value": "bi-customer-support",
              "label": "Customer support",
              "group": "Communication"
            },
            {
              "value": "bi-email",
              "label": "Email",
              "group": "Communication"
            },
            {
              "value": "bi-network",
              "label": "Network",
              "group": "Communication"
            },
            {
              "value": "bi-newsletter",
              "label": "Newsletter",
              "group": "Communication"
            },
            {
              "value": "bi-love",
              "label": "Love",
              "group": "Communication"
            },
            {
              "value": "bi-phone",
              "label": "Phone",
              "group": "Communication"
            },
            {
              "value": "bi-share",
              "label": "Share",
              "group": "Communication"
            },
            {
              "value": "bi-delivery",
              "label": "Delivery",
              "group": "Delivery"
            },
            {
              "value": "bi-fast-delivery",
              "label": "Fast delivery",
              "group": "Delivery"
            },
            {
              "value": "bi-returns",
              "label": "Returns",
              "group": "Delivery"
            },
            {
              "value": "bi-time",
              "label": "Time",
              "group": "Delivery"
            },
            {
              "value": "bi-secure-payment",
              "label": "Secure payment",
              "group": "Security"
            },
            {
              "value": "bi-mobile-payment",
              "label": "Mobile payment",
              "group": "Security"
            },
            {
              "value": "bi-credit-card",
              "label": "Credit card",
              "group": "Security"
            },
            {
              "value": "bi-shield",
              "label": "Shield",
              "group": "Security"
            }
          ],
          "default": "bi-customer-support"
        },
        {
          "type": "image_picker",
          "id": "custom_icon",
          "label": "Custom icon",
          "info": "60 x 60px .png with transparency recommended"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Your title"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "Content",
          "default": "<p>Short content about your store</p>"
        }
      ]
    }
  ]
}
{% endschema %}