Displaying product options as radio buttons and creating custom product creator

  • Posts: 8
  • Thank you received: 4
3 years 8 months ago #299853

-- HikaShop version -- : 3.4.0
-- Joomla version -- : 3.8.13

Hello everyone,

I want to create a Custom Product page, where the user selects various characteristics to create his own personalized product to buy.
I have the following characteristics:

- Size
- Padded
- Fabric 1

I read the tutorial here (that I found very helpful) and managed to create a rudimentary system of what I want.

What I did is basically:
a. Create a Custom Product and a second product I named Custom Product Characteristic as a product with only the specific characteristic (for example one product for each of Size, Padded, Fabric 1) and its variants.

b. I went to the Custom Product and in the Options field I added the three Custom Product Characteristics as options, thus allowing me to be able to made the selections on the product page.

I have the following questions:

1. I want Fabric 1 to be a radio button selection instead of dropdown selection. Is there a way to do this?
I went to Hikashop > Configuration > Product Options and changed Characteristics selection method to Radio Button and the Product selection method to On a per product basis , but when

2. When I select a Fabric 1 option, I want it to update the product image with the appropriate fabric. I understand that it might be the case where I have ti create and overlay where the fabric will show up, but I was wondering if there is a better idea, or perhaps someone can give me a guidance as to which view I need to change (and possibly a point or two on how).

Thank you in advance.

Note: I didnt choose to create a single product with variants because the amount of options in Fabric 1 are too many and bog down the page when someone tries to access it.

Last edit: 3 years 8 months ago by jgardounis.

Please Log in or Create an account to join the conversation.

  • Posts: 8
  • Thank you received: 4
3 years 8 months ago #299863

I did a better research on the forums here and I got to THIS thread where the OP suggests editing the product/option.php in the line where it says:

$html = JHTML::_('select.genericlist', $this->values, $map, 'class="inputbox" size="1" onchange="hikashopChangeOption();"', 'value', 'text', (int)$value,$id );

$html = JHTML::_('select.radiolist', $this->values, $map, 'class="inputbox" size="1" onclick="hikashopChangeOption();"', 'value', 'text', (int)$value, $id );

essentially changing the select.genericlist to select.radiolist.

This worked, but it changed all the option selections into radio buttons (though that does not look shabby at all imho), whereas I want the type of input set for each characteristic (when we created them) to set it to the appropriate type. I can only assume I need to add the value of the Characteristics selection method (from the Characteristic edit page in administration), changing the code further into:

$html = JHTML::_('select.[add-method-selection-value-here]list',

which will result in appropriately choosing between:
$html = JHTML::_('select.genericlist',
$html = JHTML::_('select.radiolist',

Now I need to find this value. Any ideas?

An idea for implementing the above would be to add an IF statement where:
IF [method-selection-value] = radio button --> $html = JHTML::_('select.radiolist',...
ELSE $html = JHTML::_('select.genericlist',...

EDIT#2: Here is a link to my progress so far: menestho.com/online-shop/swimwear/create-your-swimsuit

Also I noticed that changing options does not update the price with options value, but it does show the correct sum in the cart. Weird...Any ideas why this could be happening?

I re-read the directions given in that other post and it mentioned s javascript function:
function hikashopChangeOption(){
	var j = 0;
	total_option_price = 0;
		var option = document.getElementById('hikashop_product_option_'+j);
		var option_price = hikashop_options[option.value];

	var arr = new Array();
	arr = document.getElementsByName('hikashop_price_product');
	for(var i = 0; i < arr.length; i++){
		var obj = document.getElementsByName('hikashop_price_product').item(i);
		var id_price = 'hikashop_price_product_' + obj.value;
		var id_price_with_options = 'hikashop_price_product_with_options_' + obj.value;
		var price = document.getElementById(id_price);
		var price_with_options = document.getElementById(id_price_with_options);
		if(price && price_with_options){
			price_with_options.value = parseFloat(price.value) + total_option_price;

	if(window.Oby && window.Oby.fireAjax) window.Oby.fireAjax('hkContentChanged');
function hikashopRefreshOptionPrice(){
	var price_div = document.getElementById('hikashop_product_id_main');
	var inputs = price_div.getElementsByTagName('input');
		var id_price_with_options = 'hikashop_price_product_with_options_' + inputs[0].value;
		var price_with_options = document.getElementById(id_price_with_options);
			var target = document.getElementById('hikashop_product_price_with_options_main');
				window.Oby.xRequest('".$baseUrl."price='+price_with_options.value+'".$url_itemid."', { mode: 'GET', update: target });

window.hikashop.ready( function() { hikashopChangeOption(); });

Apparently dropdown value can be easily picked, while in a radio it requires a loop on each radio element to see which one is selected. To be frank I am rather confused as to why the loop is required and how should I change the code.

Last edit: 3 years 8 months ago by jgardounis.

Please Log in or Create an account to join the conversation.

  • Posts: 75861
  • Thank you received: 11845
3 years 8 months ago #299860


You should delete the fabric 1 product and instead add the fabric characteristic directly to the main product.
That way you'll be able to get the color selector with the image color of the main product changing dynamically.
You can read more about doing that here:
You can still keep the other selectors as option products.
That way, you'll only have one variant per color and since you have only a dozen colors for the fabric it's won't be a problem with the speed of the page.
It would only start to be a problem if you moved all the selectors as characteristics.

The following user(s) said Thank You: jgardounis

Please Log in or Create an account to join the conversation.

  • Posts: 8
  • Thank you received: 4
3 years 8 months ago #299910

You know, I was wondering how I would manage to have the images change based on color selection and thought I would have to do a lot of php editing on the product/show_block_img.php . Fortunately your suggestion minimizes that.

That does make sense. Indeed there are currently only 12 colors. The idea is, though (and I apologize for not putting it on the table earlier, I just wanted to start simple), that the product is comprised by 2 pieces (top, bottom) which can have different colors not only externally, but internally as well, which translates to:

- top exterior: 12 colors
- top interior: 12 colors
- bottom exterior: 12 colors
- bottom interior: 12 colors

For the external colors I want it to change the product images, so your suggestion will be fitting. For the internal colors, though, and in the best interest of not running wild with variations (124=20.736) I will keep them as options, lowering that number to 122=144 which is quite manageable :) .

What the final implementation of the custom product creator will be is to have the user choose:

- Design for the top (6 designs): main product characteristic
- Exterior color for the top (12 colors): main product characteristic
- Interior color for the top (12 colors): main product option
- Size for the top (5 sizes): main product option
- Padding for the top (2 options): main product option
- Design for the bottom (6 designs): main product characteristic
- Exterior color for the bottom (12 colors): main product characteristic
- Interior color for the bottom (12 colors): main product option
- Size for the bottom (5 sizes): main product option
- Padding for the bottom (2 options): main product option

That eventually takes the amount of main product variants to 123=1.728, which (although a bit steep) is possibly viable, dunno I will have to do some tests on this.

By choosing the Design for the top and for the bottom, it would change to the appropriate design on the product image. Then choosing the user will be able to select the exterior colors, again updating the product image and have the interior colors remain as options.

My main concern with the use of characteristics in the main product is if the colors and designs increase with time (which is something to be expected with e-shops tbh). Is there no way to have the option-product variant images show up in the main-product page?

PS: Also Nicolas any idea about my EDIT#3 in my previous comment on this thread?

Please Log in or Create an account to join the conversation.

  • Posts: 75861
  • Thank you received: 11845
3 years 8 months ago #299912


1700 variants is too much I would say.
For now, the characteristic selection mechanism isn't ajax (we want to do that in the near future, but it's a big rework as we'll basically need to redo a big piece of the product page to support that.
With an ajax characteristic selection, thousands of variants wouldn't be a problem for the frontend. However, you would still have a problem managing the variants.

In that case, I would rather recommend to create custom fields of the table "item" for the color selection and then write some custom javascript to change the image when the custom field selection is changed.
That way, you won't have any problem to expend the color selectors
You could potentially do it with options instead of custom item fields and directly add your code to the javascript code of the option view file. It's basically the same but options are a bit more resource hungry than custom item fields.

Regarding point 3, the javascript code there dynamically calculate the total amount of the product base price + the price of each option selected, hence the loop.
We could indeed store the current total and add/substract the difference of price when the option is being changed, but it's a bit more complex and prone to errors. Also, it's still necessary to initialize the total amount when the page is first loaded so since we need to have the code anyways, it's either to always use it.

Please Log in or Create an account to join the conversation.

Time to create page: 0.066 seconds
Powered by Kunena Forum