Shopify themes, liquid, logos, and UX
I need ajax 'add to cart' button in collection page.
I just need defaut popup on click of add to cart.
Thanks
Solved! Go to the solution
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
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
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024