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

[ltfschoen]

This issue is a continuation of https://github.com/chec/commercejs-nextjs-demo-store/issues/169.

When I try to seed two products that are associated with an existing category id as follows:

[
  {
    "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": "Size",
        "options": [
          {
            "description": "200ml",
            "price": "0.00"
          },
          {
            "description": "500ml",
            "price": "34.00"
          }
        ]
      }
  }
]

When I run yarn seed it successfully seeds the 1st product named "Eyebrow Wax" (because it doesn't use the "variant" property), but it fails to seed the 2nd product named "Arms Wax" and generates error Could not push an object to the products endpoint (Response code 422 (Unprocessable Entity)):

If the "variant" property is removed, then it gets seeded correctly and associated with correctly with the category id, so the error is due to that "varant" property.

And that error code is mentioned here https://commercejs.com/docs/api/#responses-amp-errors as being 422 - Validation | Validation error. Data submitted was missing something, or in the wrong format.

However, the format I've used for the "variant" property is exactly the same as is used in the template code here: https://github.com/chec/commercejs-nextjs-demo-store/blob/master/seeds/products.json#L9

[robbieaverill]

Hi @ltfschoen, what is your full response body when you encounter the 422 error?

Edit: you can investigate the error easily here: https://github.com/chec/seeder/blob/master/index.js#L110

[ltfschoen]

@robbieaverill Oh I just realised that https://github.com/chec/seeder/blob/master/index.js#L110 is only in the "master" branch, not "@chec/seeder": "^1.1.0", that I'm using as a dependency in package.json to run yarn seed or node ./node_modules/@chec/seeder/bin.js "seeds", so I added the dependency as "@chec/seeder": "chec/seeder#master", and ran yarn seed again, but it just outputs the same thing:

 Failed seeding - Response code 422 (Unprocessable Entity)

[robbieaverill]

You need to do some debugging. The error object contains more than just the message that you're posting - it also includes the actual HTTP response body, which will tell you what you are doing wrong in your API call.

[ltfschoen]

Oh I see, I just changed https://github.com/chec/seeder/blob/master/index.js#L72 from .catch(this.apiError); to instead be the following for debugging:

            return this.post(`/v1/${endpoint}`, rest)
              .then(response => {
                console.log('HTTP response object: ', response);
                if (Object.hasOwnProperty.call(typeCounts, endpoint)) {
                  typeCounts[endpoint]++;
                } else {
                  responses[endpoint] = [];
                  typeCounts[endpoint] = 1;
                }
                responses[endpoint].push(JSON.parse(response.body))
              })
              .catch(error => {
                console.log('HTTP response error object: ', error);
                this.apiError;
              });

So the error is:

...

    method: 'POST',
    body: '{"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":"Size","options":[{"description":"200ml","price":"0.00"},{"description":"500ml","price":"34.00"}]}]}'
  },
  statusCode: 422,
  statusMessage: 'Unprocessable Entity',
  headers: {
    date: 'Tue, 15 Dec 2020 00:44:38 GMT',
    'content-type': 'application/json',
    'transfer-encoding': 'chunked',
    connection: 'close',
    'x-powered-by': 'PHP/7.4.13',
    'cache-control': 'no-store, private',
    'chec-version': '2020-08-12',
    'x-support': 'support@commercejs.com',
    'access-control-allow-origin': '*',
    'access-control-allow-methods': 'GET, POST, OPTIONS, DELETE, PUT',
    'strict-transport-security': 'max-age=15724800; includeSubDomains'
  },
  body: '{"status_code":422,"error":{"message":"The given data was invalid.","type":"unprocessable_entity","errors":{"product.price":["The product.price field is required."]}},"help":{"email":"support@commercejs.com","slack":"http:\\/\\/slack.commercejs.com","_comment":"*help* & *console* error responses will not be returned when using production\\/live API keys."}}'
}

Maybe it should also output this detailed error body in the "development" environment instead of just Failed seeding - Response code 422 (Unprocessable Entity), and perhaps in the "production" environment it could just output something simple like Failed seeding - Response code 422 (Unprocessable Entity), what do you think?

[ltfschoen]

The error.body is clearly telling me what I've done wrong. I've omitted the product.price field, because I thought that if you had variants, then the price would only need to be associated with them. So the "variant" part of my code was correct, but the "product" part wasn't. So the template code is correct, I just failed to continue using that required field https://github.com/chec/commercejs-nextjs-demo-store/blob/master/seeds/products.json#L6.

Thanks for your help with debugging! Hopefully I can figure out the other issues I encountered the same way!

[robbieaverill]

@ltfschoen good point. In my experience variant prices are either absolute or relative. Chec treats them as relative prices, so the variant prices modify the base product price.

Glad you got this working! Feel free to fork and adjust this repository if you run into limitations with it. It is a very simple script and we really only use it for seeding our demo store products. Have a nice day!

[ltfschoen]

Yes, the base price is shown on the product list page, but the variant prices are shown on the product detail page.

[robbieaverill]

The main product price is at the top of the detail page also