Add second add to cart button to narrative theme

Highlighted
New Member
4 0 0

Hi,

 

I would like to add a second add to cart button to the bottom of my product page on the narrative theme. I tried to just copy and paste the product form there, but it didn't have any effect. 

 

I would really appreciate if someone could help me out here! 

 

Best wishes,

 

Anton 

0 Likes
Highlighted
Shopify Partner
1840 177 711

Hello Anton,

 

Just adding a second form will have no effect as you noticed because the Narrative theme uses an AJAX cart. That means, if Javascript is enabled, it will use Javascript to add items to the cart of form submit. It does this through some code that can be found in your Assets/theme.js file (although beware that your theme uses the minified version of that, so changes you'd make to the un-minified file would not reflect). Within the handler function, it uses a selector to find the form element by it's CSS class name and proceed.

 

When you add a second form, with identical class, the selector simply returns the first element found which would be the top add to cart form in your case.

 

To change that and allow for a second add to cart button (and form) you would need to make that script aware of its existence. The selector is registered at

var selectors$12 = {
  productForm: '.product-form',

Here you'd need to add a new one such as

var selectors$12 = {
  productForm: '.product-form',
  productFormBottom: '.product-form-bottom',

Your second form should then also be changed to have that class name product-form-bottom.

 

Next, there is a line of code that registers the submit handler

this.on('submit', selectors$12.productForm, this._addItemToCart.bind(this));

Again, you'd need to add a handler for your second form

this.on('submit', selectors$12.productForm, this._addItemToCart.bind(this));
this.on('submit', selectors$12.productFormBottom, this._addItemToCart.bind(this));

No with those in place, you would need to minify the theme.js file and upload it to your Assets folder. That step isn't done by Shopify automatically as it's intended for developers more than non-developer merchants who'd likely be confused why there are 2 of the same / similar file.

 

Hope everything is clear - do let me know if you need some more information. I'd also stress the importance of making a theme duplicate before you attempt any changes in Javascript as these really do have the potential to break stuff - better be safe than sorry.

 

Best wishes!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Highlighted
Shopify Expert
319 40 62

Hello,

 

We have created an application that allows you to easily add a second button "add to cart" on the product pages : https://apps.shopify.com/second-add-to-cart-button

0 Likes
Highlighted
New Member
1 0 0

Hi

 

Did all the above mentioned and copied the minified code also but nothing happen? Everything on the product page works as it used to but no additional add to cart appeared. 

0 Likes