Modify swatch code

[habreu]

I am picking at color swatches again and want to know if anyone can tell me how to modify the code to do two thing

-show the option price next to the option prompt when a swatch is clicked
-highlight the clicked swatch so it's obvious which one is selected

Testing on this page https://www.allfrom1supply.com/test-product-17911.html

For some reason when I first load the page I do see the default option/swatch price listed but once I select anything else I no longer get the price next to the option prompt.

Thanks for any help.

[heatherwebdev]

If youre using javascript try using this as an event to look for the swatch changing -

MivaEvents.SubscribeToEvent('variant_changed', function(product_data) {

})

[habreu]

Thanks. I am actually trying to modify the existing swatch code -not really a programmer. I just pick at stuff and watch what happens.

I have this code and added the data-option-price and can see it in the rendered page's code but trying to sort out how to get it to show once you click on a swatch is beyond my experience so far. I may eventually farm this out, it's low priority right now but tehboss did ask so thought I'd poke at it.

AttributeMachine.prototype.Generate_Discount = function (discount) {
var discount_div;

discount_div = document.createElement('div');
discount_div.innerHTML = discount.descrip + ': ' + discount.formatted_discount;
return discount_div;
};
AttributeMachine.prototype.Generate_Swatch = function (product_code, attribute, option) {
var swatch = document.createElement('li'),
wrap = document.createElement('span'),
img = document.createElement('img');

img.src = option.image;
swatch.setAttribute('alt', option.prompt);
swatch.setAttribute('title', option.prompt);
swatch.setAttribute('data-code', option.code);
swatch.setAttribute('data-color', option.prompt);
swatch.setAttribute('data-option-price', option.formatted_price);
swatch.appendChild(wrap);
wrap.appendChild(img);
return swatch;
};
AttributeMachine.prototype.Swatch_Click = function(input, attribute, option) {
var i,
swatchNameElement = document.getElementById('js-swatch-name');

for (i = 0; i < input.select.options.length; i++) {
if (input.select.options[i].value == option.code) {
input.select.selectedIndex = i;
};
};
if (attribute.inventory) {
this.Attribute_Changed(input);
};

swatchNameElement.innerHTML = option.prompt;
};

[habreu]

You know what? I think I just may create an Alternate Display Page using the regular PROD page. I can probably just modify the radio button code and use some CSS to get what I need and it is easier for me to understand than the javascript since I've been doing some modifying of the template layouts for a long time. Thanks.

[habreu]

Well no big deal for you guys but I think I figured out a workaround I think (I don't use inventory variants which may be why I was having problems).

https://www.allfrom1supply.com/test-product-17911.html

I just used a conditional check for a specific attribute code and insert a class, then the rest is CSS. So I just have to name the attribute correctly on those that I need the swatch-like look for. So far it seems like a workable solution.

<label for="&mvt:optionID;" title="&mvte:option:prompt;" class="show align-left<mvt:if expr="'SWCOLOR' CIN l.settings:attribute:code"> swatch-style</mvt:if>">