1 year ago

#377375

test-img

neilpdf

How to set a current variant in Liquid Shopify (javascript & jquery)

I have color and size variants in my "custom" shopify website. I have the "change" event if the variants and size are clicked, the product image will be filtered depending on the alt text of the images (which are working correctly).

I want to set a current variant in which if the product page loads, there will be a current variant that is selected. I tried doing the jquery load event on the hidden input which takes the value of the id of the product selected but it didn't work.

Here is my code for the add to cart form:


let addToCartFormSelector = "#add-to-cart-form";
  let productOptionSelector = addToCartFormSelector + " [name*=option]";
  let productForm = {
    onProductOptionChange: function (event) {
      let $form = $(this).closest(addToCartFormSelector);
      let selectedVariant = productForm.getActiveVariant($form);

      $form.trigger("form:change", [selectedVariant]);
    },
    getActiveVariant: function ($form) {
      let variants = JSON.parse(
        decodeURIComponent($form.attr("data-variants"))
      );
      let formData = $form.serializeArray();

      let formOptions = {
        option1: variants[0].option1,
        option2: variants[0].option2,
        option3: null,
      };
      console.log(formOptions);

      let selectedVariant = variants[0];

      $.each(formData, function (index, item) {
        if (item.name.indexOf("option") !== -1) {
          formOptions[item.name] = item.value;
        }
      });

      $.each(variants, function (index, variant) {
        if (
          variant.option1 === formOptions.option1 &&
          variant.option2 === formOptions.option2 &&
          variant.option3 === formOptions.option3
        ) {
          selectedVariant = variant;
          return false;
        }
      });

      if (
        selectedVariant.featured_image != null &&
        selectedVariant.featured_image.alt != null
      ) {
        $("[data-thumbnail-color]").hide();
        let selectedColor = selectedVariant.featured_image.alt;
        let thumbnailSelector =
          '[data-thumbnail-color="' + selectedColor + '"]';
        $(thumbnailSelector).show();
      } else {
        $("[data-thumbnail-color]").show();
      }

      return selectedVariant;
    },
    validate: function (event, selectedVariant) {
      let $form = $(this);
      let hasVariant = selectedVariant !== null;
      let canAddToCart = hasVariant && selectedVariant.inventory_quantity > 0;
      let $id = $form.find(".js-variant-id");
      let $addToCartButton = $form.find("#add-to-cart-button");
      let $price = $form.find(".js-price");
      let formattedVariantPrice;
      let priceHTML;

      if (hasVariant) {
        formattedVariantPrice = "$" + (selectedVariant.price / 100).toFixed(2);
        priceHTML = '<span class="money">' + formattedVariantPrice + "</span>";

        console.log(priceHTML);
      } else {
        priceHTML = $price.attr("data-default-price");
      }
      if (canAddToCart) {
        $id.val(selectedVariant.id);
        $addToCartButton.prop("disabled", false);
      } else {
        $id.val("");
        $addToCartButton.prop("disabled", true);
      }

      $price.html(priceHTML);
      currencyPicker.onMoneySpanAdded();
    },
    init: function () {
      $(document).on(
        "change",
        productOptionSelector,
        productForm.onProductOptionChange
      );
      $(document).on(
        "form:change",
        addToCartFormSelector,
        productForm.validate
      );
    },
  };
  productForm.init();

javascript

jquery

dom-events

shopify

liquid

0 Answers

Your Answer

Accepted video resources