Create reusable headers/footer with Custom QuickCode Tags


	Create reusable headers/footer with Custom QuickCode Tags
	Last Edited - 09/29/2011 9:33pm PDT
	Category Path - Shopping Cart Software Components > Administration Area > Design > FAQs & Tutorials

QuickCode™ tags were created to simplify the complex tasks that can be performed on various storefront page.

how quickcode tags make everyone's life easier

For example, instead of repeating a large chunk of PHP code in every single template that retrieves your company's name out of the store's database, and then formats and displays it, we use the QuickCode tag {COMPANY-NAME}.

Not only is that single QuickCode™ tag easier to read than multiple lines of HTML and PHP code, any changes that need to be made to the code that displays the company name are made in one place: the QuickCode tag's code. This allows the code that controls the display of the company name to be managed in one place, and any changes made to it are instantly updated throughout the storefront, wherever the {COMPANY-NAME} QuickCode Tag is used.

Even though Modular Merchant provides over 700 QuickCode tags for your use, you can also create your own custom QuickCode tags to display any content that you want.

This tutorial demonstrates one common way to use custom QuickCode tags: managing a "header" and "footer" that's used on every storefront page.

What Are We Trying to Do Here?

If you visit almost any well-designed website, you'll notice that while you're on almost any page, the page's top and bottom stay the same. (A good example would be the top and bottom sections of this very Knowledge Base that you are reading right now this very second.)

Usually, the top features the site's logo and title, and maybe a menu bar (sometimes menus are on the left), while the bottom often has links to the site's About Us, Contact Us, Privacy Policy, and other general pages. These two parts of the page are referred to as the header and footer.

There are a number of different ways you can create a header and footer for your website:

not great idea

Create the code for the header and footer, then paste it into every single page of your site.

The problem here is that if you need to make a change, you then have to make that change over and over again on every page of your site - not a difficult thing if your site only has just a few pages, but simply adding a link to a menu can become an all-day task for a web developer if they have to repeat it on every page of a 200-page website.

Why couldn't I have gone into dentistry, like my sister?

better idea

Move the header and footer code to separate files, then add links to each page to include these header and footer files.

With the header and footer code each located in their own file that is shared among each page of the website, if you need to make a change to either the header or footer, you only need to make a change in their respective file.

This is a good system. The only disadvantage I can think of is that this leaves the chunk of code used to include the shared files at the top and bottom of each page of the website. If someone who isn't web-savvy needs to update the website, they may accidentally alter this chunk of code, breaking it in wonderful, mysterious ways.

This is what happens when you let your sister, the dentist, update her website.

the best idea ever

Move the header and footer code to a custom QuickCode tags, then add the QuickCode tag to each page to include them.

As in the solution above, the header and footer code is in one place for easy modification. But, better yet, the large chunk code to include the header and footer on each page has been replaced with a compact custom QuickCode Tag, which would look something like this: {CUSTOM-123}.

Content changes to the header and footer can still be made in one location (the custom QuickCode Tag) and there's much less code present to be interfered with when changes are made to the various pages of the website.

How Do We Do It?

Now that we've seen why saving the header and footer HTML code in a custom QuickCode tag is the best solution, let's review an example of how to do it.

Step 1: Create the Header
The first step is to create the website's header. A simple one could have the company's logo in the upper left corner and its company name in the center. Then, a basic menu bar that contains links to the store's home page, the customer's account, the customer's basket, and the checkout process. Here is some sample code that displays just that.

sample header code

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td width="1%">{COMPANY-LOGO}</td>
    <td width="99%" align="left" valign="top">{COMPANY-NAME}</td>
</tr>
<tr>
    <td colspan="2" align="left" valign="top"><table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><a href="{URL-STORE-HOME}">Home</a> </td>
        <td> | </td>
        <td><a href="{URL-CUSTOMER-ACCOUNT}">My Account</a> </td>
        <td> | </td>
        <td><a href="{URL-BASKET}">View Cart</a> </td>
        <td> | </td>
        <td><a href="{URL-CHECKOUT}">Checkout</a></td>
      </tr>
    </table></td>
</tr>
</table>

Notice that the header itself includes a number of QuickCode tags. For example, instead of entering the company name as it is, the sample code used the QuickCode tag {COMPANY-NAME}. Yes, QuickCode tags can be used within other custom QuickCode tags. This is handy, because if sometime in the future the company name that's saved in the store's System Settings changes, the {COMPANY-NAME} QuickCode tag will automatically update to reflect the change, without the need to alter a single character of the header's source code.

Step 2: Create the Custom QuickCode™ Tag
Now that we have the code, we can create the QuickCode™ tag.

Log in to your store's administration area.
Open the Custom QuickCode Tag Editor at: [Navigation Menu > Design > Add a Custom QuickCode Tag].
Enter the name, description, and notes for your new tag. This will let you and your other admins know what the tag is for.
In the QuickCode Tag Editor, click the Source button, which is the first button in the first row of the editor's toolbar.
Copy the code you created in Step 1 and paste it into the QuickCode Tag Editor.
Click Add QuickCode Tag.

The code for your new QuickCode tag should now be displayed in line two of the editor, and will look something like this: {CUSTOM-123}. This code for the tag cannot be changed.

note

If adding HTML, JavaScript or HTML code to a custom QuickCode tag, then clicking the Source button in Step 4 above is very important. When using the text editor in WYSIWYG mode, it will add its own formatting to what you type into it. Clicking the Source button will prevent the text editor from applying any formatting to the scripting code that is entered.

Step 3: Insert the Tag in Your HTML Templates
You can edit your HTML templates within the store administration area or on your own computer using a web design application. The header is normally placed at the top of the page, and therefore within the <body> tags of the document. Place your custom QuickCode tag just after the <body> tag, and save the page. If you are editing on your computer, upload the newly updated page. Now, when you view it, your header will appear where the custom QuickCode tag was placed.

Modifying the header or footer

Now, let's say, you've decided that you want to add a new button to your main navigation that says, "Hot Items!" and takes you to a page that displays your store's best sellers. With your header setup, this is very easy to do. All you need to do is go to the Custom QuickCode Tag Editor and edit the custom QuickCode tag to add the new button to the menu. Once you've saved the custom QuickCode tag, all of your pages that include this custom QuickCode tag will now display the new button!

Sample Footer
What about a footer, you say? Here's a sample footer, which displays another menu bar, as well as a link to the Modular Merchant website. (It's not that we're narcissistic, we just assume that you want to tell everyone exactly where you got your fantastic shopping cart software... right?)

sample footer code

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td width="50%" align="left" valign="top"><table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><a href="{URL-STORE-HOME}">Home</a> </td>
        <td> | </td>
        <td><a href="{URL-CUSTOMER-ACCOUNT}">My Account</a> </td>
        <td> | </td>
        <td><a href="{URL-BASKET}">View Cart</a> </td>
        <td> | </td>
        <td><a href="{URL-CHECKOUT}">Checkout</a></td>
      </tr>
    </table></td>
    <td width="50%" align="right" valign="top">Powered by <a href="http://www.modularmerchant.com" target="_blank">Modular Merchant shopping cart software</a></td>
</tr>
</table>

As before, create a custom QuickCode tag for the footer, then place it at the end of every page, just before the </body> tag. With your header and footer in place on every page, you've created a consistent framework for your website that is easy to maintain.