diff --git a/webapp/src/views/Store.vue b/webapp/src/views/Store.vue index b1f4f64..798b21f 100644 --- a/webapp/src/views/Store.vue +++ b/webapp/src/views/Store.vue @@ -55,6 +55,13 @@ + + +

{{ collectionDescription }}

+
+
+ + (() => { const collectionId = ref((route.query.category as string) || ALL_COLLECTION_ID); const shopifyContainer = ref(null); const shopifyReady = ref(false); +const collectionDescription = ref(''); // Sync tab + category to URL so back/forward/refresh restores state. watch([activeTab, collectionId], ([tab, category]) => { @@ -571,8 +579,42 @@ watch(collectionId, (id) => { return; } if (window.ShopifyBuy?.UI) renderShopify(id); +fetchCollectionDescription(id); }); +// Fetches the real collection description from Shopify's Storefront API — +// entirely separate from the Buy Button SDK/iframe embed, so a failure or +// missing description here can never affect the product grid itself. +async function fetchCollectionDescription(id: string): Promise { + try { + const gid = `gid://shopify/Collection/${id}`; + const response = await fetch('https://agora.markets/api/2024-10/graphql.json', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'X-Shopify-Storefront-Access-Token': '78991208f7fea14aa4ac02a58f8025dd', + }, + body: JSON.stringify({ + query: ` + query CollectionDescription($id: ID!) { + collection(id: $id) { + description + } + } + `, + variables: { id: gid }, + }), + }); + if (!response.ok) { + collectionDescription.value = ''; + return; + } + const json = await response.json(); + collectionDescription.value = json?.data?.collection?.description ?? ''; + } catch { + collectionDescription.value = ''; + } +} declare global { interface Window { ShopifyBuy: any } } @@ -717,5 +759,6 @@ watch(shopifyContainer, (el) => { onMounted(() => { fetchPrintables(); + fetchCollectionDescription(collectionId.value); });