jsqu99 edited this page Jul 25, 2011 · 22 revisions
Clone this wiki locally

I have some screencasts (not the most refined production, but you can still learn from them) for the cake product here:

entire playlist


part 1

part 2

part 3

part 4

Here is an ERD Diagram.

Note on using Ad Hoc Variant Exclusions

If using a 'multi-select' scheme for your ad hoc options (like w/ the pizza toppings example), exclusions currently will not work.

Product Pricing Display Options

NOTE: the preferences portion of this extension has finally been done 'correctly', and is reflected on the master branch (July 4, 2011). Very shortly, the master branch will be declared 'stable' and the current recommended branch, pre-deface-stable, will go away.

If you are in development, I'd urge you to use master, in which case the correct way to change the behavior of javascript pricing would be:

Spree::FlexiVariants::Config[:use_javascript_pricing_updates] => false

If you are intent on using pre-deface-stable, follow these instructions:

By default, prices are NOT updated automatically on the product display page.

You can enable this by: Spree::Config.set :use_ajax_pricing_updates => true (NOT in your activate method! Do it from 'rails console'

This option controls whether or not the 'products/pricing' partial is included.

Also note that this field will be changing soon, to use_javascript_pricing_updates, as the image-customization branch will be merged into master/pre-deface-stable soon, and all pricing updates will occur on the client (not using ajax).

Customizing the Products Page

You can customize the look of both ad hoc options and customizations by adding the appropriately named partial in the following manner:

Ad Hoc Options:

Given an option type named 'toppings', create the partial app/views/products/ad_hoc_options/_toppings.html.erb


Given a customization named 'cake_candles', having one customizable option name 'amount':

If you want a partial based on the name of your customization_type, place it in ./customization_type e.g.

name = 'customization_image'


If you want a partial based on the name of your customization_type's calculator, place it in ./calculator_type e.g.

calculator = Calc::MyCalc


The partials are selected in this order is

1) customization_type 2) calculator_type

Simple Ad Hoc Options Example

Let's create an imaginary product called 'Spap'. It has two option types - sizes and colors. All the sizes alter the price, but none of the colors do.

Let's now use the admin app to create these ad-hoc options


Refer to the spree documentation for the details on how to add option types and option values.

You'll create option types 'size' and 'colors', and add the associated option values. The case to use this extension becomes more compelling as the number of options types/values grows.

With that said, you can only create 2 or 3 option values for each to see the effects, so create sizes S,M, and L and colors red, green, and blue.

Create a product 'Spap'.

From there, go into the Ad Hoc Option Types tab on the bottom right.

Add both option types. After adding each one, you'll be redirected to a screen that displays all the possible option values, along with a price field.

Give each a price (leave some of them 0.00 if you like).

Now go into the store and see the drop downs for the 'Spap'.

Notice how the price changes according to your selections.

Add the 'Spap' to the cart and look at the description.

Note that Ad Hoc Options can coexist with 'traditional' variants.

Also note that you can create a partial having the same name as the option type to override the display, possibly enabling multiple option values within an option type to be selected!

Ad Hoc Variant Exclusions

You might have a small subset of unavailable option combinations. This subset is called an Ad Hoc Exclusion.

Ad Hoc Options Example using Exclusions

Let's create another product, called 'Gerfo', configured just like 'Spap'.

Just to make the example more complex, add a third option type, "gloss", with values "dull", "shiny", and "annoying".

Assume that color "blue" shouldn't be allowed with finish "annoying" (it doesn't matter what size).

Another illegal combination is size=small, color=green, and gloss="dull".


Configure the ad hoc option types as in the first example, then click the "Ad Hoc Exclusions" link on the right.

Add the illegal combinations mentioned above, then go to the store and play with the drop-downs to see the effect.

Simple Product Customizations Example

Let's create a 'rope' product. I only sell one type of rope, but I'll cut it any length.


Inside the admin app, click 'Products', then click the Customization Types sub-menu item..

Create a new type called 'length_customization' with presentation 'Cut to length (inches)'. Leave the description blank. Select the AmountTimesConstant calculator.

Once created, fill in the options for the calculator and the customization option row at the bottom and update.

Now create the rope product then click the Customization Types tab on the bottom right.

You'll see there are no customization types added to the product.

Click the 'Add Product Customization Type' link and select the length_customization to the product.

Now go to the store, select the rope, enter the desired length, and add to cart.

Other Customizations

There are a couple other calculators provided (you can always add your own). See the product_area calcucator for a customization that has more than one customizable option.

Image Customizations

You can easily add image customizations. Simply use the image customization calculator when creating the customization