|
customizing a quickcode tag
I want to modify the way a QuickCode Tag functions. Can this be done?
That's a good question. It is possible to create a customized version of one of the store's pre-made QuickCode Tags and then customize its functionality as desired. A step by step process is detailed below.
prerequisites
The following steps for creating a custom version of a QuickCode Tag are intended for the technically inclined. They will require a bit of web developer know-how.
Step 1: Locate the original QuickCode Tag in the glossary
-
Go to the QuickCode glossary: http://qc.modularmerchant.com/
-
Search for the QuickCode Tag you want to modify, and open its glossary page.
-
Scroll to the Source Code section, which contains the HTML, JavaScript and PHP code that powers the QuickCode Tag.
-
Copy the tag's source code. It will be used in the next step.
can't find the tag you're looking for?
New QuickCode Tags are added by Modular Merchant on a regular basis. There is sometimes a delay between the time a new QuickCode Tag is added to the shopping cart software and the time its glossary entry is written.
If the glossary does not contain an entry for the QuickCode Tag you're looking for, contact Modular Merchant's Support Team, and we will fast-track the publication of the tag's glossary entry.
It would be possible to simply paste a copy of the QuickCode Tag's source code directly into the store templates, and then modify it. However, that practice can quickly turn the template source code into a mess. Instead, the next step of this tutorial will take the approach of saving the modified tag in a custom QuickCode Tag. The custom QuickCode Tag will then replace the standard tag in the template, keeping the templates much more tidy and manageable.
Step 2: Modify the source code to create a custom QuickCode tag
-
In the store's Administration Area, open the Custom QuickCode Tag Editor at: [Design > Add a Custom QuickCode Tag].
-
In the editor, enter a name for the custom QuickCode tag. This name will only be used to identify it to store administrators.
-
Click the Switch to Plain Text Editor link. (If this link was clicked in the past, this step will not be necessary). Using the plain text editor will prevent the WYSIWYG editor from attempting to process the source code.
-
Paste the tag's source code that was copied from the glossary into the text field.
-
Edit the tag's source code as desired.
-
To save the customized tag, select Save Changes in the File Options area, and then click the button labeled Go.
Once the custom QuickCode Tag has been saved, the system will assign an ID number to it, and create a custom QuickCode Tag that can be used in any template. The custom tag will be something like {CUSTOM-123}.
Step 3: Replace the original QuickCode tag with the new custom QuickCode tag.
-
In the desired template(s), replace the original QuickCode Tag with the custom one created in the previsous step.
-
Save the template.
-
When the corresponding storefront page is viewed in a web browser, it should now use the custom version of the QuickCode Tag instead of the original version.
example of customizing a quickcode tag
Changing the behavior of the {PRODUCT-BREADCRUMB-LINKS} QuickCode tag.
The {PRODUCT-BREADCRUMB-LINKS} QuickCode tag automatically generates a series of breadcrumb links on product pages, which typically include the category hierarchy that the product belongs to and also a link to the storefront.
For example, a product's breadcrumb links may look like this:
Storefront > Menswear > Shoes > Converse > Jim Varney Special Edition
The link to the store's home page (Storefront) is built-in to the tag. But, what if we want to create a version of the QuickCode Tag that excludes the Storefront link? This example demonstrates how.
First, we start with a copy of the original QuickCode Tag's source code, obtained from its glossary entry:
<a href="index.php" class="PRODUCT-BREADCRUMB-LINK">Storefront</a>
<?php
$bc = array();
foreach((array)$product['breadcrumbs'] AS $bck => $bcarr) {
if($product['breadcrumbs'][$bck]['id'] > 0) {
$bc[] = '<a class="PRODUCT-BREADCRUMB-LINK" href="'.mm_seo_url($product['breadcrumbs'][$bck]['id'], $product['breadcrumbs'][$bck]['seo_url_text'], 'c').'">'.$product['breadcrumbs'][$bck]['name'].'</a>';
} // end if category id is > 0
} // end foreach
if(count($bc) > 0) {
echo(' > ');
}
echo(@implode(' > ', $bc));
?>
In our version, we want to remove the first line of code, which contains the link to the storefront, and the code to print out the ">" symbol that would follow it. The modified code looks like this:
<?php
$bc = array();
foreach((array)$product['breadcrumbs'] AS $bck => $bcarr) {
if($product['breadcrumbs'][$bck]['id'] > 0) {
$bc[] = '<a class="PRODUCT-BREADCRUMB-LINK" href="'.mm_seo_url($product['breadcrumbs'][$bck]['id'], $product['breadcrumbs'][$bck]['seo_url_text'], 'c').'">'.$product['breadcrumbs'][$bck]['name'].'</a>';
} // end if category id is > 0
} // end foreach
echo(@implode(' > ', $bc));
?>
This modified code is then saved as a custom QuickCode Tag. In this example, our custom QuickCode Tag is given the identifier {CUSTOM-123}.
I then edit my store's HTML templates and replace all instances of {PRODUCT-BREADCRUMB-LINKS} with {CUSTOM-123}.
Now, view a product page in the storefront. Success! The product's breadcrumb links now look like this:
Menswear > Shoes > Converse > Jim Varney Special Edition
|
