How to base on Product handle to retriever all variant ID of option1

[Boyi]

HI Sir,

After select one product, loading option1 selection will cause some delay. How can I able to base on selected product ID to retriever all option1 variants ID in customer-card-product.liquid 

[namphan]

Hi @Boyi,

Do you mean that when you change variants, it will take time to load, and you don't want this?

[Boyi]

Yes, some delay (maybe few seconds) when we change option1. Base on our collected info, many cust only stay with us for few mins so few seconds is quite long already. I already have js code to save the 1st selection into cache so subsequent selection will be no delay. We wish to resolve the delay at 1st selection as well. One idea in my mind is to preload them into cache when cust select product but we need to know all variant ID of option1 of product. That is reason we hope can do it in customer-card-product.liquit file or separate js file. 

[Boyi]

I noted below code is used to select product and I am able to get product handle already. But now problem is how can I get all option1's variant ID of this product. Would you please help to advise for it. Tks first for your help.

====================================================================

  <h3

            class="

              card__heading

              {% comment %}{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %} {% endcomment %}

            "

            {% if card_product.featured_media or settings.card_style == 'card' %}

              id="title-{{ section_id }}-{{ card_product.id }}"

            {% endif %}

          >

            {{ card_product.handle }}

            {{ card_product.url }}

            <a

              href="{{ card_product.url }}"

              id="CardLink-{{ section_id }}-{{ card_product.id }}"

              class="full-unstyled-link"

              aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"

              {% comment %} "Added by TB on 20240614 Start" {% endcomment %}

              data-selected-product-handle="{{ card_product.handle }}"

              {% assign product = all_products[data-selected-product-handle] %}

              {% comment %} "Added by TB on 2024061 End" {% endcomment %}

            >

              {{ card_product.title | escape }}

            </a>

          </h3>

[namphan]

Hi @Boyi,

You have 2 options for it:

- For code JS:

<script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
</script>

- For Liquid:

{% for variant in product.variants %}
     {% comment %}
      show variant object
     {% endcomment %} 
{% endfor %}

[namphan]

Hi @Boyi,

I recommend using JS, it will make everything better

[Boyi]

Hi Namphan,

Tks for your advice first. I actually able to capture the event in global.js file as below but fetch not work. Would you please help to advise how to amend below code to get all option1's variant ID?

document.addEventListener('DOMContentLoaded', function() {
  // Function to handle clicks on product links
  function handleProductLinkClick(event) {
    const productHandle = this.getAttribute('data-selected-product-handle');

    // Retrieve the product data using Shopify's frontend API endpoint
    fetch('/products/' + productHandle + '.js').then(function(response){ return response.json() }).then(
    function(product){
      let variant = product.variants.find(function(variant){ return variant.id == variant_id })
      // Do stuff with your product & variant objects
     }
  )
)

[namphan]

Hi @Boyi,

Please change code:

document.addEventListener('DOMContentLoaded', function() {
      async function handleProductLinkClick(event) {
        const productHandle = this.getAttribute('data-selected-product-handle');
        const data = await getData(productHandle);
      }
      function getData(handle) {
        const data = new Promise(async (resolve, reject) => {
          const response = await fetch(`/products/${handle}.js`);
          if (response.ok) {
            const responseAsJson = await response.json();
            resolve(responseAsJson);
          } else {
            reject(handle);
          }
        });
        return data;
      }
    }

[Boyi]

Hi @namphan ,
Tks for your help first. Btw I have tried it but unluck and nothing to return. I add 2 debug console.log as below and nothing captured. If something wrong with this code?

document.addEventListener('DOMContentLoaded', function() {
  async function handleProductLinkClick(event) {
    const productHandle = this.getAttribute('data-selected-product-handle');
    const data = await getData(productHandle);
    console.log('Shopify product:', data);
  }
  function getData(handle) {
    const data = new Promise(async (resolve, reject) => {
    const response = await fetch(`/products/${handle}.js`);
    console.log('Shopify response:', response);
    if (response.ok) {
      const responseAsJson = await response.json();
      resolve(responseAsJson);
    } else {
      reject(handle);
    }
});
return data;
}
}

[namphan]

Hi @Boyi,

Can I send you a collaborator invitation? it will help me check everything in more detail

[Boyi]

@namphan ,

Sure. Tks first. If possible we can do it tomorrow Singapore time between 2~5pm or 26th Jun Singapore time after 2pm?

Rgds

Tan Bing

[namphan]

Hi @Boyi,

You can send it via private message, I will check it