LemonStand Blog

Building a product availability chart

0 | published by Aleksey Bobkov on Monday, November 29, 2010

In this post I would like to demonstrate a simple approach for building a product availability chart. The chart idea was originally suggested by our old friend - Matthew Johnson, who developed the first LemonStand-based store - Seventh.Ink.

This is the availability chart we are going to build:

The concept

The product availability chart should display stock values for all grouped products of a specific product. This chart could be placed on the product detail page. When scoping out the task, I realized that there are actually two tasks: 1) listing the grouped products, and 2) calculating the percentage of stock value for each grouped product. If we know the percentage value, we can calculate the width of the indicator bar, in pixels.

The first task can be solved easily with the list_grouped_products() method of the Shop_Product class. For the second task - calculating the stock percentage value, we should know the maximum possible stock value for each product. There isn't a maximum product stock field in the default LemonStand feature set, but it can be added with a very simple module, which extends the product model. You will find the link for downloading the module in the end of this post.

The implementation

Implementing the chart is mostly a question of styling the chart markup. I created a partial, which you can download in the Usage section below, and render this partial on the product page.

The partial code iterates through the grouped product list, and calculates the offset value for each chart indicator bar, in pixels. To calculate the indicator bar width in pixels, the code multiplies the stock percentage value by the indicator width. For styling the chart I created a simple CSS file and 3 images. The round bar corners are implemented with CSS.

Usage

To install the chart into your store, please download the files from the list below and follow the instructions for each file.

• Max stock level module. Download and unzip the module to the modules directory of your LemonStand installation. Re-login to the Administration Area. After that, you can set the max stock level values for your products on the Inventory tab of the Create/Edit Product page.
• Images and CSS file. Download the archive and upload the images and CSS file to the corresponding directories in your store. You may need to update image paths in the CSS file. Add a link to the CSS file to the product page. If you use the new JavaScript/CSS combining features, you can just add the CSS file to the css_combine() call.
• Availability chart partial code. Create a new partial (for example - product:availability_chart) and paste the partial code into it. Render the partial on the product page with the following call:

  <? $this->render_partial(
      'product:availability', 
      array('product'=>$product)) ?>

Enjoy! Please note that this is just a demonstration of LemonStand's flexibility and power. Feel free to customize the widget as you wish and share your ideas with us.