builder.io

Using Builder’s commercetools e-commerce plugin, merchants can bring their commercetools product catalogs and categories into Builder and make all their digital experiences shoppable.
builder.io Logo

About

Builder is a visual cms -- a headless CMS with a drag and drop visual editor -- that allows you to empower your entire team to visually create and optimize high-speed experiences on your sites and apps.
Builder integrates with your existing sites/apps and allows you to visually build using your existing design system and code components. But you won’t be limited by your component library - Builder allows you to build bespoke experiences completely from scratch. Plus, everything is responsive and performant by default, so teams are no longer required to create device-specific experiences (unless they want to). Find your perfect balance of developer control and business team autonomy.


Main Features

  • Drag & Drop visual editor

  • API-first content management and delivery

  • Optimization suite - A/B testing, targeting & segmentation, heatmaps, analytics

  • No negative performance impact (Fast Fast Fast)

  • Completely tech agnostic - integrates with anything! (large list of integrations)

  • Extremely extensible

  • Future proof - content can be copy & pasted from one space to another (hosted to headless, change ecom technology, etc.)

Description of the Integration

Once the connector is installed and your storefront is verified, you will see six new field types (for model fields, symbol inputs, custom components fields), and custom targeting attributes that can be used in three different contexts:

Custom targeting

Custom targeting in Builder.io allow users to target content by a multitude of attributes, and in this plugin, you'll be able to add specific content to commercetools categories or products, for this you'll need first to set the target attributes on the host site, either by setting the userAttributes if you're rendering client-side:

builder.setUserAttributes({  product: currentProduct.id,});

Or by passing it as a query param to the content API call, or in graqhql query for e.g in Gatsby or nextjs.

  • Commercetools Productwhen used as a custom targeting type, it'll target contexts where the field is set to the product ID, you'll need to set the product ID on the host environment, using one of the methods above. Alternatively, if you want to target by product handle use the Commercetools Product Handle type in your custom targeting attributes.

  • Commercetools Category can be used as a custom targeting attribute to target specific category by ID, you'll need to set the category ID on the host environment, using one of the methods above. Alternatively, if you want to target by product handle use the Commercetools Category Handle type in your custom targeting attributes.

Component model fields

Component models can be used to represent product or category page templates for all or a specific set of products/categorys, using one of the following fields, you'll make previewing the templates for any product or category straight-forward:

  • Commercetools Product Previewis to be used as a custom field on component models, this will allow you to have templated editing URL on your component model relevant to the commercetools product being previewed, for example you can set the URL in your model to: https://www.mystore.com/product/${previewProduct.handle}, add a custom field of type Commercetools Product Preview to the model, now when you create a new entry, the handle will be added dynamically to the preview URL based on the preview product, it is recommended to add a default value to the Commercetools Product Preview custom field, so users will land at a specific product page when developing a template component.

  • Commercetools Category Previewis to be used as a custom field on component models, this will allow you to have templated editing URL on your component model relevant to the commercetools category being previewed, for example you can set the URL in your model to: https://www.mystore.com/category/${previewCategory.handle}, add a custom field of type Commercetools Category Preview, now when you create a new entry, the handle will be added dynamically to the preview URL based on the preview product, it is recommended to add a default value to the Commercetools Category Preview custom field, so users will land at a specific category page when developing a template component.

Symbol Inputs

Using the field types Commercetools Product and Commercetools Category as inputs, the UIs will prompt to search for products and categorys. When consumed by APIs, SDKs, or in the Builder.io UIs, the value will be resolved automatically the in the form of a Builder.io Request object

{  "yourFieldName": {    "@type": "@builder.io/core:Request",    "request": {      "url": "..."    },    "data": {      // Response data from the API request, e.g.:      "product": {        / ... /      }    }  }}

Screenshots

builderio-cfwmskc8.png