Add vendor below title in product box

Technical Questions Shopify
,
1

Hello, I’ve created a shopify products slider here which pulls items from a specific collection ; but I need to add vendor under the title and this component is unfortuanelty unavailable . Is there a way to add this component to the productInfo state.

I’ve been trying multiple thing including sending a new query for the productInfo query and calling the function in binding data but I only get a Promise Objects.

image
image1292×644 137 KB

async function fetchProductData(handle) {
  const apiKey = "your-shopify-storefront-access-token"; // Replace with your actual token

  const response = await fetch("https://your-shop.myshopify.com/api/2023-10/graphql.json", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Shopify-Storefront-Access-Token": apiKey,
    },
    body: JSON.stringify({
      query: `
        query getProductByHandle($handle: String!) {
          productByHandle(handle: $handle) {
            vendor
            title
          }
        }
      `,
      variables: { handle },
    }),
  });

  if (!response.ok) {
    console.error("Error fetching data:", response.statusText);
    return null;
  }

  const result = await response.json();
  return result.data.productByHandle;
}

// Attach the function to the `window` object for global access
window.fetchProductData = fetchProductData;


window.fetchProductData(state.product.handle).then((data) => {
  if (data) {
    state.vendor = data.vendor; // Update state
    state.title = data.title;  // Update state
  }
});

// Return a placeholder or the current state
return state.vendor || "Loading...";

Would really appreciate to know if this possible to do, and how to proceed? Thank you.
Best regards

Joiakim

2

Hello , Any help here ?

3

Hi @Ecommfox,

At the moment, there isn’t a direct way to add the vendor to the product box. Your approach of using the Shopify Storefront API to retrieve vendor info is correct. However, I suspect the issue may lie in the X-Shopify-Storefront-Access-Token you’re using. The state.apiKey is returning the Builder.io API key, not the Shopify Storefront access token, which could be causing the issue.

Make sure you’re using the correct token for the Shopify Storefront API, and that should resolve the issue.

fetch('https://your-shopify-store.myshopify.com/api/2023-01/graphql.json', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': state.apiKey,
    },
    body: JSON.stringify({
        query,
        variables: { id: `gid://shopify/Product/${productId}` },
    }),
})

Here is the code for collection grid if it helps


    if (Builder.isBrowser) {
        const shopifyWindow = window;
        if (shopifyWindow.BuilderJsonData && shopifyWindow.BuilderJsonData.collection) {
            context.overrideCollectionId = shopifyWindow.BuilderJsonData.collection.id;
            context.collectionObject = shopifyWindow.BuilderJsonData.collection;
        }
    }

    const getCollectionId = () => {
        const contextPlaceholder = 'context_placeholder';
        if (state.collection === contextPlaceholder) {
            return context.overrideCollectionId;
        }
        let collection = state.collection;
        if (typeof collection === 'object' &&
            collection &&
            collection['@type'] === '@builder.io/core:Request') {
            collection = collection.options.collection;
        }
        return collection;
    };
    let lastCollectionId = getCollectionId();
    let lastLimit = 10;
    let lastHideIfUnavailable = state.hideIfUnavailable || false;
    if (Builder.isEditing) {
        ref.onStateChange.subscribe(() => {
            const newId = getCollectionId();
            if (lastCollectionId !== newId ||
                lastLimit !== state.limit ||
                lastHideIfUnavailable !== state.hideIfUnavailable) {
                updateCollection();
                lastCollectionId = newId;
                lastHideIfUnavailable = state.hideIfUnavailable;
            }
        });
    }
    function updateCollection() {
        const collectionId = getCollectionId();
        if (state.collectionInfo && !collectionId) {
            return;
        }
        if (collectionId) {
            state.loading = true;
            lastLimit = state.limit ? state.limit : 10;
            fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&collectionId=${collectionId}&limit=${state.limit ? state.limit : 10}`)
                .then(res => res.json())
                .then(data => {
                const collectionResponse = data;
                if (state.hideIfUnavailable) {
                    const availableProducts = collectionResponse.products.filter((product) => product.variants.some(variant => variant.availableForSale));
                    collectionResponse.products = availableProducts;
                }
                state.collectionInfo = collectionResponse;
                state.loading = false;
            })
                .catch(err => {
                console.error('Error fetching Shopify product', err);
                state.loading = false;
            });
        }
        else {
            state.collectionInfo = null;
        }
    }
    updateCollection();
1 Like
4

Thank you @manish-sharma, since we’re integrating to a store on which we’ve installed the app , I assumed an API key was generated and tried to fecth it using state.apiKey, If we can’t retrieve it I suppose we have to create a new private app is that correct ? … How does it work if I want to create new components based on the same data ?