我可以在 Tapcart 应用程序上使用 Shopify Ajax API 吗？

Question

I'm currently exploring making some updates to the product detail page on my mobile app on Tapcart . I would have to make use of Tapcart custom blocks and the Shopify AJAX api to retrieve a list of products and their tags.

I have read the Shopify ajax documentation which says:

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

Does Tapcart count as a custom storefront? I'm guessing the answer is yes and that means I would have to look for alternatives, or most likely abandon my ideas but I was hoping someone would be able to confirm or deny my suspicion.

Answer 1

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