@builder.io/plugin-sfcc-commerce-api 0.0.8 → 0.0.10

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 CHANGED
@@ -3,24 +3,25 @@
3
3
  Easily connect your SalesForce B2C Commerce API to your Builder.io content!
4
4
 
5
5
  ## Setup Salesforce Commerce API Access
6
- Read through this [get started guide](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/setting-up-api-access.html) to make sure you have your *Shopper Login and API Access Service (SLAS)* client setup ready.
7
6
 
7
+ Read through this [get started guide](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/setting-up-api-access.html) to make sure you have your _Shopper Login and API Access Service (SLAS)_ client setup ready.
8
8
 
9
9
  ## Installation
10
10
 
11
11
  On any builder space, go to the [integrations tab](https://builder.io/app/integrations) and find the Salesforce B2C Commerce API integration
12
12
  ![screenshot](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F395a09d16129469d862851d23a56522c) and click `enable`,
13
13
  Following, you'll be prompted to enter the following data:
14
- * Client ID
15
- * Organization ID
16
- * Proxy Address
17
- * Short Code
18
- * Site ID
14
+
15
+ - Client ID
16
+ - Organization ID
17
+ - Proxy Address
18
+ - Short Code
19
+ - Site ID
19
20
 
20
21
  And optionally:
21
- * Einstein API Client ID.
22
- * Einstein Site ID.
23
22
 
23
+ - Einstein API Client ID.
24
+ - Einstein Site ID.
24
25
 
25
26
  **If you're using Salesforce's Composable Storefront kit it should be the same configuration you find at your config/default.js file**
26
27
  ![Config screenshot](https://cdn.builder.io/api/v1/image/assets%2F1fa6810c36c54e87bfe1a6cc0f0be906%2Fa1e74597f82e46d390fd0b328c19bf78)
@@ -28,11 +29,8 @@ And optionally:
28
29
  Then enter it in your Builder's space integration configuration options:
29
30
  ![Credentials screenshot](https://cdn.builder.io/api/v1/image/assets%2Fd1ed12c3338144da8dd6b63b35d14c30%2F92cfc4b9885d41eaa4d5c23b00ebeace)
30
31
 
31
-
32
32
  After putting the required info, hit the connect button. You will now see a few new field types (for [model](https://builder.io/c/docs/guides/getting-started-with-models) fields, [symbol](https://builder.io/c/docs/guides/symbols) inputs, [custom components](https://builder.io/c/docs/custom-react-components) fields), and [custom targeting attributes](https://www.builder.io/c/docs/guides/targeting-and-scheduling#custom-targeting) that can be used in three different contexts:
33
33
 
34
-
35
-
36
34
  ![Custom targeting attributes](https://cdn.builder.io/api/v1/image/assets%2Fd1ed12c3338144da8dd6b63b35d14c30%2F761dc7267e3b45198c460dfe6b0cec8e)
37
35
 
38
36
  ### Custom targeting
@@ -44,14 +42,14 @@ Custom targeting in Builder.io allow users to target content by a multitude of a
44
42
  const productFooterContent = await builder.get('product-footer', {
45
43
  userAttributes: {
46
44
  product: product.productId,
47
- }
48
- })
45
+ },
46
+ });
49
47
  ```
50
48
 
51
49
  Or by passing it as a query param to the [content API](https://www.builder.io/c/docs/query-api#:~:text=userAttributes) call, or in [graqhql query](https://www.builder.io/c/docs/graphql-api#:~:text=with%20targeting) for e.g in Gatsby or nextjs.
52
50
 
53
-
54
51
  ### Custom Components and input types
52
+
55
53
  Once you install the plugin, you will also be able to use the SFCC types as inputs for your components, such as:
56
54
 
57
55
  - `SFCommerceProduct` when used as an input type, you will be able to search and select a specific Product to provide to your component and consume the product data however you want from inside the component.
@@ -84,17 +82,19 @@ Builder.registerComponent(ProductBox, {
84
82
  ]
85
83
  })
86
84
  ```
85
+
87
86
  To see more details about the usage of this component see [here](https://github.com/BuilderIO/sfcc-composable-storefront-starter/tree/main/app/components/blocks/product-box).
88
87
 
89
88
  To understanding more about custom components also see [this article](https://www.builder.io/c/docs/custom-components-setup).
90
89
 
91
90
  ### Fetch Content and References
92
91
 
93
- On our [docs](https://www.builder.io/c/docs/query-api), you can check more about how to fetch content from [builder.io](https://builder.io) and also see how the option ```includeRefs=true``` works, fecthing any specific content from a given reference, such as a chosen SFCommerceProduct in the example above to support server side rendering.
94
-
92
+ On our [docs](https://www.builder.io/c/docs/query-api), you can check more about how to fetch content from [builder.io](https://builder.io) and also see how the option `includeRefs=true` works, fecthing any specific content from a given reference, such as a chosen SFCommerceProduct in the example above to support server side rendering.
95
93
 
96
94
  ### Auto-resolving the Product/Categories data
97
- In an effort to support SSR and making sure all the input data are available at the time of render, Builder’s support the resolving of the inputs for your custom components, for example if you have a product box with input of ```SFCommerceProduct``` you can get the json value of that product by passsing includeRefs: true when you fetch the content json:
95
+
96
+ In an effort to support SSR and making sure all the input data are available at the time of render, Builder’s support the resolving of the inputs for your custom components, for example if you have a product box with input of `SFCommerceProduct` you can get the json value of that product by passsing includeRefs: true when you fetch the content json:
97
+
98
98
  ```JSX
99
99
  const page = await builder.get('page', {
100
100
  url: '...',
@@ -103,6 +103,7 @@ const page = await builder.get('page', {
103
103
  }
104
104
  })
105
105
  ```
106
+
106
107
  Also passing the same option to the rendering component to auto-resolve while editing:
107
108
 
108
109
  ```JSX
@@ -111,9 +112,6 @@ Also passing the same option to the rendering component to auto-resolve while ed
111
112
 
112
113
  For more information on the available options check our [Content API documentation](https://www.builder.io/c/docs/query-api).
113
114
 
114
-
115
115
  ### Seeing the plugin in action
116
116
 
117
117
  Try creating a custom [model](https://builder.io/c/docs/guides/getting-started-with-models), [component](https://builder.io/c/docs/custom-react-components), or [symbol](https://builder.io/c/docs/guides/symbols) using any of the SFCC field types, and edit away!
118
-
119
-