How to Add a Loading Animation on PrestaShop Product Combinations

Product combinations are a crucial feature in PrestaShop, allowing merchants to offer different variations of the same product (e.g., size, color). However, when customers select a combination, the update of product details (such as price, stock, or images) may take some time. To improve the user experience, adding a loading animation can visually indicate that the combination is being processed

1. Understanding Product Combinations in PrestaShop

   PrestaShop uses AJAX to dynamically update product information when a customer selects different combinations. By default, there is no visual feedback indicating that a process is happening in the background. Adding a loading animation is useful in such cases, especially if the update takes more than a few seconds.

2. Create a Custom Loading Animation

   To get started, we need to create the loading animation that will be displayed during the AJAX request.

   1. Create a Spinner: Use a simple CSS spinner that will appear during the loading process.

Add the following CSS code to your theme's CSS file (e.g., themes/your-theme/assets/css/custom.css):

    .loading-spinner {
        border: 16px solid #f3f3f3;
        border-top: 16px solid #3498db;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 2s linear infinite;
        display: none;
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .loading-active {
        display: block !important;
    }

3. Add the Spinner to Your Product Page Template

   Next, you need to place the spinner in the product page template (product.tpl). In PrestaShop, this file is typically located in themes/your-theme/templates/catalog/product.tpl.

    <!-- add above {block name='product_buy'} -->
    <div class="loading-spinner" id="combination-loader"></div>
   

4. Implement JavaScript to Trigger the Spinner

   Now, we need to show the spinner when the combination is being processed and hide it once the update is completed.

   1. Open your theme's custom JavaScript file (e.g., themes/your-theme/assets/js/custom.js).

   2. Use the following code to listen for PrestaShop's combination change event:

       $(document).ready(function() {
           var loader = $('#combination-loader');
      
           // Listen for combination change event
           prestashop.on('updateProduct', function () {
               loader.addClass('loading-active');
           });
      
           prestashop.on('updatedProduct', function () {
               // Hide spinner when combination update is complete
               loader.removeClass('loading-active');
           });
       });
      

Conclusion:

Adding a loading animation when customers select product combinations in PrestaShop improves the user experience by providing visual feedback that the product details are being updated. With just a few lines of CSS, HTML, and JavaScript, you can enhance your store's performance and keep customers engaged.

You can customize the appearance of the spinner to match your store's branding. Change the spinner's color, size, or even use a custom image instead of CSS to better align with your design.