Adding an "Add to Cart" Button to Collection Pages in Debut Theme

Highlighted
New Member
1 0 0

This is happening to me too. Did you find a solution?

0 Likes
Highlighted
New Member
5 0 0

Hello,

 

I read this chat during a search for the add to cart button.  I have looked in the edit code section but I am having difficulty finding the exact place you referring to in the code.  Could you please clarify?

 

Thanks

0 Likes
Highlighted
Tourist
3 0 1

I'm having a problem with redirect when I click on my new "Add to Cart" button.

 

To be clear on my train of thought, I took the "add to cart" button code from my product-template.liquid file that I know works already and put it into my product-cart-grid.liquid exactly where I wanted it. Everything seems fine except that I want to stay on the page and add an item to the cart, not go to the product page, which is what it does now. This is slightly excessive, but I also pasted the entire code from my product-template.liquid file into my product-cart-grid.liquid file because I know that works how I want it to and the button DOES NOT work, so I'm not sure where at all to go from here. 

 

I followed this tutorial and it works on my product page, but not the home page or shop pages. 

 

I've read through several other threads and nothing will work. Any advice on what I can do?

I'm using the Debut theme. This is the url to my site. My button code is pasted below.

 

<div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
              <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
                <span id="AddToCartText-{{ section.id }}">
                  {% unless current_variant.available %}
                    {{ 'products.product.sold_out' | t }}
                  {% else %}
                    {{ 'products.product.add_to_cart' | t }}
                  {% endunless %}
                </span>
              </button>
              {% if section.settings.enable_payment_button %}
                {{ form | payment_button }}
              {% endif %}
            </div>

 

0 Likes
Highlighted
Explorer
56 2 19

@saknight19 Did you read "PurelyTru"s comment on that thread you linked? That solved it for me

0 Likes
Highlighted
Tourist
3 0 1

Yes, I tried that and it still didn't work

0 Likes
Highlighted
New Member
3 0 0

Hello! Thank you all for the great input!


I am trying to add the "Add to Cart" button for all products in my collection pages.  I added the code after the <div class="product__unit-price">, the code looks like this:

 

 

<div class="product__unit-price">
{%- capture unit_price_base_unit -%}
{%- if product_variant.unit_price_measurement -%}
{%- if product_variant.unit_price_measurement.reference_value != 1 -%}
{{ product_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ product_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- endcapture -%}

{{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}
</div>
{%- endif -%}
</div>

 

<form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />
</form> 

 

The problem is: both the quantity selector and the buttons that appear with "Add to Cart" automatically redirect people to the product page, instead of allowing them to add a quantity or directly add the product to their cart. The "Add to Cart" button doesn't act like a button to add to cart, but redirects to product page. 

 

 

Screenshot 2020-04-12 at 23.06.14.png

 

Does anybody have any idea how to fix this?

 

Website: www.strapitude.com

 

Thank you so much!

 

0 Likes
Highlighted
Tourist
6 0 4

You can find your answer here

0 Likes
Highlighted
New Member
3 0 0

I have followed all instructions carefully but i am still being redirected to the product page, instead of remaining on the collection page!! :( :(

 

Any clue how to fix it? i read comments but nothing worked!

 

Thank you so much in advance!

0 Likes
Highlighted
New Member
3 0 0

I am also using Motion theme!

0 Likes
Highlighted
Explorer
56 2 19

If the Ajax instructions aren't working for you, you probably need to hire someone.

0 Likes