Quick Tip: How to Add Select One To Your Drop-Down Menus With Attribute Machine

PR8 has a lot of unique features and functionalities that storeowners and developers can use to customize their Miva Merchant ecommerce stores. This tutorial will show you how to add “Select One” to each of your drop down lists and still use Attribute Machine to track inventory down to the attribute level.

1. Enable “Select One” Inside Of Attribute Machine

Since Attribute Machine dynamically rewrites all the attributes on the page, depending on what the customer selects, it first needs to know if your attributes are going to contain “Select One” as their first option. This will enable Attribute Machine to work as expected and the “Select One” option to still appear in the list.

Go to Pages then click edit for the PROD page. Next click on the Attribute Machine tab on the right hand side.

Here you want to change the Initial Attribute State to be “Preload – Drop-Down Lists Contain Select One”

2. Add “Select One” To Your Product Attribute Template

You will need to manually modify your attribute template on the PROD page to include the select one as the first option for all attributes.

On the same PROD page click over to the Product Attribute Template tab.  Scroll down about ¾ of the page look for this code:

<mvt:elseif expr="( l.settings:attribute:type EQ 'select' ) OR ( l.settings:attribute:type EQ 'swatch-select' )">
    <select name="Product_Attributes[&mvt:attribute:index;]:value">
        <mvt:foreach iterator="option" array="attribute:options">
        <mvt:if expr="( ( g.Product_Attributes[l.settings:attribute:index]:value EQ 0 ) AND ( l.settings:option:id EQ l.settings:attribute:default_id ) ) OR g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code )">
    <option value="&mvte:option:code;" selected>&mvte:option:prompt;</option>
    <option value="&mvte:option:code;">&mvte:option:prompt;</option>

Add the “Select One Option” right below the opening “Select Tag” and hit update:

<select name="Product_Attributes[&mvt:attribute:index;]:value">
<option value="">Select One</option>  

Any product with drop-downs will now default to Select One and disable the Add To Cart Button so the customer cannot add the product to the cart until they select a valid combination of attributes.

Interested in Logic-Based UI? Download our ‘eCommerce 2.0’ Whitepaper.


Love it? Share it!