[Skip to main content](#vessel-content) # How to add html5 data attributes in prod charact. ## - **[Helveticus](/forum/user/20683-helveticus "View Helveticus's Profile")** - [![Helveticus's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/20683-helveticus "View Helveticus's Profile") Topic Author - [ Offline](/forum/user/20683-helveticus) Less More - Posts: 19 - Thank you received: 0 - - 12 years 7 months ago - 12 years 7 months ago [\#149211](#149211) by [Helveticus](/forum/user/20683-helveticus "View Helveticus's Profile") *[How to add html5 data attributes in prod charact.](/forum/26-product-category-display/866841-how-to-add-html5-data-attributes-in-prod-charact#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: 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: 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.")* was created by *[Helveticus](/forum/user/20683-helveticus "View Helveticus's Profile")* -- 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?](http://www.hikashop.com/forum/product-category-display/866790-linked-product-characteristics-dropdowns.html) 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: Code: <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. [ ![hfc66360.jpg](/forum/attachment/16196) ](/forum/attachment/16196 "hfc66360.jpg") [ ![hcab6564.jpg](/forum/attachment/16197) ](/forum/attachment/16197 "hcab6564.jpg") [ ![h40a2966.jpg](/forum/attachment/16198) ](/forum/attachment/16198 "h40a2966.jpg") - [ ![hfc66360.jpg](/forum/attachment/16196) ](/forum/attachment/16196 "hfc66360.jpg") [ ](/forum/attachment/16196?download=1 "hfc66360.jpg") - [ ![hcab6564.jpg](/forum/attachment/16197) ](/forum/attachment/16197 "hcab6564.jpg") [ ](/forum/attachment/16197?download=1 "hcab6564.jpg") - [ ![h40a2966.jpg](/forum/attachment/16198) ](/forum/attachment/16198 "h40a2966.jpg") [ ](/forum/attachment/16198?download=1 "h40a2966.jpg") Last edit: 12 years 7 months ago by [Helveticus](/forum/user/20683-helveticus "View Helveticus's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjY4NDEtaG93LXRvLWFkZC1odG1sNS1kYXRhLWF0dHJpYnV0ZXMtaW4tcHJvZC1jaGFyYWN0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Helveticus](/forum/user/20683-helveticus "View Helveticus's Profile")** - [![Helveticus's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/20683-helveticus "View Helveticus's Profile") Topic Author - [ Offline](/forum/user/20683-helveticus) Less More - Posts: 19 - Thank you received: 0 - - 12 years 7 months ago - 12 years 7 months ago [\#149242](#149242) by [Helveticus](/forum/user/20683-helveticus "View Helveticus's Profile") Replied by *[Helveticus](/forum/user/20683-helveticus "View Helveticus's Profile")* on topic *[How to add html5 data attributes in prod charact.](/forum/26-product-category-display/866841-how-to-add-html5-data-attributes-in-prod-charact#149242 "-- 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: 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: 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.")* 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: Code: <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:*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(); } }); } [ ![hce92c9e.jpg](/forum/attachment/16210) ](/forum/attachment/16210 "hce92c9e.jpg") [ ![h61953fc.jpg](/forum/attachment/16215) ](/forum/attachment/16215 "h61953fc.jpg") - [ ![hce92c9e.jpg](/forum/attachment/16210) ](/forum/attachment/16210 "hce92c9e.jpg") [ ](/forum/attachment/16210?download=1 "hce92c9e.jpg") - [ ![h61953fc.jpg](/forum/attachment/16215) ](/forum/attachment/16215 "h61953fc.jpg") [ ](/forum/attachment/16215?download=1 "h61953fc.jpg") Last edit: 12 years 7 months ago by [Helveticus](/forum/user/20683-helveticus "View Helveticus's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjY4NDEtaG93LXRvLWFkZC1odG1sNS1kYXRhLWF0dHJpYnV0ZXMtaW4tcHJvZC1jaGFyYWN0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86320 - Thank you received: 14278 - - 12 years 7 months ago [\#149253](#149253) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[How to add html5 data attributes in prod charact.](/forum/26-product-category-display/866841-how-to-add-html5-data-attributes-in-prod-charact#149253 "-- 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: 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: 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.")* 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](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjY4NDEtaG93LXRvLWFkZC1odG1sNS1kYXRhLWF0dHJpYnV0ZXMtaW4tcHJvZC1jaGFyYWN0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.107 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)