No announcement yet.

Modify swatch code

  • Filter
  • Time
  • Show
Clear All
new posts

  • Modify swatch code

    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

    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.

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

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



    • 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);
      return swatch;
      AttributeMachine.prototype.Swatch_Click = function(input, attribute, option) {
      var i,
      swatchNameElement = document.getElementById('js-swatch-name');

      for (i = 0; i <; i++) {
      if ([i].value == option.code) { = i;
      if (attribute.inventory) {

      swatchNameElement.innerHTML = option.prompt;


      • 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.


        • 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).

          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>">



          This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

          This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.