根据类别查找产品 (Commerce.js)

Question

我目前正在从事一个个人项目，这是一个电子商务 Web 应用程序。 为此，我使用了 Commerce.js 库，但目前遇到了障碍。 虽然从技术上讲我可以通过使用嵌套 for 循环来做到这一点，但我想寻找一种更有效的方法，它使用更清晰的代码并且更快、更有效地利用资源。

Commerce.js 文档不会返回特定类别的产品，因此我必须使用两个函数来分别获取它们。

 const commerce = new Commerce(process.env.REACT_APP_API_KEY)
  var shopItems;
  var categoriesList;
  useEffect(()=> {
    commerce.categories.list().then((categories) => {
      categoriesList = categories;
      console.log(categoriesList.data)
    });

    commerce.products.list().then((product) => {
      shopItems = product;
      console.log(shopItems.data)
    });

    
  })

DATA


Categories:
{
    "id": "cat_O3bR5XyEklnzdj",
    "parent_id": null,
    "slug": "new-releases",
    "name": "New Releases",
    "description": null,
    "products": 1,
    "created": 1639555008,
    "updated": 1639555008,
    "meta": null,
    "assets": [
        {
            "id": "ast_Op1YoVxzaglXLv",
            "url": "https://cdn.chec.io/merchants/37076/assets/aHVfA98RM9vVKjMa|Screenshot (6).png",
            "description": null,
            "is_image": true,
            "filename": "Screenshot (6).png",
            "file_size": 933236,
            "file_extension": "png",
            "image_dimensions": {
                "width": 1920,
                "height": 1080
            },
            "meta": [],
            "created_at": 1639555026,
            "updated_at": 1639555031
        }
    ],
    "children": []
}

Products:
[
    {
        "id": "prod_RyWOwmdx1GlnEa",
        "created": 1639554903,
        "updated": 1639554964,
        "active": true,
        "permalink": "tE45fb",
        "name": "Air Jordan 11 Cool Grey",
        "description": "<p></p>",
        "price": {
            "raw": 300000,
            "formatted": "300,000.00",
            "formatted_with_symbol": "Rp300,000.00",
            "formatted_with_code": "300,000.00 IDR"
        },
        "inventory": {
            "managed": false,
            "available": 0
        },
        "sku": null,
        "sort_order": 0,
        "seo": {
            "title": null,
            "description": null
        },
        "thank_you_url": null,
        "meta": null,
        "conditionals": {
            "is_active": true,
            "is_tax_exempt": false,
            "is_pay_what_you_want": false,
            "is_inventory_managed": false,
            "is_sold_out": false,
            "has_digital_delivery": false,
            "has_physical_delivery": false,
            "has_images": true,
            "collects_fullname": false,
            "collects_shipping_address": false,
            "collects_billing_address": false,
            "collects_extra_fields": false
        },
        "is": {
            "active": true,
            "tax_exempt": false,
            "pay_what_you_want": false,
            "inventory_managed": false,
            "sold_out": false
        },
        "has": {
            "digital_delivery": false,
            "physical_delivery": false,
            "images": true
        },
        "collects": {
            "fullname": false,
            "shipping_address": false,
            "billing_address": false,
            "extra_fields": false
        },
        "checkout_url": {
            "checkout": "https://checkout.chec.io/tE45fb?checkout=true",
            "display": "https://checkout.chec.io/tE45fb"
        },
        "extra_fields": [],
        "variant_groups": [],
        "categories": [],
        "assets": [
            {
                "id": "ast_8XO3wpM74OoYAz",
                "url": "https://cdn.chec.io/merchants/37076/assets/1WUVJv226CmE5Xp2|air-jordan-11-cool-grey-ct8012-005-release-date (1).jpg",
                "description": null,
                "is_image": true,
                "filename": "air-jordan-11-cool-grey-ct8012-005-release-date (1).jpg",
                "file_size": 24857,
                "file_extension": "jpg",
                "image_dimensions": {
                    "width": 960,
                    "height": 1080
                },
                "meta": [],
                "created_at": 1639554944,
                "updated_at": 1639554948
            },
            {
                "id": "ast_bO6J5aBxDElEjp",
                "url": "https://cdn.chec.io/merchants/37076/assets/xRQc9seG948wu332|download (1).jfif",
                "description": null,
                "is_image": true,
                "filename": "download (1).jfif",
                "file_size": 7152,
                "file_extension": "jpg",
                "image_dimensions": {
                    "width": 294,
                    "height": 171
                },
                "meta": [],
                "created_at": 1639554948,
                "updated_at": 1639554949
            },
            {
                "id": "ast_A12JwrMQExlPjn",
                "url": "https://cdn.chec.io/merchants/37076/assets/5RmVeAD6AX6l1O7D|download.jfif",
                "description": null,
                "is_image": true,
                "filename": "download.jfif",
                "file_size": 5551,
                "file_extension": "jpg",
                "image_dimensions": {
                    "width": 266,
                    "height": 190
                },
                "meta": [],
                "created_at": 1639554959,
                "updated_at": 1639554961
            }
        ],
        "image": {
            "id": "ast_8XO3wpM74OoYAz",
            "url": "https://cdn.chec.io/merchants/37076/assets/1WUVJv226CmE5Xp2|air-jordan-11-cool-grey-ct8012-005-release-date (1).jpg",
            "description": null,
            "is_image": true,
            "filename": "air-jordan-11-cool-grey-ct8012-005-release-date (1).jpg",
            "file_size": 24857,
            "file_extension": "jpg",
            "image_dimensions": {
                "width": 960,
                "height": 1080
            },
            "meta": [],
            "created_at": 1639554944,
            "updated_at": 1639554948
        },
        "related_products": [],
        "attributes": []
    },
    {
        "id": "prod_BkyN5YVzyxl0b6",
        "created": 1639564691,
        "updated": 1639564756,
        "active": true,
        "permalink": "BPMQ0E",
        "name": "Air Jordan 5 Green Bean",
        "description": "",
        "price": {
            "raw": 400000,
            "formatted": "400,000.00",
            "formatted_with_symbol": "Rp400,000.00",
            "formatted_with_code": "400,000.00 IDR"
        },
        "inventory": {
            "managed": false,
            "available": 0
        },
        "sku": null,
        "sort_order": 0,
        "seo": {
            "title": null,
            "description": null
        },
        "thank_you_url": null,
        "meta": null,
        "conditionals": {
            "is_active": true,
            "is_tax_exempt": false,
            "is_pay_what_you_want": false,
            "is_inventory_managed": false,
            "is_sold_out": false,
            "has_digital_delivery": false,
            "has_physical_delivery": false,
            "has_images": true,
            "collects_fullname": false,
            "collects_shipping_address": false,
            "collects_billing_address": false,
            "collects_extra_fields": false
        },
        "is": {
            "active": true,
            "tax_exempt": false,
            "pay_what_you_want": false,
            "inventory_managed": false,
            "sold_out": false
        },
        "has": {
            "digital_delivery": false,
            "physical_delivery": false,
            "images": true
        },
        "collects": {
            "fullname": false,
            "shipping_address": false,
            "billing_address": false,
            "extra_fields": false
        },
        "checkout_url": {
            "checkout": "https://checkout.chec.io/BPMQ0E?checkout=true",
            "display": "https://checkout.chec.io/BPMQ0E"
        },
        "extra_fields": [],
        "variant_groups": [],
        "categories": [
            {
                "id": "cat_O3bR5XyEklnzdj",
                "slug": "new-releases",
                "name": "New Releases"
            }
        ],
        "assets": [
            {
                "id": "ast_8XO3wpM7yOoYAz",
                "url": "https://cdn.chec.io/merchants/37076/assets/L4NaqCsUMMxS6Ie8|2022-Air-Jordan-5-Green-Bean-1068x707.jpg",
                "description": null,
                "is_image": true,
                "filename": "2022-Air-Jordan-5-Green-Bean-1068x707.jpg",
                "file_size": 60899,
                "file_extension": "jpg",
                "image_dimensions": {
                    "width": 1068,
                    "height": 707
                },
                "meta": [],
                "created_at": 1639564675,
                "updated_at": 1639564678
            }
        ],
        "image": {
            "id": "ast_8XO3wpM7yOoYAz",
            "url": "https://cdn.chec.io/merchants/37076/assets/L4NaqCsUMMxS6Ie8|2022-Air-Jordan-5-Green-Bean-1068x707.jpg",
            "description": null,
            "is_image": true,
            "filename": "2022-Air-Jordan-5-Green-Bean-1068x707.jpg",
            "file_size": 60899,
            "file_extension": "jpg",
            "image_dimensions": {
                "width": 1068,
                "height": 707
            },
            "meta": [],
            "created_at": 1639564675,
            "updated_at": 1639564678
        },
        "related_products": [],
        "attributes": []
    }
]

有没有一种方法可以根据类别高效、清晰地查找产品？ 先感谢您。

Answer 1

是的。 有一种方法可以使用类别“slug”。

import Commerce from '@chec/commerce.js';
const commerce = new Commerce('{your_public_key}');

// Fetch products specifying a category slug
commerce.products.list({
  category_slug: ['shoes'],
}).then(response => response.data);

// Fetch products specifying multiple category slugs
commerce.products.list({
  category_slug: ['shoes', 'black'],
}).then(response => response.data);

更多详情： https://commercejs.com/docs/sdk/products#retrieve-product