OK, so here goes on how to set up Actinic. First things first, create the dropdown list box at the top of your section list layout (e.g. 'Section page with section name at the top'). You might want to wrap the dropdown with a 'blockif' using a custom variable defined at section level, so you can choose for each section whether to sort or not. This example uses a variable called 'SortSection':
<actinic:block if="%3cactinic%3avariable%20name%3d%22SortSection%22%20%2f%3e">
<div style="float:right; padding-top:15px;">
<select id="sortoption" onchange="sortProducts()">
<option value="Sort">Sort by:</option>
<option value="12">Price Low-High</option>
<option value="21">Price High-Low</option>
<option value="az">Name A-Z</option>
<option value="za">Name Z-A</option>
</select>
</div>
</actinic:block>
If you've studied the javascript file in Part 1, you'll notice that the 'value' attribute for each tag above is used in an 'if' statement to determine how the sorting behaves. You could, of course, add more sorting options once you're comfortable with how it all works.
Next we need to identify the element of the section page that contains the product list. This may be a <div> element, if you're using a css layout, or in the case of Actinic's default 'Product List with Horizontal Dividers' it may be a table. Either way, you will find it in the Overall Design tab in the List Layout Settings. The first element in the 'Start of List:' box should be given id='Product Table'. This allows the javascript to assign it to a variable and manipulate it.
Now we need to let the javascript find all the products so at the top of the product layout, we add a new div and set id="sort" (remember to also add a closing <\div> tag at the bottom of the layout). After that, the main <div> element containing the product layout needs a special id to include the Product Reference and Product Name variables, separated by a "|".
<div id="sort">
<div class="product_list" id="<actinic:variable name="ProductReference" />|<Actinic:Variable Name="ProductName"/>">
The script now has the Product Name in a variable for sorting with. Next we need to dig a little deeper to expose the price. We do that by wrapping some elements around the price variable in your price layout (e.g. Standard Tax Inclusive Price) and setting their id. So, for example:
<div id="sort-<actinic:variable name="ProductReference" />">
<div id="<actinic:variable name="ProductReference" />|<actinic:variable name="TaxInclusivePrice" />">
<actinic:variable name="PreFormattedPrice" value="Product Price Including Tax" /></div>
The script looks for an element with id="sort-[ProductReference]" and then looks in the first child element and uses its id to determine the product price. Ordinarily, we could have done this in the previous step using the ProductPriceRaw variable, but unfortunately there is currently a bug in Actinic that means that when a product price is changed, the ProductPriceRaw variable for its duplicates is not adjusted accordingly, without using the 'Reset Duplicates' function.
Now, there is one further complication that we need to account for. Some products have their price defined by their components, for example in a dropdown list, and so no price element is displayed on the page for the script to use. To handle this, we set up a custom variable called "LowestOptionPrice" at product level and manually complete it for products where this is the case. (So a product with 2 options at £4.95 and £9.95 would have this variable set to 4.95).
We now need to use this variable in the id for an element in the attribute layout (e.g. Standard Drop Down Attribute):
<div id="Zsort-<actinic:variable name="ProductReference" />">
<span id="<actinic:variable name="ProductReference" />|£<actinic:variable name="LowestOptionPrice" />">
<actinic:variable name="AttributeDisplayLabel" />
</span>
Notice the inclusion of the currency symbol (£) before the custom variable, as this would be automatically included in the 'standard' products and is handled by the script.
Finally, make sure the product-sort.js file is stored in your 'Site1' folder and is included in the <head> part of your main layout.
<script language="javascript" type="text/javascript" src="product-sort.js"></script>
Use the preview in Actinic to check everything is working and that your preferred styling has been applied to any new elements. Upload when you're ready to go!
Disclaimer: this requires some reasonably advanced knowledge of how Actinic works and an appreciation of javascript will also help. I'm afraid I can't offer any support with this and if you choose to use it, it's at your own risk!
