How to show the product price "Unavailable" if selected variants are unavailable in momentum theme?

[Fida_Marwat]

Hey Experts,

I am using Shopify Momentum theme and on product detail page I want to show "Unavailable" instead of a regular price value when the selected variants are unavailable. I did some customization in the "component-product-form.min.js" file to disabled the selected variants when they are unavailable.

This is reference site link https://ebikemarketplace.com/collections/encased-battery-packs/products/reention-dolphin-lithium-ion...  exactly what I want to get the desired result. On the reference site you can see when selected variants are unavailable then the price also shows Unavailable instead of a regulars price value.

This is my own product detail page link https://www.american-electric.co/products/48v-rhino-battery-pack  what I want to do here from the above reference site.

1) This is my "component-product-form.min.js" file code which handles different logics for price, variant options, quantity and many more.

(() => {
    var t = {
            845: t => {
                self,
                t.exports = (() => {
                    "use strict";
                    var t = {};
                    return ((t, e) => {
                        Object.defineProperty(e, "__esModule", {
                            value: !0
                        }), e.isArmadaLoaded = void 0, e.isArmadaLoaded = t => {
                            var e, i;
                            const n = !0 === (null === (i = null === (e = window.eight) || void 0 === e ? void 0 : e.armada) || void 0 === i ? void 0 : i.loaded);
                            if (!t) return n;
                            n ? t() : document.addEventListener("ARMADA:LOADED", t)
                        }, e.default = e.isArmadaLoaded
                    })(0, t), t
                })()
            }
        },
        e = {};

    function i(n) {
        var r = e[n];
        if (void 0 !== r) return r.exports;
        var s = e[n] = {
            exports: {}
        };
        return t[n](s, s.exports, i), s.exports
    }
    i.n = t => {
        var e = t && t.__esModule ? () => t.default : () => t;
        return i.d(e, {
            a: e
        }), e
    }, i.d = (t, e) => {
        for (var n in e) i.o(e, n) && !i.o(t, n) && Object.defineProperty(t, n, {
            enumerable: !0,
            get: e[n]
        })
    }, i.o = (t, e) => Object.prototype.hasOwnProperty.call(t, e), (() => {
        "use strict";
        var t = i(845);
        class e extends HTMLElement {
            constructor() {
                super(), this.getAttribute("product") && (this.sectionId = this.getAttribute("section-id"), this.setButton = this.setButton.bind(this))
            }
            connectedCallback() {
                (0, t.isArmadaLoaded)(this.init.bind(this)), document.addEventListener("ARMADA:TRANSLATION:SYNC", this.setButton(!1, !0))
            }
            init() {
                !this.isQuickAdd && this.product && (this.templateContent = this.querySelector(`template#product-form-${this.sectionId}-${this.product.id}`).content, this.loadingButtonHtml = this.templateContent.querySelector("[data-button-loading]").outerHTML, this.setInitialVariant(), this.optionInputs = [], "dropdowns" === this.optionType ? this.optionInputs = this.querySelectorAll('[data-name="product-option-select"]') : "buttons" === this.optionType && (this.optionInputs = this.querySelectorAll('[data-name="product-option-radio"]')), this.buttons = this.querySelectorAll('[data-name="product-submit"][data-product-form-block="true"]'), this.buttonWraps = this.querySelectorAll('[data-name="product-submit-wrapper"][data-product-form-block="true"]'), this.setInitialValues(), this.setEventListeners(), this.initScrollAnimations(), window.eight.armada.elementRegistry.register({
                    key: "product-form",
                    assetPath: "/assets/component-product-form.min.js"
                }))
            }
            setInitialVariant() {
                const t = new Proxy(new URLSearchParams(window.location.search), {
                    get: (t, e) => t.get(e)
                }).variant;
                if (t && !this.forceSelection) {
                    const e = this.product.variants.find((e => e.id == t));
                    this.currentVariant = this.forceSelection ? null : e, window.eight.eventsEngine && window.eight.eventsEngine.namedEvents.changeVariant(this.product.id, this.currentVariant.id, this.currentVariant, this.scopeId)
                } else this.currentVariant = this.forceSelection ? null : window.eight.productEngine.firstAvailableVariant(this.product)
            }
            setPrice() {
    // Check if the current variant is available
    console.log("Current Variant Availability:", this.currentVariant ? this.currentVariant.available : null);

    // Select the price elements in the DOM
    this.priceElem = document.querySelectorAll(`product-price[section-id="${this.sectionId}"][use-variant="true"]`);
    console.log("Number of price elements found:", this.priceElem.length);

    if (this.currentVariant) {
        console.log("Current Variant is defined.");
        if (this.currentVariant.available) {
            console.log("Selected variant is available.");
            this.priceElem.forEach((t) => {
                let e = t.getAttribute("discount-value"),
                    i = 0;
                e && "hide" != e && this.currentVariant.compare_at_price && (i = "value" == e ? this.currentVariant.compare_at_price - this.currentVariant.price : Math.round(100 * (this.currentVariant.compare_at_price - this.currentVariant.price) / this.currentVariant.compare_at_price / 1) + "%");
                t && this.currentVariant && (t.setAttribute("price", this.currentVariant.price), t.setAttribute("compare-at", this.currentVariant.compare_at_price), t.setAttribute("discount", `${i}`), t.setAttribute("unit-price", this.currentVariant.unit_price), t.setAttribute("unit-price-measurement", JSON.stringify(this.currentVariant.unit_price_measurement)));
                t.classList.contains("hidden") && t.classList.remove("hidden");
            });
        } else {
            // Variant is not available, so hide the price
            console.log("Selected variant is unavailable. Hiding the price.");
            this.priceElem.forEach((t) => {
                t.textContent = ""; // or set to any placeholder text you prefer
                console.log("Hiding price element.");
            });
        }
    } else {
        console.log("Current Variant is undefined.");
    }

    this.hideSummaryPrice();
}


            hideSummaryPrice() {
                this.summaryPriceIsHidden || (this.summaryPrices = document.querySelectorAll('[data-armada-selector="product-form-summary-price"]'), this.summaryPrices.length && (this.summaryPrices.forEach((t => {
                    t.classList.add("hidden")
                })), this.setAttribute("summary-price-hidden", !0)))
            }
            setPickup() {
                const t = document.querySelector(`pickup-availability[section-id="${this.sectionId}"]`);
                if (!t) return;
                const e = this.currentVariant ? this.currentVariant.id : null;
                t.setAttribute("data-variant-id", e)
            }
            setValues() {
                this.currentVariant && this.optionInputs && this.currentVariant.options.forEach(((t, e) => {
                    "dropdowns" === this.optionType ? this.optionInputs?.length > 0 && (this.optionInputs[e].value = t) : this.optionInputs.forEach((e => {
                        0 === e.value.localeCompare(t, void 0, {
                            sensitivity: "base"
                        }) && (e.checked = !0)
                    }))
                }))
            }
            setBasicSelectValue() {
                this.basicSelect && (this.currentVariant ? this.basicSelect.value = this.currentVariant.id : this.basicSelect.value = "")
            }
            setInstallmentsSelectValue() {
                if (!this.installmentsSelect) return;
                this.currentVariant ? this.installmentsSelect.value = this.currentVariant.id : this.installmentsSelect.value = "";
                const t = new Event("change", {
                    bubbles: !0
                });
                this.installmentsSelect.dispatchEvent(t);
                const e = this.installmentsSelect.closest("form");
                e && e.classList.contains("hidden") && e.classList.remove("hidden")
            }
            get dynamicButtonsForm() {
                return this.querySelector("#dynamic-buttons-form") ? this.querySelector("#dynamic-buttons-form") : null
            }
            checkDynamicButtons() {
                if (!this.dynamicButtonsForm) return;
                let t;
                t = !!this.currentVariant && !!this.currentVariant.available, t ? (this.dynamicButtonsForm.classList.remove("hidden"), this.setDynamicFormVariantId()) : this.dynamicButtonsForm.classList.add("hidden")
            }
            setDynamicFormVariantId() {
                const t = this.querySelectorAll('input[data-name="dynamic_buttons_variant_id"]');
                t && this.currentVariant && t.forEach((t => {
                    t.value = this.currentVariant.id
                }))
            }
            setInitialValues() {
                this.forceSelection || (this.setValues(), this.setBasicSelectValue())
            }
            setEventListeners() {
                document.addEventListener(`${window.eight.constants.events["ARMADA:VARIANT:CHANGE"]}`, this.handleVariantChangeEvent.bind(this)), this.basicSelect && this.basicSelect.addEventListener("change", this.handleOptionChange.bind(this)), this.optionInputs.forEach((t => {
                    t.addEventListener("change", this.handleOptionChange.bind(this))
                })), this.buttons && this.buttons.forEach((t => {
                    t.addEventListener("click", this.handleButtonClick.bind(this))
                }))
            }
            initScrollAnimations() {
                const t = this.querySelectorAll('[data-armada-animation$="-on-scroll"]');
                t && t.forEach((t => {
                    window.eight.animationEngine.initAnimation({
                        items: [t],
                        elementToObserve: t
                    })
                }))
            }
            handleOptionChange(t) {
                if (!this.allOptionsChosen) return;
                const e = this.currentVariant ? this.currentVariant.title : "";
                if ("id" === t.target.getAttribute("name")) {
                    const e = parseInt(t.target.options[t.target.selectedIndex].value);
                    this.currentVariant = this.product.variants.find((t => t.id === e))
                } else this.currentVariant = window.eight.productEngine.findVariant(this.product, this.optionIndexes);
                this.setButton(), window.eight.eventsEngine && this.currentVariant.title !== e && window.eight.eventsEngine.namedEvents.changeVariant(this.product.id, this.currentVariant.id, this.currentVariant, this.scopeId)
            }
            handleButtonClick(t) {
                t.preventDefault();
                const e = this.querySelectorAll('[name^=properties]:not([type="checkbox"]):not([type="radio"]):not([disabled]), [name^=properties][type="checkbox"]:not([disabled]):checked, [name^=properties][type="radio"]:not([disabled]):checked'),
                    i = {};
                e.forEach((t => {
                    let e = t.name.substring(t.name.lastIndexOf("[") + 1, t.name.lastIndexOf("]"));
                    e = e.replace(/\s+/g, "-").toLowerCase();
                    const n = t.value;
                    n && (i[e] = n)
                })), this.setButton("loading");
                const n = {
                    items: [{
                        id: this.currentVariant.id,
                        quantity: this.quantity,
                        selling_plan: this.sellingPlanId,
                        properties: {
                            ...i
                        }
                    }]
                };
                window.eight.cartEngine.addToCart(n, "items", this.atcSuccess.bind(this), this.atcError.bind(this))
            }
            handleVariantChangeEvent(t) {
                const {
                    variantId: e,
                    productId: i,
                    scopeId: n
                } = t.detail;
                i === this.product.id && n == this.scopeId && (this.currentVariant = this.product.variants.find((t => t.id === e)), this.setPrice(), this.setPickup(), this.setValues(), this.setBasicSelectValue(), this.setInstallmentsSelectValue(), this.checkDynamicButtons(), this.setButton())
            }
            atcSuccess(t) {
                this.setButton("added"), this.cartTypePage && (window.location = this.cartPageUrl), setTimeout((() => {
                    this.setButton(!1, !0)
                }), window.eight.product.addedTimeout)
            }
            atcError(t) {
                console.warn("Error adding to cart: ", t), this.setButton(!1, !0)
            }
            setButton(t = !1, e = !1) {
    if (this.buttons) {
        if (t) {
            if ("loading" === t) {
                this._buttons = this.buttons;
                this.buttonWraps.forEach((t => {
                    t.innerHTML = this.loadingButtonHtml;
                }));
            } else if ("added" === t) {
                this._buttons.forEach((t => {
                    const e = t.querySelector("[data-armada-button-text]") ? t.querySelector("[data-armada-button-text]") : t;
                    e && (e.textContent = window.eight.translationEngine.strings.added);
                    t.ariaLabel = window.eight.translationEngine.strings.successfully;
                    t.disabled = !0;
                    t.classList.add("opacity-20");
                }));
                this.buttonWraps.forEach(((t, e) => {
                    t.innerHTML = this._buttons[e].outerHTML;
                }));
            }
        } else {
            let buttonText = window.eight.translationEngine.strings.addToCart;
            let isDisabled = !1;

            if (this.forceSelection && !this.allOptionsChosen) {
                buttonText = window.eight.translationEngine.strings.choose;
                isDisabled = !0;
                this.buttons.forEach((t => {
                    t.ariaLabel = window.eight.translationEngine.strings.chooseVariant;
                    t.classList.add("opacity-20");
                }));
            } else if (this.currentVariant) {
                if (this.currentVariant.available) {
                    
                    !this.preorder || "continue" != inventory_policy[this.currentVariant.id] && null != this.currentVariant.inventory_management ? this.buttons.forEach((t => {
                        t.classList.remove("opacity-20");
                    })) : (buttonText = window.eight.translationEngine.strings.preorder, this.buttons.forEach((t => {
                        t.ariaLabel = `'${this.currentVariant.title}' ${window.eight.translationEngine.strings.preorder}`;
                    })));
                } else {
                    buttonText = window.eight.translationEngine.strings.soldOut;
                    isDisabled = !0;
                    this.buttons.forEach((t => {
                        t.ariaLabel = `'${this.currentVariant.title}' ${window.eight.translationEngine.strings.isSoldOut}`;
                    }));
                }
            } else {
                buttonText = window.eight.translationEngine.strings.unavailable;
                isDisabled = !0;

              
                // ... (previous code)

                  // ... (previous code)

// Store references to previously selected inputs and labels
let previousVariantInputs = [];
let previousVariantLabels = [];

// Iterate through all variant inputs and labels
const variantInputs = document.querySelectorAll('[data-name="product-option-radio"]');
variantInputs.forEach((input) => {
    const label = input.nextElementSibling;
    if (input.checked) {
        if (!this.currentVariant.available) {
            // Variant is unavailable, add opacity-20
            input.classList.add("opacity-20");
            if (label) {
                label.classList.add("opacity-20");
            }
        } else {
            // Variant is available, remove opacity-20 from this input and its label
            input.classList.remove("opacity-20");
            if (label) {
                label.classList.remove("opacity-20");
            }

            // Store the inputs and labels of the previously selected variant
            previousVariantInputs.push(input);
            if (label) {
                previousVariantLabels.push(label);
            }
        }
    } else {
        // Input is not checked, remove opacity-20
        input.classList.remove("opacity-20");
        if (label) {
            label.classList.remove("opacity-20");
        }
    }
});

// Remove opacity-20 from previously selected variant (if available)
if (this.currentVariant.available) {
    previousVariantInputs.forEach((input) => {
        input.classList.add("opacity-20");
    });

    previousVariantLabels.forEach((label) => {
        label.classList.remove("opacity-20");
    });
}

// ... (rest of your code)







                this.buttons.forEach((t => {
                    t.ariaLabel = window.eight.translationEngine.strings.isUnavailable;
                }));
            }

            this.buttons.forEach((e => {
                (e.querySelector("[data-armada-button-text]") ? e.querySelector("[data-armada-button-text]") : e).textContent = buttonText;
                e.disabled = isDisabled;
            }));

            e && (this.buttonWraps.forEach(((t, e) => {
                t.innerHTML = this.buttons[e].outerHTML;
            })), this.buttons = this.querySelectorAll('[data-name="product-submit"][data-product-form-block="true"]'), this.buttons.forEach((t => {
                t.addEventListener("click", this.handleButtonClick.bind(this));
            })));
        }
    }
}



            get product() {
                return window.eight.safeJSONParse(this.getAttribute("product"))
            }
            get scopeId() {
                return this.getAttribute("scope-id")
            }
            get isQuickAdd() {
                return "true" === this.getAttribute("quick-add")
            }
            get quantity() {
                return this.querySelector('input[name="quantity"]:not(.quantity-no-js-quantity)') ? this.querySelector('input[name="quantity"]:not(.quantity-no-js-quantity)').value : 1
            }
            get sellingPlanId() {
                return new FormData(this.querySelector("form")).get("selling_plan")
            }
            get forceSelection() {
                return "true" === this.getAttribute("force-selection")
            }
            get cartTypePage() {
                return document.querySelector("body").getAttribute("data-armada-cart-type-page")
            }
            get cartPageUrl() {
                return document.querySelector("body").getAttribute("data-cart-url")
            }
            get preorder() {
                return "true" === this.getAttribute("preorder")
            }
            get basicSelect() {
                return this.querySelector('select[data-armada-selector^="basic-product-select-"]')
            }
            get installmentsSelect() {
                return this.querySelector('[data-armada-selector="installments-select"]')
            }
            get summaryPriceIsHidden() {
                return "true" === this.getAttribute("summary-price-hidden")
            }
            get radioGroups() {
                let t = [];
                for (let e = 1; e <= this.product.options.length; e++) {
                    const i = this.querySelectorAll(`[name="${this.sectionId}-product-${this.product.id}-option-${e}"]`);
                    i.length > 0 && t.push(i)
                }
                return t
            }
            get optionType() {
                return this.getAttribute("option-type") ? this.getAttribute("option-type") : "dropdowns"
            }
            get optionIndexes() {
                if (!this.optionInputs) return !1;
                let t = [];
                return "dropdowns" === this.optionType ? Array.from(this.optionInputs).forEach((e => {
                    const i = !0 === e.options[0].disabled ? e.selectedIndex - 1 : e.selectedIndex;
                    t.push(i)
                })) : "buttons" === this.optionType && this.radioGroups.forEach((e => {
                    Array.from(e).forEach(((e, i) => {
                        e.checked && t.push(i)
                    }))
                })), t
            }
            get optionVals() {
                if (!this.optionInputs) return !1;
                if ("dropdowns" === this.optionType) return Array.from(this.optionInputs).map((t => t.value));
                if ("buttons" === this.optionType) {
                    let t = [];
                    return this.radioGroups.forEach(((e, i) => {
                        const n = Array.from(e).filter((t => t.checked)).map((t => t.value));
                        t[i] = n[0] ? n[0] : ""
                    })), t
                }
            }
            get allOptionsChosen() {
                return this.optionVals.length > 0 ? !!this.optionVals && !this.optionVals.some((t => "" === t)) : !!this.basicSelect && this.basicSelect.value > ""
            }
        }
        window.customElements.define("product-form", e)
    })()
})();

////////////////////////////////////////////////////////////////////////////////////////////////

2) This is my "ship-product-form.liquid" file code which renderes a product form elements.

{% comment %}
    Renders a basic product form.

    Accepts:
    - form_product: {Object} Shopify product object.
    - option_type: {String} One of 'swatches' or 'dropdowns'. Defaults to 'dropdowns' if not provided.
    - option_labels: {Boolean} Print the name of the option above the options. Defaults to TRUE.
    - scope_id: {String} Optional. Limits interaction to components with a matching scope id, eg. section id.
    - dynamic_buttons: {Boolean} Should dynamic buttons be displayed?
    - block_order {String} Comma separated list denoting which order blocks are printed and in which order.
    - force_variant_selection {Boolean} If enabled, the first available variant will not be pre-selected
    - button_style: {String} Optional. 'filled' or 'outline' defaults to 'filled'.
    - is_sticky: {Boolean} Is this form being used in the sticky product form? Defaults to false.
    - is_quick_view: {Boolean} Is this form being used in the quick view modal? Defaults to false.

    - classes: {String} Optional. A string of class names to be added to the <product-form> element.
    - basic_form_classes: {String} Optional. Class names added to the basic form.
    - option_classes: {String} Optional additional classes for the options wrapper.
    - select_wrapper_classes: {String} Optional additional classes for each option.
    - title_classes: {String} Optional. A string of class names to be added to the title wrapper div.
    - price_classes: {String} Optional. Classes for the price wrapper element.
    - regular_price_classes: {String} Optional. Classes for the regular price.
    - price_only: {Boolean} Only shows the product price and not unit pricing/tax/shipping text if set to true.
    - title_only: {Boolean} Set to true to only display the product title and not the vendor/sku.
    - button_wrapper_classes: {String} Optional. A string of class names to be added to the buttons wrapper div.
    - highlight_heading: {String} heading text for highlight block.
    - title_heading_type: {String} 'heading-X' where X is 1-6. 'heading-3' default.

    Usage:
    {% render 'ship-product-form' with form_product: product %}

    {% render 'ship-product-form' with form_product: product, dynamic_buttons: settings.show_smart_checkout, block_order: block_order %}

{% endcomment %}

{% liquid
  assign current_variant = form_product.selected_or_first_available_variant

  if current_variant.available
  endif

  if option_type == blank
    assign option_type = 'dropdowns'
  endif

  unless heading_type
    assign heading_type = 'heading-3'
  endunless

  if block_order == blank
    assign block_order = 'title,price,options,quantity,payment-buttons'
  endif

  if force_variant_selection == blank
    assign force_variant_selection = false
  endif

  assign options_block = section.blocks | where: 'type', 'options' | first
  if options_block != blank
    assign option_type = options_block.settings.options_type
    if options_block.settings.preselect_variant == false and form_product.has_only_default_variant == false
      assign force_variant_selection = true
    else
      assign force_variant_selection = false
    endif
  endif

  assign payment_buttons_block = section.blocks | where: 'type', 'payment-buttons' | first
  if payment_buttons_block != blank
    assign preorder = payment_buttons_block.settings.preorder
  else
    assign preorder = false
  endif

  if section_id == blank
    assign section_id = section.id
  endif

  assign hide_select = true
  if is_sticky
    assign section_id = section_id | prepend: 'sticky-'
    assign hide_select = false
  endif

  if title_heading_type == blank
    assign title_heading_type = 'heading-3'
  endif

%}

<product-form
  product="{{ form_product | json | escape }}"
  section-id="{{ section_id }}"
  {% if scope_id %}scope-id="{{ scope_id }}"{% endif %}
  {% if quick_add %}quick-add="{{ quick_add }}"{% endif %}
  {% if block_order %}block-order="{{ block_order }}"{% endif %}
  {% unless quick_add %}option-type="{{ option_type }}"{% endunless %}
  force-selection="{{ force_variant_selection }}"
  {% if preorder %}preorder="{{ preorder }}"{% endif %}
  data-aid="main-product-form"
  data-name="main-product-form"
  {% if classes %}class="{{ classes }}"{% endif %}
>
  {% assign show_buttons = false %}
  {% if quick_add or section.blocks == blank %}
    {% assign show_buttons = true %}
  {% endif %}

  <noscript>
    {% assign basic_button_wrapper_classes = button_wrapper_classes | append: ' no-js-show' %}
    {% render 'armament-basic-product-form' with form_product: form_product, current_variant: current_variant, show_buttons: show_buttons, classes: basic_form_classes, button_wrapper_classes: basic_button_wrapper_classes, hide_select: hide_select, dynamic_buttons: dynamic_buttons %}
  </noscript>

  {% if section.blocks.size > 0 %}
    {% for block in section.blocks %}
      {% case block.type %}
        {% when '@app' %}
          <div
            data-name="@app"
            data-product-form-block="true"
            class="mb-l md:mb-xl"
            {{ block.shopify_attributes }}
          >

            {%- comment -%} Shopify Product Reviews App {%- endcomment -%}
            {% unless form_product.metafields.reviews.rating_count.value %}
              <style>
                .spr-summary-starrating {
                  height: 0;
                  overflow: hidden;
                  margin-bottom: -16px;
                }
                @media screen and (min-width: 769px) {
                  .spr-summary-starrating {
                    margin-bottom: -24px;
                  }
                }
              </style>
            {% endunless %}

            {% render block %}
          </div>

        {% when 'title' %}
          <div
            data-name="title"
            data-product-form-block="true"
            {% if title_classes %}class="{{ title_classes }}"{% endif %}
            {{ block.shopify_attributes }}
          >
            {% render 'armament-heading' with heading_content: form_product.title, heading_type: title_heading_type, data_aid: 'main-form-product-title' %}

            {% unless title_only == true %}
              {% if block.settings.show_vendor or block.settings.show_sku %}
                <div class="flex justify-between items-center gap-s mb-l md:mb-xl">
                  {% if block.settings.show_vendor and form_product.vendor != blank %}<span>{{ form_product.vendor }}</span>{% endif %}
                  {% if force_variant_selection == false %}
                    {% assign sku_variant = current_variant %}
                  {% endif %}
                  {% if block.settings.show_sku %}
                    {% render 'armament-sku' with sku_product: form_product, sku_variant: sku_variant %}
                  {% endif %}
                </div>
              {% endif %}
            {% endunless %}
          </div>

        {% when 'price' %}
          <div
            data-name="price"
            data-product-form-block="true"
            {% if price_classes %}class="{{ price_classes }}"{% endif %}
            {{ block.shopify_attributes }}
          >
            {%- liquid
              assign installments_classes = 'mt-l md:mt-xl'
              if force_variant_selection
                assign hide_price = true
                assign show_summary_price = true
                assign installments_classes = installments_classes | append: ' hidden'
              endif
            -%}
            {% if show_summary_price %}
              <div data-armada-selector="product-form-summary-price">
                {% render 'armament-price' with price_product: form_product, use_variant: false, price_only: true, discount_type: 'hide', regular_price_classes: regular_price_classes, price_is_heading: true %}
              </div>
            {% endif %}
            {% render 'armament-price' with price_product: form_product, use_variant: true, discount_type: settings.show_discount_savings, show_tax_included: block.settings.show_tax_included_text, show_shipping_policy: block.settings.show_shipping_policy, price_only: price_only, hide: hide_price, regular_price_classes: regular_price_classes, price_is_heading: true %}
            {% unless is_sticky %}
              {% form 'product', form_product, id: 'product-form-installment', class: installments_classes %}
                {% render 'armament-dropdown' with name: 'id', object: form_product.variants, object_property: 'title', attributes: 'data-armada-selector="installments-select"', wrapper_classes: 'hidden' %}
                <input type="hidden" name="id" value="{{ form_product.selected_or_first_available_variant.id }}">
                {{ form | payment_terms }}
              {% endform %}
            {% endunless %}
          </div>

        {% when 'options' %}
          {% if form_product.has_only_default_variant != true %}
            <div class="no-js-hide">
              <div
                data-name="options"
                data-product-form-block="true"
                data-aid="full-product-options"
                class="{{ option_classes }}"
                {{ block.shopify_attributes }}
              >
                {% for option in form_product.options_with_values %}
                  {% assign id = section.id | append: '-product-' | append: form_product.id | append: '-option-' | append: option.position %}

                  {% if option_type == 'dropdowns' %}
                    <div class="text-b1 pb-s leading-none">{{ option.name }}</div>

                    {% if force_variant_selection == true %}
                      {% assign label_text = 'products.product.select' | t %}
                    {% endif %}

                    {% render 'armament-dropdown' with id: id, object: option.values, label_as_option: true, label_text: label_text, label_classes: 'heading-case heading-font-styles', wrapper_classes: select_wrapper_classes, select_classes: 'border-inherit bg-inherit w-full', attributes: 'data-name="product-option-select" data-product-form-block="true"' %}

                  {% elsif option_type == 'buttons' %}
                    <div class="mb-l md:mb-xl">
                      <div class="text-b1 mb-s leading-none">{{ option.name }}</div>

                      {% assign is_color = false %}
                      {% assign opt_name = option.name | downcase | strip %}

                      {% if block.settings.color_swatch_identifier contains opt_name %}
                      {% assign is_color = true %}
                      {% endif %}
                      <div class="{% if is_color %}-mb-xs{% else %}-mb-l{% endif %}">
                        {% if is_color %}
                          {% render 'armament-color-swatch' with swatch_product: form_product, identifiers: block.settings.color_swatch_identifier, show_checked_state: true, wrapper_classes: '-mt-xs -ml-xs' %}
                        {% else %}
                          {% for option in option.values %}
                            {% assign val = option | escape %}
                            {% assign radio_id = id | append: '-value-' | append: forloop.index0 %}
                            {% render 'armament-text-option' with name: id, id: radio_id, value: val, attributes: 'data-name="product-option-radio" data-aid="armament-radio-item" data-product-form-block="true"' %}
                          {% endfor %}
                        {% endif %}
                      </div>
                    </div>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
          {% endif %}

        {% when 'description' %}
          {% if form_product.description != blank %}
            <div data-name="description" data-product-form-block="true"
              class="{% unless block.settings.enable_accordion %}mb-l md:mb-xl{% else %}mb-l md:mb-xl product-form-accordion{% endunless %} rte block !max-w-full"
              {{ block.shopify_attributes }}
            >
              {% if block.settings.enable_accordion %}
                {% render 'armament-accordion' with summary_header: block.settings.description_heading, summary_content: form_product.description, summary_header_style: 'body', details_class: 'border-y border-theme', border_classes: 'hidden', data_aid: 'product-description-accordion', content_classes: 'pb-0 prose prose-h1:text-headings prose-h2:text-headings prose-h3:text-headings prose-h4:text-headings prose-figcaption:text-body prose-blockquote:text-body prose-ol:block prose-ul:block' %}
              {% else %}
                {% render 'armament-heading' with tag: 'h5', heading_type: 'heading-b1', heading_content: block.settings.description_heading, data_aid: 'product-description-heading-accordion-disabled' %}
                <div class="prose prose-h1:text-headings prose-h2:text-headings prose-h3:text-headings prose-h4:text-headings prose-figcaption:text-body prose-blockquote:text-body prose-ol:block prose-ul:block">
                {{ form_product.description }}
                </div>
              {% endif %}
            </div>
          {% endif %}

        {% when 'quantity' %}
          <div
            data-name="quantity"
            data-product-form-block="true"
            class="mb-l md:mb-xl"
            {{ block.shopify_attributes }}
          >
            {% render 'armament-quantity-selector' with id: form_product.id, product_name: form_product.title, name: 'quantity', value: '1', min: '1', label: 'Quantity' %}
          </div>

        {% when 'payment-buttons' %}
          {% unless is_sticky %}
            {% assign payment_button_classes = 'mb-l md:mb-xl' %}
          {% endunless %}
          {% if preorder and current_variant.inventory_management == blank or preorder and current_variant.inventory_policy == 'continue' %}
            {% assign preorder_label = 'products.product.preorder' | t %}
            {% render 'armament-payment-buttons' with form_product: form_product, product_title: form_product.title, button_text: preorder_label, dynamic_buttons: false, block_shopify_attributes: block.shopify_attributes, wrapper_classes: button_wrapper_classes, button_style: 'primary', available: form_product.available, first_variant_id: form_product.selected_or_first_available_variant.id, button_classes: payment_button_classes, is_product_form_block: true %}
          {% else %}
            {% render 'armament-payment-buttons' with form_product: form_product, product_title: form_product.title, dynamic_buttons: dynamic_buttons, block_shopify_attributes: block.shopify_attributes, wrapper_classes: button_wrapper_classes, button_style: button_style, available: form_product.available, first_variant_id: form_product.selected_or_first_available_variant.id, button_classes: payment_button_classes, is_product_form_block: true %}
          {% endif %}

        {% when 'social-sharing' %}
          <div
            data-name="social-sharing"
            data-product-form-block="true"
            class="flex justify-end"
            {{ block.shopify_attributes }}
          >
            {% render 'ship-social-sharing' with share_object: 'product', show_facebook: settings.share_facebook, show_twitter: settings.share_twitter, show_pinterest: settings.share_pinterest, alignment: 'right', heading_classes: 'text-b1 !pb-s' %}
          </div>

        {% when 'image-with-offers' %}
          <div
            data-name="image-with-offers"
            data-product-form-block="true"
            {{ block.shopify_attributes }}
          >
            {% render 'ship-image-with-offer' with image_offer: block.settings.image_with_offers_image, link: block.settings.image_with_offers_link %}
          </div>

        {% when 'complementary-products' %}
          <div
            data-name="complementary-products"
            data-product-form-block="true"
            class="invisible h-0"
            {{ block.shopify_attributes }}
          >
            {% render 'flotilla-complementary-products-block' with block_settings: block.settings, color_scheme: block.settings.complementary_products_color_scheme %}
          </div>  

        {% when 'cross-sells' %}
          <div
            data-name="cross-sells"
            data-product-form-block="true"
            class="mb-l lg:mb-xl"
            {{ block.shopify_attributes }}
          >
            {% render 'flotilla-cross-sells' with block_settings: block.settings, product_card_alignment: product_card_alignment, enable_quick_view: false, product_card_aspect_ratio: product_card_aspect_ratio, product_card_position: product_card_position %}
          </div>

        {% when 'trust-content' %}
          <div
            data-name="trust-content"
            data-product-form-block="true"
            {{ block.shopify_attributes }}
          >
            {% render 'ship-trust-content' with block: block, heading_classes: 'text-b1 !pb-0 w-full' %}
          </div>

        {% when 'custom-liquid' %}
          <div
            data-name="custom-liquid"
            data-product-form-block="true"
            class="{% unless block.settings.enable_accordion %}mb-l md:mb-xl rte prose prose-h1:text-headings prose-h2:text-headings prose-h3:text-headings prose-h4:text-headings prose-figcaption:text-body prose-blockquote:text-body{% else %}mb-l md:mb-xl product-form-accordion{% endunless %} block"
            {{ block.shopify_attributes }}
          >
            {% if block.settings.enable_accordion %}
              {% render 'armament-accordion' with
                summary_header: block.settings.custom_liquid_heading,
                summary_content: block.settings.custom-liquid,
                details_class: 'border-y border-theme',
                border_classes: 'hidden',
                data_aid: 'custom-liquid-accordion',
                shopify_attributes: block.shopify_attributes,
                block_id: block.id,
                summary_class: 'text-b1 heading-style heading-weight',
                content_classes: 'text-b1 pb-0'
              %}
            {% else %}
              {% if block.settings.custom_liquid_heading != blank %}
                {% render 'armament-heading' with tag: 'h6', heading_content: block.settings.custom_liquid_heading, classes: 'text-h5', data_aid: 'custom-liquid-heading-no-accordion' %}
              {% endif %}
              {{ block.settings.custom-liquid }}
            {% endif %}
          </div>

        {% when 'stock-level-indicator' %}
          <div
            data-name="stock-level-indicator"
            data-product-form-block="true"
            class="mb-l lg:mb-xl"
            {{ block.shopify_attributes }}
          >
            {% if force_variant_selection == false %}
              {% assign stock_variant = current_variant %}
            {% endif %}
            {% render 'armament-stock-indicator' with
              stock_product: form_product,
              stock_variant: stock_variant,
              stock_amt: block.settings.stock_range,
              show_stock_count: block.settings.show_stock_count,
              in_stock_message: block.settings.in_stock_message,
              in_stock_icon: "success",
              low_stock_message: block.settings.low_stock_message,
              low_stock_icon: "warning",
              out_of_stock_message: block.settings.out_of_stock_message,
              out_of_stock_icon: "warning",
              preorder: preorder,
              preorder_message: block.settings.preorder_message,
              preorder_icon: "clock",
              classes: 'text-b1'
            %}
          </div>

        {% when 'local-pickup-availability' %}
          <div
            data-name="local-pickup-availability"
            data-product-form-block="true"
            data-color-scheme="{{ block.settings.pickup_color_scheme }}"
            {{ block.shopify_attributes }}
          >
            {% if force_variant_selection == false %}
              {% assign pickup_product = form_product %}
            {% endif %}
            <div class="bg-page text-body{% if block.settings.pickup_color_scheme != 'general' %}p-s md:p-l{% endif %}">
              {% render 'armament-local-pickup-availability' with pickup_product: pickup_product, section_id: section.id, color_scheme: block.settings.pickup_color_scheme %}
            </div>
          </div>

        {% when 'highlight' %}
          <div
            data-name="highlight"
            data-product-form-block="true"
            class="mb-l md:mb-xl"
            {{ block.shopify_attributes }}
          >
            {% liquid 
              assign show_highlights = false
              if form_product.metafields.highlights.list.value
                assign show_highlights = true
              endif
            -%}
            {% if show_highlights == false %}
              {% capture metafieldMessage %}
                <p class="text-left !mt-0">To use this section create a <a target="_blank" href="/admin/metafields/product/create">product metafield</a> with the namespace of “highlights” and the key “list”. This needs to be a ‘single text’ content type with the ‘List of values’ setting. <a target="_blank" href="https://support.eightthemes.com/hc/en-us/articles/8283374569361">Learn more.</a></p>
              {% endcapture %}
              {% render 'armament-metafield-theme-editor-message' with is_full_width_editor_message: false, editor_message_metafield_type: 'highlights' metafield_message: metafieldMessage %}
            {% endif %}
            {% render 'armament-highlight' with highlight_product: form_product, text_size: 'text-b1', items_padding: true %}
          </div>

        {% when 'ask-a-question' %}
          <div class="icon-and-text mb-l md:mb-xl"
            data-name="ask-a-question"
            data-product-form-block="true"
            {{ block.shopify_attributes }}
          >
          {% render 'armament-ask-a-question' with
            icon: block.settings.icon,
            title: block.settings.title,
            form_heading: block.settings.form_heading,
            form_subheading: block.settings.form_subheading,
            name_input: block.settings.name_input,
            phone_input: block.settings.phone_input,
            form_product: form_product,
            current_variant: current_variant,
            test_mode: block.settings.test_mode,
            title_classes: 'text-b1 pb-0'
          %}
          </div>

      {% endcase %}
    {% endfor %}
  {% else %}
    {% comment %} If this ship is used outside of a 'blocks' context, we can still make use of most fields. {% endcomment %}

    {% if block_order contains 'title' %}
      <div
        data-name="title"
        data-product-form-block="true"
      >
        {% render 'armament-heading' with heading_content: form_product.title, heading_type: 'heading-3', data_aid: 'main-form-product-title' %}
      </div>
    {% endif %}

    {% if block_order contains 'price' %}
      <div
        data-name="price"
        data-product-form-block="true"
        class="mb-l md:mb-xl"
      >
        {% render 'armament-price' with price_product: form_product, use_variant: true, discount_type: settings.show_discount_savings, regular_price_classes: 'text-h4 font-heading heading-font-styles leading-none', section_id: section_id %}
      </div>
    {% endif %}

    {% if block_order contains 'description' %}
      <div data-name="description" data-product-form-block="true" class="mb-l md:mb-xl rte prose prose-h1:text-headings prose-h2:text-headings prose-h3:text-headings prose-h4:text-headings prose-figcaption:text-body prose-blockquote:text-body">
        {{ form_product.description }}
      </div>
    {% endif %}

    {% if block_order contains 'options' and form_product.has_only_default_variant != true %}
      <div class="no-js-hide">
        <div
          data-name="options"
          data-product-form-block="true"
          data-aid="full-product-options"
          class="mb-l md:mb-xl {{ option_classes }}"
        >
          {% for option in form_product.options_with_values %}
            {% assign id = section.id | append: '-product-' | append: form_product.id | append: '-option-' | append: option.position %}

            {% if option_type == 'dropdowns' %}
              {% assign label_text = option.name | default: '' %}
              {% render 'armament-dropdown' with id: id, object: option.values, label_as_option: true, label_text: label_text, label_classes: 'heading-case', wrapper_classes: select_wrapper_classes, select_classes: 'border-inherit bg-inherit w-full', attributes: 'data-name="product-option-select" data-product-form-block="true"' %}

            {% elsif option_type == 'buttons' %}
              <div class="text-b1 pb-s leading-none">{{ option.name }}</div>

              <div>
                {% comment %} Can't show a color swatch without pulling in identifiers from settings. {% endcomment %}
                {% for option in option.values %}
                  {% assign val = option | escape %}
                  {% assign radio_id = id | append: '-value-' | append: forloop.index0 %}
                  {% render 'armament-text-option' with name: id, id: radio_id, value: val, attributes: 'data-name="product-option-radio" data-aid="armament-radio-item" data-product-form-block="true"' %}
                {% endfor %}
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endif %}

    {% if block_order contains 'quantity' %}
      <div
        data-name="quantity"
        data-product-form-block="true"
        class="mb-l md:mb-xl"
      >
        {% render 'armament-quantity-selector' with id: form_product.id, product_name: form_product.title, name: 'quantity', value: '1', min: '1', label: 'Quantity' %}
      </div>
    {% endif %}

    {% if block_order contains 'payment-buttons' %}
      {% assign payment_button_classes = 'mb-l md:mb-xl' %}
      {% render 'armament-payment-buttons' with form_product: form_product, product_title: form_product.title, dynamic_buttons: dynamic_buttons, block_shopify_attributes: block.shopify_attributes, wrapper_classes: button_wrapper_classes, button_style: button_style, available: form_product.available, button_classes: payment_button_classes, is_product_form_block: true %}
    {% endif %}

    {% if block_order contains 'highlight' %}
      <div data-name="highlight" data-product-form-block="true" class="mb-l md:mb-xl">
        {% render 'armament-highlight' with highlight_product: form_product, text_size: 'text-b1', items_padding: true %}
      </div>
    {% endif %}

    {% comment %} Rating slider not useful here as it takes in settings from a block. {% endcomment %}
    {% comment %} Cross-sells not useful here as it takes in settings from a block. {% endcomment %}

  {% endif %}

  <template id="product-form-{{ section_id }}-{{ form_product.id }}">
    {% assign addingString = 'products.product.adding_only' | t %}
    {% render 'armament-button' with content: addingString, loading: true, attributes: 'data-button-loading disabled aria-label="Adding to cart..."', classes: 'min-w-full', data_aid: 'button-adding', type: 'button' %}
  </template>
</product-form>

<script>
  var inventory_policy = {
    {%- for variant in form_product.variants -%}     
        {{ variant.id }} : "{{ variant.inventory_policy }}"
        {%- unless forloop.last -%},{%- endunless -%}
    {%- endfor -%}
  }
</script>

<safe-load-scripts>
  <script src="{{ 'component-product-form.min.js' | asset_url }}" defer="defer" type="module" data-armada-load-key="product-form"></script>
</safe-load-scripts>

Note: Please check out my codes and help out me to get the desired results what exactly happening on the reference site which is already mentioned above.

Looking forward to get prompt responses as soon as possible

Thanks and Regards,

Fida Marwat