Accessing a product's custom metafields directly in a theme with Javascript only?

[MVS-ONE]

I have a scenario where I am using URL param's to access a product and get the data associated with it. I can't use Liquid here because AFAIK there's no way in Liquid to get URL parameters reliably.

document.addEventListener('DOMContentLoaded', function () {
  const productHandle = new URLSearchParams(window.location.search).get('product');

  if (productHandle) {
    console.log(productHandle);

    fetch(`/products/${productHandle}.js`)
      .then(response => response.json())
      .then(product => {

        console.log('Product Name:', product.title);
        console.log('Product Data:', product);
        console.log('Product Meta:', product.metafields.custom.landing_page_background);

      })
      .catch(error => {
        console.error('Error fetching product data:', error);
      });
  } else {
    console.log("Handle not used");
  }
});

Logging the custom meta field fails and I can't see custom metafields in the product object either, so I guess they're accessed a different way? 

[tim]

Historically, the best way to do it was to create an alternate product page template with {% layout none %} to output whatever product data you need in a JSON format and retrieve this one via fetch(`/products/${productHandle}?view=custom-json`) because there is a ton of data omitted from the standard .js or | json filter output, like metafields or inventory.

Alternatively, one can use storefront api. Depends on where you have access.

[MVS-ONE]

Thanks Tim! I'm using it on a page template. The use case is I have a landing page at /pages/trial which is where I want to output the custom product metafield data. I understand the Storefront API needs permissions not available in a standard theme, so that's probably not an option.

fetch(`/products/${productHandle}?view=custom-json`)

This sounds like what I want, but this doesn't return JSON when I try. It just looks like the entire page output?

[tim · Accepted solution]

to do that you'd first need to create an alternate product page template with name product.custom-json.liquid (no need to use JSON template and sections for this).

Since you do not have it, Shopify falls back to your default product page template, that's why you're getting a HTML.

see more at 

https://www.shopify.com/au/partners/blog/shopify-alternate-templates  

and

https://elghorfimed.me dium.com/2-lines-to-expose-product-liquid-object-to-javascript-on-shopify-fb8675390116   

https://stackoverflow.com/questions/21310404/search-shopify-products-by-keyword-with-json-response  

[MVS-ONE]

Ah yep I see! From there I can access the metafields and do whatever I need to with them.

Thank you!