How to add "Add to Cart" button to custom page template

Solved

How to add "Add to Cart" button to custom page template

Boba
Shopify Partner
31 0 5

Hello all,

I am using the Prestige theme for my store and I am curious what the best way to go about adding an "Add to Cart" button to a custom page template and retaining the ajax add to cart functionality. Currently, when you click the "Add to Cart" button you are taken to /cart even though my theme setting is set to cart type: drawer.

The cart is empty and the cart icon does not display the red notification dot that signifies an item is in your cart. 

When you navigate anywhere else on the site the cart is not updated with the item you added from this custom page template. BUT if you were to navigate back to the page using this custom template the cart shows the item you added. 

What I have is a custom page template with a number of sections. 

Like so: page.custom-template.liquid

{% section 'page-hero' %}

{% section 'page-intro' %}

{% section 'page-featured-product' %}

...

Within the "page-featured-product section", I am using a "form" liquid tag.

{%- form 'product', product, class: 'ProductForm' -%}
<input type="hidden" name="id" data-productid="{{ product.id }}" class="product-select" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />
 
<button type="submit" class="ProductForm__AddToCart Button Button--primary Button--full" data-action="add-to-cart">
{%- if selected_variant.available -%}
<span>{{ 'product.form.add_to_cart' | t }}</span>
{%- else -%}
{{- 'product.form.sold_out' | t -}}
{%- endif -%}
</button>
 
{%- endform -%}
I added this line within the liquid form tag. Without that, I would receive an error when "Add to Cart" was clicked.
<input type="hidden" name="id" data-productid="{{ product.id }}" class="product-select" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />
 
I guess I'm out of ideas on how to make this work.
Accepted Solution (1)

Guleria
Shopify Partner
3186 620 891

This is an accepted solution.

Hello,

In Prestige theme check custom.js under Assets there you will find the hint to implement ajax cart in collection/custom page.

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
- Support me PayPal

View solution in original post

Replies 2 (2)

Guleria
Shopify Partner
3186 620 891

This is an accepted solution.

Hello,

In Prestige theme check custom.js under Assets there you will find the hint to implement ajax cart in collection/custom page.

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
- Support me PayPal
Boba
Shopify Partner
31 0 5

@Guleria , you are correct. I completely forgot about the comments in that file. Thank you