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

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

Boyi
Shopify Partner
13 0 1

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 

Replies 11 (11)

namphan
Shopify Partner
441 57 78

Hi @Boyi,

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
Boyi
Shopify Partner
13 0 1

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
Shopify Partner
13 0 1

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
Shopify Partner
441 57 78

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 %}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
namphan
Shopify Partner
441 57 78

Hi @Boyi,

I recommend using JS, it will make everything better

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
Boyi
Shopify Partner
13 0 1

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
Shopify Partner
441 57 78

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;
      }
    }

 

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
Boyi
Shopify Partner
13 0 1

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
Shopify Partner
441 57 78

Hi @Boyi,

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
Boyi
Shopify Partner
13 0 1

@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
Shopify Partner
441 57 78

Hi @Boyi,

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com