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:
Step 1: Create the Override File
-
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
-
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>
-
Save the
header.tpl
file. -
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
-
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>
-
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:
-
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.
-
Save the
ns.package.json
file. -
Open the
distro.json
file in the root SCA development directory and then add your custom modules to themodules
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", . . .
-
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.