使用 Shopify API 请求在自定义网站上使用 JavaScript 获取所有产品

2023-12-24

我有一个基于 node.js 的自定义网站,我希望能够通过 GET 请求获取我的所有产品。店铺化购买按钮 https://help.shopify.com/en/manual/sell-online/buy-button/create-buy-button不允许我立即将所有产品带入页面(它有分页),这使我无法正确过滤所有产品(我在网站上有自定义过滤器)。

Thus, 基于我读过的一篇文章 https://community.shopify.com/c/Shopify-Design/One-product-page-with-multiple-products-buy-buttons/td-p/210720在 Shopify 论坛中,我希望执行以下操作:

<div class="wps-buy-button" id='[product-id]-[var-id]' data-id='[product-id]' data-var='[var-id]'></div>

这将使我能够过滤所有不同的 Shopify 产品。However,现在困难的部分是得到product-id and var-id字段。人们可能会认为简单地去产品 => 所有产品 => 出口就足够了,但他们没有在其中列出产品 ID 和变量 ID。

我尝试过使用Shopify-Buy npm 模块 https://www.npmjs.com/package/shopify-buy#fetching-products,它看起来像下面的代码,但我得到了一个丑陋的、无法使用的响应:

所以我的问题是,如何使用 API 或其他方式获得所有不同 Shopify 产品的响应,而无需必须使用PH https://community.shopify.com/c/Shopify-APIs-SDKs/How-to-get-all-product/m-p/139994P,或者付费Shopify 插件 https://apps.shopify.com/product-and-variant-ids只是为了获取产品 ID 和 var-id (我在Shopify 精简版 https://www.shopify.com/lite计划,因为我只是将其插入我现有的平台)。

CODE:

import Client from 'shopify-buy';

const client = Client.buildClient({
  domain: 'your-shop-name.myshopify.com',
  storefrontAccessToken: 'your-storefront-access-token'
});

// Fetch all products in your shop
client.product.fetchAll().then((products) => {
  // Do something with the products
  console.log(products);
});

回复:

[ GraphModel {
    id: [Getter],
    handle: [Getter],
    description: [Getter],
    descriptionHtml: [Getter],
    updatedAt: [Getter],
    title: [Getter],
    image: [Getter],
    products: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: false,
    hasPreviousPage: false,
    variableValues: { first: 20, productsFirst: 20 } },
  type: { name: 'CollectionConnection',
    kind: 'OBJECT',
    fieldBaseTypes: { edges: 'CollectionEdge', pageInfo: 'PageInfo' },
    implementsNode: false } ]
[ GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: false,
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: { [Boolean: true] value: true },
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  GraphModel {
    id: [Getter],
    availableForSale: [Getter],
    createdAt: [Getter],
    updatedAt: [Getter],
    descriptionHtml: [Getter],
    description: [Getter],
    handle: [Getter],
    productType: [Getter],
    title: [Getter],
    vendor: [Getter],
    publishedAt: [Getter],
    onlineStoreUrl: [Getter],
    options: [Getter],
    images: [Getter],
    variants: [Getter],
    refetchQuery: [Getter],
    type: [Getter],
    nextPageQueryAndPath: [Function],
    hasNextPage: true,
    hasPreviousPage: { [Boolean: true] value: true },
    variableValues: { first: 20, productsFirst: 20 } },
  type: { name: 'ProductConnection',
    kind: 'OBJECT',
    fieldBaseTypes: { edges: 'ProductEdge', pageInfo: 'PageInfo' },
    implementsNode: false } ]

要获取 Shopify 产品 ID 和产品变体 ID,您可以使用 Shopify REST API。既然您已经有了 NodeJS 应用程序,您可以使用Shopify API Node.js 模块 https://www.npmjs.com/package/shopify-api-node。只需获取所有产品,将获取的数据传递到前端,然后使用问题中提到的脚本来呈现 Shopify 购买按钮。

获取所有产品的示例代码

const Shopify = require('shopify-api-node');

const shopify = new Shopify({
    shopName: 'store-url.myshopify.com',
    apiKey: 'xxxxxxxxxxxxxxxx',
    password: 'xxxxxxxxxxxxxx',
    autoLimit: true
});



shopify.product.count()
    .then(async (count) => {
        if (count > 0) {

            const pages = Math.ceil(count / 250);
            let products = [];

            for (i = 0; i < pages; i++) {
                // use Promise.all instead of waiting for each response
                const result = await shopify.product.list({
                    limit: 250,
                    page: i + 1,
                    fields: 'id, variants'
                });
                products = products.concat(result);
            }
            // products array should have all the products. Includes id and variants
            console.log(products);
        }
    })
    .catch(err => {
        console.log(err);
    });

为了获得更好的性能,请考虑将产品保存在数据库中并定期更新信息。

Shopify REST API https://help.shopify.com/en/api/reference/products/product

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Shopify API 请求在自定义网站上使用 JavaScript 获取所有产品 的相关文章

  • 位置特征检测:固定

    我正在尝试找到一个脚本来检测设备是否放置position fixed元素相对于视口而不是整个文档 目前 标准桌面浏览器和 Mobile Safari 适用于 iOS 5 都是这样做的 而 Android 设备则相对于整个文档放置固定元素 我
  • 如何使用有角度的材料创建卡片网格?

    我正在尝试使用 ng repeat 创建每行三张卡片的网格 我有一个普通的 javascript 对象数组附加到范围 下面的代码将为每张卡创建一个新行 div div
  • 如何使用 Playwright 使用选择器查找框架 (iframe)

    我有一个小问题 无法找到使用 Microsoft Playwright 框架的答案 根据您可以使用以下代码获取 iframe const frame page frame frame login 但是如何使用选择器来查找 iframe 并与
  • 通过 JavaScript 获取表单名称

    我有一个简单的问题 但我在网上找不到好的解决方案 我有这个 HTML 代码
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 使用 AWS CDK 为 lambda 指定自定义角色

    我意识到它很新 但我没有看到任何语言的任何示例 说明如何为使用 AWS CDK 创建的 lambda 指定角色 我正在尝试这样做 const cdk require aws cdk cdk const lambda require aws
  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 改变 JavaScript 中的顶部填充

    以下是我在 css 中设置顶部填充的方法 body font size font size px margin 0 padding 100px 0 20px 0 width 100 important 如何使用最简单的 javascript
  • Node.js 中的异步或步骤

    我无法让我的异步代码与 node js 一起使用 尝试异步和步骤库 代码仅返回第一个函数 似乎没有执行其余函数 我究竟做错了什么 thanks var step require step step function f1 console l
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • 带有 npm 启动脚本的 Nodejs 应用程序

    我对nodejs很陌生 在我的docker化环境中 我想为nodejs应用程序提供appdynamics支持 这要求每个应用程序都要求将以下内容作为其应用程序的第一行 require appdynamics profile controll
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐