Skip to content

Commit 95c1e8c

Browse files
evanyan13Evan Yan
evanyan13
and
Evan Yan
authored
[CI-4303] Update Code Example - CioPlp (#149)
* Update code examples for CioPlp * Add instruction * Update CioPlpProps --------- Co-authored-by: Evan Yan <evan.yan@constructor.io>
1 parent a0ebcaf commit 95c1e8c

File tree

4 files changed

+91
-57
lines changed

4 files changed

+91
-57
lines changed

‎src/stories/components/CioPlp/CioPlpProps.md‎

Lines changed: 62 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
### `Formatters`
22

3+
---
4+
35
Formatters will be used to modify how certain fields are rendered
46

57
| property | type | description |
68
| ----------- | --------------------------- | --------------------- |
79
| formatPrice | `(price: number) => string` | Format price funciton |
810

9-
### `ItemFieldGetters`
10-
11-
ItemFieldGetters maps the fields sent in the catalog feeds to the fields the libary expects for rendering
12-
13-
| property | type | description |
14-
| -------- | ------------------------ | ------------------ |
15-
| getPrice | `(item: Item) => number` | Get price funciton |
11+
<br>
1612

1713
### `Callbacks`
1814

15+
---
16+
1917
Callbacks will be composed with the library's internal tracking calls for a given event
2018

2119
| property | type | description |
@@ -25,24 +23,41 @@ Callbacks will be composed with the library's internal tracking calls for a give
2523
| onSwatchClick | `(e: React.MouseEvent, clickedSwatch: SwatchItem) => void` | Product swatch click callback function |
2624
| onRedirect | `(url: string) => void` | Redirect callback function |
2725

26+
<br>
27+
28+
### `ItemFieldGetters`
29+
30+
---
31+
32+
ItemFieldGetters maps the fields sent in the catalog feeds to the fields the libary expects for rendering
33+
34+
| property | type | description |
35+
| -------- | ------------------------ | ------------------ |
36+
| getPrice | `(item: Item) => number` | Get price funciton |
37+
38+
<br>
39+
2840
### `UrlHelpers`
2941

30-
Url Helpers are used for managing the url and request state
42+
---
43+
44+
Url Helpers are used for managing the url and request state. These functions define how this Library modifies and parses the URL.
3145

32-
| property | type | description |
33-
| --------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
34-
| getUrl | `() => string \| undefined` | This function will be used to get the current url for a page instead of using the current href. |
35-
| setUrl | `(newEncodedUrlState: string) => void` | This function will be called when any request state changes result in url changes. By default the window href will be set to the new url. |
36-
| getStateFromUrl | `(urlString: string) => RequestConfigs` | This function will be called when parsing the current url string to a request state. |
37-
| getUrlFromState | `(state: RequestConfigs, options: QueryParamEncodingOptions) => string` | This function will be called when converting the request state to a url string. |
38-
| defaultQueryStringMap | `DefaultQueryStringMap` | Used to provide a mapping for what strings constructor api query parameters should use in url |
46+
| property | type | description |
47+
| --------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------- |
48+
| getUrl | `() => string \| undefined` | Get the current url for a page (Default: getting current href) |
49+
| setUrl | `(newEncodedUrlState: string) => void` | Set the window href using the provided url |
50+
| getStateFromUrl | `(urlString: string) => RequestConfigs` | Parses the given url string to a request configuration state. |
51+
| getUrlFromState | `(state: RequestConfigs, options: QueryParamEncodingOptions) => string` | Convert the request configuration state to a url string. |
52+
| defaultQueryStringMap | `DefaultQueryStringMap` | Provides a mapping for the query parameters that is used in URL |
3953

4054
> #### `getUrl`
4155
4256
- Default Implementation
57+
- type: () => string \| undefined
4358

4459
```javascript
45-
function getUrl(): string | undefined {
60+
function getUrl() {
4661
if (typeof window === 'undefined') return undefined;
4762
return window.location.href;
4863
}
@@ -51,9 +66,10 @@ Url Helpers are used for managing the url and request state
5166
> #### `setUrl`
5267
5368
- Default Implementation
69+
- type: (newEncodedUrlState: string) => void
5470

5571
```javascript
56-
function setUrl(newUrlWithEncodedState: string) {
72+
function setUrl(newUrlWithEncodedState) {
5773
if (typeof window === 'undefined') return;
5874
window.location.href = newUrlWithEncodedState;
5975
}
@@ -62,21 +78,22 @@ Url Helpers are used for managing the url and request state
6278
> #### `getStateFromUrl`
6379
6480
- Default Implementation
81+
- type: (urlString: string) => RequestConfig
6582

6683
```javascript
67-
function getStateFromUrl(url: string): RequestConfigs {
84+
function getStateFromUrl(url) {
6885
const urlObject = new URL(url);
6986
const urlParams = urlObject.searchParams;
7087
const paths = decodeURI(urlObject?.pathname)?.split('/');
71-
let filterName: string | undefined;
72-
let filterValue: string | undefined;
88+
let filterName;
89+
let filterValue;
7390

7491
if (paths.length > 0) {
7592
filterName = 'group_id';
7693
filterValue = paths[paths.length - 1];
7794
}
7895

79-
const rawState = {} as Record<string, string>;
96+
const rawState = {};
8097
Object.entries(defaultQueryStringMap).forEach(([key, val]) => {
8198
const storedVal = urlParams.get(val);
8299
if (storedVal != null) {
@@ -98,7 +115,7 @@ Url Helpers are used for managing the url and request state
98115
...rest
99116
} = rawState;
100117

101-
const state = { ...rest } as RequestConfigs;
118+
const state = { ...rest };
102119
if (page) state.page = Number(page);
103120
if (offset) state.offset = Number(offset);
104121
if (resultsPerPage) state.resultsPerPage = Number(resultsPerPage);
@@ -115,19 +132,32 @@ Url Helpers are used for managing the url and request state
115132
> #### `getUrlFromState`
116133
117134
- Default Implementation
135+
- type: (state: RequestConfigs, options: QueryParamEncodingOptions) => string
118136
119137
```javascript
120-
function getUrlFromState(state: RequestConfigs, options: QueryParamEncodingOptions = {}): string {
121-
const { baseUrl: url, origin, pathname } = options;
122-
const baseUrl = url || `${origin}${pathname}`;
138+
function getUrlFromState(state, url) {
139+
const urlObject = new URL(url);
140+
let { pathname } = urlObject;
141+
142+
if (state.filterName && state.filterValue) {
143+
if (pathname.match(/(group_id|collection_id)\/[^/]+$/)) {
144+
pathname = pathname.replace(
145+
/\/(group_id|collection_id)\/[^/]+$/,
146+
`/${state.filterName}/${state.filterValue}`,
147+
);
148+
} else {
149+
pathname = `/${state.filterName}/${state.filterValue}`;
150+
}
151+
}
123152

124153
const params = new URLSearchParams();
154+
125155
Object.entries(state).forEach(([key, val]) => {
126-
if (defaultQueryStringMap[key] === undefined) {
127-
return;
128-
}
156+
if (defaultQueryStringMap[key] === undefined) {
157+
return;
158+
}
129159

130-
let encodedVal: string = '';
160+
let encodedVal = '';
131161

132162
if (key === 'filters' && state.filters) {
133163
getFilterParamsFromState(params, state.filters);
@@ -140,19 +170,19 @@ Url Helpers are used for managing the url and request state
140170
if (encodedVal) {
141171
params.set(defaultQueryStringMap[key], encodedVal);
142172
}
143-
144173
});
145174

146-
return `${baseUrl}?${params.toString()}`;
175+
return `${urlObject.origin}${pathname}?${params.toString()}`;
147176
}
148177
```
149178
150179
> #### `defaultQueryStringMap`
151180
152181
- Default Implementation
182+
- type: DefaultQueryStringMap
153183
154184
```javascript
155-
const defaultQueryStringMap: Readonly<DefaultQueryStringMap> = Object.freeze({
185+
const defaultQueryStringMap = Object.freeze({
156186
query: 'q',
157187
page: 'page',
158188
offset: 'offset',

‎src/stories/components/CioPlp/Code Examples.mdx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,19 +29,18 @@ Open in full screen here:
2929

3030
This renders the PLP displayed above.
3131

32+
To view the examples and see this component in action
33+
- **Search** - append your URL with `?q=shirt`
34+
- **Browse** - append your URL with `/group_id/1035`
35+
3236
```jsx
33-
import React from 'react';
34-
import { CioPlp } from '@constructor-io/constructorio-ui-plp';
35-
import '@constructor-io/constructorio-ui-plp/styles.css';
37+
import { CioPlp } from "@constructor-io/constructorio-ui-plp";
38+
import "@constructor-io/constructorio-ui-plp/styles.css";
3639

37-
const apiKey = 'MY_API_KEY';
40+
const DEMO_API_KEY = "key_M57QS8SMPdLdLx4x";
3841

39-
function MyComponent() {
40-
return (
41-
<>
42-
<CioPlp apiKey={apiKey} />
43-
</>
44-
);
42+
export default function MyComponent() {
43+
return <CioPlp apiKey={DEMO_API_KEY} />;
4544
}
4645
```
4746

@@ -55,25 +54,31 @@ Take control of the rendering logic by using Render Props through `children`.
5554
The [context](..?path=/docs/components-cioplp--code-examples#cioplp-context-value) will be passed along as props to your render function.
5655

5756
```jsx
58-
import { CioPlp } from '@constructor-io/constructorio-ui-plp';
57+
import { CioPlp } from "@constructor-io/constructorio-ui-plp";
58+
import "@constructor-io/constructorio-ui-plp/styles.css";
59+
60+
const DEMO_API_KEY = "key_M57QS8SMPdLdLx4x";
5961

60-
function MyGrid(props) {
62+
function MyCustomPlp(props) {
6163
const {
6264
cioClient,
6365
cioClientOptions,
6466
setCioClientOptions,
6567
formatters,
6668
itemFieldGetters,
6769
urlHelpers,
70+
callbacks,
6871
} = props;
6972

7073
return <>{/* CUSTOM_MARKUP_HERE */}</>;
7174
}
7275

73-
function MyComponent() {
76+
export default function MyComponent() {
7477
return (
75-
<CioPlp apiKey={apiKey}>
76-
<MyGrid />
78+
<CioPlp apiKey={DEMO_API_KEY}>
79+
{(props) => {
80+
return <MyCustomPlp {...props} />;
81+
}}
7782
</CioPlp>
7883
);
7984
}

‎src/stories/components/CioPlp/Props.mdx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,4 @@ import CioPlpProps from './CioPlpProps.md?raw';
88

99
<ArgTypes />
1010

11-
---
12-
1311
<Markdown>{CioPlpProps}</Markdown>

‎src/stories/components/CioPlp/RenderProps.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
| property | type | description |
2-
| ------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
3-
| cioClient | `Nullable<ConstructorIOClient>` | The [ConstructorIO](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html) client instance |
4-
| cioClientOptions | `CioClientOptions` | The [ConstructorIO](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html) client options |
5-
| setCioClientOptions | `React.Dispatch<CioClientOptions>` | The [ConstructorIO](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html) options setter |
6-
| formatters | [Formatters](./?path=/docs/components-cioplp--props#formatters) | Data formatter functions for things like price, description, etc |
7-
| itemFieldGetters | [ItemFieldGetters](./?path=/docs/components-cioplp--props#itemfieldgetters) | Data getter functions for things like price, description, etc |
8-
| callbacks | [Callbacks](./?path=/docs/components-cioplp--props#callbacks) | Callback functions to be composed with the library's internal tracking calls |
1+
| property | type | description |
2+
| ------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
3+
| cioClient | `Nullable<ConstructorIOClient>` | The [ConstructorIO](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html) client instance |
4+
| cioClientOptions | `CioClientOptions` | The [ConstructorIO](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html) client options |
5+
| setCioClientOptions | `React.Dispatch<CioClientOptions>` | The [ConstructorIO](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html) options setter |
6+
| formatters | [Formatters](./?path=/docs/components-cioplp--props#formatters) | Data formatter functions for things like price, description, etc |
7+
| itemFieldGetters | [ItemFieldGetters](./?path=/docs/components-cioplp--props#itemfieldgetters) | Data getter functions for things like price, description, etc |
8+
| urlHelpers | [UrlHelpers](./?path=/docs/components-cioplp--props#urlhelpers) | Url Helpers are used for managing the url and request state |
9+
| callbacks | [Callbacks](./?path=/docs/components-cioplp--props#callbacks) | Callback functions to be composed with the library's internal tracking calls |

0 commit comments

Comments
 (0)