Solved - Conditional Option based on option choice

  • Posts: 86
  • Thank you received: 11
  • Hikashop Business
8 years 11 months ago #223786

-- HikaShop version -- : HikaShop Business: 2.6.0
-- Joomla version -- : 3.4.5
-- PHP version -- : 5.4.45

I love Hikashop. Thank you for making a Joomla e-commerce platform that is so easy and fully configurable.

I have a pretty simple question. I've searched the forum but couldn't find another topic.

I have a product that has an option called Color/Mono with two options either Color or Mono.

What I want to do is have another conditional option that only displays when the user selects the Mono option from above. How can I achieve this?

Last edit: 8 years 8 months ago by simplecms.

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
8 years 11 months ago #223790

Hi,

Instead of options, you could use custom fields of the table "item" that you can configure via the menu Display>Custom fields.
In that case, the fields can be displayed/hidden based on others thanks to the "Display limited to" setting of each field.
The drawback is that the fields can't change the price of the product so if that's something you need you won't be able to use that method.
I tried to look at your website link you provided but I got a blank page.

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

  • Posts: 86
  • Thank you received: 11
  • Hikashop Business
8 years 8 months ago #232397

Sorry for the long delay in replying. My client has been somewhat slow on getting this setup.

Yes I do need the conditional option to have a price unfortunately. What can I do to have that work?

Last edit: 8 years 8 months ago by simplecms.

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
8 years 8 months ago #232400

Hi,

Then you can keep using options and edit the file "option" of the view "product" via the menu Display>Views and add custom javascript code to hide/display the second option based on the value selected in the first one.

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

  • Posts: 86
  • Thank you received: 11
  • Hikashop Business
8 years 8 months ago #232506

So I added this:

function check() {
    var dropdown = document.getElementById("hikashop_product_option_0");
    var current_value = dropdown.options[dropdown.selectedIndex].value;

    if (current_value == "5") {
        document.getElementById("hikashop_product_option_2").style.display = "block";
    }
    else {
        document.getElementById("hikashop_product_option_2").style.display = "none";
    }
}
But I just dumped it in a random location within that file. It gave me an expected error. Can you guide me a little more to try and come up a working solution?

Last edit: 8 years 8 months ago by simplecms.

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
8 years 8 months ago #232520

Hi,

You can add it before the line:
function hikashopChangeOption(){
where you have the other javascript functions of that view file.

That way you won't have errors. Beware that the js code is enclosed in double quotes, so you should either escape them in your function code or use single quotes instead.

Then, after the line:
hikashopRefreshOptionPrice();
just add the line:
check();
in order to call your function when an option selection is changed.

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

  • Posts: 86
  • Thank you received: 11
  • Hikashop Business
8 years 8 months ago #232656

Done and works! Thank you so much for the help!

The only bummer is that there isn't a way to hide the entire <tr> for that element so the title span and row still are visible but the select box isn't so that will have to do.

Below is my new option file if anyone else wants to replicate it for themselves.

<?php
/**
 * @package	HikaShop for Joomla!
 * @version	2.6.0
 * @author	hikashop.com
 * @copyright	(C) 2010-2015 HIKARI SOFTWARE. All rights reserved.
 * @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');

?><table class="hikashop_product_options_table">
<?php
	$old_show_discount = $this->params->get('show_discount');
	$old_per_unit = $this->params->get('per_unit',1);
	$this->params->set('show_discount',0);
	$this->params->set('per_unit',0);
	$this->params->set('from_module','1');
	$i=0;
	$js="var hikashop_options=Array();";

	foreach($this->element->options as $optionElement) {
?>
	<tr>
<?php
		$this->values = array();
		$value = 0;
		$currency = hikashop_get('class.currency');
		$map = 'hikashop_product_option['.$i.']';
		$id = 'hikashop_product_option_'.$i;
		if(empty($optionElement->variants)){
			if(!$optionElement->product_published || (!$this->config->get('show_out_of_stock',1) && $optionElement->product_quantity==0)) continue;
			$this->values[] = JHTML::_('select.option', 0,JText::_('HIKASHOP_NO'));
			$text = JText::_('HIKASHOP_YES');
			$this->row =& $optionElement;
			if(!empty($optionElement->prices) && $this->params->get('show_price')){
				$ok = null;
				$positive=1;
				foreach($optionElement->prices as $k => $price){
					if(empty($price->price_min_quantity)){
						$ok = $price;
						if($price->price_value<0) $positive=false;
						break;
					}
				}
				if($this->params->get('price_with_tax')){
					$price = $ok->price_value_with_tax;
				}else{
					$price = $ok->price_value;
				}
				$text.=' ( '.($positive?'+ ':'').$this->currencyHelper->format($price,$ok->price_currency_id).' )';


				$js.="
				hikashop_options[".(int)$optionElement->product_id."]=".(float)str_replace(',','.',$price).";";
			}
			$this->values[] = JHTML::_('select.option', $optionElement->product_id,$text);
		}else{
			$defaultValue=array();
			if(isset($optionElement->characteristics) && is_array($optionElement->characteristics) && count($optionElement->characteristics)){
				foreach($optionElement->characteristics as $char){
						$defaultValue[]=$char->characteristic_id;
				}
			}

			foreach($optionElement->variants as $variant){
				if(!$variant->product_published || (!$this->config->get('show_out_of_stock',1) && empty($variant->product_quantity))) continue;
				if($variant->product_sale_start>time()) continue;
				if($variant->product_sale_end!='' && $variant->product_sale_end!='0' && $variant->product_sale_end<time()) continue;
				if(empty($variant->variant_name)){
					if(empty($variant->characteristics_text)){
						$text = $variant->product_name;
					}else{
						$text = $variant->characteristics_text;
					}
				}else{
					$text = $variant->variant_name;
				}
				$this->row =& $variant;

				if(!empty($variant->prices) && $this->params->get('show_price')){
					$ok = null;
					$positive=1;
					foreach($variant->prices as $k => $price){
						if(empty($price->price_min_quantity)){
							$ok = $price;
							if($price->price_value<0) $positive=false;
							break;
						}
					}
					if($this->params->get('price_with_tax')){
						$price = $ok->price_value_with_tax;
					}else{
						$price = $ok->price_value;
					}
					$text.=' ( '.($positive?'+ ':'').$this->currencyHelper->format($price,$ok->price_currency_id).' )';

					$js.="
					hikashop_options[".(int)$variant->product_id."]=".(float)str_replace(',','.',$price).";";
				}

				if($defaultValue && isset($variant->characteristics) && is_array($variant->characteristics) && count($variant->characteristics)){
					$default = true;
					foreach($variant->characteristics as $char){
						if(!in_array($char->characteristic_id,$defaultValue)){
							$default = false;
						}
					}
					if($default){
						$value = $variant->product_id;
					}
				}
				$this->values[] = JHTML::_('select.option', $variant->product_id,$text);
			}
		}
		if(!count($this->values)) continue;
		$html = JHTML::_('select.genericlist', $this->values, $map, 'class="inputbox" size="1"  onchange="hikashopChangeOption();"', 'value', 'text', (int)$value, $id);
		if(!empty($optionElement->variants)){
			$optionInfo =& $optionElement->main;
		}else{
			$optionInfo =& $optionElement;
		}
		$options = '';
		if(!empty($optionInfo->product_description) || !empty($optionInfo->product_url)){
			$options='<img src="'.HIKASHOP_IMAGES.'info.png" alt="Information"/>';
			$description = '';
			if(!empty($optionInfo->product_description)){
				$description = $this->escape(strip_tags(JHTML::_('content.prepare',$optionInfo->product_description)));
				$options='<span class="hikashop_option_info" title="'.$description.'">'.$options.'</span>';
			}
			if(!empty($optionInfo->product_url)){
				if(empty($description)){
					$description = $optionInfo->product_name;
				}
				$popup = hikashop_get('helper.popup');
				$options = $popup->display(
						$options,
						$optionInfo->product_name,
						$optionInfo->product_url,
						'hikashop_product option_'.$optionInfo->product_id.'_popup',
						760, 480, '', '', 'link'
					);
			}
		}
		$html = '<span class="hikashop_option_name">'.$optionInfo->product_name.$options.'</span></td><td>' . $html;
?>
		<td><?php
			echo $html;
		?></td>
	</tr>
<?php
		$i++;
	}

	global $Itemid;
	$url_itemid='';
	if(!empty($Itemid)){
		$url_itemid='&Itemid='.$Itemid;
	}
	$baseUrl = hikashop_completeLink('product&task=price',true,true);
	if(strpos($baseUrl,'?') !== false)
		$baseUrl .= '&';
	else
		$baseUrl .= '?';

	$js .= "
function check() {
    var dropdown = document.getElementById('hikashop_product_option_0');
    var current_value = dropdown.options[dropdown.selectedIndex].value;

    if (current_value == '5') {
        document.getElementById('hikashop_product_option_2').style.display = 'block';
    }
    else {
        document.getElementById('hikashop_product_option_2').style.display = 'none';
    }
}	
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();
	check();
}

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){
			try{
				new Ajax('".$baseUrl."price='+price_with_options.value+'".$url_itemid."',  { method: 'get', onComplete: function(result) { var totalPrice = window.document.getElementById('hikashop_product_price_with_options_main'); if(totalPrice) totalPrice.innerHTML = result;}}).request();
			}catch(err){
				new Request({url:'".$baseUrl."price='+price_with_options.value+'".$url_itemid."', method: 'get', onComplete: function(result) { var totalPrice = window.document.getElementById('hikashop_product_price_with_options_main'); if(totalPrice) totalPrice.innerHTML = result;}}).send();
			}
		}

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

	if(!HIKASHOP_PHP5)
		$doc =& JFactory::getDocument();
	else
		$doc = JFactory::getDocument();

	$doc->addScriptDeclaration("\n<!--\n".$js."\n//-->\n");
	$this->params->set('show_discount',$old_show_discount);
	$this->params->set('per_unit',$old_per_unit);
	$this->params->set('from_module','');
?>
</table>

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

  • Posts: 86
  • Thank you received: 11
  • Hikashop Business
8 years 8 months ago #232667

Update - My client wanted only 1 of the options to be hidden NOT the entire select box. So this is what I've created:

function check() {
    var dropdown = document.getElementById('hikashop_product_option_0');
    var current_value = dropdown.options[dropdown.selectedIndex].value;

    if (current_value == '4') {
        document.getElementById('hikashop_product_option_2').options[1].disabled=true;
	document.getElementById('hikashop_product_option_2').selectedIndex = '0';
    }
    else {
        document.getElementById('hikashop_product_option_2').options[1].disabled=false;
    }

}

But this does NOT update the "Price with options" if the user selects the option and then reverts back to the option that makes it disabled. How can I have the system reset the price?

Last edit: 8 years 8 months ago by simplecms.

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
8 years 8 months ago #232670

Hi,

1.It would be easy to handle by adding a dynamic id to the tr tag <tr> in the same file and then hidding/displaying the tr based on that id in your javascript function.

2. try moving the call to the check function at the beginning of the hikashopChangeOption function.

The following user(s) said Thank You: simplecms

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

  • Posts: 86
  • Thank you received: 11
  • Hikashop Business
8 years 8 months ago #232786

Thank did it. Thank you very much!

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

Time to create page: 0.077 seconds
Powered by Kunena Forum