Ever wanted to hide something on your page without having to remove the code just in case you decide to use it on a later date? This article will show you how to hide things by using HTML Commenting. Comments are not displayed by the browser, but they can help document your HTML. Comment is a piece of code that is ignored by any web browser. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code.
Applies to Version(s): 3.7.0 - 3.8.0 series
In this article, you will learn:
What is HTML Commenting?How to comment out HTML in the Cart Designer
What is HTML Commenting?
Note: You can do this on all carts, but only in 3.7.x carts to 3.8.0 series rin the Cart Designer.
Comments are used in the Source Code to place a marker for the Start and Ending of where to place certain code lines or to hide pieces of code you don't want currently showing on your site. To learn more about HTML commenting, click here.
When you're working with your code, you will want to Copy/Paste it into a Notepad software such as ones found on your computer, I prefer to use Notepad++. This is very functional and easy to use.
How to comment out HTML in the Cart Designer
Note: When using commenting as mentioned above, make sure you're copy/pasting your code into a Notepad of sorts before making any changes.
The following is an example of what my Product Page looks like before commenting out, demonstrating what to click and what we want to hide:
Now after we Right Click and Click on Source Code, you will see a box like the following which will contain the Source Code for that area you're making changes to:
Use CTRL+A to highlight all of this code and then CTRL+C to copy. After you have the code, go over to your Notepad and use CTRL+V to paste it to your clipboard or pad.
Now we have our code, we just need to find what we are commenting out. In the example above, we have Sale Price boxed in showing what we want to hide. So in the code, we'll search for this by using CTRL+F to bring up a search box and search for "Sale Price." This will find a few different items but what we're looking for is the following:
<div class="price"><span class="sale-price-label">{$msg.product.sale_price}:</span> <span id="product_price" class="sale-price-amount">{$product.price|price}</span></div>
This tells us that this is the label being pulled from the cart's code to show the Sale Price that is at the Product Level. Now we will add Comments to each end so that it will no longer show up. The comments look something like the following:
<!--This is a comment. Comments are not displayed in the browser-->
<!--<p>This is a paragraph.</p>-->
Now for our code I've added <!-- to the very beginning and --> to the very end.
In this example above the highlighted Green areas show what is needed, "This is a comment" and "Comments are not displayed in the browser" aren't needed but act as a place holder showing and reminding you of the comment.
I can now copy and paste my code back into the Source Code through Cart Designer.
Once we add the code back and save you will now no longer see Sale Price:
The main thing is to find the right area you're trying to hide, also making a copy of the file you're changing through Cart Designer. This may take a few attempts and some playing around with the code to make sure you're commenting out the correct code.
Links to Related Articles
None at this time.
If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.
