ShopSite Tutorial: Restricting Ordering Options

Forum Forums Tutorials ShopSite Tutorial: Restricting Ordering Options

This topic contains 0 replies, has 1 voice, and was last updated by  Anonymous 12 years, 5 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #48689

    Anonymous
    Participant

    Ordering options provide you with an easy method to create variations on products in ShopSite, and “Special Rules” provides a simple, yet powerful way to specify price and availability for each option.

    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.

    Order Options Description:

    Ink:
    Pull-down Menus
    Black – $10.00
    Red – $12.00;+2
    Blue – $20.00;*2

    Would generate: Ink:

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

    Order Options Description:

    Ink:
    Pull-down Menus
    Black
    Red;n
    Blue

     

    Would generate: Ink:

    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:


    Order Options Description:

    Ink:
    Pull-down Menus

    Please Select a Color;n
    Black
    Red
    Blue

    Would Generate: Ink:

    Prevent Purchase of Out-of-Stock Items:


    Order Options Description:

    Ink:
    Pull-down Menus

    Please Select a Color;n
    Black
    Red – Out of Stock;n
    Blue

    Would Generate: Ink:

    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).

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.