Display of Selected Attribute Option

[Jake Herbert]

Hi,

Working on our colossos dev site.

When someone selects a attribute option, the selected option code is displayed. I think it's this code that does this, so It must be using JS to update the text as the selected option changes.

<span class="c-form-label u-block &mvt:required_attribute_classes;" title="&mvte:attribute:prompt;">
Selected Option: <span data-hook="update-selection-label">&nbsp;</span>
</span>

Now is it possible to display the option prompt rather than the code in these instances, as for us the code is much less meaningful to the customer than the prompt.

Eg:
BLUEXL vs Blue XL

Thanks

Jake

[Nick]

For the Colossus Framework that functionality can be found in the theme.js file starting on like 484.

https://github.com/mivaecommerce/rea...ui/js/theme.js

[Jake Herbert]

For the Colossus Framework that functionality can be found in the theme.js file starting on like 484.

https://github.com/mivaecommerce/rea...ui/js/theme.js

Thank you, I'll take a look later this week.

[Leanne]

I recently did this on a site, so hopefully this will help you get started.

In the attribute template for radio attributes:

<mvt:elseif expr="l.settings:attribute:type EQ 'radio'">
<div class="x-product-layout-purchase__options-attribute o-layout__item" data-hook="update-selection">
<span class="c-form-label u-block &mvt:required_attribute_classes;" title="&mvte:attribute:prompt;">
&mvte:attribute:prompt; <span data-hook="update-selection-label">&nbsp;</span>
</span>
<mvt:foreach iterator="option" array="attribute:options">
<label class="c-form-checkbox c-form-checkbox--radio c-form-checkbox--inline x-radio-to-button" title="&mvt:option:prompt;">
<mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR (g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
<input class="c-form-checkbox__input" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:option:price;" data-regular-price="" data-option-name="&mvte:option:prompt;" type="radio" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" checked &mvt:required_attribute;>
<mvt:else>
<input class="c-form-checkbox__input" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:option:price;" data-regular-price="" data-option-name="&mvte:option:prompt;" type="radio" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" &mvt:required_attribute;>
</mvt:if>
<span class="c-form-checkbox__caption">
<mvt:if expr="l.settings:option:image">
<img src="&mvte:option:image;" alt="&mvte:option:prompt;" title="&mvte:option:prompt;" />
<mvt:else>
&mvte:option:prompt;
</mvt:if>
</span>
</label>
</mvt:foreach>
</div>

In the jsPROD function in theme.js:

/**
* This function set will update an attributes label when choosing an option from a radio or select element.
*/
(function () {
'use strict';

let updateSelection = document.querySelectorAll('[data-hook="update-selection"]');

for (let id = 0; id < updateSelection.length; id++) {
let updateSelectionLabel = updateSelection[id].querySelector('[data-hook="update-selection-label"]');
let updateRadio = updateSelection[id].querySelectorAll('input[type="radio"]');
let updateSelect = updateSelection[id].querySelectorAll('select');

if (updateRadio.length > 0) {
for (let radioID = 0; radioID < updateRadio.length; radioID++) {
if (updateRadio[radioID].checked) {
updateSelectionLabel.textContent = updateRadio[radioID].dataset.optionName;
}

updateRadio[radioID].addEventListener('change', function (event) {
updateSelectionLabel.textContent = this.dataset.optionName;
});
}
}
if (updateSelect.length > 0) {
for (let selectID = 0; selectID < updateSelect.length; selectID++) {
updateSelectionLabel.textContent = updateSelect[selectID].options[updateSelect[selectID].selectedIndex].text;

updateSelect[selectID].addEventListener('change', function (event) {
updateSelectionLabel.textContent = this.options[this.selectedIndex].text;
});
}
}

}
})();

[Jake Herbert]

Hi Leanne,

Thank you so much for your input.

This works on intial page load, (Shows the prompt rather than the code) but upon selecting a non default radio option it then proceeds to show the option code rather than the prompt.

I've also just tried commenting out the code:

<span class="c-form-label u-block &mvt:required_attribute_classes;" title="&mvte:attribute:prompt;"> Selected Option: <span data-hook="update-selection-label">&nbsp;</span> </span>

So it doesn't dispaly anything but then that kills the image machine from working.

Sorry, I'm not much of a JS expert.

Thanks

[Leanne]

Sorry, that was my fault. I forgot to highlight both places to make the change to the radio options in theme.js. The first one that I bolded takes care of page load, the second fires when the selection is changed.

<mvt:elseif expr="l.settings:attribute:type EQ 'radio'">
<div class="x-product-layout-purchase__options-attribute o-layout__item" data-hook="update-selection">
<span class="c-form-label u-block &mvt:required_attribute_classes;" title="&mvte:attribute:prompt;">
&mvte:attribute:prompt; <span data-hook="update-selection-label">&nbsp;</span>
</span>
<mvt:foreach iterator="option" array="attribute:options">
<label class="c-form-checkbox c-form-checkbox--radio c-form-checkbox--inline x-radio-to-button" title="&mvt:option:prompt;">
<mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR (g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
<input class="c-form-checkbox__input" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:option:price;" data-regular-price="" data-option-name="&mvte:option:prompt;" type="radio" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" checked &mvt:required_attribute;>
<mvt:else>
<input class="c-form-checkbox__input" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:option:price;" data-regular-price="" data-option-name="&mvte:option:prompt;" type="radio" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" &mvt:required_attribute;>
</mvt:if>
<span class="c-form-checkbox__caption">
<mvt:if expr="l.settings:option:image">
<img src="&mvte:option:image;" alt="&mvte:option:prompt;" title="&mvte:option:prompt;" />
<mvt:else>
&mvte:option:prompt;
</mvt:if>
</span>
</label>
</mvt:foreach>
</div>

In the jsPROD function in theme.js:

/**
* This function set will update an attributes label when choosing an option from a radio or select element.
*/
(function () {
'use strict';

let updateSelection = document.querySelectorAll('[data-hook="update-selection"]');

for (let id = 0; id < updateSelection.length; id++) {
let updateSelectionLabel = updateSelection[id].querySelector('[data-hook="update-selection-label"]');
let updateRadio = updateSelection[id].querySelectorAll('input[type="radio"]');
let updateSelect = updateSelection[id].querySelectorAll('select');

if (updateRadio.length > 0) {
for (let radioID = 0; radioID < updateRadio.length; radioID++) {
if (updateRadio[radioID].checked) {
updateSelectionLabel.textContent = updateRadio[radioID].dataset.optionName;
}

updateRadio[radioID].addEventListener('change', function (event) {
updateSelectionLabel.textContent = this.dataset.optionName;
});
}
}
if (updateSelect.length > 0) {
for (let selectID = 0; selectID < updateSelect.length; selectID++) {
updateSelectionLabel.textContent = updateSelect[selectID].options[updateSelect[selectID].selectedIndex].text;

updateSelect[selectID].addEventListener('change', function (event) {
updateSelectionLabel.textContent = this.options[this.selectedIndex].text;
});
}
}

}
})();

[Jake Herbert]

Super, works a treat, thank you!