Associating products with designs
- 3 minutes to read
So, you have registered an online store in your Customer's Canvas account, and a design team has created (or uploaded) several product designs in this online store. You can learn about the creation/upload process in the user guide.
To associate a product with a specific design, you must use the dedicated integration entities of Customer's Canvas: product specification and product reference.
Product specification
When we talk about the association of products with design, we actually omit a lot of details. To correctly call the personalization tool for a specific product from an online store, you often need to define many more parameters than just the design ID. For example, you can specify the editor where personalization will be performed, the options available to the user, or define a background image that helps to visualize the final result, and more.
To associate a product from an online store with a design, we set the binding of this product to a certain specification. A product specification defines a set of parameters that configure the personalization procedure:
- an editor to open and UI Framework configuration
- a design to load as a product template
- product options available for the user
- and so on.
The specification is created in Customer's Canvas BackOffice for each product from the online store that will be personalized.
To create a new specification, on the main menu, click Templates and click Create new. Then, fill in the available fields according to the selected editor configuration.
At the moment, the product specification can only be created manually in Customer's Canvas BackOffice.
When binding the product to the specification, you can get a list of all the product specifications stored in the Customer's Canvas account by using the endpoint ProductSpecifications_GetAll.
Product reference
Customer's Canvas provides a separate entity called Product Reference to ensure that the product in your online store is as independent as possible from the details of the binding to the specification. Actually, it provides a link between three elements - the store (storefrontId), the product specification (productSpecificationId), and the product identifier in your online store (reference), which is external to Customer's Canvas.
As a result, you can access the Storefront API endpoints by specifying only the product ID in the online store as the value of the reference field, and Customer's Canvas services will find the specification using the binding entity.
We recommend creating product bindings programmatically using Storefront API endpoints. The scheme of creating a binding can be described as follows: in the admin panel of your online store, in the section related to managing the list of products, you need to implement the integration code for the selected product, which provides:
- Select a product specification from the list of available ones in your Customer's Canvas account.
- Create a binding of the selected product to the selected specification.
Endpoints ProductReferences_Create, ProductReferences_Get, and ProductReferences_Delete provide a basic set of operations for managing product bindings.
Endpoint ProductReferences_GetAll allows you to get information about all currently available bindings in the specified online store. You can also filter the list by product specification ID and organize the paginated output.
Tip
Using an additional reference filter in ProductReferences_GetAll, you can organize one of the options for verifying the existence of a binding for the product. The result of performing such a search will always be successful, returning the number of elements found. If the number is 0, there are no bindings.
When the product binding is created, endpoints ProductReferences_GetProductSpecification and ProductReferences_GetProductConfig allow you to get the necessary data by product ID in the online store to start the personalization process.
Next, let's learn about launching the personalization process.