嘗試在 shopify 用 app extension 撈取商店的商品資料

上次實作了撈取假資料的互動

現在來嘗試撈真的商品資料

我本以為會很簡單因為商品資料都是公開的不是嗎？

卻發現其實 shopify 沒有很歡迎外部去撈店家的商品資料

所以其實需要 app 授權

在 toml 檔案裡面 remix 預設是

scopes = "write_products"

要改成

scopes = "write_products,unauthenticated_read_product_listings"

如果用我的架構就是 shopify.app.development.toml shopify.app.production.toml 兩個檔案都要修改

而且都要部署到 shopify 喔

在跑 npm run dev 跟 npm run deploy 的時候要 tweak 一下

加好權限之後要去 admin panel 打開 app 會看到 shopify 跳通知要求更新授權內容

以下是我實際取得商品資料的範例

import { unauthenticated } from "../shopify.server";

async function fetchRecommendationsFromDB({ recommendationSetId }) {
  const { storefront } = await unauthenticated.storefront(
    'akawaselect.myshopify.com'
  );

  const ids = [
    "gid://shopify/Product/7583115968595",
    "gid://shopify/Product/7583114526803"
  ];

  const response = await storefront.graphql(
    `#graphql
    query GetProducts($ids: [ID!]!) {
      nodes(ids: $ids) {
        ... on Product {
          id
          title
          handle
          featuredImage {
            url
          }
        }
      }
    }`,
    {
      variables: { ids }
    }
  );

  const data = await response.json();
  const nodes = data.data.nodes;

  let recommendations = nodes.map((node) => {
    return {
      title: node.title,
      override_price: "100", // 假設價格，實際應從資料庫或其他來源獲取
      image: node.featuredImage ? node.featuredImage.url : "https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-image_large.png",
    };
  });

  return recommendations;
}

出來的成果如圖，非常成功！

老話一句我覺得這流程開發起來門檻很高！

😂

站長阿川

每週二 YT 直播問答，DC 可 Call-in，一起討論技術、職涯發展。
YT 👇👇👇
https://www.youtube.com/@codelove_tw
DC 👇👇👇
https://discord.gg/fvCF2whZ9D

提供 Shopify 接案服務：阿川の電商水電行 - 專修 Shopify 網店 👇👇👇
https://job.turn.tw/shopify-services