CODEWITHSUNDEEP
shopifyshopify-api
qww
qww

Reputation: 17

Using Shopify API inside Tapcart custom block?

I am exploring some updates to the product page on my Shopify Tapcart mobile app. I will have to make use of Custom blocks and the Shopify API to retrieve a list of products and their tags. Unfortunately, I have read the Shopify ajax documentation which says:

You can't use the Ajax API on a Shopify custom storefront.

As Tapcart does count as a custom storefront, is there an alternative method to retrieve a list of products on my Shopify site?

Upvotes: 1

Views: 681

Answers (1)

Kenyon
Kenyon

Reputation: 36

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

(You can go here for other examples too - 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);
  });

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

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

Upvotes: 2

Related Questions