Re-Designed Product Configurator

I’ve been meaning to post this for some time and now I am finally getting around to it. You can see the configurator here:


I am not even close to being done and the classes are all messed up right now, but I am sure that everyone will get the idea. I did have a problem with the dynamic tabs mod conflicting with this, but CS fixed it for me and when I find out what they fixed I will post the fixes.

I hope this benifits someone. I really like it and I am sure that other people will as well.

You can download the file here:



Here is additional code (with the images code incorporated from brandonvd) - this will make columns similar to the multi-column product page. It’s only coded for the checkbox.


{elseif $po.configurator_group_type == ‘C’}

{if $po.products|@sizeof < $columns} {assign var=“columns” value=$po.products|@sizeof} {/if} {split data=$po.products

size=$columns|default:“3” assign=“splitted_products”} {math equation=“floor((100-(x-1)*4)/x)”

x=$columns|default:“3” assign=“cell_width”}

{foreach from=$splitted_products item=“sproducts”}

{assign var="product_line_first" value="1"}
{foreach from=$sproducts item="group_product"}
{if $product_line_first == "1"}
{assign var="product_line_first" value="2"}


{if $po.products}



{if $po.images == 'Y'}{include file="common_templates/image.tpl" image_width=$settings.Appearance.icon_width obj_id=$group_product.product_id images=$group_product.main_pair object_type="product"}

{include file="buttons/button_popup_link.tpl" but_href="`$index_script`?`$target_name`=products&`$mode_name`=configuration_product&product_id=`$group_product.product_id`" but_text=$group_product.product}
{include file="common_templates/price.tpl" value=$group_product.price}{if $group_product.recommended == 'Y'}{$lang.recommended}{/if}




which tpl is this code for?

Thanks for the generous contribution to the community !!!

whatever I add for tab names under product configurator/steps… it just shows one tab??? Any suggestions?


You have to have product groups that relate to the steps to have the tabs show up. I also think that you have to have the product group available and at least one product in the group for it to work as well. I hope this has helped. If you need more details just let me know and I will be happy to help.


here is what i did…

  1. enabled product config from module
  2. Added “charger” is step… available checked
  3. Product groups >Name - Car Charger> Select charger from step dropdown, add products in details and make available…

    nothing shows up :confused:

I guess the first question would be if you made a configurable product or not. It seems that you are trying to do a cell phone so I guess you would want to make a configurable cell phone and then make sure that you check the configurable product checkbox. Once you do that then just go to the configuration tab on that product and add the product groups that you want to have for it. If you already have the product groups in the configurator than you should be able to use the pull down menu to add the groups to the product.

Here is a screen shot of the product:

Here is a screen shot of my configurator steps:

and here is a screen shot of my product groups in the configurator:

I hope this was helpfull.


I have dont everything up to that part. I have added all the products, but when I try run the configuration I cannot even pass the first step. I can click the continue button but nothing happens.

[quote name=‘Seagyn Davis’]I have dont everything up to that part. I have added all the products, but when I try run the configuration I cannot even pass the first step. I can click the continue button but nothing happens.[/QUOTE]

Ok, so i tried to view it on an Internet Explorer browser, and got the folowing errors:

line 27 - ‘conf’ is null or not an object

line 119 - ‘conf_prod’ is null or not an object

line 890 - Object required

The idea of configuration is/should be that you start a product with $0.00 and build on. When we try that with updating the files… we cannot. Keeps giving error.

The only way it works is that the price has to be any value other than $0.00.

Attached is screen captures of errors. The top error is when you open the product page and the second is that you say OK to error 1 and try to add/select a product. The errors is same as Seagyn_Davis

Any suggestions or help would be appreciated.



I unfortunately don’t know why you guys are having these problems. I have my base product set to $0.00 and everything works fine. You might want to check that your configurable product is set to allow a zero price action.

Like this:

As for the rest of the errors you might end up having to contact CS-Cart since I had them install this mod for me.


[quote name=‘brandonvd’]You might want to check that your configurable product is set to allow a zero price action.

Like this:


That did it :smiley: … that was the problem.

Great! It is always the simplest things that hold up the whole show. If you need any more help let me know.


oh my wooord! yes that was the problem, working like a charm hey! now to customize it now. thanks alot!

Ok, so the next issue I have come accross is on the first page, it works very well, but the all the radio options are disabled on the first step except for one. That is until you click on the first option, which is not disabled, and then they all become active.

Anything I am missing?

it seems to be a missing field name in admin/seetings/apperance for product configurator. Looking at the SQl table… the filed name is

INSERT INTO cscart_settings_descriptions (object_id, description, object_type, lang_code, object_string_id) VALUES ('8021', 'Icon width on product configurator pages', 'O', 'NL', '');

but does not show “'Icon width on product configurator pages”

Any ideas… which file to update.

Anyone… which is the file to make changes to admin/settings/apperance?

Picture attached

missing field.JPG

OK, so i still have the problem, and i have noticed that it is the same on the other pages.

wat happens is that i can select what i want, but then when i go through to the next page and the compatibility classes kick in, the options that are not supposed to be there are greyed out, then you click the options you are allowed to and then all the options become available.

I am not really sure what is wrong. I would first check the compatability classes. You need a lot of classes to do even the simplest thing so maybe your just missing something or even have duplicate classes that are confusing the configurator. The only problem with this idea is that it doesn’t explain why some items are showing up greyed out. The way my configurator is setup is if an option isn’t compatible than it just isn’t there.

I wish I could be more help. If you would like you could PM me and I can give you access to a test site that I have setup and you can take a look at what I did.


I sent you a PM.

I have another issue related to this.

I would like to offer my customers the chance to select the number of accessories - not just the default 1 that you get with check boxes.

For instance, I would like my customer to be able to choose 1(qty) of a certain accessory and then 5(qty) of another accessory. Right noew they can only check a box to get one of each.

Please advise.

Thank you!!!