Variants not rendering when defined in the product.json seed file

[ltfschoen]

If I add a variant to a product in product.json, it does not render the product in the UI anymore on the product list page http://localhost:3000/collection.

[
  {
    "product": {
      "name": "Arms Wax",
      "description": "Waxing treatment of an arm region include after wax treatment and hot towelling"
    },
    "categories": [
      {
        "id": "cat_31q0o3LD15DdjR",
        "slug": "treatments-body-waxing",
        "name": "Body Treatment (Waxing)"
      }
    ],
    "variant": [
      {
        "name": "Service",
        "options": [
          {
            "description": "Half Arm",
            "price": "30.00"
          },
          {
            "description": "Full Arm",
            "price": "40.00"
          },
          {
            "description": "Underarms",
            "price": "15.00"
          }
        ]
      }
    ]
  },
...
]

But if I remove the "variant" field again so it is as shown below instead, and run yarn seed again, then the UI successfully loads that product in the UI again.

[
  {
    "product": {
      "name": "Arms Wax",
      "description": "Waxing treatment of an arm region include after wax treatment and hot towelling",
      "price": "30.00"
    },
    "categories": [
      {
        "id": "cat_31q0o3LD15DdjR",
        "slug": "treatments-body-waxing",
        "name": "Body Treatment (Waxing)"
      }
    ]
  },
...
]

[robbieaverill]

Did your initial seeding request fail?

[ltfschoen]

Yes, I can confirm that it fails.

So say I have already seeded two categories "cat_G6kVw73gdw2eDx" and "cat_G6kVw73gdw2eDx" that are in categories.json by running yarn seed to upload them to chec.io.

I then ensure that there are no products or assets on chec.io by running my scripts to delete them all:

• https://github.com/ltfschoen/commercejs-nextjs-demo-store/blob/d18dabb437b5d0badbabccdc21abb67b4110d26d/scripts/deleteAllProductsCommerceJsApi.js
• https://github.com/ltfschoen/commercejs-nextjs-demo-store/blob/d18dabb437b5d0badbabccdc21abb67b4110d26d/scripts/deleteAllAssetsCommerceJsApi.js

And then I create two products in products.json, and associate them with the two categories IDs as shown below, but where only one of them uses the "variant" property:

[
  {
    "product": {
      "name": "Eyebrow Wax",
      "description": "",
      "price": "15.00"
    },
    "categories": [
      {
        "id": "cat_G6kVw73gdw2eDx",
        "slug": "treatments-facial-wax-tint",
        "name": "Facial Treatments (Wax & Tint)"
      }
    ]
  },
  {
    "product": {
      "name": "Arms Wax",
      "description": "Waxing treatment of an arm region include after wax treatment and hot towelling"
    },
    "categories": [
      {
        "id": "cat_G6kVw73gdw2eDx",
        "slug": "treatments-facial-wax-tint",
        "name": "Facial Treatments (Wax & Tint)"
      }
    ],
    "variant": [
      {
        "name": "Service",
        "options": [
          {
            "description": "Half Arm",
            "price": "30.00"
          },
          {
            "description": "Full Arm",
            "price": "40.00"
          },
          {
            "description": "Underarms",
            "price": "15.00"
          }
        ]
      }
    ]
  }
]

If I then try to seed them, by running yarn seed again, then it doesn't overwrite the existing categories that have already been uploaded (as desired, because I don't want to change the category IDs since I want to use them so I can associate products with those category IDs in subsequent seed requests), and it successfully seeds/uploads the "Eyebrow Wax" product (shown above) and correctly associates it with the "treatments-facial-wax-tint" category when I later check what was uploaded to chec.io, as shown in the following screenshot:

However, it doesn't upload the 2nd product "Arms Wax" at all (because it uses the "variant" property), and in the output it displays Could not push an object to the products endpoint (Response code 422 (Unprocessable Entity)): to indicate that it failed to seed/upload that 2nd product

[robbieaverill]

Hi @ltfschoen, please examine the response you reference in that last sentence. It will tell you what your API call is doing wrong, and what you need to do to fix it.

The API docs for that endpoint are here, if that helps: https://commercejs.com/docs/api/#create-product

[ltfschoen]

Those API docs say to format the request as follows to associate a variant with a product that's being created:

variant.*.name | string | optional | Name for a product variant, if configuring one
variant.*.options.*.description | string | optional | Description of a variant's option
variant.*.options.*.price | number | optional | Price adjustment to apply when this option is selected
variant.*.options.*.quantity

And that's the format I used for the "varient" property used earlier here https://github.com/chec/commercejs-nextjs-demo-store/issues/169#issuecomment-744755686, so I don't understand why it'd return Response code 422 (Unprocessable Entity)

[robbieaverill]

@ltfschoen please explore the 422 error for further information on why your API call is being rejected. If you have any more questions feel free to raise them on Slack or on our seeder repository. As far as I can see this issue is not a bug in this repository, so I'm going to close it 🙂 thanks for raising it though!