You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A UI Library that provides React components to manage the fetching and rendering logic for [Search](https://constructor.io/products/search/) & [Browse](https://constructor.io/products/browse/) pages powered by Constructor.io. Typescript support is available.
7
+
A UI library that provides React components to manage the fetching and rendering logic for [Search](https://constructor.io/products/search/) & [Browse](https://constructor.io/products/browse/)product listing pages powered by Constructor. Typescript support is available.
8
8
9
-
Our [Storybook Docs](https://constructor-io.github.io/constructorio-ui-plp/?path=/docs/general-introduction--documentation) are the best place to explore the behavior and the available configuration options for this UI Library.
9
+
Our [Storybook Docs](https://constructor-io.github.io/constructorio-ui-plp/?path=/docs/general-introduction--documentation) are the best place to explore the behavior and the available configuration options for this UI library.
10
10
11
11
## Installation
12
12
@@ -32,52 +32,53 @@ function YourComponent() {
32
32
}
33
33
```
34
34
35
-
### Using the Javascript Bundle
35
+
### Using the JavaScript Bundle
36
36
37
37
This is a framework agnostic method that can be used in any JavaScript project. The `CioPlp` function provides a simple interface to inject an entire PLP UI into the provided `selector`.
38
+
38
39
In addition to [PLP component props](https://constructor-io.github.io/constructorio-ui-plp/?path=/docs/plp-component--docs), this function also accepts `selector` and `includeCSS`.
-These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
64
+
-The starter styles can be used as a foundation to build on top of, or as a reference to be replaced completely.
64
65
- To opt out of all default styling, simply do not import the `styles.css` stylesheet.
65
-
- All starter styles in this library are scoped within the `.cio-plp`css selector.
66
-
-These starter styles are intended to be extended by layering in your own css rules
67
-
- If you import the starter styles, `CioPlp` component will take up the full width and height of its parent container
66
+
- All starter styles in this library are scoped within the `.cio-plp`CSS selector.
67
+
-The starter styles are intended to be extended by layering in your own CSS rules.
68
+
- If the starter styles are imported, `CioPlp` component will take up the full width and height of the parent container.
68
69
69
70
> Please note the starter styles utilize @container queries and enable responsive styles for our PLPs based on the size of their container element. Since this feature is supported by modern browsers, polyfills have not been included in this library. However, if you want to support older browsers, you can add fallback styles or use a [polyfill](https://github.com/GoogleChromeLabs/container-query-polyfill).
70
71
71
72
## Troubleshooting
72
73
73
74
### Known Issues
74
75
75
-
**Older Javascript environments**
76
+
**Older JavaScript environments**
76
77
77
-
The library provides two different builds. CommonJS (cjs) and ECMAScript Modules (mjs)
78
+
The library provides two different builds: CommonJS (cjs) and ECMAScript Modules (mjs).
78
79
79
-
For ECMAScript Modules (mjs) build. The Javascript version is ESNext which might not be supported by your environment.
80
-
If that's the case and your environment is using an older Javascript version like ES6 (ES2015), you might get this error.
80
+
For ECMAScript Modules (mjs) build. The JavaScript version is ESNext which might not be supported by your environment.
81
+
If that's the case and your environment is using an older JavaScript version like ES6 (ES2015), you may get this error:
81
82
82
83
`Module parse failed: Unexpected token (15:32)
83
84
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file`
@@ -92,27 +93,23 @@ There is a known issue with ESLint where it fails to resolve the paths exposed i
92
93
93
94
`Unable to resolve path to module '@constructor-io/constructorio-ui-plp/styles.css'`
0 commit comments