@nosto/nosto-react 0.1.10 → 0.1.11
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 +12 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -42,7 +42,7 @@ _*Note: dynamic placements are not supported on Shopify Hydrogen due to the Reac
|
|
|
42
42
|
|
|
43
43
|
##### NPM:
|
|
44
44
|
|
|
45
|
-
npm install
|
|
45
|
+
npm install @nosto/nosto-react
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|
|
@@ -54,7 +54,7 @@ There’s one very specific widget in Nosto React and it is the `NostoProvider`
|
|
|
54
54
|
|
|
55
55
|
This widget is what we call the Nosto root widget, which is responsible for adding the actual Nosto script and the JS API stub. This widget wraps all other React Nosto widgets. Here’s how:
|
|
56
56
|
|
|
57
|
-
```
|
|
57
|
+
```jsx
|
|
58
58
|
import { NostoProvider } from "@nosto/nosto-react";
|
|
59
59
|
|
|
60
60
|
<NostoProvider account="your-nosto-account-id">
|
|
@@ -82,8 +82,8 @@ The `NostoSession` component makes it very easy to keep the session up to date s
|
|
|
82
82
|
|
|
83
83
|
The `cart` prop requires a value that adheres to the type `Cart`, while the `customer` prop requires a value that adheres to the type `Customer`.
|
|
84
84
|
|
|
85
|
-
```
|
|
86
|
-
import {
|
|
85
|
+
```jsx
|
|
86
|
+
import { NostoSession } from "@nosto/nosto-react";
|
|
87
87
|
|
|
88
88
|
<>
|
|
89
89
|
<Meta/>
|
|
@@ -114,7 +114,7 @@ By default, your account, when created, has <u>four</u> front-page placements na
|
|
|
114
114
|
|
|
115
115
|
The `<NostoHome \>` component needs to be added after the placements. Content and recommendations will be rendered through this component.
|
|
116
116
|
|
|
117
|
-
```
|
|
117
|
+
```jsx
|
|
118
118
|
import { NostoHome, NostoPlacement } from "@nosto/nosto-react";
|
|
119
119
|
|
|
120
120
|
<div className="front-page">
|
|
@@ -139,7 +139,7 @@ By default, your account, when created, has <u>three</u> product-page placements
|
|
|
139
139
|
|
|
140
140
|
The `<NostoProduct \>` component needs to be added after the placements. Content and recommendations will be rendered through this component. Pass in the product ID via the `product` prop to pass this information back to Nosto.
|
|
141
141
|
|
|
142
|
-
```
|
|
142
|
+
```jsx
|
|
143
143
|
import { NostoPlacement, NostoProduct } from "@nosto/nosto-react";
|
|
144
144
|
|
|
145
145
|
<div className="product-page">
|
|
@@ -161,7 +161,7 @@ You can personalise your search pages by using the `NostoSearch` component. The
|
|
|
161
161
|
|
|
162
162
|
By default, your account, when created, has <u>two</u> search-page placements named `searchpage-nosto-1` and `searchpage-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
|
|
163
163
|
|
|
164
|
-
```
|
|
164
|
+
```jsx
|
|
165
165
|
import { NostoPlacement, NostoSearch } from "@nosto/nosto-react";
|
|
166
166
|
|
|
167
167
|
<div className="search-page">
|
|
@@ -184,7 +184,7 @@ You can personalise your category and collection pages by using the `NostoCatego
|
|
|
184
184
|
|
|
185
185
|
By default, your account, when created, has <u>two</u> category placements named `categorypage-nosto-1` and `categorypage-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
|
|
186
186
|
|
|
187
|
-
```
|
|
187
|
+
```jsx
|
|
188
188
|
import { NostoCategory, NostoPlacement } from "@nosto/nosto-react";
|
|
189
189
|
|
|
190
190
|
<div className="category-page">
|
|
@@ -207,7 +207,7 @@ You can personalise your cart and checkout pages by using the `NostoCheckout` co
|
|
|
207
207
|
|
|
208
208
|
By default, your account, when created, has <u>two</u> cart-page placements named `categorypage-nosto-1` and `categorypage-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
|
|
209
209
|
|
|
210
|
-
```
|
|
210
|
+
```jsx
|
|
211
211
|
import { NostoCheckout, NostoPlacement } from "@nosto/nosto-react";
|
|
212
212
|
|
|
213
213
|
<div className="checkout-page">
|
|
@@ -228,7 +228,7 @@ You can personalise your cart and checkout pages by using the `Nosto404` compone
|
|
|
228
228
|
|
|
229
229
|
By default, your account, when created, has three 404-page placements named `notfound-nosto-1`, `notfound-nosto-2` and `notfound-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
|
|
230
230
|
|
|
231
|
-
```
|
|
231
|
+
```jsx
|
|
232
232
|
import { Nosto404, NostoPlacement } from "@nosto/nosto-react";
|
|
233
233
|
|
|
234
234
|
<div className="notfound-page">
|
|
@@ -250,7 +250,7 @@ You can personalise your miscellaneous pages by using the `NostoOther` component
|
|
|
250
250
|
|
|
251
251
|
By default, your account, when created, has two other-page placements named `other-nosto-1` and `other-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
|
|
252
252
|
|
|
253
|
-
```
|
|
253
|
+
```jsx
|
|
254
254
|
import { NostoOther, NostoPlacement } from "@nosto/nosto-react";
|
|
255
255
|
|
|
256
256
|
<div className="other-page">
|
|
@@ -273,7 +273,7 @@ By default, your account, when created, has one other-page placement named `than
|
|
|
273
273
|
|
|
274
274
|
The `order` prop requires a value that adheres to the type `Purchase`.
|
|
275
275
|
|
|
276
|
-
```
|
|
276
|
+
```jsx
|
|
277
277
|
import { Buyer, Item, NostoOrder, NostoPlacement, Purchase } from "@nosto/nosto-react";
|
|
278
278
|
|
|
279
279
|
<div className="thankyou-page">
|
package/package.json
CHANGED