Automatically Open Off-Canvas Cart In Cornerstone

Introduction: Cornerstone is a powerful website building tool that offers various features to build incredible user experiences. One of its notable features is the Add to Cart Off Canvas, which provides a seamless and interactive way for users to add items to their shopping carts. In this blog post, we will explore the code snippet below which can be used to automatically open the cart when an item is added and explain how it works to create a much more intuitive experience:

// Add To Cart Off Canvas Open
(function($) {
  // Self-executing anonymous function to create a closure and pass jQuery as a parameter

  $(document).ready(function() {
    // Execute the following code when the document is ready

    // Attach click event handler to add class "x-active" to off-canvas elements
    $('.single_add_to_cart_button, .add_to_cart_button').click(function() {
      // Add class "x-active" to off-canvas elements after a delay of 30 milliseconds
      setTimeout(function() {
        $('.x-off-canvas.x-off-canvas-right').addClass('x-active');
      }, 30);
    });

    // Attach click event handler to remove class "x-active" from off-canvas elements
    $('.x-off-canvas-close, .x-off-canvas-close-right, .x-off-canvas-bg, .x-off-canvas-content').click(function() {
      // Remove class "x-active" from off-canvas elements
      $('.x-off-canvas.x-off-canvas-right').removeClass('x-active');
    });
  });
})(jQuery);

Exploring the Code:

The code snippet provided is a JavaScript function encapsulated in an Immediately Invoked Function Expression (IIFE). It leverages the jQuery library, as indicated by the (function($) { ... })(jQuery) syntax, ensuring compatibility and ease of use.

Initialization: The first line of code initiates the function within the document ready event, which ensures that the script executes once the HTML document has finished loading. This is important as it allows the script to manipulate the DOM elements safely.

Adding Items to the Cart:

The next section of code targets elements with the classes “single_add_to_cart_button” and “add_to_cart_button,” typically associated with buttons that trigger the addition of items to the cart. When either of these buttons is clicked, the code executes a function.

Inside this function, a timeout is set using the setTimeout function, which delays the execution of the following code block by 30 milliseconds. This slight delay can be beneficial to ensure the smooth transition and loading of any necessary resources.

The code block within the setTimeout function adds the class “x-active” to the DOM element with the class “x-off-canvas” and “x-off-canvas-right.” This modification alters the CSS properties of the off-canvas container, revealing it on the right-hand side of the screen. By doing so, the code provides an interactive and visually appealing way to show the contents of the cart without redirecting the user to a separate page.

Closing the Off Canvas:

To maintain a consistent user experience, the code also includes functionality to close the off-canvas container. Several elements trigger the closing action: the “x-off-canvas-close” class, the “x-off-canvas-close-right” class, the “x-off-canvas-bg” class, and the “x-off-canvas-content” class. Whenever any of these elements are clicked, another function is executed.

Inside this function, the code removes the class “x-active” from the “x-off-canvas” element, effectively hiding the off-canvas container. This allows users to easily dismiss the cart view and continue browsing the website seamlessly.

Conclusion:

The code provided demonstrates how Cornerstone’s Add to Cart Off Canvas feature can enhance the user experience on an e-commerce website. By incorporating this code snippet into your website, you can create an engaging and convenient shopping experience for your customers. The ability to add items to the cart without leaving the current page can significantly improve conversion rates and encourage users to explore and purchase more products. Utilizing Cornerstone’s powerful features, such as the Add to Cart Off Canvas, can give your e-commerce website a competitive edge in providing a modern and user-friendly shopping experience.