Solved

DAWN THENE 2.0 Add to cart on collection page with ajax like it works in product single page

Juhri
Tourist
6 0 2

I need ajax 'add to cart' button in collection page.
I just need defaut popup on click of add to cart.

Thanks

Accepted Solutions (3)

Developer-G
Shopify Partner
3032 593 846

This is an accepted solution.

Hello @Juhri ,

1. Go to Online Store->Theme->Edit code
2. Snippets->product-card.liquid  now here search for this code

{%- endform -%}

Once you found it then just before of it add this code 

<div class="product-form__buttons">
          <button
                  type="submit"
                  name="add"
                  class="product-form__submit button button--full-width button--secondary"
                  {% if product_card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                  >
            {%- if product_card_product.selected_or_first_available_variant.available -%}
            {{ 'products.product.add_to_cart' | t }}
            
            {%- endif -%}
            
          </button>
          
        </div>

Now save it and you will find in collection page 'atc' is available. 


Next under 'Layout' edit theme.liquid and add this code just before the </head> tag


{% if template == 'collection' %}
    <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
    {% endif %}

 

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Developer-G
Shopify Partner
3032 593 846

This is an accepted solution.

My mistake 

1. Go to Online Store->Theme->Edit code
2. Snippets->product-card.liquid  now here search for this code

 

{% render 'price', product: product_card_product, price_class: '' %}
      </div>

 

Once you found it then just before of it add this code 

 

<product-form class="product-form">
        {%- form 'product', product_card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
        <input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">
        {{ form | payment_terms }}
        <input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">
        <div class="product-form__buttons">
          <button
                  type="submit"
                  name="add"
                  class="product-form__submit button button--full-width button--secondary"
                  {% if product_card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                  >
            {%- if product_card_product.selected_or_first_available_variant.available -%}
            {{ 'products.product.add_to_cart' | t }}
            
            {%- endif -%}
            
          </button>
          
        </div>
        {%- endform -%}
        </product-form>

 

 

 

Next under 'Layout' edit theme.liquid and add this code just before the </head> tag

{% if template == 'collection' %}
    <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
    {% endif %}

 

Thanks

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Developer-G
Shopify Partner
3032 593 846

This is an accepted solution.

Hello @designrepo ,

 

Replace the code which you added in theme.luquid just before the </head> with this one

{% if template == 'collection' or  template == 'index'  %}
    <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
    {% endif %}

 

Thanks

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 44 (44)

Developer-G
Shopify Partner
3032 593 846

This is an accepted solution.

Hello @Juhri ,

1. Go to Online Store->Theme->Edit code
2. Snippets->product-card.liquid  now here search for this code

{%- endform -%}

Once you found it then just before of it add this code 

<div class="product-form__buttons">
          <button
                  type="submit"
                  name="add"
                  class="product-form__submit button button--full-width button--secondary"
                  {% if product_card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                  >
            {%- if product_card_product.selected_or_first_available_variant.available -%}
            {{ 'products.product.add_to_cart' | t }}
            
            {%- endif -%}
            
          </button>
          
        </div>

Now save it and you will find in collection page 'atc' is available. 


Next under 'Layout' edit theme.liquid and add this code just before the </head> tag


{% if template == 'collection' %}
    <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
    {% endif %}

 

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
Juhri
Tourist
6 0 2

It works, thank you 🙂 

Linda_Li-Chee-M
Tourist
4 0 2

Hi @Developer-G,

I'm trying out the Dawn theme and was trying to do this, but couldn't find "{%- endform -%}" in my product-card.liquid code for some reason. Do you know why?

Thanks.

Developer-G
Shopify Partner
3032 593 846

This is an accepted solution.

My mistake 

1. Go to Online Store->Theme->Edit code
2. Snippets->product-card.liquid  now here search for this code

 

{% render 'price', product: product_card_product, price_class: '' %}
      </div>

 

Once you found it then just before of it add this code 

 

<product-form class="product-form">
        {%- form 'product', product_card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
        <input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">
        {{ form | payment_terms }}
        <input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">
        <div class="product-form__buttons">
          <button
                  type="submit"
                  name="add"
                  class="product-form__submit button button--full-width button--secondary"
                  {% if product_card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                  >
            {%- if product_card_product.selected_or_first_available_variant.available -%}
            {{ 'products.product.add_to_cart' | t }}
            
            {%- endif -%}
            
          </button>
          
        </div>
        {%- endform -%}
        </product-form>

 

 

 

Next under 'Layout' edit theme.liquid and add this code just before the </head> tag

{% if template == 'collection' %}
    <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
    {% endif %}

 

Thanks

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
Linda_Li-Chee-M
Tourist
4 0 2

Thanks @Developer-G. This seemed to work, however, sold out product listings are now showing a blank box/button underneath them. Is there a way to get rid of the button/box on sold out listings?

 

Developer-G
Shopify Partner
3032 593 846

You can extend the code a/to your need further. 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
AvidBrio
Shopify Expert
295 17 29

@Developer-G 

Thanks for the help it works for the collection page with add to cart button when I added  quantity-input box but it doesn't work.
I added 

 

<quantity-input 

 

 

before the added to cart button 

 

        <product-form class="product-form">
          {%- form 'product', product_card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
          <input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">
          {{ form | payment_terms }}
          <input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">
         
          <div class="product-form__input product-form__quantity" {{ block.shopify_attributes }}>
            <label class="form__label" for="Quantity-{{ section.id }}">
              {{ 'products.product.quantity.label' | t }}
            </label>
            <quantity-input class="quantity">
              <button class="quantity__button no-js-hidden" name="minus" type="button">
                <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
                {% render 'icon-minus' %}
              </button>
              <input class="quantity__input"
                  type="number"
                  name="quantity"
                  id="Quantity-{{ section.id }}"
                  min="1"
                  value="1"
                  form="product-form-{{ section.id }}"
                >
              <button class="quantity__button no-js-hidden" name="plus" type="button">
                <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
                {% render 'icon-plus' %}
              </button>
            </quantity-input>
          </div>
          
          <div class="product-form__buttons">
            <button
                    type="submit"
                    name="add"
                    class="product-form__submit button button--full-width button--secondary"
                    {% if product_card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                    >
              {%- if product_card_product.selected_or_first_available_variant.available -%}
              {{ 'products.product.add_to_cart' | t }}
              
              {%- endif -%}
              
            </button>
            
          </div>
          {%- endform -%}
          </product-form>

        {% render 'price', product: product_card_product, price_class: '' %}
          

 



The quantity goes to cart one but filled out 5 
Expected output  : cart quantity 5

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
Developer-G
Shopify Partner
3032 593 846

@AvidBrio  Yes it will work without quantity selector. If you want quantity button you can extend the code a/to your need.

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
AvidBrio
Shopify Expert
295 17 29

@Developer-G 

can you see my code posted added before the add to cart button?  as per the main product template, it should be work do you have a suggestion. I think you can help with it.


If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
FS2022
Excursionist
18 1 5

Thanks a lot @Developer-G !

 

Is that also possible with a variant selector? (I sell Apparel, so I'd need a selector with size/color)

 

Best regards!

 

Lucas

Developer-G
Shopify Partner
3032 593 846

Hello @FS2022 ,

Yes possible you can extend the provided code a/to your need but if you are looking for code instructions sorry I can't. Alternatively you can drop me an email for quote to the customization you need.

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
mowais90
Shopify Partner
2 0 0

Hello Guleria,

 

I have copied the following code of the variant selector drop-down menu option from the "main-product.liquid" file into the "card-product.liquid" for incorporating its functionality on the collection page along with atc button.

 

<variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
<div class="product-form__input product-form__input--dropdown">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<select id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
{%- for value in option.values -%}
<option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
{{ value }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endfor -%}

<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>

 

The problem is that for some reason this implementation doesn't work. The "atc" functionality works perfectly but when the drop-down is implemented, it fails.

 

Can you please guide me a bit on how to get this fixed. I have a feeling that there's some small thing that I'm overlooking and will require some minor change in the code to get the desired result.

 

I would really appreciate your response and guidance on this issue.

 

Thanks

AvidBrio
Shopify Expert
295 17 29

@FS2022   you can copy the code from the Dawn theme  theme/section/featured-product.liquid

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
designrepo
Excursionist
48 0 4

Ajax not working. When I click add to cart button, its go to cart page. I want to stay on collection page. Please help me.

Developer-G
Shopify Partner
3032 593 846

Hello @designrepo ,

Please read out the post title this post is for ajax cart drawer in collection page not in homepage featured section.
btw find your featured collection template code and implement same code there and it will start working.

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
designrepo
Excursionist
48 0 4

Thanks for reply me. I know this post for collection page. again thanks its working on collection page. Please help me, I want to same in featured collection page. please send me code.

 

Developer-G
Shopify Partner
3032 593 846

I'll check and post within a week or when I have time, thanks.

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
designrepo
Excursionist
48 0 4

Okay, Thank you so much for helping me.

Developer-G
Shopify Partner
3032 593 846

This is an accepted solution.

Hello @designrepo ,

 

Replace the code which you added in theme.luquid just before the </head> with this one

{% if template == 'collection' or  template == 'index'  %}
    <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
    {% endif %}

 

Thanks

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
designrepo
Excursionist
48 0 4

Thank you very much my friend.!!!!!!!!!!!!!!!!!!!

meandatree
Excursionist
25 0 3

Hi Guleria, followed exact corrected instructions. Any reason why add to cart button only takes me to product page? Product neither registers in cart. 

designrepo
Excursionist
48 0 4

Thanks its working on collection page, but not working on home page/featured collection page. Please help me..

Abhay117
Visitor
1 0 0

I added code as per your guide.
but I found this error in the console.

Abhay117_0-1633684335037.png

 

Payal_6268
New Member
5 0 0

Remove "<product-form class="product-form">"  From the code. 

Also, redirect to detail page issue is because of the CSS. 

.card-wrapper .full-unstyled-link::after 
 
They added 100% height. Try to change it.
 
AussieEComStore
Tourist
7 0 0

What file do I change the CSS on? And what do I change .card-wrapper .full-unstyled-link::after it to?

Payal_6268
New Member
5 0 0

I have created a custom CSS and added the CSS there.

You simply can override the CSS.

Try this or if you have any HTML designers ask them to check. Else share the URL. Will check and let you know.

 

.card-wrapper .full-unstyled-link::after { z-index: -1; }

 

Habib_Rayan
Shopify Partner
6 0 3

I have the same problem, can you talk to me? how can you solve this problem? 

Thanks advance

Habib_Rayan
Shopify Partner
6 0 3

Yow was solve this problem?

cris88
Visitor
3 0 0

Hello, really thanks so helpfull! But in my case doesn't work, i mean the button add to cart is present but once i click the button, it bring me to the product page. No add to cart here, can you help me? I copy your code, thanks

Developer-G
Shopify Partner
3032 593 846

Hello @cris88 , @Abhay117 ,

How many other customization you already did in theme ?
If you did then first revert them and then try the code. Alternatively check the conflicts manually and try to fix them.

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
cris88
Visitor
3 0 0

I just installed dawn, this is the first customisation. There is the button "atc" but it doens't work. CIf i click it, the product page will open.

AussieEComStore
Tourist
7 0 0

I am having the same issue, no previous customisation done on the theme.

AussieEComStore
Tourist
7 0 0

Is there a solution to this?

Developer-G
Shopify Partner
3032 593 846

For those to whom this code is not working.

Once please check the comment day I made and check what version of Dawn was available on that day and what version of Dawn theme is available in these days.
If you find difference then maybe there is chance that theme author made a update in this version and the solution I provided is not compatible with new version. So I suggest just take the idea from my solution and implement it in the version you are using.

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
mjdubarr
Pathfinder
109 0 29

Hello,

 

I see the button but it doesn't adapt to the color scheme I chose for solid button color. The path also goes straight to the product rather than adding to the cart. It seems the function is broken because hovering over the button doesn't expand like the theme buttons do. What can be added to fix this?

Lauren_Fowler
Shopify Partner
3 0 1

I'm having this same issue. It all shows up as a button and quantity sector, but when you click on it, it goes to the product page.

Juhri
Tourist
6 0 2

The solution @Developer-G  provided was compatible with Dawn theme version 1.1.0 and the same I'm using

Lauren_Fowler
Shopify Partner
3 0 1

I've tried it on two stores and a brand new version of the theme as a test and it does the same thing.

bearandivory
Visitor
1 0 0

I've been able to adjust this code to meet my needs and it's amazing, so thank you so much! however, any items that are sold out are simply blank inside. is there a way to fix this?

 

mjdubarr
Pathfinder
109 0 29

I tried the code but it directs the customer to the product page instead of adding to cart, also, the button is not centered and doesn't animate on hover. Is it possible to make these adjustments?

joaomacedo
Visitor
2 0 2

Hello,

 

I implemented your solution and it«s giving me this error:

 

Liquid error (card-product line 140): product form must be given a product

 

Any idea why? Thanks!

meandatree
Excursionist
25 0 3

This solution just takes me to the product page. Doesn't activate minicart or add product to cart. Any suggestions? Is there a step missing to activate notification cart like the product page?

meandatree
Excursionist
25 0 3

Add to cart button takes me to product with the above code. I just downloaded Dawn theme. Is there another form of successful code that works?

Appreciated thanks

shopdev4
Shopify Partner
1 0 0

The easiest way in 2.0 is to simply check 'Enable quick add button' in the Collection settings.

 

When customizing your theme, go to the homepage > go to the 'Featured collection' > check 'Enable quick add button'.