Knowledge Base

Get metafields for products using front matter

---
    product:
        gql: "query productMetafieldsById($productId: Int!) {
            site {
                product(entityId: $productId) {
                    entityId
                    name
                    metafields(namespace: 'my-namespace', keys: ['my-key']) {
                        edges {
                            node {
                                value
                            }
                        }
                    }
                    variants {
                        edges {
                            node {
                                metafields(namespace: 'my-namespace', keys: ['my-key']) {
                                    edges {
                                        node {
                                            value
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }"
---

Output metafields using handlebar:

{{#each gql.data.site.product.metafields.edges}}
    {{#if node.key "===" "my-key"}}
        {{{node.value}}} 
    {{/if}}
{{/each}}

Get metafields for products via javascript

    </script>
    // nest within any conditional, such as onload
    fetch('/graphql', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer {{settings.storefront_api.token}}'
      },
      body: JSON.stringify({ query: "{ 
              site { 
                  product(entityId: {{product.id}}) { 
                      entityId
                      name 
                      metafields(namespace: 'my-namespace', keys: ['my-key']) {
                          edges {
                              node {
                                  value
                              }
                          }
                      }
                      variants {
                          edges {
                              node {
                                  metafields(namespace: 'my-namespace', keys: ['my-key']) {
                                      edges {
                                          node {
                                              value
                                          }
                                      }
                                  }
                              }
                          }
                      }
                  }
              }
          }"
      }) //graphql query string
    })
    .then(data => data.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
    </script>
    

NOTE:

• The settings.storefront_api.token comes from the Handlebars context
  
• If trying to use this from within any Theme JS files, you'll need to make some adjustments and make sure the JS context is provided to the file appropriately