@builder.io/plugin-commercelayer 0.0.3-0 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -45
- package/dist/plugin.system.js +123082 -9377
- package/dist/plugin.system.js.map +1 -1
- package/package.json +21 -95
- package/LICENSE +0 -7
package/README.md
CHANGED
|
@@ -1,18 +1,35 @@
|
|
|
1
|
-
# Builder.io
|
|
1
|
+
# Builder.io Commerce Layer Plugin
|
|
2
2
|
|
|
3
|
-
Easily connect your
|
|
3
|
+
Easily connect your Commerce Layer products to your Builder.io content!
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
|
-
Go to [builder.io/account/organization](https://builder.io/account/organization) and
|
|
7
|
+
Go to [builder.io/account/organization](https://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:
|
|
8
|
+
- Client ID
|
|
9
|
+
- Market Scope (e.g., 'market:id:YOUR_MARKET_ID')
|
|
8
10
|
|
|
9
|
-
|
|
11
|
+
## Features
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
The plugin provides new field types for your Builder.io models:
|
|
12
14
|
|
|
13
|
-
###
|
|
15
|
+
### Product Fields
|
|
14
16
|
|
|
15
|
-
|
|
17
|
+
- `Commerce Layer Product` - Search and select products from your Commerce Layer catalog
|
|
18
|
+
- `Commerce Layer Product Preview` - Preview product templates with live data
|
|
19
|
+
|
|
20
|
+
### Component Model Fields
|
|
21
|
+
|
|
22
|
+
Component models can be used to create product page templates. Using the following fields makes previewing the templates straightforward:
|
|
23
|
+
|
|
24
|
+
- `Commerce Layer Product Preview` can be used as a custom field on component models to create templated editing URLs. For example:
|
|
25
|
+
```
|
|
26
|
+
https://www.mystore.com/product/${previewProduct.handle}
|
|
27
|
+
```
|
|
28
|
+
Add a custom field of type `Commerce Layer Product Preview` to dynamically update the preview URL based on the selected product.
|
|
29
|
+
|
|
30
|
+
### Custom Targeting
|
|
31
|
+
|
|
32
|
+
You can target content to specific products by setting the target attributes on your site:
|
|
16
33
|
|
|
17
34
|
```ts
|
|
18
35
|
builder.setUserAttributes({
|
|
@@ -20,32 +37,7 @@ builder.setUserAttributes({
|
|
|
20
37
|
});
|
|
21
38
|
```
|
|
22
39
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
- `CommerceLayer Product` when 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 (slug) use the `CommerceLayer Product Handle` type in your custom targeting attributes.
|
|
26
|
-
|
|
27
|
-
### Symbol Inputs
|
|
28
|
-
|
|
29
|
-
Using the field types `CommerceLayer Product` as inputs, the UIs will prompt to search for products. 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
|
|
30
|
-
|
|
31
|
-
```js
|
|
32
|
-
{
|
|
33
|
-
"yourFieldName": {
|
|
34
|
-
"@type": "@builder.io/core:Request",
|
|
35
|
-
"request": {
|
|
36
|
-
"url": "..."
|
|
37
|
-
},
|
|
38
|
-
"data": {
|
|
39
|
-
// Response data from the API request, e.g.:
|
|
40
|
-
"product": {
|
|
41
|
-
/* ... */
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
## How to develop?
|
|
40
|
+
## Development
|
|
49
41
|
|
|
50
42
|
### Install
|
|
51
43
|
|
|
@@ -61,26 +53,30 @@ npm install
|
|
|
61
53
|
npm start
|
|
62
54
|
```
|
|
63
55
|
|
|
64
|
-
### Add the
|
|
56
|
+
### Add the Plugin Locally
|
|
65
57
|
|
|
66
58
|
Go to [builder.io/account/organization](https://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`)
|
|
67
59
|
|
|
68
|
-
**NOTE:** Loading
|
|
69
|
-
|
|
70
|
-
<img alt="Load unsafe script example" src="https://i.stack.imgur.com/uSaLL.png">
|
|
60
|
+
**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.
|
|
71
61
|
|
|
72
|
-
|
|
62
|
+
### Testing the Plugin
|
|
73
63
|
|
|
74
|
-
|
|
64
|
+
1. Create a custom [model](https://builder.io/c/docs/guides/getting-started-with-models)
|
|
65
|
+
2. Add a Commerce Layer Product field
|
|
66
|
+
3. Search and select products from your catalog
|
|
67
|
+
4. Preview the content with live product data
|
|
75
68
|
|
|
76
|
-
|
|
69
|
+
## Authentication
|
|
77
70
|
|
|
78
|
-
|
|
71
|
+
The plugin uses Commerce Layer's Sales Channel authentication. You'll need:
|
|
72
|
+
- A Commerce Layer account
|
|
73
|
+
- Sales Channel API credentials
|
|
74
|
+
- A valid market scope
|
|
79
75
|
|
|
80
|
-
|
|
76
|
+
## Contributing
|
|
81
77
|
|
|
82
|
-
|
|
78
|
+
Contributions are welcome! Please read Builder.io's [contributing guidelines](https://github.com/BuilderIO/builder/blob/main/CONTRIBUTING.md) before submitting PRs.
|
|
83
79
|
|
|
84
|
-
|
|
80
|
+
## Frameworks
|
|
85
81
|
|
|
86
|
-
|
|
82
|
+
Builder.io uses [React](https://github.com/facebook/react) and [Material UI](https://github.com/mui-org/material-ui) for the UI, and [Emotion](https://github.com/emotion-js/emotion) for styling.
|