(Updated) Product inventory control for attributes (beta)

Version 8

    Last update: December 4th, 2012


    Overview

    This much anticipated feature enables your clients to manage product inventory and stock levels based on what we now call “ product variations”. These are created starting from selected attributes (e.g. color, size, material).

     

    You can enable this on a site-by-site basis from the new "Site Settings > Beta Features" section of the Admin Console.

    How to enable it on your site

     

    Step 1 – Enable the product inventory control feature

    At release, this functionality is initially turned off. To enable this feature, login to your site admin and open the “Admin -> Site Settings -> Beta Features” page and check the “Enable inventory control per attributes” box. This menu is only visible to partners.

     

    Enabling inventory control per attributes will update the following user interfaces:

    • Product Detail > Attributes – edit attribute screen now allows admins to specify which attribute would be used to generate variations from;
    • Product Detail > Inventory – allows admins to generate and manage product variations based on selected attributes
    • CRM > Orders – variations are now visible in orders and admin users can pick variations when creating an order from admin interface
    • ReportsCustomers and orders, eCommerce>Products, eCommerce > Top 5 Products reports have been updated to include details about variations and attributes

     

    Regardless of Product Inventory per Attributes feature being enabled or not, the Customers and Orders report now has the possibility of selecting/filtering by a new field, Order Item Description (attributes) which will expose the attributes values in the same format they appear in shopping cart or in order (e.g.: Red;Small).

     

    Notes:

    • Once enabled, the feature becomes available for all site users (business owners and partners)
    • This feature is not available in the old admin user interface

    Step 2 – Create a new product

    Once the feature is enabled, you can create a new product starting from your site admin user interface. Enter your product details, pricing, add images and define attributes and attribute options.

     

    Optionally, you can use an existing product that already has attributes defined, but no ability to manage inventory. IMPORTANT NOTE: enabling inventory on an existing product will discard existing stock levels on that product. The operation not reversible.

    Step 2 – Enable stock control per attributes

    Once you have created or picked a product for which you want to create variations for, go and enable stock control by attributes by editing your attributes settings in the "Product Details > Attributes" screen. Edit each attribute you want to create variations from, and tick the "Keep stock?" checkbox.

     

    attributes-enable-stock.png

    Step 3 – Generate variations and update stock and variation codes

    Now that you have selected which attributes you’ll use to create product variations, you can ahead and create those variations. Switch to “Product Details > Inventory” tab and click on "Generate Variations" button.

     

    generate-variations.png

     

    The system will generate all combinations resulting from the attribute options that you’ve picked to keep stock for.

     

    manage-variations.png

     

    Once done, you can update the variation codes and stock. You can also choose to disable some variations, as you might not have those combinations available for sale. Disabled variations will not be displayed on the site front-end and customers will not be able to purchase them.

    Step 4 – Update product layouts to reflect the variations

    When inventory control is enabled, the following product tags change their behavior to take advantage of the new functionality:

    • {tag_attributes, horizontal, hideDisabledVariations, autoSelectFirstVariation}
      • horizontal – display attributes horizontally
      • hideDisabledVariations – true or false
      • autoSelectFirstVariation – true or false
    • {tag_instock, syncWithAttributes, noSelectionMessage, disabledSelectionMessage} 
      • syncWithAttributes – true or false
      • noSelectionMessage – specify the message displayed when site customer has not selected a variation;
      • disabledSelectionMessage – specify the message displayed when site customer has selected a variation that is disabled
    • {tag_onorder, syncWithAttributes, noSelectionMessage, disabledSelectionMessage}
      • syncWithAttributes – true or false
      • noSelectionMessage – specify the message displayed when site customer has not selected a variation;
      • disabledSelectionMessage – specify the message displayed when site customer has selected a variation that is disabled;
    • {tag_productcode, syncWithAttributes, noSelectionMessage, disabledSelectionMessage} – with variations enabled, tag product code will render the variation code instead of product codes in all layout where it is used; additionally, we’ve added three new parameters:
      • syncWithAttributes – true or false
      • noSelectionMessage – specify the message displayed when site customer has not selected a variation;
      • disabledSelectionMessage – specify the message displayed when site customer has selected a variation that is disabled;

     

    The product layouts will require some updates to make the best use out of variation information: e.g. change {tag_instock} attribute in product layout to {tag_instock, true} to synchronize its value to the stock level of the selected variation. Use the syntax above to create your personalized product page.

     

    Example - display the variation stock with customized messages when selection is invalid; display the product attributes as drop-downs, including the disabled variations.

    {tag_instock, true, Please choose Size & Color for this product, Coming soon! This item is expected to ship on 11/20}
    {tag_attributes}
    

     

    When first entering the product page, the visitor will see:

     

    product-layout-1.png

     

    When selecting a variation that is not available:

     

    product-layout-2.png

     

    When selecting an available variation:

     

    product-layout-3.png

     

     

    Advanced customization

    For those that need more flexibility when creating the product layout, we have created 5 additional tags that will output a JSON format that you can customize using JavaScript:

    • {tag_attributes_json}
    • {tag_instock_json}
    • {tag_onorder_json}
    • {tag_productcode_json}
    • {tag_product_json}

     

    Example 1 - Add products to cart without refreshing the page

    <script>
    $(function(){
            var product = {tag_product_json};
    
            var divId = "#catProdTd_"+product.productId;
    
            $(divId).find("input.myAddToCart").click(function (){
                      bcInternals.shop.addToCart(product, {"selectedOptions": [1,4], "skipRefreshAfter" : true });
            });
    
    });
    </script>
    

    Example 2 - Change image according to selected attribute

    <script>
    $(function(){
            var product = {tag_product_json};
            var attributes = {tag_attributes_json};
    
            var divId = "#catProdTd_"+product.productId;
    
    
            $(divId).find("select").change(function (){
    
                      var selected = $(this).val();
                      var option = attributes.options[selected];
                      if(option && option.image)
                         $(divId).find("img").attr("src", option.image);
    
            });
    
    });
    </script>
    

    Step 5 – Play with it and share your feedback

     

    You’re almost there. Now you can go ahead and purchase products, view orders, view reports and share your experience.

     

    Importing and exporting products

    In our December release, we are going to update the existing import engine so that it support product with variations. Thus, we will be updating the product import template to add three additional columns to accomodate products with variations. These columns are optional so that customers do not have to update their existing import files if they don't use variations.

    Note: while the feature will be in beta turned off, the product export will not include these additional columns.

    Overview

    Three new columns will be added at the end of the import file:

    1. "Variation Code"     :     
      1. Expected values: empty for products, string with the variation code when the line is a product variation
      2. Default value: empty
    2. "Variation Options":     
      1. Expected values: product option names (ex: Red, Small, V-Neck); the must be entered in the same order the they are defined for product attributes
      2. Default value: empty
    3. "Use Variations":     
      1. Possible values: Y or N
      2. Default value: N
      3. Products with variations will need to have this set to Y
      4. Variations will have this cell empty

     

    Please check the attached Product_Variations_Import_File.xls file for a sample import template.

    Export behavior

    Products without variations:

    • only Use Variations column has value N

    Products with variations:

    • will output one row for the master product and one row for each associated variation
    • master product will have Use Variations: Y
    • each variation will have     
      • Product Code: the code of the master product
      • In Stock, On Order, Variation Code - the corresponding values set on the variation
      • Variation Options: the options that form the variations separated by semicolon (the order is that of the attributes as they appear in Attributes filed)

    Import behavior

    A variation row is one that have Variation Options not empty and Product Code not empty. The product code identifies the master product and the variation options identify the variation within that product.

     

    The variations are processed always after the master product. A variation row only updates an existing variation (the master product must have variations enabled and the corresponding options must exist in keep stock attributes).

    Create a product with variations

    • Add the keep stock on each attribute that keep stock: Size*|5|Y :Small|,Medium|,Large|;Color*|5|Y:Red|,Blue|,Green|
    • Use Variations: Y
    • Update each variation details by using the Variation Options as a key

    Update a product with variations

    • keep stock on attributes cannot be changed on a product that has variations enabled (if an attempt is made there will be an error)
    • every variation that appear in the table will be updated using Variation Options as a key
    • in stock, on order will be ignored for the master product

    Remove variations from a product

    • Use Variations: N
    • if there are variations in the table that point to that product they will be ignored

    SOAP APIs updates

    With the December release, we are also updating our eCommerce and CRM SOAP APIs to add support for products with variations when managing products and orders. We have added additional properties to accomodate support for product variations.

     

    You can find attached a sample of the updates WSDL for review - eCommerceandCRMWebServices.zip.

     

    What’s missing and known issues

    While this release does include a complete end to end workflow for managing inventory for products with attributes from the admin user interface, there are still some workflows missing, as well as some minor known issues we plan to fix before officially releasing this feature. Go through the list below for more details:

    • Inventory control for product attributes is only available on the new admin user interface;
    • The "hideDisabledVariations" parameter of the {tag_attributes} tag causes JavaScript errors in Internet Explorer 8 when selecting attributes from the attributes dropdowns in the product details layouts;
    • Editing and saving an attribute that is displayed as a drop-down list using Internet Explorer 8 will cause a JavaScript error in the new admin interface, the Product Attributes tab;

    Where to report issues

    Please use this thread to post your feedback or requests about this feature. We would like to have it as open discussion about what's currently in the release, and what is absolutely required to make it work for you.

     

    Note: Beta features are not officially supported and we do not offer a guaranteed response time. We usually respond within the next 48 to 72 hours, but this might vary depending on the team load and issue urgency.