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

Question

我有一个基于 node.js 的自定义网站，我希望能够在 GET 请求中获取我的所有产品。 shopify buy-button 不允许我将所有产品一次带入页面（它有分页），这使我无法正确过滤所有产品（我在网站上有自定义过滤器） .

因此，based on a post that I read 在 shopify 论坛中，我希望执行以下操作：

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

这将允许我过滤所有不同的 shopify 产品。然而，现在困难的部分是获取 product-id 和 var-id 字段。人们会认为只需转到 Products => All Products => Export 就足够了，但他们没有在其中列出产品 ID 和 var-id。

我试过使用 Shopify-Buy npm module，它看起来像下面的代码，但是我得到了一个难看的、无法使用的响应：

所以我的问题是，如何使用 API 或其他方式获得我所有不同 Shopify 产品的响应，而不使用 having to use PHP, or pay for a shopify plugin just to get product-ids and var-ids (I'm on Shopify lite 计划，因为我只是插入它到我现有的平台）。

代码：

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 } ]

Answer 1

要获取 Shopify 产品 ID 和产品变体 ID，您可以使用 Shopify REST API。因为，您已经拥有可以使用 Shopify API Node.js Module 的 NodeJS 应用程序。只需获取所有产品，将获取的数据传递到前端，然后使用您问题中提到的脚本来呈现 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

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

Use Shopify API request to get all products using JavaScript on custom website

javascript

e-commerce

node.js

shopify

npm