SellerDeck has the ability to generate a JavaScript array file (with an extension of *.js) that contains information about all the top-level sections, or the entire section tree complete with sub-sections. This section information is in the form of 'array' data. This file is uploaded with the store pages, and can be used to generate drop-down lists, list boxes and other more advanced navigation tools to help your customers to jump to their desired sections of the store. The advantage of using this external file is that it can be used by web pages that are located outside the store, so that a list of all the store sections can be incorporated into any web page. This list will be automatically updated by SellerDeck as you make changes to the structure of the online store.
The list of all the layouts available to perform this function, with a description of what they do, the JavaScript file they cause to generate and the HTML they include in the page, is below. You will find all the layouts within the 'JavaScript Section List' group in the library, and they are all inserted into the design via the 'JavaScriptArray' layout selector.
Links to examples of how to incorporate this code are listed at the bottom of this article.
There is also a layout type group called 'JavaScript Sub Section Lists' which contains the following layouts:
They are all inserted into the design via the 'JavaScriptSubSectionArray' layout selector.
These perform the same function as the layouts already described (creating a JavaScript array containing the section details) but these insert the information about the sub-sections within the current section. In other words, the section information they contain will depend on what section page they are being used within. These placeholders work differently as they will actually embed the JavaScript array into the page when the pages are generated. They do not cause the creation of an external JavaScript file.
* A section ID is a unique number associated with every section in the online store. They are used by forms to allow customers to jump to particular sections in the online store.
Note About Inserting Jump Lists In The Main Product Area
If you are including any of the 'jump lists' below within the main product area of a page, you will need to precede the code with the following line:
and then copy and paste the following lines after the form code:
This is to ensure the continuation of the main store page form either side of the jump list.
The list of all the layouts available to perform this function, with a description of what they do, the JavaScript file they cause to generate and the HTML they include in the page, is below. You will find all the layouts within the 'JavaScript Section List' group in the library, and they are all inserted into the design via the 'JavaScriptArray' layout selector.
Links to examples of how to incorporate this code are listed at the bottom of this article.
<table cellspacing="0" cellpadding="0" border="1"><tbody><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>All Data From Top Level Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_sections.js</b> that contains all the names, URLs, image filenames, image heights and widths and section IDs* of the <b>top-level sections</b> of the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_sections.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>All Data From All Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_section_tree.js</b> that contains all the names, URLs, image filenames, image heights and widths and section IDs* for <b>every section</b> of the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_section_tree.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>Name Data From All Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_section_tree_names.js</b> that contains all the <b>names</b> for <b>every section</b> of the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_section_tree_names.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>URL Data From All Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_section_tree_URLs.js</b> that contains all the <b>URLs</b> for <b>every section</b> of the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_section_tree_URLs.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>Image Name Data From All Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_section_tree_images.js</b> that contains all the <b>image filenames</b> for <b>every section</b> of the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_section_tree_images.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>Image Width Data From All Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_section_tree_imagewidths.js</b> that contains all the <b>image widths</b> for <b>every section image</b> in the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_section_tree_imagewidths.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>Image Height Data From All Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_section_tree_imageheights.js</b> that contains all the <b>image heights</b> for <b>every section image</b> in the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_section_tree_imageheights.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>ID Data From All Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_section_tree_ids.js</b> that contains all the <b>section IDs*</b> for <b>every top-level section </b>in the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_section_tree_ids.js"></script></p></td></tr><tr bgcolor="#e5e3e3">
<td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>Name Data From Top Level Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_sections_names.js</b> that contains all the <b>names</b> for <b>every top-level section</b> of the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_sections_names.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>URL Data From Top Level Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_sections_URLs.js</b> that contains all the <b>URLs</b> for <b>every top-level section</b> of the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_sections_URLs.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>Image Name Data From Top Level Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_sections_images.js</b> that contains all the <b>image filenames</b> for <b>every top-level section</b> of the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_sections_images.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>Image Width Data From Top Level Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_sections_imagewidths.js</b> that contains all the <b>image widths</b> for <b>every top-level section image</b> in the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_sections_imagewidths.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>Image Height Data From Top Level Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_sections_imageheights.js</b> that contains all the <b>image heights</b> for <b>every top-level section image</b> in the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_sections_imageheights.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>ID Data From Top Level Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_sections_ids.js</b> that contains all the <b>section IDs*</b> for <b>every top-level section </b>in the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_sections_ids.js"></script></p></td></tr></tbody></table>
<td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>Name Data From Top Level Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_sections_names.js</b> that contains all the <b>names</b> for <b>every top-level section</b> of the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_sections_names.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>URL Data From Top Level Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_sections_URLs.js</b> that contains all the <b>URLs</b> for <b>every top-level section</b> of the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_sections_URLs.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>Image Name Data From Top Level Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_sections_images.js</b> that contains all the <b>image filenames</b> for <b>every top-level section</b> of the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_sections_images.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>Image Width Data From Top Level Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_sections_imagewidths.js</b> that contains all the <b>image widths</b> for <b>every top-level section image</b> in the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_sections_imagewidths.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>Image Height Data From Top Level Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_sections_imageheights.js</b> that contains all the <b>image heights</b> for <b>every top-level section image</b> in the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_sections_imageheights.js"></script></p></td></tr><tr bgcolor="#e5e3e3"><td valign="top" width="109"><p>Layout:</p></td><td valign="top" width="426"><p>ID Data From Top Level Sections</p></td></tr><tr><td valign="top" width="109"><p>Description:</p></td><td valign="top" width="426"><p>Will cause the generation of a JavaScript file called <b>Act_sections_ids.js</b> that contains all the <b>section IDs*</b> for <b>every top-level section </b>in the online store. Also creates the HTML in the store to incorporate that file.</p></td></tr><tr><td valign="top" width="109"><p>Code inserted into design:</p></td><td valign="top" width="426"><p><script type="text/javascript" src="Act_sections_ids.js"></script></p></td></tr></tbody></table>
There is also a layout type group called 'JavaScript Sub Section Lists' which contains the following layouts:
- List Of All Data From Sub Sections
- List Of Name Data From Sub Sections
- List Of URL Data From Sub Sections
- List Of Image Name Data From Sub Sections
- List Of Image Width Data From Sub Sections
- List Of Image Height Data From Sub Sections
- List Of ID Data From Sub Sections
They are all inserted into the design via the 'JavaScriptSubSectionArray' layout selector.
These perform the same function as the layouts already described (creating a JavaScript array containing the section details) but these insert the information about the sub-sections within the current section. In other words, the section information they contain will depend on what section page they are being used within. These placeholders work differently as they will actually embed the JavaScript array into the page when the pages are generated. They do not cause the creation of an external JavaScript file.
* A section ID is a unique number associated with every section in the online store. They are used by forms to allow customers to jump to particular sections in the online store.
Note About Inserting Jump Lists In The Main Product Area
If you are including any of the 'jump lists' below within the main product area of a page, you will need to precede the code with the following line:
HTML Code:
</form>
HTML Code:
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsMainFormUsed%22%20%2f%3e"> <form method="post" action="<actinic:variable name="OnlineScriptURL" value="Shopping Cart Script URL" />"> <input type="hidden" name="SID" value="<Actinic:Variable Name="SectionID"/>" /> <input type="hidden" name="PAGE" value="PRODUCT" /> <input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="SectionPageName" />" /> <Actinic:SECTION blob='<Actinic:Variable Name="SectionCatFile"/>'/> <input type="hidden" name="RANDOM" value="<actinic:variable name="Random" />" /> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e"> <!-- Hidden field when in trial mode --> <input type="hidden" name="SHOP" value="<Actinic:Variable Name="HiddenFields"/>" /> </actinic:block> </actinic:block>