@builder.io/plugin-commercelayer NPM

Builder.io Commerce Layer Plugin

Easily connect your Commerce Layer products to your Builder.io content!

Installation

Go to builder.io/account/organization and press on @builder.io/plugin-commercelayer in the list of plugins, then hit save. You'll be prompted for your Commerce Layer credentials:

Client ID
Market Scope (e.g., 'market:id:YOUR_MARKET_ID')

Features

The plugin provides new field types for your Builder.io models:

Product Fields

Commerce Layer Product - Search and select products from your Commerce Layer catalog
Commerce Layer Product Preview - Preview product templates with live data

Component Model Fields

Component models can be used to create product page templates. Using the following fields makes previewing the templates straightforward:

Commerce Layer Product Preview can be used as a custom field on component models to create templated editing URLs. For example:
```
https://www.mystore.com/product/${previewProduct.handle}
```
Add a custom field of type Commerce Layer Product Preview to dynamically update the preview URL based on the selected product.

Custom Targeting

You can target content to specific products by setting the target attributes on your site:

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

Development

Install

git clone https://github.com/BuilderIO/builder.git
cd plugins/commercelayer
npm install

Run

npm start

Add the Plugin Locally

Go to builder.io/account/organization and add the localhost URL to the plugin from the plugin settings (http://localhost:1268/plugin.system.js?pluginId=@builder.io/plugin-commercelayer)

NOTE: Loading http:// content on an https:// website will give you a warning. Click the shield in the top right of your browser and choose "load unsafe scripts" to allow http content on Builder's https site when developing locally.