To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

"Remove" button is on the cart page but not on the cart drawer

BELU1
Tourist
19 0 1

Hello,

 

I have a problem with deleting a product with "Remove" button. It is not appearing on cart drawer. I provided screenshots an codes.

BELU1_0-1669213243363.png

BELU1_1-1669213276269.png

this is main-cart.liquid

 

<div class="page-width page-content">

  {%- render 'breadcrumbs' -%}

  <header class="section-header text-center{% if cart.item_count == 0 %} section-header--404{% endif %}">
    <h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
    <div class="rte text-spacing">
      {%- if cart.item_count == 0 -%}
        <p>{{ 'cart.general.empty' | t }}</p>
      {%- endif -%}
      <p>{{ 'cart.general.continue_browsing_html' | t: url: routes.all_products_collection_url }}</p>
    </div>
  </header>

  {%- if cart.item_count > 0 -%}
    <form action="{{ routes.cart_url }}" method="post" novalidate data-location="page" id="CartPageForm">
      <div class="cart__page">
        <div data-products class="cart__page-col">
          {% for item in cart.items %}
            {%- render 'cart-item', product: item -%}
          {%- endfor -%}
        </div>
        <div class="cart__page-col">
          {% if settings.cart_notes_enable %}
            <div>
              <label for="CartNote">{{ 'cart.general.note' | t }}</label>
              <textarea name="note" class="input-full cart-notes" id="CartNote">{{ cart.note }}</textarea>
            </div>
          {% endif %}

          <div data-discounts>
            {% if cart.cart_level_discount_applications != blank %}
              <div class="cart__discounts cart__item-sub cart__item-row">
                <div>{{ 'cart.general.discounts' | t }}</div>
                <div class="text-right">
                  {% for cart_discount in cart.cart_level_discount_applications %}
                    <div class="cart__discount">
                      {{ cart_discount.title }} (-{{ cart_discount.total_allocated_amount | money }})
                    </div>
                  {% endfor %}
                </div>
              </div>
            {% endif %}
          </div>

          <div class="cart__item-sub cart__item-row">
            <div>{{ 'cart.general.subtotal' | t }}</div>
            <div data-subtotal>{{ cart.total_price | money }}</div>
          </div>

          {% if settings.cart_terms_conditions_enable %}
            <div class="cart__item-row cart__terms">
              <input type="checkbox" id="CartTerms" class="cart__terms-checkbox">
              <label for="CartTerms">
                {% if settings.cart_terms_conditions_page != blank %}
                  {{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_page.url }}
                {% else %}
                  {{ 'cart.general.terms' | t }}
                {% endif %}
              </label>
            </div>
          {% endif %}

          <div class="cart__item-row cart__checkout-wrapper">
            <button type="submit" name="checkout" data-terms-required="{{ settings.cart_terms_conditions_enable }}" class="btn cart__checkout">
              {{ 'cart.general.checkout' | t }}
            </button>

            {% if additional_checkout_buttons and settings.cart_additional_buttons %}
              <div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
            {% endif %}
          </div>

          <div class="cart__item-row text-center">
            <small>
              {{ 'cart.general.shipping_at_checkout' | t }}<br />
            </small>
          </div>
        </div>
      </div>
    </form>
  {%- endif -%}
</div>

{% schema %}
{
  "name": "t:sections.main-cart.name"
}
{% endschema %}

this is cart-drawer.liquid

 

 

{%- if settings.cart_type == 'drawer' -%}
  
  <div id="CartDrawer" class="drawer drawer--right">
    <form id="CartDrawerForm" action="{{ routes.cart_url }}" method="post" novalidate class="drawer__contents">
      <div class="drawer__fixed-header" >
        <div class="drawer__header appear-animation appear-delay-1">
          <div class="h3 drawer__title">{{ 'cart.general.title' | t }}</div>
          <div class="drawer__close">
            <button type="button" class="drawer__close-button js-drawer-close">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
              <span class="icon__fallback-text">{{ 'cart.general.close_cart' | t }}</span>
            </button>          
               </div>
        </div>
      </div>

      <div class="drawer__inner">
   <div class="order-value-booster-side-cart" style="font-weight: 500; font-family: 'Poppins';"></div>
        <div class="drawer__scrollable">
          <div data-products class="appear-animation appear-delay-2"></div>

          {% if settings.cart_notes_enable %}
            <div class="appear-animation appear-delay-3">
              <label for="CartNoteDrawer">{{ 'cart.general.note' | t }}</label>
              <textarea name="note" class="input-full cart-notes" id="CartNoteDrawer">{{ cart.note }}</textarea>
            </div>
          {% endif %}
        </div>

        <div class="drawer__footer appear-animation appear-delay-4">
          <div data-discounts>
            {% if cart.cart_level_discount_applications != blank %}
              <div class="cart__discounts cart__item-sub cart__item-row">
                <div>{{ 'cart.general.discounts' | t }}</div>
                <div class="text-right">
                  {% for cart_discount in cart.cart_level_discount_applications %}
                    <div class="cart__discount">
                      {{ cart_discount.title }} (-{{ cart_discount.total_allocated_amount | money }})
                    </div>
                  {% endfor %}
                </div>
              </div>
            {% endif %}
          </div>

          <div class="cart__item-sub cart__item-row">
            <div class="ajaxcart__subtotal">{{ 'cart.general.subtotal' | t }}</div>
            <div data-subtotal>{{ cart.total_price | money }}</div>
          </div>

           <div class="cart__checkout-wrapper">
            <button type="submit" name="checkout" style="padding: 15px 18px; font-size: 1.5rem; font-weight: 700;" data-terms-required="{{ settings.cart_terms_conditions_enable }}" class="btn cart__checkout">
              {{ 'cart.general.checkout' | t }}
            </button>

            {% if additional_checkout_buttons and settings.cart_additional_buttons %}
              <div class="additional-checkout-buttons additional-checkout-buttons--vertical">{{ content_for_additional_checkout_buttons }}</div>
            {% endif %}
          </div>
          
          <div class="cart__item-row text-center" >
            <small>
              {{ 'cart.general.shipping_at_checkout' | t }}<br />
            </small>
          </div>

          {% if settings.cart_terms_conditions_enable %}
            <div class="cart__item-row cart__terms">
              <input type="checkbox" id="CartTermsDrawer" class="cart__terms-checkbox">
              <label for="CartTermsDrawer">
                {% if settings.cart_terms_conditions_page != blank %}
                  {{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_page.url }}
                {% else %}
                  {{ 'cart.general.terms' | t }}
                {% endif %}
              </label>
            </div>
          {% endif %}
        </div>
      </div>

      <div class="drawer__cart-empty appear-animation appear-delay-2"  >
        <div class="drawer__scrollable" style="text-align: center; background: white;" >
          {{ 'cart.general.empty' | t }}
  <p>    </p>
  <button type="submit" name="continue"  >
    <a class="btn cart__checkout" href="/collections/leather-handmade-wallets" style="background:#05564B; padding: 15px 18px; font-size: 0.98rem; font-weight:700;">CONTINUE SHOPPING<span class="cell-l--s">&gt;</span></a>
            </button>
           <a href="{{ routes.root_url }}" class="ht drawer__title"{% if section.settings.align_logo == 'left' %} site-header__logo{% endif %}">
{% capture image_size %}{{ section.settings.logo_max_width | escape }}{% endcapture %}
<img src="{{ 'Belucian-Icon-Black.svg' | asset_url }}" 
alt="{{ shop.name }}"
style="width: 15%; padding-top: 205px">
</a>
        </div>
      </div>
    </form>
  </div>
{%- endif -%}

 

this is cart-items.liquid

 

<div class="cart__item" data-key="{{ product.key }}">
  {%- assign img_url = product | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
  <div class="cart__image">
    <a href="{{ product.url }}" style="height: 0; padding-bottom: {{ 100 | divided_by: product.image.aspect_ratio }}%;">
      <img class="lazyload"
          data-src="{{ img_url }}"
          data-widths="[180, 360, 540]"
          data-aspectratio="{{ product.aspect_ratio }}"
          data-sizes="auto"
          alt="{{ product.product.title | escape }}">
      <noscript>
        <img class="lazyloaded"
          src="{{ product | img_url: '400x' }}"
          alt="{{ product.product.title | escape }}">
      </noscript>
    </a>
  </div>
  <div class="cart__item-details">
    <div id="main">
    <div class="cart__item-title">
      <a href="{{ product.url }}" class="cart__item-name">
        {{ product.product.title }}
      </a>
          {% comment %}}  <cart-remove-button id="CartDrawer-Remove-{{ item.index | plus: 1 }}" data-index="{{ item.index | plus: 1 }}">
       <button class="button button--tertiary" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
           REMOVE
        </button>
        </cart-remove-button> {% endcomment %}}
    </div>
      

      {%- unless product.product.has_only_default_variant -%}
        <div class="cart__item--variants">
          {%- for option in product.options_with_values -%}
            <div><span>{{ option.name }}:</span> {{ option.value }}</div>
          {%- endfor -%}
        </div>
      {%- endunless -%}
      {%- if product.selling_plan_allocation != empty -%}
        <div class="cart__item--variants">
          {{ product.selling_plan_allocation.selling_plan.name }}
        </div>
      {%- endif -%}
      {%- assign property_size = product.properties | size -%}
      {% if property_size > 0 %}
        {% for p in product.properties %}
          {%- assign first_character_in_key = p.first | truncate: 1, '' -%}
          {% unless p.last == blank or first_character_in_key == '_' %}
            <div>
              {{ p.first }}:
              {% if p.last contains '/uploads/' %}
                <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
              {% else %}
                {{ p.last }}
              {% endif %}
            </div>
          {% endunless %}
        {% endfor %}
      {% endif %}
     
    </div>
    <div class="cart__item-sub">
      <div>
        <div class="js-qty__wrapper">
          <label for="cart_updates_{{ product.key }}" class="hidden-label">{{ 'cart.label.quantity' | t }}</label>
          <input type="text"
            id="cart_updates_{{ product.key }}"
            name="updates[]"
            class="js-qty__num"
            value="{{ product.quantity }}"
            min="0"
            pattern="[0-9]*"
            data-id="{{ product.key }}">
          <button type="button"
            class="js-qty__adjust js-qty__adjust--minus"
            aria-label="{{ 'cart.general.reduce_quantity' | t }}">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-minus" viewBox="0 0 20 20"><path fill="#444" d="M17.543 11.029H2.1A1.032 1.032 0 0 1 1.071 10c0-.566.463-1.029 1.029-1.029h15.443c.566 0 1.029.463 1.029 1.029 0 .566-.463 1.029-1.029 1.029z"/></svg>
              <span class="icon__fallback-text" aria-hidden="true">&minus;</span>
          </button>
          <button type="button"
            class="js-qty__adjust js-qty__adjust--plus"
            aria-label="{{ 'cart.general.increase_quantity' | t }}">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" viewBox="0 0 20 20"><path fill="#444" d="M17.409 8.929h-6.695V2.258c0-.566-.506-1.029-1.071-1.029s-1.071.463-1.071 1.029v6.671H1.967C1.401 8.929.938 9.435.938 10s.463 1.071 1.029 1.071h6.605V17.7c0 .566.506 1.029 1.071 1.029s1.071-.463 1.071-1.029v-6.629h6.695c.566 0 1.029-.506 1.029-1.071s-.463-1.071-1.029-1.071z"/></svg>
              <span class="icon__fallback-text" aria-hidden="true">+</span>
          </button>
           
        </div>

        <div class="cart__remove">
          <a href="{{ routes.cart_change_url }}?id={{ product.key }}&amp;quantity=0" class="text-link">
            {{ 'cart.general.remove' | t }}
        </div>
      </div>
       

      <div class="cart__item-price-col text-right">
        {% if product.original_price != product.final_price %}
          <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
          <small class="cart__price cart__price--strikethrough">
            {{ product.original_price | money }}
          </small>
          <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          <span class="cart__price cart__discount">
            {{ product.final_price | money }}
          </span>
        {% else %}
          <span class="cart__price">
            {{ product.original_price | money }}
          </span>
        {% endif %}

        {%- if product.line_level_discount_allocations != blank -%}
          {%- for discount_allocation in product.line_level_discount_allocations -%}
            <small class="cart__discount">{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})</small>
          {%- endfor -%}
        {%- endif -%}

        {%- if product.unit_price_measurement -%}
          {%- capture unit_price_base_unit -%}
            <span class="unit-price-base">
              {%- if product.unit_price_measurement -%}
                {%- if product.unit_price_measurement.reference_value != 1 -%}
                  {{ product.unit_price_measurement.reference_value }}
                {%- endif -%}
                {{ product.unit_price_measurement.reference_unit }}
              {%- endif -%}
            </span>
          {%- endcapture -%}

          <div class="product__unit-price">{{ product.unit_price | money }}/{{ unit_price_base_unit }}</div>
        {%- endif -%}

    
      </div>
    </div>
  </div>
</div>

 

And this code make remove button on cart page.

 

   <div class="cart__remove">
          <a href="{{ routes.cart_change_url }}?id={{ product.key }}&amp;quantity=0" class="text-link">
            {{ 'cart.general.remove' | t }}
        </div>

 

Replies 2 (2)
jovilh
Explorer
41 4 8

Hi BELU1,

 

I looked at the code you attached and from what I understand there is no straightforward fix for this. The products gets added to the card drawer with JavaScript and therefore would require a developer to make this change for you.

 

cart-drawer.liquid

<div data-products class="appear-animation appear-delay-2"></div>
 The products gets injected inside this div.

 

 

 

Jovil | Developer @ Tiburon
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
BELU1
Tourist
19 0 1

Good point. I did that it deletes but sends me to cart page, but without deleted product. 

BELU1_0-1669370033419.png