Variant Metafields Update on Variant Click/Select

Jill__C
Visitor
1 0 0

Well I have been working on a copy of my own theme: Copy of Testament-SBK07062020-V7.2.2-JillsCopy - I have read countless posts trying to get this working...I'm sooo close! I feel it!

I am working on making my metafield data update and change when you select the variant. It already works that the sku and price update - that was 'built in' - but new I'm trying to get the metafields on a variant to update on click/select.  I'm having no problem displaying the metafield data when it is a single product - issue is only with variants and displaying the appropriate metafield data associated with that variant.

Here is a link to the development theme:
https://k3fnar4kvmjm0l57-9516740.shopifypreview.com

Here is a perfect sample product where the dimensions for each variant is different:
https://k3fnar4kvmjm0l57-9516740.shopifypreview.com/products/parent-d2433?_pos=3&_sid=7904dceef&_ss=...

Right now when you select the different variants - you see the sku update and the price update on the click....and if you refresh the page...you see my dimensions change and display correctly. 

Of course we do not want to have to refresh the page for the variant metafield to update and display the correct data. It should update on click/select - just like the sku and price do.

Currently - I have the following code on the product-template.liquid to display the metafields:

<p>product dimensions: {{ current_variant.metafields.specs.dimensions}}</p>
<p>product material: {{ current_variant.metafields.specs.material}}</p>

I know my issue - pretty sure - that is with it not switching is coming from the theme.js.liquid file...and based on my reading has to do with the 'callback' or 'event trigger'. I can find the calls for the sku to change and price to change...challenge is I just do not know how to add the switching for the dimensions and material metafield on click/select without refreshing the page. I know I am sooooooo close. Can anyone help me over the finish line? I'm using the Testament theme and here is the portion code for the theme.js.liqud that I think require the modification:

 

/*============================================================================
  Product Modules
==============================================================================*/

var Events = new EventEmitter3();
Events.trigger = Events.emit; // trigger alias

var mobile = window.matchMedia('(max-width: 740px)');
var tablet = window.matchMedia('(max-width: 979px) and (min-width: 741px)');
var device = window.matchMedia('(max-width: 980px)');
var desktop = window.matchMedia('(min-width: 980px)');

theme.ProductForm = function (context, events, Product) {
    var formConfig = context.querySelector('#AddToCartForm');
    var config = JSON.parse(formConfig.dataset.productForm || '{}');

    (function quantity() {
      var element = context.querySelector("[name=quantity]");

      events.on("quantitycontrol:click", change);

      function change(value) {
        var quantity = parseInt(element.value) + value;

        if ( quantity < 1 ) {
          return false;
        }

        element.value = quantity;
      }
    })();

    (function quantity_controls() {
      Control(".quantity-control-up", 1);
      Control(".quantity-control-down", -1);

      function Control(selector, value) {
        var element = context.querySelector(selector);

        if ( !element ) {
          return false;
        }

        element.addEventListener("click", function (event) {
          event.preventDefault();
          events.trigger("quantitycontrol:click", value);
        });
      }
    })();

    if ( Product.variants.length == 1 ) {
      return false;
    }

    if ( config.quickview ) {
      var prodSelector = "qv-product-select-" + Product.id;
    } else {
      var prodSelector = "product-select-" + Product.id;
    }

    new Shopify.OptionSelectors(prodSelector, {
      product: Product,
      onVariantSelected: function(variant, selector) {

        if ( !variant ) {
          events.trigger("variantunavailable");
          return;
        }

        if ( Product.variants.length == 1 ) {
          return;
        }

        events.trigger("variantchange", variant);
        events.trigger("variantchange:option1:" + variant.option1);
        events.trigger("variantchange:option2:" + variant.option2);
        events.trigger("variantchange:option3:" + variant.option3);
        
        console.log(variant.id);
        $('h3.ctmm').hide();
        $('h3.ctm-'+variant.id).show();

        if ( variant.featured_media ) {
          if ( variant.featured_media.id == null ) {
            events.trigger("variantchange:image", Product.featured_media_id);
          } else {

            events.trigger("variantchange:image", variant.featured_media.id);
          }
        }
      },
      enableHistoryState: config.enable_history
    });

    (function single_option_selectors() {
      var elements = context.querySelectorAll(".single-option-selector");

      elements.forEach(Selector);

      function Selector(element, index) {
        var option_position = index + 1;

        events.on("swatch:change:" + option_position, change);

        function change(value) {
          $(element).val(value).trigger("change");
        }
      }
    })();

    (function swatches() {
      var elements = context.querySelectorAll("[type=radio]");

      var states = {
        sold_out: function (element) {
          element.parentElement.classList.add("soldout");
        },
        available: function (element) {
          element.parentElement.classList.remove("soldout");
        }
      };

      events.on("variantunavailable", set_unavailable);

      elements.forEach(Swatch);

      function set_unavailable() {
        var selected = {};

        var selected_elements = $(elements).filter(":checked").toArray();

        selected_elements.forEach(function (element) {
          var option = "option" + element.getAttribute("data-position");
          var value = element.value;

          selected[option] = value;
        });

        elements.forEach(function (element) {
          var available = false;

          var current_option = "option" + element.getAttribute("data-position");

          var current_value = element.value;

          var other_options = ["option1", "option2", "option3"].filter(function (option) {
            return selected[option] && option != current_option;
          });

          Product.variants.forEach(function (variant) {
            if ( !variant.available ) {
              return;
            }

            if ( variant[current_option] != current_value ) {
              return;
            }

            if ( variant[other_options[0]] == selected[other_options[0]] && variant[other_options[1]] == selected[other_options[1]] ) {
              available = true;
              return;
            }
          });

          if ( available ) {
            states.available(element);
          } else {
            states.sold_out(element);
          }
        });
      }

      function Swatch(element) {
        var option_position = element.getAttribute("data-position");

        var current_option = "option" + option_position;

        var other_options = ["option1", "option2", "option3"].filter(function (option) {
          return option != current_option;
        });

        element.addEventListener("change", function (event) {
          events.trigger("swatch:change:" + option_position, element.value);
        });

        events.on("variantchange:option" + option_position + ":" + element.value, select);

        events.on("variantchange", set_availability);

        function select() {
          element.checked = true;
        }

        function set_availability(current_variant) {
          var available = false;

          Product.variants.forEach(function (variant) {
            if ( !variant.available ) {
              return;
            }

            if ( variant[current_option] != element.value ) {
              return;
            }

            if ( variant[other_options[0]] != current_variant[other_options[0]] ) {
              return;
            }

            if ( variant[other_options[1]] != current_variant[other_options[1]] ) {
              return;
            }

            available = true;
          });

          if ( available ) {
            states.available(element);
          } else {
            states.sold_out(element);
          }
        }
      }
    })();

    (function price() {
      var element = context.querySelector(".product-price .money") || context.querySelector(".product-price");

      events.on("variantchange", function (variant) {
        var price = money(variant.price);

        if ( !variant.available ) {
          price = config.sold_out;
        }

        element.innerHTML = price;

        events.on("variantunavailable", function (variant) {
          price = config.unavailable;
          element.innerHTML = price;
        });
      });
    })();

    (function compare_price() {
      var element = context.querySelector(".was");

      if ( !element ) {
        return false;
      }

      events.on("variantchange", function (variant) {
        var price = "";

        if ( variant.compare_at_price > variant.price ) {
          var price = money(variant.compare_at_price);
        }

        if ( !variant.available ) {
          price = "";
        }

        element.innerHTML = price;
      });
    })();

      (function sku() {
      var element = context.querySelector(".variant_sku");

      if ( !element ) {
        return false;
      }

      events.on("variantchange", function (variant) {
        var variant_sku = variant.sku;
        element.innerHTML = variant_sku;
      });
      events.on("variantunavailable", function (variant) {
        var variant_sku = config.unavailable;
        element.innerHTML = variant_sku;
      });

    })();
  

  


    (function add_to_cart() {
      var element = context.querySelector(".add");

      events.on("variantchange", function (variant) {
        var text = config.button;
        var disabled = false;

        if ( !variant.available ) {
          text = config.sold_out;
          disabled = true;
        }

        element.value = text;
        element.disabled = disabled;
      });

      events.on("variantunavailable", function () {
        element.value = config.unavailable;
        element.disabled = true;
      });
    })();

    (function smart_payment_buttons() {
      var element = context.querySelector(".shopify-payment-button");

      if ( !element ) {
        return false;
      }

      events.on("variantchange", function (variant) {
        if ( !variant.available ) {
           element.style.display = 'none';
         } else {
           element.style.display = 'block';
         }
      });
    })();

    function money(cents) {
      return Shopify.formatMoney(cents, config.money_format);
    }
}

theme.ProductGallery = function (context, sectionId, events, Product) {
  events.trigger = events.emit;

  var config = JSON.parse(context.querySelector('.product-photos').dataset.galleryConfig || '{}');
  var $main = $("#slider .slides.carousel-main ", context),
      $carouselNav = $('#thumbnails .carousel-nav', context);

    if ( !$main.length ) {
      return false;
    }

 

 

Reply 1 (1)

raquimov
Visitor
1 0 0

hello! I have the exact same problem, did you find a solution?