The remove button in my cart not working, it takes me to checkout page

Solved

The remove button in my cart not working, it takes me to checkout page

herbovedam
Explorer
50 6 3

When i click remove button for removing items on cart it simply redirects to checkout page without removing items. Please help me to fix this out. 

Thanks   my website is https://www.peppystamps.com/

 

  @KetanKumar  @websensepro  @Jasoliya 

Accepted Solutions (5)

Jasoliya
Shopify Partner
4822 625 1225

This is an accepted solution.

Hi @herbovedam 

i can see its because  you taken remove as form <button> chnage it from button to input type from cart page , right now its button so submitting form to cehckout

best regard 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

herbovedam
Explorer
50 6 3

This is an accepted solution.

Now, nothing is happening, when i click the button, here is the code which I fixed and also the entire car.liquid code  please help @websensepro 

@Jasoliya 

 

 

 <input type="button" value="REMOVE" class="remove  s-text7 flex-c-m m-l-30 m-t-10 p-l-10 p-r-10 p-t-5 p-b-5 bo1 bo-rad-23 hov1 trans-0-4" data-key="{{ item.variant_id }}"/>

 

 

 

 

 

<!-- Title Page -->
<section class="bg-title-page p-t-40 p-b-50 flex-col-c-m" {% if settings.show_cart_top_image %}
         style="background-image:url({{ 'cart_top.jpg' | asset_url }});" {% endif %}>
  <h2 class="l-text2 t-center">
    {{ page_title }}
  </h2>
</section>
<!-- Cart -->
<section class="cart bgwhite p-t-70 p-b-100">
  <div class="container">
    {% if cart.item_count > 0 %}
    <form action="/checkout" method="post" id="cart_form">
      <!-- Cart item -->
      <div class="container-table-cart pos-relative">
        <div class="wrap-table-shopping-cart bgwhite">
          <table class="table-shopping-cart">
            <tr class="table-head">
              <th class="column-1"></th>
              <th class="column-2">{{ 'cart.general.heading_product_name' | t }}</th>
              <th class="column-3">{{ 'cart.general.heading_unit_price' | t }}</th>
              <th class="column-4 p-l-70">{{ 'cart.general.heading_quantity' | t }}</th>
              <th class="column-5">{{ 'cart.general.heading_total' | t }}</th>
            </tr>
            {% for item in cart.items %}
            <tr class="table-row" data-line="{{ forloop.index }}">
              <td class="column-1">
                <div class="cart-img-product b-rad-4 o-f-hidden">
                  <a href="{{ item.url }}">
                    <img src="{{ item | img_url: '90x120' }}"  alt="{{ item.title | escape }}" title="{{ item.title | escape }}" class="" />
                  </a>
                </div>
              </td>
              <td class="column-2">
                <a href="{{ item.url }}">{{ item.product.title }}</a>
                {% unless item.variant.title contains 'Default' %}
                <br />
                <small>{{ item.variant.title }}</small>
                {% endunless %}

                {% if settings.product_quantity_message and item.variant.inventory_management and item.variant.inventory_quantity <= 0 and item.variant.incoming %}
                {% assign date = item.variant.next_incoming_date | date: format: 'month_day_year' %}
                <br />
                <small>{{ 'products.product.will_not_ship_until' | t: date: date }}</small>
                {% endif %}

                {% assign property_size = item.properties | size %}
                {% if property_size > 0 %}
                {% for p in item.properties %}
                {% if forloop.first %}<br>{% endif %}
                {% unless p.last == blank %}
                {{ p.first }}:

                {% if p.last contains '/uploads/' %}
                <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                {% else %}
                {{ p.last }}
                {% endif %}

                <br>
                {% endunless %}
                {% endfor %}
                {% endif %}
              </td>
              <td class="column-3">{{ item.price | money }}</td>
              <td class="column-4">
                <div class="flex-w bo5 of-hidden w-size17">
                  <button class="btn-num-product-down color1 flex-c-m size7 bg8 eff2">
                    <i class="fs-12 fa fa-minus" aria-hidden="true"></i>
                  </button>
                  <input type="number" name="updates[]" id="updates_{{ item.id }}" data-key="{{ item.id }}" value="{{ item.quantity }}" min="0" class="size8 m-text18 t-center num-product" data-line="{{ forloop.index }}">
                  <button class="btn-num-product-up color1 flex-c-m size7 bg8 eff2">
                    <i class="fs-12 fa fa-plus" aria-hidden="true"></i>
                  </button>
                </div>


                 <!-- <button class="remove  s-text7 flex-c-m m-l-30 m-t-10 p-l-10 p-r-10 p-t-5 p-b-5 bo1 bo-rad-23 hov1 trans-0-4" data-key="{{ item.variant_id }}">
					{{ 'cart.general.remove' | t }}
				</button> -->


                <input type="button" value={{ 'cart.general.remove' | t }} class="remove  s-text7 flex-c-m m-l-30 m-t-10 p-l-10 p-r-10 p-t-5 p-b-5 bo1 bo-rad-23 hov1 trans-0-4" data-key="{{ item.variant_id }}"/>
                
				
              </td>
              <td class="column-5">{{ item.line_price | money }}</td>
            </tr>
            {% endfor %}
          </table>
        </div>
      </div>
      <div class="flex-w flex-sb-m p-t-25 p-b-25 bo8 p-l-35 p-r-60 p-lr-15-sm">
        <div class="flex-w flex-m w-full-sm">
          <div class="size11 bo4 m-r-10">
            <input class="sizefull s-text7 p-l-22 p-r-22" type="text" name="discount" id="discount" placeholder="Coupon Code">
          </div>
          <div class="size12 trans-0-4 m-t-10 m-b-10 m-r-10">
            <!-- Button -->
            <!-- <button class="flex-c-m sizefull bg1 bo-rad-23 hov1 s-text1 trans-0-4">
Apply coupon
</button> -->
          </div>
        </div>
        <div class="size10 trans-0-4 m-t-10 m-b-10">
          <!-- Button -->
          <button class="update-cart flex-c-m sizefull bg1 bo-rad-23 hov1 s-text1 trans-0-4">
            {{ 'cart.general.update' | t }}
          </button>
        </div>
      </div>
      <!-- Total -->
      <div class="bo9 w-size18 p-l-40 p-r-40 p-t-30 p-b-38 m-t-30 m-r-0 m-l-auto p-lr-15-sm">
        <h5 class="m-text20 p-b-24">
          Cart Totals
        </h5>
        <!--  -->
        {% if cart.total_discounts > 0 %}
        {% assign savings = cart.total_discounts | money %}
        <div class="flex-w flex-sb-m p-b-12">
          <span class="s-text18 w-size19 w-full-sm">
            {{ 'cart.general.discount' | t }}:
          </span>
          <span class="m-text21 w-size20 w-full-sm">
            {{ 'cart.general.savings_html' | t: price: savings }}
          </span>
        </div>
        {% endif %}
        <!--  <div class="flex-w flex-sb-m p-b-12">
<span class="s-text18 w-size19 w-full-sm">
{{ 'cart.general.subtotal' | t }}:
</span>
<span class="m-text21 w-size20 w-full-sm">
{{ cart.total_price | money }}
</span>
</div>
-->
        <!--  -->
        <div class="flex-w flex-sb bo10 p-t-15 p-b-20">
          <span class="s-text18 w-size19 w-full-sm">
            Shipping:
          </span>
          <div class="w-size20 w-full-sm">
            <!-- <p class="s-text8 p-b-23">
There are no shipping methods available. Please double check your address, or contact us if you need any help.
</p> -->
            {% include 'shipping-calculator' %}
            <!--
<div class="rs2-select2 rs3-select2 rs4-select2 bo4 of-hidden w-size21 m-t-8 m-b-12">
<select class="selection-2" name="country">
<option>Select a country...</option>
<option>US</option>
<option>UK</option>
<option>Japan</option>
</select>
</div>
<div class="size13 bo4 m-b-12">
<input class="sizefull s-text7 p-l-15 p-r-15" type="text" name="state" placeholder="State /  country">
</div>
<div class="size13 bo4 m-b-22">
<input class="sizefull s-text7 p-l-15 p-r-15" type="text" name="postcode" placeholder="Postcode / Zip">
</div>
<div class="size14 trans-0-4 m-b-10">
<!-- Button -->
            <!--<button class="flex-c-m sizefull bg1 bo-rad-23 hov1 s-text1 trans-0-4">
Update Totals
</button>
</div>
-->
          </div>
        </div>
        <!--  -->
        <div class="flex-w flex-sb-m p-t-26 p-b-30">
          <span class="m-text22 w-size19 w-full-sm">
            {{ 'cart.general.subtotal' | t }}:
          </span>
          <span class="m-text21 w-size20 w-full-sm">
            {{ cart.total_price | money }}
          </span>
        </div>
        <div class="size15 trans-0-4">
          <!-- Button -->
          <button onclick="document.getElementById('cart_form').submit(); return false;" class="flex-c-m sizefull bg1 bo-rad-23 hov1 s-text1 trans-0-4">
            {{ 'cart.general.proceed_checkout' | t }}
          </button>
          {% if additional_checkout_buttons %}
          {{ content_for_additional_checkout_buttons }}
          {% endif %}
        </div>
      </div>
    </form>
    {% else %}
    <h1 class="page-heading">{{ 'cart.general.empty' | t }}</h1>
    <p>{{ 'cart.general.continue_browsing_html' | t }}</p>
    {% endif %}
  </div>
</section>
{% unless settings.shipping_calculator == 'Disabled' %}
<script>
  window.theme = window.theme || {};
  theme.strings = {
    shippingCalcSubmitButton: {{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' | json }},
    shippingCalcSubmitButtonDisabled: {{ settings.shipping_calculator_submit_button_label_disabled | default: 'Calculating...' | json }},
    {% if customer %}shippingCalcCustomerIsLoggedIn: true,{% endif %}
    shippingCalcMoneyFormat: {{ shop.money_with_currency_format | json }}
  }
</script>

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
<script src="/services/javascripts/countries.js"></script>
<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
{{ 'shipping-cart.js' | asset_url | script_tag }}

<script>
  Shopify.Cart.ShippingCalculator.show( {
    submitButton: theme.strings.shippingCalcSubmitButton,
    submitButtonDisabled: theme.strings.shippingCalcSubmitButtonDisabled,
    customerIsLoggedIn: theme.strings.shippingCalcCustomerIsLoggedIn,
    moneyFormat: theme.strings.shippingCalcMoneyFormat
  } );
</script>
{% endunless %}

 

View solution in original post

tim
Shopify Partner
3765 351 1384

This is an accepted solution.

Yes, this kind of button will simply submit the form. I have not found any JS handler as well. 

You'd probably want to try this code instead of a button:

 

<a class="s-text7 dis-inline-block m-l-30 m-t-10 p-l-10 p-r-10 p-t-5 p-b-5 bo1 bo-rad-23 hov1 trans-0-4"
    href="/cart/change?line={{ forloop.index }}&quantity=0"
>
    {{ 'cart.general.remove' | t }}
</a>

 

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

herbovedam
Explorer
50 6 3

This is an accepted solution.

Thanks, it worked, but the button looks disoriented now. please fix the CSS and give me the code,  @tim  

View solution in original post

tim
Shopify Partner
3765 351 1384

This is an accepted solution.

Amended the code above, try it.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 6 (6)

Jasoliya
Shopify Partner
4822 625 1225

This is an accepted solution.

Hi @herbovedam 

i can see its because  you taken remove as form <button> chnage it from button to input type from cart page , right now its button so submitting form to cehckout

best regard 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
herbovedam
Explorer
50 6 3

This is an accepted solution.

Now, nothing is happening, when i click the button, here is the code which I fixed and also the entire car.liquid code  please help @websensepro 

@Jasoliya 

 

 

 <input type="button" value="REMOVE" class="remove  s-text7 flex-c-m m-l-30 m-t-10 p-l-10 p-r-10 p-t-5 p-b-5 bo1 bo-rad-23 hov1 trans-0-4" data-key="{{ item.variant_id }}"/>

 

 

 

 

 

<!-- Title Page -->
<section class="bg-title-page p-t-40 p-b-50 flex-col-c-m" {% if settings.show_cart_top_image %}
         style="background-image:url({{ 'cart_top.jpg' | asset_url }});" {% endif %}>
  <h2 class="l-text2 t-center">
    {{ page_title }}
  </h2>
</section>
<!-- Cart -->
<section class="cart bgwhite p-t-70 p-b-100">
  <div class="container">
    {% if cart.item_count > 0 %}
    <form action="/checkout" method="post" id="cart_form">
      <!-- Cart item -->
      <div class="container-table-cart pos-relative">
        <div class="wrap-table-shopping-cart bgwhite">
          <table class="table-shopping-cart">
            <tr class="table-head">
              <th class="column-1"></th>
              <th class="column-2">{{ 'cart.general.heading_product_name' | t }}</th>
              <th class="column-3">{{ 'cart.general.heading_unit_price' | t }}</th>
              <th class="column-4 p-l-70">{{ 'cart.general.heading_quantity' | t }}</th>
              <th class="column-5">{{ 'cart.general.heading_total' | t }}</th>
            </tr>
            {% for item in cart.items %}
            <tr class="table-row" data-line="{{ forloop.index }}">
              <td class="column-1">
                <div class="cart-img-product b-rad-4 o-f-hidden">
                  <a href="{{ item.url }}">
                    <img src="{{ item | img_url: '90x120' }}"  alt="{{ item.title | escape }}" title="{{ item.title | escape }}" class="" />
                  </a>
                </div>
              </td>
              <td class="column-2">
                <a href="{{ item.url }}">{{ item.product.title }}</a>
                {% unless item.variant.title contains 'Default' %}
                <br />
                <small>{{ item.variant.title }}</small>
                {% endunless %}

                {% if settings.product_quantity_message and item.variant.inventory_management and item.variant.inventory_quantity <= 0 and item.variant.incoming %}
                {% assign date = item.variant.next_incoming_date | date: format: 'month_day_year' %}
                <br />
                <small>{{ 'products.product.will_not_ship_until' | t: date: date }}</small>
                {% endif %}

                {% assign property_size = item.properties | size %}
                {% if property_size > 0 %}
                {% for p in item.properties %}
                {% if forloop.first %}<br>{% endif %}
                {% unless p.last == blank %}
                {{ p.first }}:

                {% if p.last contains '/uploads/' %}
                <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                {% else %}
                {{ p.last }}
                {% endif %}

                <br>
                {% endunless %}
                {% endfor %}
                {% endif %}
              </td>
              <td class="column-3">{{ item.price | money }}</td>
              <td class="column-4">
                <div class="flex-w bo5 of-hidden w-size17">
                  <button class="btn-num-product-down color1 flex-c-m size7 bg8 eff2">
                    <i class="fs-12 fa fa-minus" aria-hidden="true"></i>
                  </button>
                  <input type="number" name="updates[]" id="updates_{{ item.id }}" data-key="{{ item.id }}" value="{{ item.quantity }}" min="0" class="size8 m-text18 t-center num-product" data-line="{{ forloop.index }}">
                  <button class="btn-num-product-up color1 flex-c-m size7 bg8 eff2">
                    <i class="fs-12 fa fa-plus" aria-hidden="true"></i>
                  </button>
                </div>


                 <!-- <button class="remove  s-text7 flex-c-m m-l-30 m-t-10 p-l-10 p-r-10 p-t-5 p-b-5 bo1 bo-rad-23 hov1 trans-0-4" data-key="{{ item.variant_id }}">
					{{ 'cart.general.remove' | t }}
				</button> -->


                <input type="button" value={{ 'cart.general.remove' | t }} class="remove  s-text7 flex-c-m m-l-30 m-t-10 p-l-10 p-r-10 p-t-5 p-b-5 bo1 bo-rad-23 hov1 trans-0-4" data-key="{{ item.variant_id }}"/>
                
				
              </td>
              <td class="column-5">{{ item.line_price | money }}</td>
            </tr>
            {% endfor %}
          </table>
        </div>
      </div>
      <div class="flex-w flex-sb-m p-t-25 p-b-25 bo8 p-l-35 p-r-60 p-lr-15-sm">
        <div class="flex-w flex-m w-full-sm">
          <div class="size11 bo4 m-r-10">
            <input class="sizefull s-text7 p-l-22 p-r-22" type="text" name="discount" id="discount" placeholder="Coupon Code">
          </div>
          <div class="size12 trans-0-4 m-t-10 m-b-10 m-r-10">
            <!-- Button -->
            <!-- <button class="flex-c-m sizefull bg1 bo-rad-23 hov1 s-text1 trans-0-4">
Apply coupon
</button> -->
          </div>
        </div>
        <div class="size10 trans-0-4 m-t-10 m-b-10">
          <!-- Button -->
          <button class="update-cart flex-c-m sizefull bg1 bo-rad-23 hov1 s-text1 trans-0-4">
            {{ 'cart.general.update' | t }}
          </button>
        </div>
      </div>
      <!-- Total -->
      <div class="bo9 w-size18 p-l-40 p-r-40 p-t-30 p-b-38 m-t-30 m-r-0 m-l-auto p-lr-15-sm">
        <h5 class="m-text20 p-b-24">
          Cart Totals
        </h5>
        <!--  -->
        {% if cart.total_discounts > 0 %}
        {% assign savings = cart.total_discounts | money %}
        <div class="flex-w flex-sb-m p-b-12">
          <span class="s-text18 w-size19 w-full-sm">
            {{ 'cart.general.discount' | t }}:
          </span>
          <span class="m-text21 w-size20 w-full-sm">
            {{ 'cart.general.savings_html' | t: price: savings }}
          </span>
        </div>
        {% endif %}
        <!--  <div class="flex-w flex-sb-m p-b-12">
<span class="s-text18 w-size19 w-full-sm">
{{ 'cart.general.subtotal' | t }}:
</span>
<span class="m-text21 w-size20 w-full-sm">
{{ cart.total_price | money }}
</span>
</div>
-->
        <!--  -->
        <div class="flex-w flex-sb bo10 p-t-15 p-b-20">
          <span class="s-text18 w-size19 w-full-sm">
            Shipping:
          </span>
          <div class="w-size20 w-full-sm">
            <!-- <p class="s-text8 p-b-23">
There are no shipping methods available. Please double check your address, or contact us if you need any help.
</p> -->
            {% include 'shipping-calculator' %}
            <!--
<div class="rs2-select2 rs3-select2 rs4-select2 bo4 of-hidden w-size21 m-t-8 m-b-12">
<select class="selection-2" name="country">
<option>Select a country...</option>
<option>US</option>
<option>UK</option>
<option>Japan</option>
</select>
</div>
<div class="size13 bo4 m-b-12">
<input class="sizefull s-text7 p-l-15 p-r-15" type="text" name="state" placeholder="State /  country">
</div>
<div class="size13 bo4 m-b-22">
<input class="sizefull s-text7 p-l-15 p-r-15" type="text" name="postcode" placeholder="Postcode / Zip">
</div>
<div class="size14 trans-0-4 m-b-10">
<!-- Button -->
            <!--<button class="flex-c-m sizefull bg1 bo-rad-23 hov1 s-text1 trans-0-4">
Update Totals
</button>
</div>
-->
          </div>
        </div>
        <!--  -->
        <div class="flex-w flex-sb-m p-t-26 p-b-30">
          <span class="m-text22 w-size19 w-full-sm">
            {{ 'cart.general.subtotal' | t }}:
          </span>
          <span class="m-text21 w-size20 w-full-sm">
            {{ cart.total_price | money }}
          </span>
        </div>
        <div class="size15 trans-0-4">
          <!-- Button -->
          <button onclick="document.getElementById('cart_form').submit(); return false;" class="flex-c-m sizefull bg1 bo-rad-23 hov1 s-text1 trans-0-4">
            {{ 'cart.general.proceed_checkout' | t }}
          </button>
          {% if additional_checkout_buttons %}
          {{ content_for_additional_checkout_buttons }}
          {% endif %}
        </div>
      </div>
    </form>
    {% else %}
    <h1 class="page-heading">{{ 'cart.general.empty' | t }}</h1>
    <p>{{ 'cart.general.continue_browsing_html' | t }}</p>
    {% endif %}
  </div>
</section>
{% unless settings.shipping_calculator == 'Disabled' %}
<script>
  window.theme = window.theme || {};
  theme.strings = {
    shippingCalcSubmitButton: {{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' | json }},
    shippingCalcSubmitButtonDisabled: {{ settings.shipping_calculator_submit_button_label_disabled | default: 'Calculating...' | json }},
    {% if customer %}shippingCalcCustomerIsLoggedIn: true,{% endif %}
    shippingCalcMoneyFormat: {{ shop.money_with_currency_format | json }}
  }
</script>

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
<script src="/services/javascripts/countries.js"></script>
<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
{{ 'shipping-cart.js' | asset_url | script_tag }}

<script>
  Shopify.Cart.ShippingCalculator.show( {
    submitButton: theme.strings.shippingCalcSubmitButton,
    submitButtonDisabled: theme.strings.shippingCalcSubmitButtonDisabled,
    customerIsLoggedIn: theme.strings.shippingCalcCustomerIsLoggedIn,
    moneyFormat: theme.strings.shippingCalcMoneyFormat
  } );
</script>
{% endunless %}

 

tim
Shopify Partner
3765 351 1384

This is an accepted solution.

Yes, this kind of button will simply submit the form. I have not found any JS handler as well. 

You'd probably want to try this code instead of a button:

 

<a class="s-text7 dis-inline-block m-l-30 m-t-10 p-l-10 p-r-10 p-t-5 p-b-5 bo1 bo-rad-23 hov1 trans-0-4"
    href="/cart/change?line={{ forloop.index }}&quantity=0"
>
    {{ 'cart.general.remove' | t }}
</a>

 

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
herbovedam
Explorer
50 6 3

This is an accepted solution.

Thanks, it worked, but the button looks disoriented now. please fix the CSS and give me the code,  @tim  

tim
Shopify Partner
3765 351 1384

This is an accepted solution.

Amended the code above, try it.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
herbovedam
Explorer
50 6 3

Thank You sooo much, everything is fixed now.