Using Shopify API inside Tapcart custom block?

Solution:

Yes you can do this, here's a boilerplate example:

(You can go here for other examples too - https://github.com/Tapcart-Templates (https://github.com/Tapcart-Templates))

const STOREFRONT_ACCESS_TOKEN = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
const GRAPHQL_URL = "https://tapcart-boutique.myshopify.com/api/2022-10/graphql.json";
const productIds = `["gid://shopify/Product/7444358463640"]`;
const productQuery = () => `
  query {
    nodes(ids: ${productIds}) { 
      ... on Product {
        id
        title
        handle
        tags
      }
    }
  }
`;

const GRAPHQL_BODY = () => {
  return {
    async: true,
    crossDomain: true,
    method: "POST",
    headers: {
      "X-Shopify-Storefront-Access-Token": STOREFRONT_ACCESS_TOKEN,
      "Content-Type": "application/graphql",
    },
    body: productQuery(),
  };
};

fetch(GRAPHQL_URL, GRAPHQL_BODY())
  .then((res) => res.json())
  .then((productResponse) => {
    console.log(productResponse);
  });
Copy code

When you've retrieved all the needed product IDs from Shopify, you can use theopenProduct app action to switch to different PDPs. Make sure to use theisRelatedProduct boolean (set it totrue) to ensure the transition is smooth as butter.

https://docs.tapcart.com/docs/app-actions (https://docs.tapcart.com/docs/app-actions)

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.