NetStores E-Commerce Extensions

Dynamic Template Builder

• Add Dynamic Template Builder link/button
• Dynamic Template Builder details
• Template Reference

Overview

   Dynamic Template Builder is an easy way to create a template to be used by the Catalog object. This feature allows you to create a template that can pull information from the item file and the store.

   The template is used to display a list of the products you set up in the item file. Each item on the list is displayed using the created template. Templates are stored in the Templates store configuration section which is under the Advanced level of configuration. After you have created the template in Dreamweaver, you will need to store the template in the Templates store configuration section.

   Dynamic Template Builder is used to create the template's dynamic tags. There are two types of dynamic tags: The first type is informational, the tag is replaced with information from either the item file (i.e. the current item's price) or the store (i.e. the store's name.). The second type is structural, the tag surrounds a section of the template's HTML code and the tag determines if and how that HTML code is used by the cart to create the final web page shown to the shopper.

Before you use this...

   Before you start using the Dynamic Template Builder feature, if you have not already done this, select the NetStores panel from the Dreamweaver Insert panel by selecting the NetStores tab.

   For the Dynamic Template Builder feature to work, you must first perform Steps 1-7 (start at Step 1 - Setup).

Adding a Dynamic Template Builder tag to a template(top)

   To add a dynamic tag to your template, simply position the cursor where you want the tag and click the Dynamic Template Builder icon in the NetStores objects panel.

   The Dynamic Template Builder dialog box (see picture below) is separated to five sections:

1. the first section is used to add a dynamic tag that is used to structure the template,
2. the second section is used to add a dynamic tag representing a field from the item file,
3. the third section is used to add a dynamic tag representing a standard item file field,
4. the fourth section is used to add a dynamic tag representing a standard store setting,
5. the fifth section is used to add code to the template to create either a standard 'add to cart' button or a standard 'view cart' button.

   To insert a standard structure tag into your template, click on the Insert Structure Tag radio button , and then select a standard structure tag from the pull-down menu. Replace the structure tag's comment with the HTML to used in that section of the template.

   To insert a store field tag into your template, click on the Insert Store Field Tag radio button, and then type in the name of the store field. If you wish to have the tag check for the presence of data in the item file field, then click on the Insert Tag To Ignore Empty Field Values check box. A structure tag will be inserted into the template. Replace the structure tag's comment with the HTML to used if the field contained data..

   To insert a standard field tag into your template, click on the Insert Standard Field Tag radio button, and then pick the standard field from the drop down menu. If you wish to have the tag check for the presence of data in the item file field, then click on the Insert Tag To Ignore Empty Field Values check box. A structure tag will be inserted into the template. Replace the structure tag's comment with the HTML to used if the field contained data..

   To insert a store setting tag into your template, click on the Insert Store Setting Tag record button, then pick a standard store setting from the pull down menu , or type in the store setting's parameter name into the text field.

   To insert either a standard 'add to cart' button or a standard 'view cart' button into your template, click on the Insert Standard Template record button, then pick either 'Add to Cart' or 'View Cart' from the pull down menu.

   The last settings you used to create a Dynamic Template Builder tag will be saved for the next time you use the Dynamic Template Builder object.

Template Reference

Templates are made up of HTML code and variables with the variables substituting information pulled from the store and the item file when the web page is generated from the template. Note: Catalog templates do not include tags like '<html>', since there is usually more than one item listed on a page.

TEMPLATE FORMAT

Informational Tags

To interpolate a value into the template, use double brackets, [[ and ]], and the appropriate name tag name. There are three categories of informational tags:

1. Store Parameters (use the 'Insert Store Setting Tag' choice):
[[PARAM:name]]

To include the value of a setting from the store's parameter file, the dynamic tag has the prefix "PARAM:" just before the setting's parameter name . Store parameters are listed here and here. The Dynamic Template Builder object has a list of the most common store settings available in a pull-down menu. If you wish to use another store setting, type the setting's parameter name into the text field.

2. Item Data by Field Name (use the 'Insert Store Field Tag' choice):
[[field-name]]

To include the value from one of the fields for the current item, the dynamic tag is just the field name (with the proper case). To use a field from the item file, type the field's name into the text field.

3. Product Data by Field Type (use the 'Insert Standard Field Tag' choice)::
[[TYPE:type]]

To include the value of one of the fields for the current item based on its specific field type, the dynamic tag has the prefix "TYPE:" just before the field type's name. This particular technique means you will not have to change a template page when a store configuration is changed. Even if the specific name chosen for the product code field changes, the type of the product code field will not change (i.e. 'Code' always referrers to the item file product code field).

The current field types used by the cart are:

Structural Tags

A structural tag determines the structure of the template, the tag surrounds a section of the template's HTML code and the tag determines if and how that HTML code is used by the cart to create the final web page shown to the shopper.

A structural tag follows the same format as a encompassing HTML tag (starting tag, HTML code, ending tag). A starting structural tag starts off with '[[', the ending structural tag starts off with '[[/'.

There are two types of structural tags, the first are tags that repeat their surrounded HTML code on the generated web page, the second only include their surrounded HTML code on the generated web if they test true.

Repeating Structural Tags:

1. '[[ITEMS]<!-- -->[[/ITEMS]]' This tag surrounds the HTML code that will be used for each item and every item on the generated web page (select 'Each Item Area' from the 'Insert Store Setting Tag' choice).

2. '[[EACHOPTION]]<!-- -->[[/EACHOPTION]]' This tag surrounds the HTML code that will be used for each option for an item from the item file that has options (select 'Each Option Area' from the 'Insert Store Setting Tag' choice).

Conditional HTML Code Inclusion Structural Tags:

1. '[[OPTIONS]<!-- -->[[/OPTIONS]]' This tag surrounds the HTML code that will be used if the item from the item file has options (select 'Options Area' from the 'Insert Store Setting Tag' choice).

2. '[[NOOPTIONS]]<!-- -->[[/NOOPTIONS]]' This tag surrounds the HTML code that will be used if the item from the item file doesn't have options (select 'No Options Area' from the 'Insert Store Setting Tag' choice).

3. Conditional on item file field: Depending on the existence or absence of data (i.e.if empty or not) for a dynamic structural tag which pulls information from the item file, HTML code fragments surrounded by the dynamic structural tag can be included or excluded from the final generated page. For example, this is particularly useful when dealing with images for products if some products don't have images, preventing the adding of HTML code for a null, "", image URL.

3.1 Store Fields: The dynamic structural tag consists of: [[GOOD:name]]<!-- -->[[/GOOD:name]] where 'name' is a field name from the item file. (To use a field from the item file, select the 'Insert Store Field Tag' choice, type the field's name into the text field, and select the 'Insert Tag To Ignore Empty Field Values'.)

3.2 Standard Fields: The dynamic structural tag consists of: [[GOODTYPE:type]]<!-- -->[[/GOODTYPE:type]] where 'type' is a name for a standard field type. (To use a standard field from the item file, select the 'Insert Standard Field Tag' choice, select the standard field from the pull-down menu, and select the 'Insert Tag To Ignore Empty Field Values'.)

Template Example (items in blue are dynamic tags):

<table border="0" width="67%" align="center">
<tr><td>
[[ITEMS]]
<HR>
[[GOODTYPE:Picture]]<IMG SRC="[[TYPE:Picture]]" ALIGN="RIGHT"><br>[[/GOODTYPE:Picture]]

<FONT FACE="Times New Roman"><FONT COLOR="#B00000">[[TYPE:Description]]</FONT></FONT></B>
<BR><FONT SIZE="-1">[[TYPE:LongDescription]]</FONT>

<br>

	<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">

	<TR>
	<TD ALIGN="LEFT" VALIGN="TOP">
	<B><FONT SIZE=-1>#[[TYPE:Code]] [[TYPE:Name]], [[TYPE:Price]]</FONT></B>
	</TD>
	<TD>
	[[NOOPTIONS]]
	  <a href="http://www.netstores.com/dwos-bin/add.pl?nccust=[[PARAM:NCCUST]]&OPT-1=[[TYPE:Code]]">Add to Cart</a>
	[[/NOOPTIONS]]
	[[OPTIONS]]
	<FORM METHOD="POST" ACTION="http://www.netstores.com/dwos-bin/add.pl">
		<input type="hidden" name="nccust" value="[[PARAM:NCCUST]]">
		  <INPUT TYPE="submit" name="submit" value="Add to Cart"><br>
		  <select name="OPT-1">
	[[EACHOPTION]]	<option value="[[TYPE:Code]]">[[TYPE:Name]]</option>
	[[/EACHOPTION]]
		</select>
		</form>
	[[/OPTIONS]]
	</TD>
	</TR>
	</TABLE>
[[/ITEMS]]
<hr>
</tr>
</table>

Generated Code (items in red were generated from template variables):

<table border="0" width="67%" align="center">
<tr><td>

<HR>
<IMG SRC="http://www.netstores.com/demo/images/acme4.gif" ALIGN="RIGHT"><br>

<FONT FACE="Times New Roman"><FONT COLOR="#B00000">Demonstration Product Number 1</FONT></FONT></B>
<BR><FONT SIZE="-1">The Full Demonstration of this product is contained below.  Use it wisely.</FONT>

<br>

	<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">

	<TR>
	<TD ALIGN="LEFT" VALIGN="TOP">
	<B><FONT SIZE=-1>#DEMO01 Demo Product 1, &#36;4.95</FONT></B>
	</TD>
	<TD>
	
	&nbsp;&nbsp;<a href="http://www.netstores.com/dwos-bin/add.pl?nccust=integration&OPT-1=DEMO01">Add to Cart</a>
	
	
	</TD>
	</TR>
	</TABLE>

<hr>
</tr>
</table>

Getting Started / Installing / Setup / Item File / Configure Store / Connect Item File /
Objects: / Add to Cart / View Cart / Search / Quick Search / Driven Search / Quick Form /Add to Cart With Options / Catalog/ Dynamic Template Builder

Copyright © 1999 - 2013 Fishbone Communications, Inc. - NetStores ®

Last Modified 1-11-2013