From version 8, you have the ability to list the permutations of a product (from the 'Permutations' tab of a component) within a drop-down list. To lay out permutations in a drop down list, go to the 'Layout' tab of a component and select the 'Component With Selectable Permutations' layout choice.
As you are probably aware, it is possible to associate permutations with products in the store. This technique will automatically change a permutation from the list if the associated product goes out of stock.
There are two ways this can be shown in the online store:
* Remove the item from the list (Note that v9 does this by default).
* Show the option but put 'Out of Stock' after it.
This exercise will show both methods, and will use the 'Starter Computer Bundle' product in the default store as an example.
The first thing you need to do is set up stock monitoring on your associated products in the store. In the case of the 'Starter Computer Bundle' these are the three hidden products in the 'Computers' section – '17 inch Monitor', '19 inch Monitor' and '21 inch monitor'.
1. Go to the associated products in your store and go to the 'Stock' tab.
2. For each associated product, select the 'Stock Monitoring' checkbox and enter a stock level in.
You are now going to create a new re-usable condition that will check whether a permutation is in stock or not.
3. Go to 'Design | Library | Conditions'.
4. Right-click on the 'Permutations' group and select 'New Condition'.
5. Give it a name of IsAssociatedProductInStock and enter a description and a prompt (these can be anything).
6. Set the value of the condition to:
((<actinic:variable name="AssociatedProduct::IsStockMonitored" /> == false) OR
(<actinic:variable name="AssociatedProduct::StockLevel" /> >= <actinic:variable name="AssociatedProduct::StockSuspendLevel" />))
You can just copy and paste the above into the 'Condition' field to create the condition.
7. Click 'OK' and close the library
To make the out of stock option disappear:
1. Go to the 'Design' tab, select the 'Starter Computer Bundle' product and click on the 'Monitor' permutation drop-down list.
2. The layout code window should now contain the layout called 'Drop Down Permutation List'. It should contain a layout selector called Drop Down Permutation Entry
3. Highlight this layout selector and click the 'Insert Block' button (green 'C' with a '+')
4. Copy and paste the following expression into the condition editor:
(<actinic:variable name="PermutationAssociatedNameIsUsed" /> == FALSE) OR (<actinic:variable name="PermutationAssociatedNameIsUsed" /> AND <actinic:variable name="IsAssociatedProductInStock" /> == TRUE)
5. Click on 'Apply'
You can now test this by putting one of the associated products out of stock. The row in the list should disappear.
To add an 'Out of Stock' note to the end of the item:
1. Go to the 'Design' tab, select the 'Starter Computer Bundle' product and click on the 'Monitor' permutation drop-down list.
2. The layout code window should now contain the layout called 'Drop Down Permutation List. It should contain a layout selector called Drop Down Permutation Entry
3. Right-click on the layout selector and select 'Navigate To'. You should now be in a layout called 'Drop Down Permutation Entry'.
4. Locate the line that contains PermutationPrice
5. Underneath this, create a blank line and copy and paste in the following code:
<actinic:block if="%3cactinic%3avariable%20name%3d%22PermutationAssociatedNameIsUsed%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22IsAssociatedProductInStock%22%20%2f%3e%20%3d%3d%20false"> OUT OF STOCK</actinic:block>
6. For v9 only: At the top of this layout there are two 'block if' statements, the second one should contain the following conditions:
This is what hides the choices if they go out of stock, so you can remove the 'block if' statement and it's corresponding '/block' to ensure that the choices remain on display.
7. Now click 'Apply'. The 'OUT OF STOCK' text should appear next to any products that are out of stock.
As you are probably aware, it is possible to associate permutations with products in the store. This technique will automatically change a permutation from the list if the associated product goes out of stock.
There are two ways this can be shown in the online store:
* Remove the item from the list (Note that v9 does this by default).
* Show the option but put 'Out of Stock' after it.
This exercise will show both methods, and will use the 'Starter Computer Bundle' product in the default store as an example.
The first thing you need to do is set up stock monitoring on your associated products in the store. In the case of the 'Starter Computer Bundle' these are the three hidden products in the 'Computers' section – '17 inch Monitor', '19 inch Monitor' and '21 inch monitor'.
1. Go to the associated products in your store and go to the 'Stock' tab.
2. For each associated product, select the 'Stock Monitoring' checkbox and enter a stock level in.
You are now going to create a new re-usable condition that will check whether a permutation is in stock or not.
3. Go to 'Design | Library | Conditions'.
4. Right-click on the 'Permutations' group and select 'New Condition'.
5. Give it a name of IsAssociatedProductInStock and enter a description and a prompt (these can be anything).
6. Set the value of the condition to:
((<actinic:variable name="AssociatedProduct::IsStockMonitored" /> == false) OR
(<actinic:variable name="AssociatedProduct::StockLevel" /> >= <actinic:variable name="AssociatedProduct::StockSuspendLevel" />))
You can just copy and paste the above into the 'Condition' field to create the condition.
7. Click 'OK' and close the library
To make the out of stock option disappear:
1. Go to the 'Design' tab, select the 'Starter Computer Bundle' product and click on the 'Monitor' permutation drop-down list.
2. The layout code window should now contain the layout called 'Drop Down Permutation List'. It should contain a layout selector called Drop Down Permutation Entry
3. Highlight this layout selector and click the 'Insert Block' button (green 'C' with a '+')
4. Copy and paste the following expression into the condition editor:
(<actinic:variable name="PermutationAssociatedNameIsUsed" /> == FALSE) OR (<actinic:variable name="PermutationAssociatedNameIsUsed" /> AND <actinic:variable name="IsAssociatedProductInStock" /> == TRUE)
5. Click on 'Apply'
You can now test this by putting one of the associated products out of stock. The row in the list should disappear.
To add an 'Out of Stock' note to the end of the item:
1. Go to the 'Design' tab, select the 'Starter Computer Bundle' product and click on the 'Monitor' permutation drop-down list.
2. The layout code window should now contain the layout called 'Drop Down Permutation List. It should contain a layout selector called Drop Down Permutation Entry
3. Right-click on the layout selector and select 'Navigate To'. You should now be in a layout called 'Drop Down Permutation Entry'.
4. Locate the line that contains PermutationPrice
5. Underneath this, create a blank line and copy and paste in the following code:
<actinic:block if="%3cactinic%3avariable%20name%3d%22PermutationAssociatedNameIsUsed%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22IsAssociatedProductInStock%22%20%2f%3e%20%3d%3d%20false"> OUT OF STOCK</actinic:block>
6. For v9 only: At the top of this layout there are two 'block if' statements, the second one should contain the following conditions:
This is what hides the choices if they go out of stock, so you can remove the 'block if' statement and it's corresponding '/block' to ensure that the choices remain on display.
7. Now click 'Apply'. The 'OUT OF STOCK' text should appear next to any products that are out of stock.