程序员经验分享-hwhale

使用 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(使用前将#替换为@)

javascript

nodejs

npm

shopify

ecommerce

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

随机推荐

热门标签