Add to cart button functionality

Technical Q&A
, ,
1

I am using Shopify theme named Impact. There I have installed an app named GoodApps for adding warranty. Now in product page after clicking add to cart button a notification comes that product is added to cart with two button- view cart and buy now. I want to add a button in that notification which I have already done. Now I want that when I will click that button then only that warranty part will show otherwise it will be hidden.

product information is included in product-info.liquid file and the notification part code is coming from variant-added.liquid file.

How to implement this feature in Shopify

2

Hi,

Edit variant-added.liquid to add new button and a hidden warranty section in the notification.
Update product-info.liquid with warranty content
Use javascript to handle button click and toggle

Example of script

document.addEventListener('DOMContentLoaded', function() {
  // Ensure the script runs after the document is fully loaded
  const showWarrantyButton = document.getElementById('show-warranty');
  const warrantyInfo = document.getElementById('warranty-info');

  if (showWarrantyButton && warrantyInfo) {
    showWarrantyButton.addEventListener('click', function() {
      // Toggle the visibility of the warranty info
      if (warrantyInfo.style.display === 'none') {
        warrantyInfo.style.display = 'block';
        showWarrantyButton.textContent = 'Hide Warranty Information';
      } else {
        warrantyInfo.style.display = 'none';
        showWarrantyButton.textContent = 'Show Warranty Information';
      }
    });
  }
});

Add script at theme code example