Bulk editing product variants

3 minutes to read

You can configure products in Customer's Canvas through the admin panel of your tenant as described in the PIM Module section. However, this can be quite time-consuming. Setting up product variants — specifying SKUs, basic prices, availability — can take an especially long time.

If the source of truth for this is the catalog of your e-commerce system, automation of filling the SKU and other information into product variants can 1) reduce the amount of manual work and 2) reduce the possibility of making mistakes and getting mismatched data in two systems.

The general scheme for the automation of filling the product variants is as follows:

Create products in Customer's Canvas, for example, manually, and set their options and option values. This way, you will form empty options.
Connect these products to your e-commerce products as described in the topic Publishing Customer's Canvas products on your online store.
Request all the product variants and determine which ones correspond to the variants of your product.
Modify those product variants.

Requesting a list of product variants

You can get the list of product variants by using the endpoint GET /api/storefront/v1/products/{id}/variants.

curl -X \
  GET "https://api.customerscanvashub.com/api/storefront/v1/products/42/variants" \
  -H  "accept: text/plain" \
  -H  "Authorization: Bearer <TOKEN>"

GET https://api.customerscanvashub.com/api/storefront/v1/products/42/variants

var productId = 42; // Set your product ID here
var variants = await productsApiClient.GetProductVariantsAsync(id: productId);

var productId = 42; // Set your product ID here
var variants = _productsApiClient.getProductVariants(productId);

It will return a model like this:

{
  "total": 8,
  "items": [
    {
      "id": 350079,
      "productVersionId": 3539,
      "productId": 158,
      "tenantId": 20052,
      "isAvailable": true,
      "price": null,
      "sortIndex": 16,
      "storefrontProductVariantId": null,
      "productVariantOptions": [
        {
          "productOptionId": 13850,
          "productOptionValueId": 27259,
          "productOptionType": "Simple",
          "productOptionTraits": [
            "AllowsMultiselect"
          ],
          "productOptionTitle": "Size",
          "productOptionValueTitle": "3 x 5",
          "simpleOptionValue": {
            "value": "3 x 5"
          }
        },
        {
          "productOptionId": 13852,
          "productOptionValueId": 27262,
          "productOptionType": "Simple",
          "productOptionTraits": [
            "AllowsMultiselect"
          ],
          "productOptionTitle": "Orientation",
          "productOptionValueTitle": "Portrait",
          "simpleOptionValue": {
            "value": "Portrait"
          }
        },
        {
          "productOptionId": 13853,
          "productOptionValueId": 27264,
          "productOptionType": "Simple",
          "productOptionTraits": [
            "AllowsMultiselect"
          ],
          "productOptionTitle": "Style",
          "productOptionValueTitle": "White",
          "simpleOptionValue": {
            "value": "White"
          }
        }
      ]
    },
    ...
  ]
}

You can analyze this response. Find a product variant in your system, for example, by going through the productVariantOptions, and choosing those options that have a productOptionTitle / productOptionValueTitle pair equal to the corresponding option values in your system. This way, you can determine which data is intended for a product variant ID in Customer's Canvas.

Warning

When editing a product in Customer's Canvas, the product variant IDs may change. Therefore, do not store these IDs on your side, but request them before each operation of synchronizing the changes.

Filling in the price

You can set a price for a product variant by using the endpoint POST /api/storefront/v1/products/{id}/set-variant-price.

To define prices for product variants, pass them in an array of JSON objects. For example, to set the price $0.5 to variants with ID 350079 and 350080, use the following object:

[
  {
    "price": 0.5,
    "variantIds": [
      350079, 350080
    ]
  }
]

In the variantIds array, specify identifiers obtained in the list of product variants.

Next, pass this array as a query parameter in the request body or as a parameter of the corresponding client method.

curl -X \
  POST "https://api.customerscanvashub.com/api/storefront/v1/products/158/set-variant-price \
  -H  "accept: */*" \
  -H  "Content-Type: application/json-patch+json" \
  -H  "Authorization: Bearer <TOKEN>" \
  -d "[{\"price\":0.5,\"variantIds\":[350079,350080]}]"

POST https://api.customerscanvashub.com/api/storefront/v1/products/158/set-variant-price
[
  {
    "price": 0.5,
    "variantIds": [
      350079, 350080
    ]
  }
]

var productId = 158; // Set your product ID here
var body = "[{\"price\":0.5,\"variantIds\":[350079,350080]}]"; // Set product variant prices here
var variants = await productsApiClient.SetProductVariantPriceAsync(id: productId, body: body);

var productId = 158; // Set your product ID here
var body = "[{\"price\":0.5,\"variantIds\":[350079,350080]}]"; // Set product variant prices here
var variants = _productsApiClient.setProductVariants(productId, null, null, body);

Further Reading

Discover how to use this API to register customers for your storefront.
Explore how to use projects to render designs.
Dive into Storefront API reference.

Bulk editing product variants

Requesting a list of product variants

Warning

Filling in the price

Was this page helpful?