@constructor-io/constructorio-ui-autocomplete 1.25.5 → 1.27.0
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 +24 -0
- package/dist/constructorio-ui-autocomplete-bundled.js +10 -10
- package/lib/cjs/constants.js +4 -2
- package/lib/cjs/hooks/useCioAutocomplete.js +23 -3
- package/lib/cjs/hooks/useCioClient.js +3 -2
- package/lib/cjs/hooks/useNormalizedProps.js +3 -3
- package/lib/cjs/utils/helpers.js +2 -2
- package/lib/cjs/utils/shopifyDefaults.js +48 -0
- package/lib/cjs/version.js +1 -1
- package/lib/mjs/constants.js +3 -1
- package/lib/mjs/hooks/useCioAutocomplete.js +23 -3
- package/lib/mjs/hooks/useCioClient.js +3 -2
- package/lib/mjs/hooks/useNormalizedProps.js +3 -3
- package/lib/mjs/utils/helpers.js +2 -2
- package/lib/mjs/utils/shopifyDefaults.js +44 -0
- package/lib/mjs/version.js +1 -1
- package/lib/types/constants.d.ts +1 -1
- package/lib/types/hooks/useDownShift.d.ts +1 -1
- package/lib/types/hooks/useNormalizedProps.d.ts +1 -1
- package/lib/types/types.d.ts +54 -8
- package/lib/types/utils/helpers.d.ts +1 -1
- package/lib/types/utils/shopifyDefaults.d.ts +13 -0
- package/lib/types/version.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
- [⚡ Installation & Quick Start](#-installation--quick-start)
|
|
30
30
|
- [Shopify](#shopify)
|
|
31
31
|
- [⚡ Installation & Quick Start](#-installation--quick-start-1)
|
|
32
|
+
- [🛍️ Shopify-Specific Defaults](#-shopify-specific-defaults)
|
|
32
33
|
- [Bundle (Vanilla JS)](#bundle-vanilla-js)
|
|
33
34
|
- [⚡ Installation & Quick Start](#-installation--quick-start-2)
|
|
34
35
|
- [💡 Code Examples](#-code-examples)
|
|
@@ -89,6 +90,29 @@ After installing the app, you can use the Constructor autocomplete component by
|
|
|
89
90
|
|
|
90
91
|
For more in depth instructions, check out the [Shopify documentation](https://docs.constructor.com/docs/integrating-with-constructor-platform-connectors-frontend-connectors-shopify-ui).
|
|
91
92
|
|
|
93
|
+
### 🛍️ Shopify-Specific Defaults
|
|
94
|
+
|
|
95
|
+
When integrating with Shopify themes, you can use the `useShopifyDefaults` prop to enable automatic navigation handling:
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
<CioAutocomplete
|
|
99
|
+
apiKey="your-api-key"
|
|
100
|
+
useShopifyDefaults={true}
|
|
101
|
+
shopifySettings={{ searchUrl: '/search' }}
|
|
102
|
+
/>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
**What it does:**
|
|
106
|
+
- **Product selections**: Automatically redirects to the product detail page
|
|
107
|
+
- **Search suggestions**: Redirects to the search results page with the selected query
|
|
108
|
+
- **Manual search**: Redirects to the search results page with the entered query
|
|
109
|
+
- **Query parameters**: Preserves all existing URL query parameters (e.g., UTM parameters)
|
|
110
|
+
|
|
111
|
+
**Configuration:**
|
|
112
|
+
- `shopifySettings.searchUrl`: The search results page URL (e.g: `'{{ block.settings.search_url }}'` for Liquid templates)
|
|
113
|
+
|
|
114
|
+
**Note:** When `useShopifyDefaults={true}`, any custom `onSubmit` handler you provide will override the default behavior.
|
|
115
|
+
|
|
92
116
|
## Bundle (Vanilla JS)
|
|
93
117
|
This is a framework agnostic method that can be used in any JavaScript project. The CioAutocomplete function provides a simple interface to inject an entire Autocomplete UI into the provided selector. In addition to Autocomplete component props, this function also accepts a selector and includeCSS.
|
|
94
118
|
|