How to add html5 data attributes in prod charact.

  • Posts: 19
  • Thank you received: 0
11 years 1 month ago #149211

-- url of the page with the problem -- localhost
-- HikaShop version -- :HK Essential: 2.3.0
-- Joomla version -- :2.5.19
-- PHP version -- : 5.3.13
-- Browser(s) name and version -- : FreFox 27.0.1
-- Error-message(debug-mod must be tuned on) -- : Error_message

Hi, I would like to know if it is possible to programmatically add via php html5 data attributes to a product characteristics dropdown in order to narrow the range of available options. This is a continuation of a previous post on how to link product characteristics dropdowns using another approach:
Linked product characteristics dropdowns?

To clarifiy: the calendar product item shown below (img 1..3) is only available in some languages depending on the chosen theme (ie. Switzerland: 1. N4, 2. N6, etc.). The theme dropdown may thus be viewed as the parent of the language dropdown.

To implement a filtering behavior, I thought of adding a data attribute (ie data-lang) to each option of the parent dropdown and use some jQuery to hide the irrelevant language options in the child drop-down. The attribute contains the prod char ID's of the associated language characteristics PK's ie:

<select id="hikashop_product_characteristic_9" onchange="return hikashopUpdateVariant(this);" ...>
	<option selected="selected" value="14" data-lang="18, 19" >Switzerland</option>
	<option value="15" data-lang="18, 19, 20, 21">Spendor of Nature</option>
	...
</select>
where:
  • Switzerland: 1. N4, 2. N6 ie data-lang="18, 19"
  • Splendor of Nature:1. N4, 2. N6, 3. N7, 4. N8 ie data-lang="18,19, 20, 21"

Questions: Is this possible? If so, how would I go about injecting via php data attributes to the parent drop-down options?

TIA for any hints/references.






Attachments:
Last edit: 11 years 1 month ago by Helveticus.

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

  • Posts: 19
  • Thank you received: 0
11 years 1 month ago #149242

For testing purposes, I went the js route and injected the data-lang attribute via jQuery as seen on the attached img. A custom js function (fnHideCalLangOptions()) is used to display all relevant language options included in attribute data-lang.

Essentially, the code prepends the custom fn to the current HK function (hikashopUpdateVariant(this)) in the onchange attribute ie:

<select id="hikashop_product_characteristic_9" 
   onchange="fnHideCalLangOptions($(this));return hikashopUpdateVariant(this);" .... >
    <option selected="selected" value="14" data-lang="18, 19">Switzerland</option>
     ...
</select>

Question:
This quick fix works, but I wonder if it may possibly conflict with future HK releases. If so, could you please suggest alternative approaches to tackle this issue?

TIA for any hints/references.

jQuery code:
/* ---------------------------------------------------	
Adds data-lang attribute to calendar theme product characteristics. The attr contains the PK's of the associated theme languages. Assumes cal theme characteristics are ordered (ie 1. CH, 2. Splendor of Nature, etc.)
      child 0: Switzerland  1. N4 (de/fr/en) 2. N6 (en) 
      child 1: Splendor: 1. N4 (de/fr/en) 2. N6 (en) 3. N7 (de/fr) 4. N8 (de/fr/it)
*/

jQuery(function ($) {
   // Add attribute data-lang to cal theme prod char ddn:  #hikashop_product_characteristic_9
   var $calthemeDdn=$('#hikashop_product_characteristic_9');

   // Add data-lang attribute if ddn exists.
     if ( $calthemeDdn.length ) {
	$calthemeDdn.children().eq(0).attr('data-lang', '18, 19');		
	$calthemeDdn.children().eq(1).attr('data-lang', '18, 19, 20, 21');	

        // Prepend custom "fnHideCalLangOptions()" to current HK onchange fn. Pass selected cal theme option to custom fn. 
	var fnExp= $calthemeDdn.attr('onchange'); 
	fnExp= "fnHideCalLangOptions($(this));" + fnExp;
	$calthemeDdn.attr('onchange', fnExp);
     }
});

function fnHideCalLangOptions($ddn){
   // Displays all cal language options associated to selected cal theme $ddn.
    var data_lang = jQuery('#hikashop_product_characteristic_9').find("option[value='" + $ddn.value + "']").eq(0).attr("data-lang"); // ie "18, 19, 20, 21"
    var $calLangDdn=jQuery('#hikashop_product_characteristic_22'); 

    // Show only cal language options associated to selected theme.
    $calLangDdn.children().hide().each(function (idx, opt) {
       if (data_lang.indexOf(this.value) > -1) { 			
          jQuery(opt).show();				
       }
    });
}




Attachments:
Last edit: 11 years 1 month ago by Helveticus.

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

  • Posts: 83678
  • Thank you received: 13547
  • MODERATOR
11 years 1 month ago #149253

Hi,

That's correct, the code for the characteristics display comes from the file administrator\components\com_hikashop\types\characteristic.php
I would recommend to follow our documentation and create a characteristic display template override instead of modifying directly that file. That way, you won't loose your changes when you update HikaShop.

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

Time to create page: 0.109 seconds
Powered by Kunena Forum