Expanding the functionality of ajaxify cart in Supply theme

Solved
Highlighted
New Member
3 1 0

Hi,

 

I've been making a new theme based on supply. We'd like to display accessories on a product page with an inline add to cart button. However a basic add to cart form will link straight to the cart page.

 

Having looked at the code it seems to only override the submit button of one form by id.Rewriting all the js to iterate through each form on the page is a little beyond me.

 

Preventing a redirect and unhiding the modal on click is easy enough, but this is far from a robust solution

 

Does anyone have an existing implementation?

 

Thanks,

0 Likes
Shopify Partner
1751 289 373

Hi @Matt_Stockdale 

If you want to add to cart accessories product product page without going to cart page then you have to implement ajax cart function for that,

You can add Add to cart js function that add product to cart, may be you can follow this 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes

Success.

New Member
3 1 0

Useless reply.

 

I ended up just copypasting the cart instantiation code and changing some of the selectors to the classes on the new forms, which seems to work just fine

 

      if ($('.addToCartForm').length) {          
          
      ajaxifyShopify.init({
        method: '{{ settings.ajax_cart_method }}',
        wrapperClass: 'wrapper',
        formSelector: '.addToCartForm',
        addToCartSelector: '.addToCart-' + sectionId,
        cartCountSelector: '.cart-count',
        toggleCartButton: '.cart-toggle',
        useCartTemplate: true,
        btnClass: 'btn',
        moneyFormat: moneyFormat,
        disableAjaxCart: false,
        enableQtySelectors: false
      });
        
      }
0 Likes