Integrating the Slide Cart App with Product Samples App

Introduction

In this blog post, we’ll go through how to integrate the Slide Cart App with the Product Samples App to enhance your shopping experience for customers wanting to add product samples to their cart without refreshing the page.

Understanding the Requirement

A customer recently approached us with a need for their e-commerce store to implement a feature where the Get a Sample button directly opens the Slide Cart, presenting a seamless experience.

How to Implement the Solution

To fulfill this request, follow these simple steps:

1. Modify the Theme’s Code

You’ll need to add a script to your theme that listens for when a sample product is added to the cart. The code snippet below captures that event and will call Slide Cart functions to update and open the cart:

<script type="text/javascript">
  window.ProductSample = window.ProductSample || {};
  if(typeof ProductSample === 'undefined') {
    var ProductSample = {};
  };

  ProductSample.type = 'ajax';
  
  document.body.addEventListener("addedToCart.productSamples", function (result) {
    if (typeof SLIDECART_UPDATE === 'function' && typeof SLIDECART_OPEN === 'function') {
      console.log('Open Slide Cart')
      SLIDECART_UPDATE();
      SLIDECART_OPEN();
    }
  });
</script>

2. Testing the Implementation

Clear your browser cache to test the changes. Add a sample product to the cart by clicking the ‘Get a Sample’ button. You should see the Slide Cart opening immediately without refreshing the page, making it user-friendly. If it doesn’t work as expected, double-check the console for any JavaScript errors.

Conclusion

By following these steps, you can successfully integrate the Slide Cart with the Product Samples App, providing a smooth shopping experience for your customers.

For additional support, feel free to reach out!