MasterPageYourThemeName.master
The MasterPage is essentially the boilerplate for all of the E-Commerce pages. What is included within its markup is used site-wide. The MasterPage can be broken down into three sections: Header, Content and Footer:
• Header: <div id=”HeaderDiv”>…</div>
• Content: <div id=”MainContent”>…</div>
• Footer: <div id=”Footer”>…</div>
The main content is dynamic and changes from page to page but the header and footer are contained in separate ASCX files that are also used site wide. You can apply markup within each file to update the header and footer sections, its recommended that you apply custom markup to the MasterPage in order to keep customizations to a single location as much as possible.
Custom markup in the MasterPage tends to be company contact information and links below the E-Commerce footer navigation. It can also be extensive markup from the main web site that enables you to mesh the presentation of the E-Commerce pages seamlessly.
The key is to restrict the amount of inline markup changes because of the impact this can have on future upgrades and the increase in time on rolling them forward.
/scripts/customplugins/
While the style-override.css and MasterPage files are there to control the existing content and presentation found in the default E-Commerce pages, script includes are more about adding and controlling custom markup without having to modify the pages themselves. Script includes can be quite effective in terms of their added flexibility. The script includes are by far the best tool in extending and adapting the E-Commerce pages with customizations without having to actually change the markup.
The script includes rely on the existing ID’s or selectors within the markup by targeting them and then using jQuery to apply the customization. Depending on what the need, script includes can be applied to a specific E-Commerce page or the entire E-Commerce site.
An example of a common script include is changing the text being used in the main navigation from Renew Pass to Renew Membership. Without the script include, you would modify the markup in Header.ascx and then continue to modify this with each future upgrade. Script includes can be used for adding CSS class names to existing selectors, moving the location of content blocks to a different part of the page or even hiding them altogether.
Page-Specific Script Include
If you want to change content that only appears on ItemList.aspx, you do this through the Admin Panel. The same process can also be used for page-specific CSS when it would be better to apply changes directly to the pages to override site-wide style properties.
1. In the Admin Panel navigation, select Page Includes (Advanced)
2. Click on Insert New
3. In PageName, enter the file name of the E-Commerce page (i.e, ItemList.aspx)
4. On the dropdown menu for IncludeType, select JavaScript
5. On the dropdown menu for Include Location, select Head
6. For IncludeValue, enter the path to the JavaScript file (i.e., scripts/customplugins/itemlist-replace.js ). For a CSS include, you would just insert the path to the file (i.e., includes/custom-styles.css). Be sure that any page-specific CSS files are not saved in the App_Themes folder because they are applied automatically to all E-Commerce pages.
7. Click Insert
When the page is refreshed, the script include will appear in the <HEAD> of ItemList.aspx. You can apply the JavaScript directly within the Admin Panel by choosing Literal for IncludeType, but it’s easier to support when you use separate JavaScript files because it allows you to edit them in a separate program like Visual Studio.
Site-Wide Script Include
For a script include that needs to be applied across all E-Commerce Pages, it can be called from within the <HEAD> on the MasterPage:
<script src="scripts/customplugins/main.nav.js" type="text/javascript"></script>
Script Includes and Update panels
If you ever use Script Includes and Update panels on the same page (like ItemShow.aspx), the Update panel doesn’t fire $(document).ready() when it updates, place the following within the script:
$(document).ready(function () {
setUpYourFormClickEventsAndStuff();
});
function pageLoad(sender, args) {
setUpYourFormClickEventsAndStuff ();
};
In this way, the set up function fires on a regular page load and also on the updatepanel load (which fires pageLoad()).
The update panel pageLoad() doesn’t get called if you put the script in the HEAD, you need to select FOOT. If you put it in the Head, the pageLoad() doesn’t fire and the script won’t work after asych postbacks. If you want scripts to run on a page with an updatepanel, put the script in the foot using the Admin panel.