Implementing AJAX Interactivity for custom section

Store Design
, , ,
1

Hello,

I have made a few tweaks to my product-complementary.liquid file and have made much progress. I have the styling and layout perfect right now, however, my store is set to display the cart drawer, and when you click “add to cart” here on the required for installation products, it just takes you to the cart page. (It does add the product so that’s great but it redirects the visitor.)

Currently, the btn is wrapped in a form with action “/cart/add”. I have tried “/cart/add.js” however it just takes me to a blank screen. Could any kind soul assist me in implementing the add to cart feature without redirecting my visitors?

REVISION Using the Motion theme.

Screenshot 2024-07-22 121032.png
Screenshot 2024-07-22 121032.png664×711 43.1 KB

For those capable and kind enough to inspect further - product page here

Thank you much.

2

In some themes after a cart ajax call runs, then just target the cart menu button and .click() it with javascript to open the related cart drawer that’s wired to such a button.

Some themes have a dedicated function|event to open drawers.

Note how this in no way guarantees the cart-drawer has up to date information of the ajax calls that were just made.

Again some themes may have functions/events to internally update the cart-drawer contents in addition to opening.

If not that is an advanced theme customization to change/copy the themes underlying cart behaviors to take programatic control of the contents update.