@bikematrix/web-components 1.0.5 → 1.0.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.
Files changed (5) hide show
  1. package/README.md +462 -462
  2. package/dist/bm_core.es.js +8727 -8727
  3. package/dist/bm_core.js +28 -28
  4. package/dist/bm_core.umd.js +28 -28
  5. package/package.json +34 -34
package/README.md CHANGED
@@ -1,462 +1,462 @@
1
- # Bike Matrix Web Components
2
-
3
- A web component library for integrating bike matrix compatibility checking into your e-commerce platform.
4
-
5
- ## Table of Contents
6
-
7
- - [Installation](#installation)
8
- - [Getting Started](#getting-started)
9
- - [Configuration](#configuration)
10
- - [Web Components](#web-components)
11
- - [Bike Selector](#bike-selector)
12
- - [Bike Selector Banner](#bike-selector-banner)
13
- - [Product Result](#product-result)
14
- - [Collection Result](#collection-result)
15
- - [Compatible List](#compatible-list)
16
- - [API Reference](#api-reference)
17
- - [Framework Integration](#framework-integration)
18
- - [Common Scenarios](#common-scenarios)
19
-
20
- ## Installation
21
-
22
- You can install Bike Matrix Web Components using either npm or by including it directly via CDN.
23
-
24
- ### NPM
25
-
26
- ```bash
27
- npm install @bikematrix/web-component
28
- ```
29
-
30
- Then import it in your application:
31
-
32
- ```javascript
33
- import BikeMatrix from "@bikematrix/web-component";
34
- ```
35
-
36
- ### CDN
37
-
38
- Alternatively, include the script directly in your HTML:
39
-
40
- ```html
41
- <script
42
- type="module"
43
- src="https://cdn.jsdelivr.net/npm/@bikematrix/web-component"
44
- ></script>
45
- ```
46
-
47
- ## Getting Started
48
-
49
- Follow these steps to quickly integrate BikeMatrix into your website:
50
-
51
- ### 1. Add the Script
52
-
53
- Choose one of these options to add BikeMatrix to your project:
54
-
55
- #### Option A: NPM Installation
56
-
57
- ```bash
58
- npm install @bikematrix/web-component
59
- ```
60
-
61
- Then import it in your JavaScript/TypeScript file:
62
-
63
- ```javascript
64
- import BikeMatrix from "@bikematrix/web-component";
65
- ```
66
-
67
- #### Option B: CDN Installation
68
-
69
- Include the script directly in your HTML:
70
-
71
- ```html
72
- <script
73
- type="module"
74
- src="https://cdn.jsdelivr.net/npm/@bikematrix/web-component"
75
- ></script>
76
- ```
77
-
78
- ### 2. Configure BikeMatrix
79
-
80
- Add the core configuration block to your HTML:
81
-
82
- ```html
83
- <script type="application/json" data-bikematrix-config>
84
- {
85
- "apiUrl": "YOUR_API_URL",
86
- "pageType": "collection",
87
- "currentCollectionHandle": "brake-pads",
88
- "collections": [
89
- {
90
- "title": "Brake pads",
91
- "handle": "brake-pads",
92
- "url": "/collections/brake-pads"
93
- }
94
- ],
95
- "categories": [
96
- {
97
- "title": "Brake Pads",
98
- "text_id": "category_brakepads",
99
- "collection": "Brake pads"
100
- }
101
- ]
102
- }
103
- </script>
104
- ```
105
-
106
- ### 3. Add Basic Components
107
-
108
- Add these components to your HTML:
109
-
110
- ```html
111
- <!-- Header or navigation -->
112
- <button id="bm_selectBikeButton">Select Bike</button>
113
- <bikematrix-bikeselector></bikematrix-bikeselector>
114
-
115
- <!-- Detailed product page -->
116
- <bikematrix-productresult data-sku="PRODUCT_SKU"></bikematrix-productresult>
117
-
118
- <!-- Product cards on collection pages -->
119
- <bikematrix-collectionresult
120
- data-product-id="PRODUCT_ID"
121
- data-product-skus="PRODUCT_SKU1,PRODUCT_SKU2"
122
- ></bikematrix-collectionresult>
123
- ```
124
-
125
- ### 4. Initialize BikeMatrix
126
-
127
- The initialization step depends on your installation method:
128
-
129
- #### When using NPM
130
-
131
- Add the initialization code where appropriate in your application's lifecycle:
132
-
133
- ```javascript
134
- BikeMatrix.init();
135
- ```
136
-
137
- #### When using CDN
138
-
139
- The initialization happens automatically when you import the package, so no additional initialization code is needed.
140
-
141
- ### 5. Test the Integration
142
-
143
- 1. Open your webpage
144
- 2. Click the "Select Bike" button
145
- 3. Choose a bike from the selector
146
- 4. Check that both the product result and collection result components display the correct compatibility information
147
-
148
- For more advanced configurations and component options, see the sections below.
149
-
150
- ## Configuration
151
-
152
- BikeMatrix is configured using a JSON configuration block in your HTML:
153
-
154
- ```html
155
- <script type="application/json" data-bikematrix-config>
156
- {
157
- "apiUrl": "YOUR_API_URL",
158
- "pageType": "collection",
159
- "currentCollectionHandle": "brake-pads",
160
- "collections": [
161
- {
162
- "title": "Brake pads",
163
- "handle": "brake-pads",
164
- "url": "/collections/brake-pads"
165
- }
166
- ],
167
- "categories": [
168
- {
169
- "title": "Brake Pads",
170
- "text_id": "category_brakepads",
171
- "collection": "Brake pads"
172
- }
173
- ]
174
- }
175
- </script>
176
- ```
177
-
178
- These can be used multiple times throughout your HTML, with the configuration options being merged together sequentially.
179
-
180
- ### Configuration Options
181
-
182
- Configuration options for BikeMatrix components, organized by feature area.
183
-
184
- #### Core Configuration
185
-
186
- | Option | Type | Default | Description |
187
- | ------------------------- | ----------------------------------------------------------- | ------------ | ------------------------------------------------ |
188
- | `apiUrl` | string | _(Required)_ | Your BikeMatrix API endpoint URL |
189
- | `pageType` | "collection" \| "product" \| "index" \| "search" | "index" | Current page type |
190
- | `currentCollectionHandle` | string | "" | Handle of the current collection |
191
- | `collections` | Array<{title: string, handle: string, url: string}> | [] | List of available collections with their details |
192
- | `categories` | Array<{title: string, text_id: string, collection: string}> | [] | List of product categories and their mappings |
193
- | `isHomePage` | boolean | false | Whether current page is home page |
194
- | `isSearchPage` | boolean | false | Whether current page is search page |
195
- | `logLevel` | "none" \| "verbose" | "none" | Logging verbosity level |
196
-
197
- #### Bike Selector Configuration
198
-
199
- | Option | Type | Default | Description |
200
- | -------------------- | ------ | ------- | ------------------------------------------------------------- |
201
- | `bikeSelectorBrands` | string | "" | Comma separated string of specific brands to show in selector |
202
-
203
- #### Compatible List Configuration
204
-
205
- | Option | Type | Default | Description |
206
- | ----------------------------- | ---------------------------- | ------- | ---------------------------------- |
207
- | `products` | {[key: string]: ProductInfo} | {} | Detailed product information |
208
- | `collectionUrl` | string | "" | URL for the current collection |
209
- | `compatiblityListCurrentPage` | number | 0 | Current page in compatibility list |
210
- | `showCompatibleList` | boolean | true | Whether to show compatibility list |
211
-
212
- #### Collection Result Configuration
213
-
214
- | Option | Type | Default | Description |
215
- | -------------------------- | ------------------------- | ------- | ------------------------------------------ |
216
- | `productsCollections` | {[key: string]: string[]} | {} | Mapping of products to collections |
217
- | `showHomePageCollection` | boolean | false | Whether to show collections on home page |
218
- | `showSearchPageCollection` | boolean | false | Whether to show collections on search page |
219
-
220
- #### Product Result Configuration
221
-
222
- | Option | Type | Default | Description |
223
- | -------------------- | -------- | ------- | ---------------------------------- |
224
- | `productCollections` | string[] | [] | Collections the product belongs to |
225
-
226
- ## Web Components
227
-
228
- ### Bike Selector
229
-
230
- The core component for selecting a bike.
231
-
232
- #### Basic Button
233
-
234
- ```html
235
- <button id="bm_selectBikeButton">Select Bike</button>
236
- <bikematrix-bikeselector></bikematrix-bikeselector>
237
- ```
238
-
239
- #### Button with Bike Icon
240
-
241
- ```html
242
- <button id="bm_selectBikeButton">
243
- <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
244
- <path
245
- d="M15.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM5 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5zm5.8-10l2.4-2.4.8.8c1.3 1.3 3 2.1 5.1 2.1V9c-1.5 0-2.7-.6-3.6-1.5l-1.9-1.9c-.5-.4-1-.6-1.6-.6s-1.1.2-1.4.6L7.8 8.4c-.4.4-.6.9-.6 1.4 0 .6.2 1.1.6 1.4L11 14v5h2v-6.2l-2.2-2.3zM19 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"
246
- />
247
- </svg>
248
- </button>
249
- <bikematrix-bikeselector></bikematrix-bikeselector>
250
- ```
251
-
252
- [Configuration options](#bike-selector-configuration)
253
-
254
- ### Bike Selector Banner
255
-
256
- Displays the currently selected bike.
257
-
258
- ```html
259
- <bikematrix-bikeselectorbanner
260
- data-title="Bike Selector Banner"
261
- data-color="#000000"
262
- data-full-width="false"
263
- data-font-color="#ffffff"
264
- data-show="true"
265
- ></bikematrix-bikeselectorbanner>
266
- ```
267
-
268
- Attributes:
269
-
270
- - `data-title`: Banner title
271
- - `data-color`: Background color
272
- - `data-full-width`: Whether banner spans full width
273
- - `data-font-color`: Text color
274
- - `data-show`: Whether banner is visible
275
-
276
- ### Product Result
277
-
278
- Shows compatibility for a single product.
279
-
280
- ```html
281
- <bikematrix-productresult data-sku="PRODUCT_SKU" />
282
- ```
283
-
284
- Attributes:
285
-
286
- - `data-sku`: Product SKU to check compatibility
287
-
288
- [Configuration options](#product-result-configuration)
289
-
290
- ### Collection Result
291
-
292
- Shows compatibility for products in a collection.
293
-
294
- ```html
295
- <bikematrix-collectionresult
296
- data-product-id="PRODUCT_ID"
297
- data-product-skus="SKU1,SKU2"
298
- />
299
- ```
300
-
301
- Attributes:
302
-
303
- - `data-product-id`: Product ID
304
- - `data-product-skus`: Comma-separated list of SKUs
305
-
306
- [Configuration options](#collection-result-configuration)
307
-
308
- ### Compatible List
309
-
310
- Displays a list of compatible products.
311
-
312
- ```html
313
- <bikematrix-compatiblelist data-title="Compatible Products">
314
- <!-- Product Card Template (optional) -->
315
- <template slot="product-card">
316
- <div class="bm-compatible-product-wrapper">
317
- <div class="bm-compatible-product-image">
318
- <a href="{{productUrl}}">
319
- <img src="{{featuredImage}}" width="80px" alt="" loading="lazy" />
320
- </a>
321
- </div>
322
- <div class="bm-compatible-product-title">
323
- <a href="{{productUrl}}">{{ productTitle }}</a>
324
- </div>
325
- <div class="bm-compatible-product-price">
326
- <a href="{{productUrl}}">
327
- <p><strong>{{ price }}</strong></p>
328
- </a>
329
- </div>
330
- {{ compatibility }}
331
- </div>
332
- </template>
333
- <!-- End of Product Card Template -->
334
- </bikematrix-compatiblelist>
335
- ```
336
-
337
- Attributes:
338
-
339
- - `data-title`: List title
340
-
341
- Default template variables:
342
-
343
- - `{{productUrl}}`: Product page URL
344
- - `{{featuredImage}}`: Product image URL
345
- - `{{productTitle}}`: Product name
346
- - `{{price}}`: Product price
347
- - `{{compatibility}}`: Compatibility status
348
-
349
- [Configuration options](#compatible-list-configuration)
350
-
351
- ## API Reference
352
-
353
- The BikeMatrix global object provides several methods:
354
-
355
- ```javascript
356
- // Initialize BikeMatrix (config is optional)
357
- BikeMatrix.init(config);
358
-
359
- // Check initialization status
360
- BikeMatrix.isInitialized();
361
-
362
- // Refresh compatibility data
363
- BikeMatrix.refresh();
364
-
365
- // Reset to initial state
366
- BikeMatrix.reset();
367
-
368
- // Reload components
369
- BikeMatrix.reload();
370
-
371
- // Clean up BikeMatrix
372
- BikeMatrix.destroy();
373
-
374
- // Update configuration
375
- BikeMatrix.updateConfig(config);
376
-
377
- // Get current configuration
378
- BikeMatrix.getConfig();
379
-
380
- // Get current bike
381
- BikeMatrix.getCurrentBike();
382
-
383
- // Get subscription status
384
- BikeMatrix.getActiveSubscription();
385
-
386
- // Update product result SKU
387
- BikeMatrix.updateSku(sku);
388
- ```
389
-
390
- ## Framework Integration
391
-
392
- ### React Snippet
393
-
394
- ```jsx
395
- import { useEffect } from "react";
396
- import BikeMatrix from "@bikematrix/web-component";
397
-
398
- function BikeMatrixCore() {
399
- useEffect(() => {
400
- BikeMatrix.init();
401
- return () => BikeMatrix.destroy();
402
- }, []);
403
-
404
- return null;
405
- }
406
- ```
407
-
408
- ### Vue Snippet
409
-
410
- ```html
411
- <script setup>
412
- import { onMounted, onBeforeUnmount } from "vue";
413
- import BikeMatrix from "@bikematrix/web-component";
414
-
415
- onMounted(() => {
416
- BikeMatrix.init();
417
- });
418
-
419
- onBeforeUnmount(() => {
420
- BikeMatrix.destroy();
421
- });
422
- </script>
423
- ```
424
-
425
- ### Complete Examples
426
-
427
- - [HTML](./basic)
428
- - [NextJS](./nextjs)
429
- - [PHP](./php)
430
- - [React](./react)
431
- - [Vue](./vue)
432
-
433
- ## Common Scenarios
434
-
435
- ### Reloading components after route change or dynamic content updates
436
-
437
- ```javascript
438
- // After route change or dynamic content updates
439
- BikeMatrix.reload();
440
- ```
441
-
442
- ### Updating collection data when switching between collections
443
-
444
- ```javascript
445
- // After switching between collections
446
- BikeMatrix.updateConfig({
447
- currentCollectionHandle: "new-collection",
448
- products: {
449
- // Updated collection products
450
- },
451
- });
452
- ```
453
-
454
- ### Updating product SKU when switching between product variants on a product page
455
-
456
- ```javascript
457
- function onSelectVariant(sku) {
458
- // Variant selection logic here...
459
-
460
- BikeMatrix.updateSku(sku);
461
- }
462
- ```
1
+ # Bike Matrix Web Components
2
+
3
+ A web component library for integrating bike matrix compatibility checking into your e-commerce platform.
4
+
5
+ ## Table of Contents
6
+
7
+ - [Installation](#installation)
8
+ - [Getting Started](#getting-started)
9
+ - [Configuration](#configuration)
10
+ - [Web Components](#web-components)
11
+ - [Bike Selector](#bike-selector)
12
+ - [Bike Selector Banner](#bike-selector-banner)
13
+ - [Product Result](#product-result)
14
+ - [Collection Result](#collection-result)
15
+ - [Compatible List](#compatible-list)
16
+ - [API Reference](#api-reference)
17
+ - [Framework Integration](#framework-integration)
18
+ - [Common Scenarios](#common-scenarios)
19
+
20
+ ## Installation
21
+
22
+ You can install Bike Matrix Web Components using either npm or by including it directly via CDN.
23
+
24
+ ### NPM
25
+
26
+ ```bash
27
+ npm install @bikematrix/web-components
28
+ ```
29
+
30
+ Then import it in your application:
31
+
32
+ ```javascript
33
+ import BikeMatrix from "@bikematrix/web-components";
34
+ ```
35
+
36
+ ### CDN
37
+
38
+ Alternatively, include the script directly in your HTML:
39
+
40
+ ```html
41
+ <script
42
+ type="module"
43
+ src="https://cdn.jsdelivr.net/npm/@bikematrix/web-components"
44
+ ></script>
45
+ ```
46
+
47
+ ## Getting Started
48
+
49
+ Follow these steps to quickly integrate BikeMatrix into your website:
50
+
51
+ ### 1. Add the Script
52
+
53
+ Choose one of these options to add BikeMatrix to your project:
54
+
55
+ #### Option A: NPM Installation
56
+
57
+ ```bash
58
+ npm install @bikematrix/web-components
59
+ ```
60
+
61
+ Then import it in your JavaScript/TypeScript file:
62
+
63
+ ```javascript
64
+ import BikeMatrix from "@bikematrix/web-components";
65
+ ```
66
+
67
+ #### Option B: CDN Installation
68
+
69
+ Include the script directly in your HTML:
70
+
71
+ ```html
72
+ <script
73
+ type="module"
74
+ src="https://cdn.jsdelivr.net/npm/@bikematrix/web-components"
75
+ ></script>
76
+ ```
77
+
78
+ ### 2. Configure BikeMatrix
79
+
80
+ Add the core configuration block to your HTML:
81
+
82
+ ```html
83
+ <script type="application/json" data-bikematrix-config>
84
+ {
85
+ "apiUrl": "YOUR_API_URL",
86
+ "pageType": "collection",
87
+ "currentCollectionHandle": "brake-pads",
88
+ "collections": [
89
+ {
90
+ "title": "Brake pads",
91
+ "handle": "brake-pads",
92
+ "url": "/collections/brake-pads"
93
+ }
94
+ ],
95
+ "categories": [
96
+ {
97
+ "title": "Brake Pads",
98
+ "text_id": "category_brakepads",
99
+ "collection": "Brake pads"
100
+ }
101
+ ]
102
+ }
103
+ </script>
104
+ ```
105
+
106
+ ### 3. Add Basic Components
107
+
108
+ Add these components to your HTML:
109
+
110
+ ```html
111
+ <!-- Header or navigation -->
112
+ <button id="bm_selectBikeButton">Select Bike</button>
113
+ <bikematrix-bikeselector></bikematrix-bikeselector>
114
+
115
+ <!-- Detailed product page -->
116
+ <bikematrix-productresult data-sku="PRODUCT_SKU"></bikematrix-productresult>
117
+
118
+ <!-- Product cards on collection pages -->
119
+ <bikematrix-collectionresult
120
+ data-product-id="PRODUCT_ID"
121
+ data-product-skus="PRODUCT_SKU1,PRODUCT_SKU2"
122
+ ></bikematrix-collectionresult>
123
+ ```
124
+
125
+ ### 4. Initialize BikeMatrix
126
+
127
+ The initialization step depends on your installation method:
128
+
129
+ #### When using NPM
130
+
131
+ Add the initialization code where appropriate in your application's lifecycle:
132
+
133
+ ```javascript
134
+ BikeMatrix.init();
135
+ ```
136
+
137
+ #### When using CDN
138
+
139
+ The initialization happens automatically when you import the package, so no additional initialization code is needed.
140
+
141
+ ### 5. Test the Integration
142
+
143
+ 1. Open your webpage
144
+ 2. Click the "Select Bike" button
145
+ 3. Choose a bike from the selector
146
+ 4. Check that both the product result and collection result components display the correct compatibility information
147
+
148
+ For more advanced configurations and component options, see the sections below.
149
+
150
+ ## Configuration
151
+
152
+ BikeMatrix is configured using a JSON configuration block in your HTML:
153
+
154
+ ```html
155
+ <script type="application/json" data-bikematrix-config>
156
+ {
157
+ "apiUrl": "YOUR_API_URL",
158
+ "pageType": "collection",
159
+ "currentCollectionHandle": "brake-pads",
160
+ "collections": [
161
+ {
162
+ "title": "Brake pads",
163
+ "handle": "brake-pads",
164
+ "url": "/collections/brake-pads"
165
+ }
166
+ ],
167
+ "categories": [
168
+ {
169
+ "title": "Brake Pads",
170
+ "text_id": "category_brakepads",
171
+ "collection": "Brake pads"
172
+ }
173
+ ]
174
+ }
175
+ </script>
176
+ ```
177
+
178
+ These can be used multiple times throughout your HTML, with the configuration options being merged together sequentially.
179
+
180
+ ### Configuration Options
181
+
182
+ Configuration options for BikeMatrix components, organized by feature area.
183
+
184
+ #### Core Configuration
185
+
186
+ | Option | Type | Default | Description |
187
+ | ------------------------- | ----------------------------------------------------------- | ------------ | ------------------------------------------------ |
188
+ | `apiUrl` | string | _(Required)_ | Your BikeMatrix API endpoint URL |
189
+ | `pageType` | "collection" \| "product" \| "index" \| "search" | "index" | Current page type |
190
+ | `currentCollectionHandle` | string | "" | Handle of the current collection |
191
+ | `collections` | Array<{title: string, handle: string, url: string}> | [] | List of available collections with their details |
192
+ | `categories` | Array<{title: string, text_id: string, collection: string}> | [] | List of product categories and their mappings |
193
+ | `isHomePage` | boolean | false | Whether current page is home page |
194
+ | `isSearchPage` | boolean | false | Whether current page is search page |
195
+ | `logLevel` | "none" \| "verbose" | "none" | Logging verbosity level |
196
+
197
+ #### Bike Selector Configuration
198
+
199
+ | Option | Type | Default | Description |
200
+ | -------------------- | ------ | ------- | ------------------------------------------------------------- |
201
+ | `bikeSelectorBrands` | string | "" | Comma separated string of specific brands to show in selector |
202
+
203
+ #### Compatible List Configuration
204
+
205
+ | Option | Type | Default | Description |
206
+ | ----------------------------- | ---------------------------- | ------- | ---------------------------------- |
207
+ | `products` | {[key: string]: ProductInfo} | {} | Detailed product information |
208
+ | `collectionUrl` | string | "" | URL for the current collection |
209
+ | `compatiblityListCurrentPage` | number | 0 | Current page in compatibility list |
210
+ | `showCompatibleList` | boolean | true | Whether to show compatibility list |
211
+
212
+ #### Collection Result Configuration
213
+
214
+ | Option | Type | Default | Description |
215
+ | -------------------------- | ------------------------- | ------- | ------------------------------------------ |
216
+ | `productsCollections` | {[key: string]: string[]} | {} | Mapping of products to collections |
217
+ | `showHomePageCollection` | boolean | false | Whether to show collections on home page |
218
+ | `showSearchPageCollection` | boolean | false | Whether to show collections on search page |
219
+
220
+ #### Product Result Configuration
221
+
222
+ | Option | Type | Default | Description |
223
+ | -------------------- | -------- | ------- | ---------------------------------- |
224
+ | `productCollections` | string[] | [] | Collections the product belongs to |
225
+
226
+ ## Web Components
227
+
228
+ ### Bike Selector
229
+
230
+ The core component for selecting a bike.
231
+
232
+ #### Basic Button
233
+
234
+ ```html
235
+ <button id="bm_selectBikeButton">Select Bike</button>
236
+ <bikematrix-bikeselector></bikematrix-bikeselector>
237
+ ```
238
+
239
+ #### Button with Bike Icon
240
+
241
+ ```html
242
+ <button id="bm_selectBikeButton">
243
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
244
+ <path
245
+ d="M15.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM5 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5zm5.8-10l2.4-2.4.8.8c1.3 1.3 3 2.1 5.1 2.1V9c-1.5 0-2.7-.6-3.6-1.5l-1.9-1.9c-.5-.4-1-.6-1.6-.6s-1.1.2-1.4.6L7.8 8.4c-.4.4-.6.9-.6 1.4 0 .6.2 1.1.6 1.4L11 14v5h2v-6.2l-2.2-2.3zM19 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"
246
+ />
247
+ </svg>
248
+ </button>
249
+ <bikematrix-bikeselector></bikematrix-bikeselector>
250
+ ```
251
+
252
+ [Configuration options](#bike-selector-configuration)
253
+
254
+ ### Bike Selector Banner
255
+
256
+ Displays the currently selected bike.
257
+
258
+ ```html
259
+ <bikematrix-bikeselectorbanner
260
+ data-title="Bike Selector Banner"
261
+ data-color="#000000"
262
+ data-full-width="false"
263
+ data-font-color="#ffffff"
264
+ data-show="true"
265
+ ></bikematrix-bikeselectorbanner>
266
+ ```
267
+
268
+ Attributes:
269
+
270
+ - `data-title`: Banner title
271
+ - `data-color`: Background color
272
+ - `data-full-width`: Whether banner spans full width
273
+ - `data-font-color`: Text color
274
+ - `data-show`: Whether banner is visible
275
+
276
+ ### Product Result
277
+
278
+ Shows compatibility for a single product.
279
+
280
+ ```html
281
+ <bikematrix-productresult data-sku="PRODUCT_SKU" />
282
+ ```
283
+
284
+ Attributes:
285
+
286
+ - `data-sku`: Product SKU to check compatibility
287
+
288
+ [Configuration options](#product-result-configuration)
289
+
290
+ ### Collection Result
291
+
292
+ Shows compatibility for products in a collection.
293
+
294
+ ```html
295
+ <bikematrix-collectionresult
296
+ data-product-id="PRODUCT_ID"
297
+ data-product-skus="SKU1,SKU2"
298
+ />
299
+ ```
300
+
301
+ Attributes:
302
+
303
+ - `data-product-id`: Product ID
304
+ - `data-product-skus`: Comma-separated list of SKUs
305
+
306
+ [Configuration options](#collection-result-configuration)
307
+
308
+ ### Compatible List
309
+
310
+ Displays a list of compatible products.
311
+
312
+ ```html
313
+ <bikematrix-compatiblelist data-title="Compatible Products">
314
+ <!-- Product Card Template (optional) -->
315
+ <template slot="product-card">
316
+ <div class="bm-compatible-product-wrapper">
317
+ <div class="bm-compatible-product-image">
318
+ <a href="{{productUrl}}">
319
+ <img src="{{featuredImage}}" width="80px" alt="" loading="lazy" />
320
+ </a>
321
+ </div>
322
+ <div class="bm-compatible-product-title">
323
+ <a href="{{productUrl}}">{{ productTitle }}</a>
324
+ </div>
325
+ <div class="bm-compatible-product-price">
326
+ <a href="{{productUrl}}">
327
+ <p><strong>{{ price }}</strong></p>
328
+ </a>
329
+ </div>
330
+ {{ compatibility }}
331
+ </div>
332
+ </template>
333
+ <!-- End of Product Card Template -->
334
+ </bikematrix-compatiblelist>
335
+ ```
336
+
337
+ Attributes:
338
+
339
+ - `data-title`: List title
340
+
341
+ Default template variables:
342
+
343
+ - `{{productUrl}}`: Product page URL
344
+ - `{{featuredImage}}`: Product image URL
345
+ - `{{productTitle}}`: Product name
346
+ - `{{price}}`: Product price
347
+ - `{{compatibility}}`: Compatibility status
348
+
349
+ [Configuration options](#compatible-list-configuration)
350
+
351
+ ## API Reference
352
+
353
+ The BikeMatrix global object provides several methods:
354
+
355
+ ```javascript
356
+ // Initialize BikeMatrix (config is optional)
357
+ BikeMatrix.init(config);
358
+
359
+ // Check initialization status
360
+ BikeMatrix.isInitialized();
361
+
362
+ // Refresh compatibility data
363
+ BikeMatrix.refresh();
364
+
365
+ // Reset to initial state
366
+ BikeMatrix.reset();
367
+
368
+ // Reload components
369
+ BikeMatrix.reload();
370
+
371
+ // Clean up BikeMatrix
372
+ BikeMatrix.destroy();
373
+
374
+ // Update configuration
375
+ BikeMatrix.updateConfig(config);
376
+
377
+ // Get current configuration
378
+ BikeMatrix.getConfig();
379
+
380
+ // Get current bike
381
+ BikeMatrix.getCurrentBike();
382
+
383
+ // Get subscription status
384
+ BikeMatrix.getActiveSubscription();
385
+
386
+ // Update product result SKU
387
+ BikeMatrix.updateSku(sku);
388
+ ```
389
+
390
+ ## Framework Integration
391
+
392
+ ### React Snippet
393
+
394
+ ```jsx
395
+ import { useEffect } from "react";
396
+ import BikeMatrix from "@bikematrix/web-components";
397
+
398
+ function BikeMatrixCore() {
399
+ useEffect(() => {
400
+ BikeMatrix.init();
401
+ return () => BikeMatrix.destroy();
402
+ }, []);
403
+
404
+ return null;
405
+ }
406
+ ```
407
+
408
+ ### Vue Snippet
409
+
410
+ ```html
411
+ <script setup>
412
+ import { onMounted, onBeforeUnmount } from "vue";
413
+ import BikeMatrix from "@bikematrix/web-components";
414
+
415
+ onMounted(() => {
416
+ BikeMatrix.init();
417
+ });
418
+
419
+ onBeforeUnmount(() => {
420
+ BikeMatrix.destroy();
421
+ });
422
+ </script>
423
+ ```
424
+
425
+ ### Complete Examples
426
+
427
+ - [HTML](./basic)
428
+ - [NextJS](./nextjs)
429
+ - [PHP](./php)
430
+ - [React](./react)
431
+ - [Vue](./vue)
432
+
433
+ ## Common Scenarios
434
+
435
+ ### Reloading components after route change or dynamic content updates
436
+
437
+ ```javascript
438
+ // After route change or dynamic content updates
439
+ BikeMatrix.reload();
440
+ ```
441
+
442
+ ### Updating collection data when switching between collections
443
+
444
+ ```javascript
445
+ // After switching between collections
446
+ BikeMatrix.updateConfig({
447
+ currentCollectionHandle: "new-collection",
448
+ products: {
449
+ // Updated collection products
450
+ },
451
+ });
452
+ ```
453
+
454
+ ### Updating product SKU when switching between product variants on a product page
455
+
456
+ ```javascript
457
+ function onSelectVariant(sku) {
458
+ // Variant selection logic here...
459
+
460
+ BikeMatrix.updateSku(sku);
461
+ }
462
+ ```