Displaying product options as radio buttons and creating custom product creator

-- 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.

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 );

$html = JHTML::_('select.genericlist',

$html = JHTML::_('select.radiolist',

IF [method-selection-value] = radio button --> $html = JHTML::_('select.radiolist',...
ELSE $html = JHTML::_('select.genericlist',...

function hikashopChangeOption(){
	var j = 0;
	total_option_price = 0;
	while(true){
		var option = document.getElementById('hikashop_product_option_'+j);
		if(!option){
			break;
		}
		j++;
		var option_price = hikashop_options[option.value];
		if(option_price){
			total_option_price+=option_price;
		}
	}

	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;
		}
	}
	hikashopRefreshOptionPrice();

	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');
	if(inputs[0]){
		var id_price_with_options = 'hikashop_price_product_with_options_' + inputs[0].value;
		var price_with_options = document.getElementById(id_price_with_options);
		if(price_with_options){
			var target = document.getElementById('hikashop_product_price_with_options_main');
			if(target)
				window.Oby.xRequest('".$baseUrl."price='+price_with_options.value+'".$url_itemid."', { mode: 'GET', update: target });
		}

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

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 (12⁴=20.736) I will keep them as options, lowering that number to 12²=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 12³=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?