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

Delete cart drawer item row with a button

BELU1
Tourist
19 0 1

Hello,

 

We need a help with remove button in a cart drawer. To delete a product row. Theme: Impulse.

Replies 12 (12)
BELU1
Tourist
19 0 1

This will not help cause it is for emptying all the items. I need 

BELU1_0-1669045731860.png

For every item on the cart

BELU1
Tourist
19 0 1

Probably, you missunderstood me I need a button to remove an item row. Here is an example. 

BELU1_0-1669049785051.png

 

Lucid_Polygon
Shopify Partner
349 61 80
  • There will be a file in your theme code names Drawer or Cart Drawer or something along this lines
  • Find it in your code - Online Store > Themes > Actions […] > Edit Code
  • You need to add a button there, the code for the button is below this
  • The following code needs tweaking based on your theme as you have a custom paid theme.
  • Please post the code of your cart page here so we can tweak it.

 

                            <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>

 

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
BELU1
Tourist
19 0 1

 

<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>
            <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>
    </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>

 

It fits good but after clicking a remove button I am getting an error and it does not delete.

 

BELU1
Tourist
19 0 1

IT fits good but I am getting an error after clicking on it

<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>
            <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>
    </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>
Lucid_Polygon
Shopify Partner
349 61 80

You will also have code for the normal cart page (not drawer). Could you paste the code for that. We Can use the logic from that page to your drawer. 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
BELU1
Tourist
19 0 1
<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 %}
Lucid_Polygon
Shopify Partner
349 61 80

Can you try the following code to remove it, please?

 

<a href="/cart/change?line={{ forloop.index }}&quantity=0" rel="{{ item.id }}">Remove Item</a>

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
BELU1
Tourist
19 0 1

If I put it instead of previous code. I am getting error 

BELU1_0-1669106627792.png

 

BELU1
Tourist
19 0 1

By using this code down below. After I click remove on cart drawer it sends me to cart page and from there I can delete an item.

<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>
Lucid_Polygon
Shopify Partner
349 61 80

It's a workaround. Sorry couldn't help you with an easier solution.

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
BELU1
Tourist
19 0 1

It seems that this code is removing an item row in cart page. It is strange that there is no button on cart drawer.

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