How can I edit the Brand page layout and add information for specific brand pages?

FAQ: How can I edit the Brand page layout and add information for specific brand pages?

Independent information can be added to individual Brand pages by adding specific Javascript code.

For example, the following brands are added to the site:

Brand Name
Brand&Name
Brand & Name
Brand's Name
Brand Co.
Canon
Nikon
Olympus
Samsung
Sony
Toshiba

Display individual text content on every Brand page - Option 1


In this case the next steps should be followed: 

1. Go to Manage Website > Edit Website

2. Select Brand Page in the Website Map tree and switch to the Edit Page tab

3. Drag a Text and Image page section to the center page container

4. Open this section in edit mode, switch to the View HTML mode and add the following code:

<div class="brandPagesContent">
<div class="Brand-Name skip">Content for the Brand Name brand page</div>
<div class="Brand-Name skip">Content for the Brand&Name brand page</div>
<div class="Brand-Name skip">Content for the Brand & Name brand page</div>
<div class="Brand-Co skip">Content for the Brand Co.  page</div>
<div class="Brand-s-Name skip">Content for the Brand's Name brand page</div>
<div class="Canon skip">Content for the Canon brand page</div>
<div class="Nikon skip">Content for the Nikon brand page </div>
<div class="Olympus skip">Content for the Olympus brand page</div>
<div class="Samsung skip">Content for the Samsung brand page</div>
<div class="Sony skip">Content for the Sony brand page</div>
<div class="Toshiba skip">Content for the Toshiba brand page</div>
</div>

<script type="text/javascript">
        $(document).ready(function(){
        url = window.location.pathname;
        mp=/&/gi; // & for mac
        url = url.replace(mp, "%26"); // & for mac
        mt=/'/gi; //' for mac
        url = url.replace(mt, "%27"); // ' for mac 
        var pageName = $("a[href$='"+ url +"']").html();    
        r = / /gi;
        p=/&amp;/gi;
        s=/---/gi;
        t=/'/gi;
        pageName = pageName.replace(r, "-");
        pageName = pageName.replace(p, "-");
        pageName = pageName.replace(s, "-");
        pageName = pageName.replace(t, "-");
    if(pageName.indexOf(".") > 0) pageName = pageName.substring(0,pageName.indexOf("."));
    $(".brandPagesContent").find("."+pageName+"").css("display","block"); 
});
</script>


Where:

a. brand names like Canon, Nikon etc should be replaced with your brand names (the number of the lines should correspond to the number of brands you have); 
b. individual text content for a brand page should be placed between <div> </div>, i.e. instead of Content for the Canon brand pageContent for the Nikon brand page etc;
c. if a brand name consists of several words separated by a space, you should use '-' in the name of the class to separate these words, just like it is done for the Brand Name brand;
d. if a brand name contains '&', you should use '-' in the name of the class to indicate usage of this character, just like it is done for the Brand&Name and Brand & Name brands;
e. if a brand name contains ' ' '(apostrophe), you should use '-' in the name of the class to indicate usage of this character, just like it is done for the Brand's Name brand.

5. Save changes and publish the site for the changes to be applied online


Example Brand page for brand: Olympus 



Example Brand page for brand: Sony



Display individual text content on specific Brand page(s) only - Option 2

In this case the next steps should be followed: 

1. Go to Manage Website > Edit Website

2. Select Brand Page in the Website Map tree and switch to the Edit Page tab

3. Drag a Text and Image page section to the center page container

4. Open this section in edit mode, switch to the View HTML mode and add the following code:

<div class="brandPagesContent">
<div class="commonText skip">General content for other brand pages</div>
<div class="Sony skip">Unique content for the Sony brand page</div>

</div>

<script type="text/javascript">
        $(document).ready(function(){
        url = window.location.pathname;
        mp=/&/gi; // & for mac
        url = url.replace(mp, "%26"); // & for mac
        mt=/'/gi; // ' for mac
        url = url.replace(mt, "%27"); // ' for mac 
        var pageName = $("a[href$="'+ url +'"]").html();
        var temp = 0;
        r = / /gi;
        p=/&amp;/gi;
        s=/---/gi;
        t=/'/gi;
        pageName = pageName.replace(r, "-");
        pageName = pageName.replace(p, "-");
        pageName = pageName.replace(s, "-");
        pageName = pageName.replace(t, "-");
if(pageName.indexOf(".") > 0) pageName = pageName.substring(0,pageName.indexOf("."));
$(".brandPagesContent").find("."+pageName+"").css("display","block"); 

for (i = 0; i< $(".brandPagesContent .skip").length; i++){
    if ( $($(".brandPagesContent .skip")[i]).hasClass(""+pageName+"") ){ 
        temp += 1;
        $(".brandPagesContent").find("."+pageName+"").css("display","block");
        $(".brandPagesContent").find(".commonText").css("display","none");
    }
    if (temp == 0) {
        $(".brandPagesContent").find(".commonText").css("display","block");
    }
}
});
</script>

Where:

a. brand name like Sony should be replaced with a name of the brand for which unique text content is required ( to display unique content for more brands, just repeat this line with another brand name and text specified );
b. unique text content for a brand page should be placed instead of Unique content for the Sony brand page;
c. general text content, which is required to be displayed for all other brand pages, should be placed instead of General content for other brand pages;
d. if a brand name consists of several words separated by space, you should use '-' in the name of the class to separate these words;
e. if a brand name contains '&', you should use '-' in the name of the class to indicate usage of this character, just like it is done for the Brand&Name and Brand & Name brands;
f. if a brand name contains ' ' '(apostrophe), you should use '-' in the name of the class to indicate usage of this character, just like it is done for the Brand's Name brand.

5. Save changes and publish the site for the changes to be applied online

Example Brand page for brand: Olympus (General text content)




Example Brand page for brand: Toshiba (General text content)



Example Brand page for brand: Sony (Unique text content)

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.