For example, appending “;+2″ to an option will add $2.00 to the product’s base price for this option while appending “;*2″ will double the base price for this option.

Would generate: Ink:Black – $10.00
Red – $12.00
Blue – $20.00

Another special rule (;n) allows you make options unselectable, but visible:

Would generate: Ink:Black
Red
Blue

Using the previous example, you can expect many customers to purchase black ink, even if it is not the color they want, since black is selected by default, and many shoppers do not notice every detail of their order before placing it. The “unselectable” option is most frequently used to prevent a default option, but it could also be used to flag out-of-stock items so that they cannot be purchased.

Preventing a Default Selection:

Would Generate: Ink:Please Select a ColorBlackRedBlue

Prevent Purchase of Out-of-Stock Items:

Would Generate: Ink:Please Select a ColorBlackRed – Out of StockBlue

Using these methods will force the customer to make a valid selection in the Shopping Cart; however, it will not enforce a selection outside the shopping cart. If you are displaying ordering options on your More Info pages, the product may still be added to the cart with “Please Select a Color” selected–only you will not be able to checkout until you have chosen a color. Problems can arise if you prohibit customers from changing ordering options in the cart (by checking the checkbox next to “Ordering Options can not be changed” in Commerce Setup->Order System->Shopping Cart). A customer could add some ink to the cart with “Please Select a Color” selected, then find themselves unable to select a valid color without removing the product and trying again.

An easy solution to this problem is to create custom Javascript that will enforce the unselectable options in your More Info pages.

The following script may be integrated with almost any product template to enforce unavailable options in More Info pages. It will enforce unselectable ordering options in any number of dropdown boxes, and requires two simple changes to your product template:

1. Go to Merchandising->Custom Templates->Page/Product, under “Product Templates” select the product template you are using and click Edit

2. Scroll down until you find the [-- DEFINE MORE_INFO_PAGE --] section.

3. Add the following Javascript to the MoreInfo page (It does not need to be placed in the head region, but must be placed before the Add-to-Cart Form):

<script type="text/javascript"> 
 var LexiConn = { 
   unavailableMessage: "Please make a valid selection", 
   available: true, 
   alertAvailability: function(sender, GA){ 
     this.GA = GA; 
     if(this.available==false){ 
       alert(this.unavailableMessage); 
     } else{ 
       if(this.GA==true){ 
          window.__utmLinkPost(sender); 
       } 
     } 
 }, 
 checkAvailability: function(sender){ 
    var option_regex = /.*:finopt:.*/; 
    var value_regex = /.*;n$/; 
    this.available = true; 
    for (var i=0; i<sender.length; i++){ 
     if((option_regex.test(sender[i].name))&&(sender[i].type!="hidden")){ 
      if(value_regex.test(sender[i].options[sender[i].selectedIndex].value)){ 
        this.available = false; 
      } 
     } 
    } 
    return this.available; 
   } 
 } 
 </script> 

4. Replace the entire opening form section with the following (you should add any additional attributes that your existing form element is using, such as “name” or “id” to each of these form elements, since they may be required by other custom scripts on your pages):

[-- IF ANALYTICS_MULTI_DOMAIN --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post" onsubmit="var valid = LexiConn.checkAvailability(this); LexiConn.alertAvailability(this, true); return(valid);">
[-- ELSE --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post" onsubmit="var valid = LexiConn.checkAvailability(this); LexiConn.alertAvailability(false); return(valid);">
[-- END_IF --]

5. Save the changes and Regenerate (Utilities->Publish->Regenerate).