@builder.io/plugin-commercelayer

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.

Testing the Plugin

1. Create a custom model
2. Add a Commerce Layer Product field
3. Search and select products from your catalog
4. Preview the content with live product data

Authentication

The plugin uses Commerce Layer's Sales Channel authentication. You'll need:

• A Commerce Layer account
• Sales Channel API credentials
• A valid market scope

Contributing

Contributions are welcome! Please read Builder.io's contributing guidelines before submitting PRs.

Frameworks

Builder.io uses React and Material UI for the UI, and Emotion for styling.