Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

...

Warning

The variations code will not work if you have the following characters in your item ids: < > & " ' + - (greater than, less than, ampersand, double quote, single quote,plus, minus and spaces)

In general, it's a very bad idea to have these characters in your item ids at all, regardless if you are using variations. The item ids serve as keys and are embedded with html in hundreds of places. Using html special characters greatly increases the likelihood of something breaking.

We receive numerous support calls about this. No spaces allowed. The item ids are concatenated into html element id and class names. Those values are then used in jQuery selectors. The characters above drastically change the jQuery selectors and break the code. Sorry. There is no work around.


An item variation configuration will consist of a 'Parent' item, which contains the variation assignment and it the assigned item to your storefront, and a set of 'Child' items, which are the inventoried items that will be added to the cart after the customer makes their selection.

Method 1 - Variation Wizard

...

Notice that we have four options for size when the black color is selected, but only three options for size when the blue color is selected.  Variations support the concept of not every single combination being possible.  The select boxes will update on the fly as the customer chooses options so that there is never an invalid combination of selections that the customer can make.

Troubleshooting

 

Things to look for if the form is not populating the drop-down menu for the item variations:

  • Make sure at least one item is configured with inventory in stock or the enable inventory tracking turned off. Otherwise, the javascript that is creating the array of the variations will return a null value.
  • When testing the variation code is being tested in a local HTML page prior to being publish to your live website, the javascript tagsa below the form code will need to be edited to add the "http:" prefix to the script src URL's.

...

  1. You have a parent item and separate child items (you cannot configure the variation configuration on an item assigned as a child item, you'll need a separate parent item and set of child items.)
  2. Make sure that if the child items have "Track Inventory" configured, that the item has  allocatable inventory. If the item is out of inventory it will not appear in the variation drop-down list.
  3. Also check to make sure that the child items are not set to inactive.