Implementing AJAX Interactivity for custom section

Store Design
, , ,

Topic summary

A user customized their product-complementary.liquid file but encountered an issue: clicking “Add to Cart” redirects visitors to the cart page instead of opening the cart drawer (despite successfully adding products).

Current Setup:

  • Using Motion theme with cart drawer enabled
  • Button wrapped in a form with action="/cart/add"
  • Attempted using /cart/add.js but resulted in a blank screen

Suggested Solution:
After making an AJAX cart call, programmatically trigger the cart drawer by:

  • Targeting the cart menu button and using .click() via JavaScript to open the drawer
  • Some themes provide dedicated functions/events for opening drawers

Important Considerations:

  • Simply opening the drawer doesn’t guarantee updated contents
  • Advanced customization may be needed to control cart drawer content updates programmatically
  • Some themes have built-in functions/events that update drawer contents in addition to opening them

The discussion remains open with the user seeking further assistance on implementing AJAX functionality without page redirects.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
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.