@wayke-se/components-react 5.0.3 → 5.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 +182 -109
- package/dist/index.js +3 -3
- package/dist/index.js.map +2 -2
- package/dist/index.mjs +3 -3
- package/dist/index.mjs.map +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,11 +18,16 @@ Install peer dependencies
|
|
|
18
18
|
npm install react react-dom styled-components
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
+
Install the ecom stylesheet (optional, only if you use `ecomSettings`, see [Ecom theme](#ecom-theme))
|
|
22
|
+
```bash
|
|
23
|
+
npm install @wayke-se/ecom-web
|
|
24
|
+
```
|
|
25
|
+
|
|
21
26
|
```javascript
|
|
22
27
|
import React from 'react';
|
|
23
|
-
import WaykeComposite from '@wayke-se/components-react'
|
|
28
|
+
import WaykeComposite, { WaykeProviderSettings } from '@wayke-se/components-react'
|
|
24
29
|
import '@wayke-se/components-react/dist/assets/default.css';
|
|
25
|
-
// Optional
|
|
30
|
+
// Optional, only if you use ecomSettings
|
|
26
31
|
import '@wayke-se/ecom-web/dist/index.css';
|
|
27
32
|
|
|
28
33
|
const ProviderSettings: WaykeProviderSettings = {
|
|
@@ -81,18 +86,20 @@ Examples given the application is located in `/search/vehicles`:
|
|
|
81
86
|
5) pathRoute is `a/b` => `//yoursite.com/search/a/b/00000000-0000-0000-0000-000000000000`
|
|
82
87
|
6) pathRoute is `https://www.wayke.se/objekt` => `https://www.wayke.se/objekt/00000000-0000-0000-0000-000000000000`
|
|
83
88
|
|
|
89
|
+
The id is appended with a `/`, so `pathRoute` should not end with a slash.
|
|
90
|
+
|
|
84
91
|
```javascript
|
|
85
92
|
import React from 'react';
|
|
86
|
-
import
|
|
87
|
-
import '@wayke
|
|
88
|
-
// Optional
|
|
93
|
+
import WaykeComposite from '@wayke-se/components-react'
|
|
94
|
+
import '@wayke-se/components-react/dist/assets/default.css';
|
|
95
|
+
// Optional, only if you use ecomSettings
|
|
89
96
|
import '@wayke-se/ecom-web/dist/index.css';
|
|
90
97
|
|
|
91
98
|
const App = () => (
|
|
92
99
|
<WaykeComposite
|
|
93
100
|
composite={{
|
|
94
|
-
|
|
95
|
-
pathRoute: "your/path/to/this/component
|
|
101
|
+
// ...other composite props
|
|
102
|
+
pathRoute: "/your/path/to/this/component"
|
|
96
103
|
}}
|
|
97
104
|
provider={ProviderSettings}
|
|
98
105
|
/>
|
|
@@ -108,8 +115,8 @@ import React, { useCallback } from 'react';
|
|
|
108
115
|
import { WaykeProvider, WaykeSearch } from '@wayke-se/components-react'
|
|
109
116
|
|
|
110
117
|
const App = () => {
|
|
111
|
-
const onClickSearchItem = useCallback((
|
|
112
|
-
console.log(id);
|
|
118
|
+
const onClickSearchItem = useCallback((data) => {
|
|
119
|
+
console.log(data.id, data.branchId, data.branchName);
|
|
113
120
|
}, []);
|
|
114
121
|
|
|
115
122
|
return (
|
|
@@ -120,6 +127,8 @@ const App = () => {
|
|
|
120
127
|
};
|
|
121
128
|
```
|
|
122
129
|
|
|
130
|
+
If neither `hashRoute` nor `pathRoute` is set, the vehicle cards are not links. Use `onClickSearchItem` to handle navigation to the vehicle yourself.
|
|
131
|
+
|
|
123
132
|
### I only want to use the Search Item component
|
|
124
133
|
|
|
125
134
|
It's recomended to place WaykeItemProvider close to app-root in order to keep the cache
|
|
@@ -127,16 +136,16 @@ It's recomended to place WaykeItemProvider close to app-root in order to keep th
|
|
|
127
136
|
```javascript
|
|
128
137
|
import React, { useCallback } from 'react';
|
|
129
138
|
import { WaykeItemProvider, WaykeSearchItem } from '@wayke-se/components-react'
|
|
130
|
-
import '@wayke
|
|
131
|
-
// Optional
|
|
139
|
+
import '@wayke-se/components-react/dist/assets/default.css';
|
|
140
|
+
// Optional, only if you use ecomSettings
|
|
132
141
|
import '@wayke-se/ecom-web/dist/index.css';
|
|
133
142
|
|
|
134
143
|
const App = ({}) => {
|
|
135
144
|
const id = 'd01f79a3-7552-49c4-9d4d-deb3aa581c31';
|
|
136
145
|
|
|
137
|
-
// Optional,
|
|
138
|
-
const onClickSearchItem = useCallback((
|
|
139
|
-
console.log(
|
|
146
|
+
// Optional, triggered when a related vehicle is clicked
|
|
147
|
+
const onClickSearchItem = useCallback((id: string) => {
|
|
148
|
+
console.log(id);
|
|
140
149
|
}, []);
|
|
141
150
|
|
|
142
151
|
return (
|
|
@@ -147,6 +156,47 @@ const App = ({}) => {
|
|
|
147
156
|
};
|
|
148
157
|
```
|
|
149
158
|
|
|
159
|
+
### I want to use the components on a site that doesn't use React
|
|
160
|
+
|
|
161
|
+
The components are built with React, but they can be mounted into any element on any website. React is then bundled with your JavaScript, which adds to the loading time of the site.
|
|
162
|
+
|
|
163
|
+
You need a bundler (for example webpack, esbuild, Rollup or Vite) that can bundle the JavaScript and the imported CSS files.
|
|
164
|
+
|
|
165
|
+
Install the package and its peer dependencies
|
|
166
|
+
```bash
|
|
167
|
+
npm install @wayke-se/components-react react react-dom styled-components
|
|
168
|
+
# Optional, only if you use ecomSettings
|
|
169
|
+
npm install @wayke-se/ecom-web
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
Add an element where the components should be rendered
|
|
173
|
+
```html
|
|
174
|
+
<div id="wayke-components"></div>
|
|
175
|
+
<script src="your-bundle.js"></script>
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
Mount the component into the element. `createElement` is used instead of JSX, so no JSX transform is needed.
|
|
179
|
+
```javascript
|
|
180
|
+
import { createElement } from 'react';
|
|
181
|
+
import { createRoot } from 'react-dom/client';
|
|
182
|
+
import WaykeComposite from '@wayke-se/components-react';
|
|
183
|
+
import '@wayke-se/components-react/dist/assets/default.css';
|
|
184
|
+
// Optional, only if you use ecomSettings
|
|
185
|
+
import '@wayke-se/ecom-web/dist/index.css';
|
|
186
|
+
|
|
187
|
+
const settings = {
|
|
188
|
+
provider: ProviderSettings,
|
|
189
|
+
composite: {
|
|
190
|
+
modifyDocumentTitleItem: true,
|
|
191
|
+
},
|
|
192
|
+
};
|
|
193
|
+
|
|
194
|
+
const container = document.getElementById('wayke-components');
|
|
195
|
+
createRoot(container).render(createElement(WaykeComposite, settings));
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
`WaykeComposite` uses hash routing by default, so it works on a single page without any server configuration. See [path-route](#waykecomposite-uses-hash-route-i-want-to-use-path-route) if you want to use path routing instead.
|
|
199
|
+
|
|
150
200
|
## Components
|
|
151
201
|
|
|
152
202
|
### WaykeComposite
|
|
@@ -155,11 +205,13 @@ const App = ({}) => {
|
|
|
155
205
|
| provider | WaykeProviderSettings | true |
|
|
156
206
|
| composite | WaykeCompositeProps | false |
|
|
157
207
|
|
|
208
|
+
`WaykeComposite` shows `WaykeSearch` and switches to `WaykeSearchItem` when a vehicle id is found in the url. It uses hash routing unless `composite.pathRoute` is set.
|
|
209
|
+
|
|
158
210
|
### WaykeSearchItem
|
|
159
211
|
| Property | Type | Required | Value |
|
|
160
212
|
|--------------------------|------------|----------|----------------------|
|
|
161
213
|
| id | string | true | |
|
|
162
|
-
| marketCode | MarketCode | false | SE
|
|
214
|
+
| marketCode | MarketCode | false | SE \| NO |
|
|
163
215
|
| pathRoute | string | false | |
|
|
164
216
|
| hashRoute | boolean | false | |
|
|
165
217
|
| disableResetScrollOnInit | boolean | false | |
|
|
@@ -176,75 +228,78 @@ const App = ({}) => {
|
|
|
176
228
|
* `hashRoute` - If set to true, then if a item is clicked it will append #guid to the url (is not used if `pathRoute` is set).
|
|
177
229
|
* `disableResetScrollOnInit` - Loading the item page resets the scroll, here it's possible to disable it.
|
|
178
230
|
* `placeholderImage` - Provide custom placeholder image when image is missing.
|
|
179
|
-
* `onClickSearchItem` - Function that
|
|
180
|
-
* `modifyDocumentTitleItem` - Update document title with vehicle data
|
|
231
|
+
* `onClickSearchItem` - Function that will be triggered when a related vehicle is clicked.
|
|
232
|
+
* `modifyDocumentTitleItem` - Update document title with vehicle data (registration number, title and short description).
|
|
181
233
|
* `displayBranchName` - Displays branch name on related product cards and using branch name in presentation of where the vehicle exist
|
|
182
234
|
|
|
183
235
|
### WaykeSearch
|
|
184
236
|
| Property | Type | Values |
|
|
185
237
|
|---------------------------|---------------------------|---------------------------|
|
|
186
|
-
| marketCode | MarketCode | SE
|
|
238
|
+
| marketCode | MarketCode | SE \| NO |
|
|
187
239
|
| pathRoute | string | |
|
|
188
240
|
| hashRoute | boolean | |
|
|
189
241
|
| filterList | SearchFilterTypes[] | |
|
|
190
|
-
| initialQueryParams | URLSearchParams or string | query, manufacturer, modelSeries, fuelType, gearboxType, branch, color, environmentClass, properties.segment, drivingWheel, price.min, price.max, mileage.min, mileage.max, modelYear.min, modelYear.max, leasingPrice.min, leasingPrice.max, businessLeasingPrice.min, businessLeasingPrice.max |
|
|
242
|
+
| initialQueryParams | URLSearchParams or string | query, manufacturer, modelSeries, fuelType, gearboxType, branch, color, environmentClass, properties.segment, drivingWheel, price.min, price.max, mileage.min, mileage.max, odometerValueAsKm.min, odometerValueAsKm.max, modelYear.min, modelYear.max, leasingPrice.min, leasingPrice.max, businessLeasingPrice.min, businessLeasingPrice.max, sort, hits |
|
|
191
243
|
| removeSearchBar | boolean | |
|
|
192
244
|
| removeFilterOptions | boolean | |
|
|
193
245
|
| placeholderImage | string | |
|
|
194
|
-
| onClickSearchItem | function | (data:
|
|
246
|
+
| onClickSearchItem | function | (data: { id: string, branchId?: string, branchName?: string }) => void |
|
|
195
247
|
| modifyDocumentTitleSearch | string | |
|
|
196
|
-
| displayBranchName |
|
|
248
|
+
| displayBranchName | boolean | |
|
|
197
249
|
|
|
198
250
|
* Optional
|
|
199
251
|
* `marketCode` - Set the language, available options are SE and NO, default to SE.
|
|
200
252
|
* `pathRoute` - If set, then if a item is clicked it will use the provided url and append the guid. Supports both relative and absolute.
|
|
201
253
|
* `hashRoute` - If set to true, then if a item is clicked it will append #guid to the url (is not used if `pathRoute` is set).
|
|
202
|
-
* `filterList` - Select
|
|
203
|
-
* `initialQueryParams` - Set the default filter that should be
|
|
254
|
+
* `filterList` - Select which filters should be visible and in which order. See [SearchFilterTypes](#searchfiltertypes) for available filters. If not set, all filters are shown (see [Notes on MarketCode](#notes-on-marketcode)).
|
|
255
|
+
* `initialQueryParams` - Set the default filter that should be applied upon init. The parameters are passed on to the search API. `hits` defaults to `30` and `sort` to `published-desc`.
|
|
204
256
|
* `removeSearchBar` - Removes search bar.
|
|
205
257
|
* `removeFilterOptions` - Removes filter options.
|
|
206
258
|
* `placeholderImage` - Provide custom placeholder image when image is missing.
|
|
207
|
-
* `onClickSearchItem` - Function that
|
|
259
|
+
* `onClickSearchItem` - Function that will be triggered when a vehicle is clicked.
|
|
208
260
|
* `modifyDocumentTitleSearch` - Set custom document title
|
|
209
261
|
* `displayBranchName` - Displays branch name on product cards
|
|
210
262
|
|
|
211
263
|
### Notes on MarketCode
|
|
212
|
-
`marketCode` defines what
|
|
213
|
-
- `SE` will exclude the filter `
|
|
264
|
+
`marketCode` defines what language that will be used, `SE` - Swedish (default) or `NO` - Norwegian. Other things that `marketCode` will affect:
|
|
265
|
+
- If no `filterList` is set, `SE` will exclude the filter `odometerValueAsKm` and instead use `mileage`, while `NO` will do the opposite. The difference between the two filters is the unit used. For `odometerValueAsKm` the unit is kilometer, while `mileage` is kilometer/10 (Scandinavian miles).
|
|
266
|
+
- The language is set once, by the first component that is rendered.
|
|
214
267
|
|
|
215
268
|
|
|
216
269
|
## Types
|
|
217
270
|
|
|
218
271
|
### WaykeCompositeProps
|
|
219
|
-
WaykeSearchItem & WaykeSearch combined without `id`
|
|
272
|
+
WaykeSearchItem & WaykeSearch combined without `id`. `hashRoute` and `onClickSearchItem` are deprecated and have no effect, since `WaykeComposite` handles routing itself. Subscribe to the `ItemClicked` event with [WaykePubSub](#subscribe-to-events) to know when a vehicle is clicked.
|
|
220
273
|
|
|
221
274
|
### WaykeProviderSettings
|
|
222
275
|
| Property | Type | Required |
|
|
223
276
|
|-----------------------|--------------|----------|
|
|
224
277
|
| url | string | true |
|
|
225
|
-
| urlMlt | string |
|
|
278
|
+
| urlMlt | string | false |
|
|
226
279
|
| graphQlUrl | string | true |
|
|
227
280
|
| apiKey | string | false |
|
|
228
281
|
| googleMapsApiKey | string | false |
|
|
229
282
|
| googleMapsMarker | string | false |
|
|
230
283
|
| ecomSettings | EcomSettings | false |
|
|
231
284
|
| useQueryParamsFromUrl | boolean | false |
|
|
285
|
+
| pathRoute | string | false |
|
|
232
286
|
|
|
233
287
|
* Required
|
|
234
288
|
* `url` - Url to Wayke ext-api.
|
|
235
|
-
* `urlMlt` - Url to Wayke ext-api for related vehicles. Used when displaying related vehicles for a given vehicle. If not provided `url` will be used, but then related vehicles are change to latest added.
|
|
236
289
|
* `graphQlUrl` - Url to the GraphQl endpoint.
|
|
237
290
|
* Optional
|
|
238
|
-
* `
|
|
239
|
-
* `
|
|
240
|
-
* `
|
|
241
|
-
* `
|
|
242
|
-
* `
|
|
291
|
+
* `urlMlt` - Url to Wayke ext-api for related vehicles. Used when displaying related vehicles for a given vehicle. If not provided `url` will be used, but then the latest added vehicles are shown instead of related vehicles.
|
|
292
|
+
* `apiKey` - Sent as `x-api-key` to Wayke ext-api. If no api key is provided, then the origin of the request is used as api key.
|
|
293
|
+
* `googleMapsApiKey` - Provide a Google Maps Static API key. The vehicle page shows a button for the map. With a `googleMapsApiKey` the button shows a static map, otherwise it opens Google Maps in another tab.
|
|
294
|
+
* `googleMapsMarker` - Url to a custom map marker for the static map.
|
|
295
|
+
* `ecomSettings` - Enables ecom.
|
|
296
|
+
* `useQueryParamsFromUrl` - Reading/writing query strings from/to the url. If true and `initialQueryParams` also exist, then each value in `initialQueryParams` is added unless the url already contains the same key with the same value.
|
|
297
|
+
* `pathRoute` - Used with `useQueryParamsFromUrl`. When the search query is written to the url, the part of the path from `pathRoute` and onwards is removed. `WaykeComposite` does not pass `composite.pathRoute` on, so set it here as well.
|
|
243
298
|
|
|
244
299
|
### EcomSettings
|
|
245
300
|
| Property | Type | Required |
|
|
246
301
|
|--------------------|--------------|----------|
|
|
247
|
-
| url |
|
|
302
|
+
| url | string | true |
|
|
248
303
|
| useBankId | boolean | false |
|
|
249
304
|
| displayBankIdAlert | boolean | false |
|
|
250
305
|
| serviceLogotypeUrl | string | false |
|
|
@@ -253,18 +308,18 @@ WaykeSearchItem & WaykeSearch combined without `id`
|
|
|
253
308
|
* Required
|
|
254
309
|
* `url` - Wayke ecom url.
|
|
255
310
|
* Optional
|
|
256
|
-
* `useBankId`:
|
|
257
|
-
* `displayBankIdAlert`:
|
|
258
|
-
* `serviceLogotypeUrl`:
|
|
259
|
-
* `bankIdThumbprint`: Custom
|
|
311
|
+
* `useBankId`: Deprecated, not used since 3.0.0.
|
|
312
|
+
* `displayBankIdAlert`: Deprecated, not used since 3.0.0.
|
|
313
|
+
* `serviceLogotypeUrl`: Url to the logo shown in ecom. By default the manufacturers logo will be used. Use a url to an image file, a `data:` url is not supported.
|
|
314
|
+
* `bankIdThumbprint`: Custom BankID certificate thumbprint.
|
|
260
315
|
|
|
261
|
-
> For more information about
|
|
316
|
+
> For more information about ecom see https://github.com/wayke-se/wayke-ecom-web.
|
|
262
317
|
|
|
263
318
|
### WaykeItemProviderSettings
|
|
264
319
|
| Property | Type | Required |
|
|
265
320
|
|-----------------------|--------------|----------|
|
|
266
321
|
| url | string | true |
|
|
267
|
-
| urlMlt | string |
|
|
322
|
+
| urlMlt | string | false |
|
|
268
323
|
| graphQlUrl | string | true |
|
|
269
324
|
| apiKey | string | false |
|
|
270
325
|
| googleMapsApiKey | string | false |
|
|
@@ -273,13 +328,13 @@ WaykeSearchItem & WaykeSearch combined without `id`
|
|
|
273
328
|
|
|
274
329
|
* Required
|
|
275
330
|
* `url` - Url to Wayke ext-api.
|
|
276
|
-
* `urlMlt` - Url to Wayke ext-api for related vehicles. Used when displaying related vehicles for a given vehicle. If not provided `url` will be used, but then related vehicles are change to latest added.
|
|
277
331
|
* `graphQlUrl` - Url to the GraphQl endpoint.
|
|
278
332
|
* Optional
|
|
279
|
-
* `
|
|
280
|
-
* `
|
|
281
|
-
* `
|
|
282
|
-
* `
|
|
333
|
+
* `urlMlt` - Url to Wayke ext-api for related vehicles. Used when displaying related vehicles for a given vehicle. If not provided `url` will be used, but then the latest added vehicles are shown instead of related vehicles.
|
|
334
|
+
* `apiKey` - Sent as `x-api-key` to Wayke ext-api. If no api key is provided, then the origin of the request is used as api key.
|
|
335
|
+
* `googleMapsApiKey` - Provide a Google Maps Static API key. The vehicle page shows a button for the map. With a `googleMapsApiKey` the button shows a static map, otherwise it opens Google Maps in another tab.
|
|
336
|
+
* `googleMapsMarker` - Url to a custom map marker for the static map.
|
|
337
|
+
* `ecomSettings` - Enables ecom.
|
|
283
338
|
|
|
284
339
|
### SearchFilterTypes
|
|
285
340
|
| Property | Type | Required | Values |
|
|
@@ -287,16 +342,20 @@ WaykeSearchItem & WaykeSearch combined without `id`
|
|
|
287
342
|
| filterName | SearchFilterNameTypes | true | manufacturer, modelSeries, fuelType, gearboxType, branch, color, environmentClass, properties.segment, drivingWheel, price, mileage, odometerValueAsKm, modelYear, leasingPrice, businessLeasingPrice |
|
|
288
343
|
| displayName | string | false | |
|
|
289
344
|
|
|
290
|
-
* `displayName`
|
|
345
|
+
* `displayName` - Override the default translation of the filter title.
|
|
291
346
|
|
|
292
347
|
### Set initial query filter
|
|
293
348
|
```javascript
|
|
294
349
|
import WaykeComposite from '@wayke-se/components-react'
|
|
295
350
|
|
|
351
|
+
const initialQueryParams = new URLSearchParams();
|
|
352
|
+
initialQueryParams.set('modelYear.min', '2018');
|
|
353
|
+
initialQueryParams.append('modelSeries', 'A5');
|
|
354
|
+
|
|
296
355
|
const App = () => (
|
|
297
356
|
<WaykeComposite
|
|
298
357
|
provider={ProviderSettings}
|
|
299
|
-
composite={{
|
|
358
|
+
composite={{
|
|
300
359
|
initialQueryParams,
|
|
301
360
|
}}
|
|
302
361
|
/>
|
|
@@ -309,7 +368,7 @@ const App = () => (
|
|
|
309
368
|
Order will have effect
|
|
310
369
|
|
|
311
370
|
```javascript
|
|
312
|
-
import WaykeComposite from '@wayke-se/components-react'
|
|
371
|
+
import WaykeComposite, { SearchFilterTypes } from '@wayke-se/components-react'
|
|
313
372
|
|
|
314
373
|
const filterList: SearchFilterTypes[] = [
|
|
315
374
|
{
|
|
@@ -324,8 +383,8 @@ const filterList: SearchFilterTypes[] = [
|
|
|
324
383
|
const App = () => (
|
|
325
384
|
<WaykeComposite
|
|
326
385
|
provider={ProviderSettings}
|
|
327
|
-
composite={{
|
|
328
|
-
filterList
|
|
386
|
+
composite={{
|
|
387
|
+
filterList,
|
|
329
388
|
}}
|
|
330
389
|
/>
|
|
331
390
|
)
|
|
@@ -334,7 +393,7 @@ const App = () => (
|
|
|
334
393
|
## Subscribe to events
|
|
335
394
|
|
|
336
395
|
```javascript
|
|
337
|
-
import { WaykePubSub}
|
|
396
|
+
import { WaykePubSub } from '@wayke-se/components-react';
|
|
338
397
|
|
|
339
398
|
const event = {
|
|
340
399
|
eventName: 'ItemClicked',
|
|
@@ -343,16 +402,15 @@ const event = {
|
|
|
343
402
|
|
|
344
403
|
WaykePubSub.subscribe(event);
|
|
345
404
|
WaykePubSub.unsubscribe(event);
|
|
346
|
-
|
|
347
405
|
```
|
|
348
406
|
|
|
349
|
-
| Method | Arguments
|
|
350
|
-
|
|
351
|
-
| subscribe |
|
|
352
|
-
| unsubscribe |
|
|
353
|
-
| publish | eventName:
|
|
407
|
+
| Method | Arguments |
|
|
408
|
+
|--------------|----------------------------------------------------------------|
|
|
409
|
+
| subscribe | event: EventType |
|
|
410
|
+
| unsubscribe | event: EventType (the same object that was passed to `subscribe`) |
|
|
411
|
+
| publish | eventName: EventNames, data |
|
|
354
412
|
|
|
355
|
-
###
|
|
413
|
+
### EventType
|
|
356
414
|
| eventName | callback | Data |
|
|
357
415
|
|-----------------------|---------------------------|---------------------------------------------------------------------------------------------------------------------------------|
|
|
358
416
|
| HashRouteChange | (data) => void | CallbackHashRouteChangeData |
|
|
@@ -375,36 +433,42 @@ WaykePubSub.unsubscribe(event);
|
|
|
375
433
|
| SearchCompleted | (data) => void | CallbackSearchCompletedData |
|
|
376
434
|
| Search | (data) => void | CallbackSearchData |
|
|
377
435
|
| FilterApply | (data) => void | CallbackFilterApplyData |
|
|
378
|
-
| All | (eventName, data) => void | CallbackHashRouteChangeData \|
|
|
436
|
+
| All | (eventName, data) => void | CallbackHashRouteChangeData \| CallbackItemData \| CallbackEcomData \| CallbackSearchClearQueryData \| CallbackSearchClearAllFiltersQueryData \| CallbackSearchInitiatedData \| CallbackSearchCompletedData \| CallbackSearchData \| CallbackFilterApplyData |
|
|
379
437
|
* `All` - Subscribes to all events.
|
|
380
438
|
|
|
439
|
+
> The `Callback*Data` names below describe the payloads. They are not exported from the package.
|
|
440
|
+
|
|
381
441
|
#### CallbackHashRouteChangeData
|
|
382
|
-
| Property | Type
|
|
383
|
-
|
|
384
|
-
| id | string
|
|
442
|
+
| Property | Type |
|
|
443
|
+
|-----------|-----------------------|
|
|
444
|
+
| id | string \| undefined |
|
|
445
|
+
|
|
446
|
+
`id` is `undefined` when the hash is removed.
|
|
385
447
|
|
|
386
448
|
#### CallbackItemData
|
|
387
|
-
| Property | Type
|
|
388
|
-
|
|
389
|
-
| id | string
|
|
390
|
-
| branchName | string
|
|
391
|
-
| branchId | string
|
|
449
|
+
| Property | Type |
|
|
450
|
+
|---------------|-----------------------|
|
|
451
|
+
| id | string |
|
|
452
|
+
| branchName | string \| undefined |
|
|
453
|
+
| branchId | string \| undefined |
|
|
392
454
|
|
|
393
455
|
#### CallbackEcomData
|
|
394
456
|
| Property | Type |
|
|
395
457
|
|---------------|-----------------------|
|
|
396
458
|
| id | string |
|
|
397
|
-
| branchName | string
|
|
398
|
-
| branchId | string
|
|
459
|
+
| branchName | string \| undefined |
|
|
460
|
+
| branchId | string \| undefined |
|
|
399
461
|
| view | EcomView |
|
|
400
|
-
| event |
|
|
462
|
+
| event | EcomEvent |
|
|
401
463
|
| currentStep | EcomStep \| undefined |
|
|
402
464
|
| data | any \| undefined |
|
|
403
465
|
|
|
466
|
+
`EcomView`, `EcomEvent` and `EcomStep` are exported from `@wayke-se/ecom-web`.
|
|
467
|
+
|
|
404
468
|
#### CallbackSearchClearQueryData
|
|
405
|
-
| Property | Type
|
|
406
|
-
|
|
407
|
-
| query | string
|
|
469
|
+
| Property | Type |
|
|
470
|
+
|-----------|------------------|
|
|
471
|
+
| query | string \| null |
|
|
408
472
|
|
|
409
473
|
#### CallbackSearchClearAllFiltersQueryData
|
|
410
474
|
| Property | Type |
|
|
@@ -433,19 +497,20 @@ WaykePubSub.unsubscribe(event);
|
|
|
433
497
|
|-----------|-----------------------|
|
|
434
498
|
| type | "checkbox" \| "range" |
|
|
435
499
|
| filter | string |
|
|
436
|
-
| value | string \| undefined
|
|
437
|
-
| checked | boolean \|
|
|
438
|
-
| min | number \|
|
|
439
|
-
| max | number \|
|
|
500
|
+
| value | string \| undefined (checkbox only) |
|
|
501
|
+
| checked | boolean \| undefined (checkbox only) |
|
|
502
|
+
| min | number \| undefined (range only) |
|
|
503
|
+
| max | number \| undefined (range only) |
|
|
440
504
|
|
|
441
505
|
## Theme
|
|
442
506
|
It is possible to apply a custom theme using *CSS*. The things that can be styled are:
|
|
443
507
|
- Primary brand color
|
|
444
508
|
- Secondary brand color
|
|
509
|
+
- Accent color
|
|
445
510
|
- Font (regular)
|
|
446
511
|
- Font (bold)
|
|
447
512
|
|
|
448
|
-
To style the components, copy the following snippet into your *CSS* file and modify
|
|
513
|
+
To style the components, copy the following snippet into your *CSS* file and modify it to your needs.
|
|
449
514
|
|
|
450
515
|
```css
|
|
451
516
|
/* === Color === */
|
|
@@ -550,67 +615,75 @@ To style the components, copy the following snippet into your *CSS* file and mod
|
|
|
550
615
|
}
|
|
551
616
|
```
|
|
552
617
|
|
|
618
|
+
> **It is highly recommended to *NOT* add or remove any properties defined above in the color selectors**. However, since fonts usually requires more configuration we encourage you to add the necessary font styling required to match your current profile. If you add new properties to the font selectors, please be careful and ensure everything looks as intended before going into production.
|
|
619
|
+
|
|
553
620
|
### Ecom theme
|
|
554
|
-
The
|
|
621
|
+
The ecom JavaScript is bundled with this package, but its stylesheet is not. If you use `ecomSettings`, install `@wayke-se/ecom-web` and import its stylesheet:
|
|
555
622
|
|
|
556
|
-
|
|
623
|
+
```bash
|
|
624
|
+
npm install @wayke-se/ecom-web
|
|
625
|
+
```
|
|
557
626
|
|
|
558
|
-
|
|
559
|
-
|
|
627
|
+
```javascript
|
|
628
|
+
import '@wayke-se/ecom-web/dist/index.css';
|
|
629
|
+
```
|
|
630
|
+
|
|
631
|
+
The ecom styles are scoped under `.waykeecom-root` and are built on CSS custom properties prefixed with `--waykeecom-`. To change the ecom colors, override the custom properties in a stylesheet loaded after the ecom stylesheet:
|
|
632
|
+
|
|
633
|
+
```css
|
|
634
|
+
.waykeecom-root {
|
|
635
|
+
--waykeecom--color-primary-main: #ff5a1c;
|
|
636
|
+
--waykeecom--color-primary-alt: #ffe6dc;
|
|
637
|
+
--waykeecom--color-link-main: #ff5a1c;
|
|
638
|
+
--waykeecom--color-action-main: #ff5a1c;
|
|
639
|
+
--waykeecom--color-action-alt: #ffe6dc;
|
|
640
|
+
}
|
|
641
|
+
```
|
|
560
642
|
|
|
643
|
+
See `@wayke-se/ecom-web/dist/index.css` for the full list of custom properties.
|
|
561
644
|
|
|
645
|
+
## Run example from repo
|
|
646
|
+
This repository contains an example app in `example/` that uses the components straight from `src/`.
|
|
562
647
|
|
|
563
|
-
|
|
648
|
+
Create an `.env` file in the repository root:
|
|
564
649
|
```
|
|
565
|
-
WAYKE_HOST=YOUR_HOST_1,YOUR_HOST_2
|
|
566
650
|
WAYKE_SEARCH_URL=https://api.wayketech.se/vehicles
|
|
567
651
|
WAYKE_SEARCH_MLT_URL=https://api.wayketech.se/vehicles-mlt-ext
|
|
568
|
-
WAYKE_SEARCH_X_API_KEY=YOUR_API_KEY
|
|
569
652
|
WAYKE_GRAPH_QL_URL=https://gql.wayketech.se/query
|
|
570
653
|
WAYKE_ECOM_URL=https://ecom.wayketech.se
|
|
571
654
|
GOOGLE_MAPS_API_KEY=YOUR_GOOGLE_MAPS_STATIC_API_KEY
|
|
572
655
|
```
|
|
573
656
|
|
|
574
|
-
* `WAYKE_SEARCH_MLT_URL` -
|
|
575
|
-
`
|
|
657
|
+
* `WAYKE_SEARCH_MLT_URL` - *Optional*. Fetches vehicles related to the current vehicle. If not provided, `WAYKE_SEARCH_URL` is used instead and the latest vehicles are shown.
|
|
658
|
+
* `GOOGLE_MAPS_API_KEY` - *Optional*. See `googleMapsApiKey`.
|
|
576
659
|
|
|
577
|
-
Then run the following:
|
|
660
|
+
Then run the following from the repository root:
|
|
578
661
|
```bash
|
|
579
662
|
npm install
|
|
580
|
-
cd example
|
|
581
|
-
npm install
|
|
582
663
|
npm start
|
|
583
664
|
```
|
|
584
665
|
|
|
585
|
-
|
|
586
|
-
Update your local host file and add:
|
|
587
|
-
127.0.0.1 test.com.localhost
|
|
588
|
-
This will change the origin, while still pointing to localhost.
|
|
589
|
-
Start the example and open `test.com.localhost:5000`.
|
|
666
|
+
The example is served on port `5000`. Set `PORT` to use another port, for example `PORT=5010 npm start`.
|
|
590
667
|
|
|
591
|
-
To
|
|
668
|
+
The example does not set an `apiKey`, so the origin of the request is used as API key. To use the API key of a specific site, add a host such as `test.com.localhost` to your hosts file:
|
|
592
669
|
```
|
|
593
|
-
|
|
670
|
+
127.0.0.1 test.com.localhost
|
|
594
671
|
```
|
|
595
|
-
|
|
596
|
-
|
|
672
|
+
Then open `test.com.localhost:5000`. This changes the origin while still pointing to localhost.
|
|
597
673
|
|
|
598
674
|
### Available Routes (Independent)
|
|
599
675
|
|
|
600
676
|
#### WaykeComposite
|
|
601
677
|
[http://localhost:5000](http://localhost:5000)
|
|
602
678
|
|
|
679
|
+
#### WaykeComposite with hash route
|
|
680
|
+
[http://localhost:5000/hash](http://localhost:5000/hash)
|
|
681
|
+
|
|
682
|
+
#### WaykeComposite with path route
|
|
683
|
+
[http://localhost:5000/a/b](http://localhost:5000/a/b)
|
|
684
|
+
|
|
603
685
|
#### WaykeSearch With WaykeProvider
|
|
604
686
|
[http://localhost:5000/search](http://localhost:5000/search)
|
|
605
687
|
|
|
606
688
|
#### WaykeSearchItem With WaykeProvider
|
|
607
689
|
[http://localhost:5000/search-item/d01f79a3-7552-49c4-9d4d-deb3aa581c31](http://localhost:5000/search-item/d01f79a3-7552-49c4-9d4d-deb3aa581c31)
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
## Example repositories
|
|
611
|
-
|
|
612
|
-
### React and Typescript example
|
|
613
|
-
[https://github.com/wayke-se/components-react-boilerplate](https://github.com/wayke-se/components-react-boilerplate)
|
|
614
|
-
|
|
615
|
-
### Non-React with/without Typescript example
|
|
616
|
-
[https://github.com/wayke-se/components-react-example](https://github.com/wayke-se/components-react-example)
|