Hide Add to Cart Button from Facet View

In some implementations of SuiteCommerce Advanced (SCA) Vinson, Elbrus, Kilimanjaro, and Aconcagua, the Add to Cart button appears in the Product List Page for guest shoppers and shoppers who are not logged in to the Commerce web store.

These patch instructions describe how to correct this problem so that the Add to Cart button is hidden from guest shoppers and only displayed to logged-in shoppers.

To implement this patch, create a custom module to override the header.tpl and footer.tpl template files, which are part of the Header and Footer modules.

If you are unfamiliar with implementing patches for SCA, refer to the following:

• Best Practices for Customizing SCA.

• Patch Using Override Mode.

Step 1: Create the Override File

1. Following the instructions in the Patch Using Override Mode procedure, create a new directory and file:

   /Modules/extensions/Header@1.0.0/Templates/header.tpl

2. At the start of the new header.tpl file, enter the following code:

                   <script>
   setInterval(function(){
   if ( document.getElementsByClassName("product-views-price-login-to-see-prices")[0]
   ) { var divsToHide = document.getElementsByClassName("cart-add-to-cart-button-button"); for(var i = 0; i < divsToHide.length; i++){ divsToHide[i].style.display = "none"; }
   }
   }, 100);
   </script> 
   
                 

3. Save the header.tpl file.

4. Following the instructions in the Patch Using Override Mode procedure, create a new directory and file:

   /Modules/extensions/Footer@1.0.0/Templates/footer.tpl

5. At the end of the new footer.tpl file, enter the following code:

                   <script>
   setInterval(function(){
   if ( !document.getElementsByClassName("product-views-price-login-to-see-prices")[0]
   ) { var divsToShow = document.getElementsByClassName("cart-add-to-cart-button-button"); for(var i = 0; i < divsToShow.length; i++){ divsToShow[i].style.display = "initial";
   }
   }
   }, 100);
   </script> 
   
                 

6. Save the footer.tpl file.

Step 2: Prepare the Developer Tools for Your Patch

When preparing the Developer Tools for your patch as described in the Patch Using Override Mode procedure, perform the following actions:

1. Enter the following sample code into the new ns.package.json file that you created in the following Modules directories:

   /Modules/extensions/Header@1.0.0/ns.package.json

   /Modules/extensions/Footer@1.0.0/ns.package.json

                   { "gulp": { "templates": [ "Templates/*" ] }, "overrides": { "suitecommerce/Header@X.Y.Z/Templates/header.tpl" : "Templates/header.tpl" "suitecommerce/Footer@X.Y.Z/Templates/footer.tpl" : "Templates/footer.tpl" }
   } 
   
                 

   Important:

   You must replace the string, X.Y.Z, with the version of the module in your implementation of SCA.

2. Save the ns.package.json file.

3. Open the distro.json file in the root SCA development directory and then add your custom modules to the modules object as described in the Patch Using Override Mode procedure. The following sample shows the value to add to the list of existing values that follow the “modules” key.

                   "modules": {
   "extensions/HeaderExtension": "1.0.0",
   "extensions/FooterExtension": "1.0.0",
   . . . 
   
                 

4. Save the distro.json file.

Step 3: Test and Deploy Your Patch

Follow the instructions provided in the Patch Using Override Mode procedure to test and deploy your patch.

Related Topics

SCA Patches

General Notices