Add vendor below title in product box

Technical Questions Shopify
,
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