Here's a link to google's cache of the CT price modifiers docs for use while their site is still down.
CT permits you to use a matrix field for as your price modifier field, so with some extra columns and with the help of a little jQuery magic to make the UI nicer we can get to where you want to go.
Create your price modifiers matrix with additional columns for colour
and size
in addtion to the required option
(url friendly value), an option_name
(string) and a price
value (ie a positive or negative amount to vary the base price by). Alternatively, avoid setting a base price and use the modifiers themselves to set the whole price of the product.
Additionally, structure your option
value such that is is the colour and size values combined with a separator such as an underscore, eg red_xl
, green_xl
, etc.
Now in your template you can use the built-in CT item_options
magic:
<div class="default-options">
{exp:cartthrob:item_options entry_id="{entry_id}" }
{select}
<option {selected} value="{option_value}">{option_name} {price}</option>
{/select}
{/exp:cartthrob:item_options}
</div>
This is what non-js users will see, perfectly usable but not super friendly. Let's fix that with some jQuery. In your template we can write out a couple of JS objects from your item_options
field:
<script>
var prodOpts = {
sizes: [],
colours:[]
};
{item_modifier_field}
prodOpts.sizes.push({size});
prodOpts.colours.push({colour});
{/item_modifier_field}
</script>
Then in an external script / on DOM ready, just hide the .default-options
<div>
, iterate over prodOpts.sizes
and prodOpts.colours
and build <select>
s for each.
Inject these into the page and hook up some event handlers so that when both of your dynamically created selects have been set to non-default value, your hidden CT populated select is updated (you can get the value to select by concatenating the size
and colour
values together with your chosen separator).
I don't know what your JavaScript level is, and I'm not going to write the whole thing for you, but if you get stuck be sure to ask another question and I'll do my best to help out.