Delete cart drawer item row with a button

[BELU1]

Hello,

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

[BELU1]

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

For every item on the cart

[BELU1]

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

[Lucid_Polygon]

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

[BELU1]

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

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]

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. 

[BELU1]

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

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>

[BELU1]

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

[BELU1]

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]

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

[BELU1]

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>