Clever Geek Handbook

Commenting content - HTML and PHP

I am currently setting up a BigCommerce theme for my employer. They asked me to remove and modify a few CSS / HTML elements to match the style and function they serve.

Rather than just removing functionality inside the theme, I was hoping to just comment out if needed later. But I have a formatting problem.

Below is the code displayed in the panel file ProductDetails.html:

    <div class="Content" id="prodAccordion">
        %%Panel.ProductTabs%%
        %%Panel.ProductDescription%%
        %%Panel.ProductVideos%%
        %%Panel.ProductWarranty%%
        %%Panel.ProductOtherDetails%%
        %%Panel.SimilarProductsByTag%%
        %%Panel.ProductReviews%%
        %%Panel.ProductByCategory%%
        %%Panel.SimilarProductsByCustomerViews%%
    </div>

I am trying to comment only the last 3 lines.

However, when I do this, the end of the comment (->) appears in the browser. I closed the comments correctly, but there must be some simple concept that I am missing. Hoping for good people at SO might help.

Below is the code I saved and a screenshot in my browser. The first screenshot is what it looks like before adding comments, and the second is after adding. You can clearly see the closing comment in the second image, can anyone tell me why?

Thanks in advance for any help.

    <div class="Content" id="prodAccordion">
        %%Panel.ProductTabs%%
        %%Panel.ProductDescription%%
        %%Panel.ProductVideos%%
        %%Panel.ProductWarranty%%
        %%Panel.ProductOtherDetails%%
        %%Panel.SimilarProductsByTag%%
        <!--%%Panel.ProductReviews%%-->
        <!--%%Panel.ProductByCategory%%-->
        <!--%%Panel.SimilarProductsByCustomerViews%%-->
    </div>

Before

After

+3


source to share


1 answer


Nicole, I got over it and can definitely explain why and how to avoid it.

Why is this happening

This is because this is how the BigCommerce server side PHP processor parses the code you are looking at. The code is basic HTML, while %% Panel.something %% is just a way the BigCommerce processor will recognize it as a command for BigCommerce.
Anytime the BC site sees %% Panel.Name %%, it knows it is not HTML, but the place where the BC server on the server side should insert the Panel file before sending that HTML to the user.

How to avoid this and display the comment correctly

Just remove the% characters and use regular comments. This will work:

 <!-- Panel.ProductReviews-->

And so it will be:

 <!--%%Panel.ProductReviews-->

And this:

  <!-- Panel.ProductReviews%%-->

Or even this:

  <!-- %Panel.ProductReviews% -->

Basically you have to make sure that each side of the link Panel.Name

does not contain 2% characters on each side.

To restore the code / panel with the correct code

Just replace the 2 characters %

on each side (so the spaces between -

and %

don't matter, you don't have them or 10):



  <!-- %%Panel.ProductReviews%% -->

Why do you see -->

On the live site

As said in the comments to your question, you see -->

when commenting a Panel like this <!--%%Panel.Name%%-->

, because by commenting the Panel this way without removing at least one of the symbols %

, you are still telling BigCommerce to load the Panel Panel file, but put it in

<!-- [HTML code from panel goes here] -->

The problem is that some of these Panel files contain comments. For example, say you comment on %%Panel.Header%%

this: !<--%%Panel.Header%%-->

. The Header.html panel can be as follows:

<!-- this is the header code panel-->
<div class"MainHeader">
     <ul class="TopNav">
         ...
     </ul>
</div>

%

By commenting out the code without removing characters , BigCommerce will download this:

<!--
<!-- this is the header code panel-->
<div class"MainHeader">
     <ul class="TopNav">
         ...
     </ul>
</div>
-->

when the user opens a page that uses the Header.html panel, they will see this code as a comment , because the browser will launch the comment first and complete the comment when it first appears . <!--

<!-- this is the header code panel

-->

<!--

-->

In the browser, the user will see what was left uncommented:

<div class"MainHeader">
     <ul class="TopNav">
         ...
     </ul>
</div>
-->

And, therefore, you will see some additional, possibly broken HTML, plus wandering -->

somewhere at the end of the code with an incorrect comment.

Again, to avoid all of this, just remove one of the symbols %

and then use regular commenting to comment out the link to the panel file.

Let me know if this helps and if you have any other questions.

+2


source






More articles:


All Articles