docs: addressing some documentation around recommendations

docs/PREACT_RECOMMENDATIONS.md

@@ -41,7 +41,7 @@ module.exports = {
 ```
 
 ## Default Template
-The Searchspring Management Console contains a `Default` template availble for all profiles that does not require the use of the Snapfu CLI to create a custom template. To use the `Default` template, the following instantiator config should be added to your `snap-preact` config.
+The Searchspring Management Console contains a `Default` template availble for standard profiles (non-bundle) that does not require the use of the Snapfu CLI to create a custom template. To use the `Default` template, the following instantiator config should be added to your `snap-preact` config.
 
 ```js
 instantiators: {
@@ -82,6 +82,51 @@ export const Recs = observer((props) => {
 });
 ```
 
+## Default Bundle Template
+The Searchspring Management Console also contains a `Bundle` template availble for bundle profiles, this template does not require the use of the Snapfu CLI to create a custom template. To use the `Bundle` template, another component mapping will need to be added to your `snap-preact` instantiator config.
+
+```js
+instantiators: {
+	recommendation: {
+		components: {
+			Default: async () => {
+				return (await import('./components/Recommendations/Recs')).Recs;
+			},
+			Bundle: async () => {
+				return (await import('./components/Recommendations/Bundled')).Bundled;
+			},
+		},
+		config: {
+			branch: BRANCHNAME || 'production',
+		},
+	},
+},
+```
+
+Note that the component is not required to be named `Bundle`, however `instantiators.recommendation.component` must contain the `Bundle` key as seen in the example above.
+
+The example Bundled component below uses the `RecommendationBundle` component imported from the snap component library. See [Components Preact > RecommendationBundle](https://searchspring.github.io/snap/#/components-preact?params=%3Fpath%3D%2Fstory%2Forganisms-recommendationbundle--default) for more details. 
+
+```jsx
+import { h } from 'preact';
+import { observer } from 'mobx-react';
+
+import { RecommendationBundle } from '@searchspring/snap-preact-components';
+
+export const Bundled = observer((props) => {
+	const controller = props.controller;
+	const store = controller?.store;
+
+	if (!controller.store.loaded && !controller.store.loading) {
+		controller.search();
+	}
+
+	const parameters = store?.profile?.display?.templateParameters;
+
+	return store.results.length > 0 && <RecommendationBundle controller={controller} onAddToCart={(items)=> console.log("need to add these to the platform cart", items)}  title={parameters?.title} />;
+});
+```
+
 ## Custom Template
 Let's look at how to setup a custom recommendation template using the Snapfu CLI. See [Getting Started > Setup](https://searchspring.github.io/snap/#/start-setup) for installing Snapfu.
 
@@ -91,7 +136,7 @@ There are three steps required for adding recommendations:
 - Updating our Snap config (see instantiator config above)
 
 ### Creating a new recommendation template
-To generate a new template, run the following at the root of the project. This command will prompt you to provide various inputs such as the template name, an optional description, and the path to the component.
+To generate a new template, run the following at the root of the project. This command will prompt you to provide various inputs such as the template type, template name, an optional description, and the path to the component.
 
 ```bash
 snapfu recs init
@@ -146,58 +191,4 @@ snapfu recs sync
 #### Syncing to multiple accounts
 To sync the template(s) to multiple accounts, multiple siteIds must be defined in the project's package.json file
 
-See [Getting Started > Github Setup](https://searchspring.github.io/snap/#/start-github)
-
-
-
-### Bundled Recommendations 
-
-Let's look at how to setup a bundled recommendation template. Although the instantiator config for a bundled recommendation is the same as any other recommendation type, there are some key changes that need to happen in the `.json` file, and of course in the component file. Both of these key changes will automatically be applied if setup using the Snapfu CLI, and `bundle` type is selected. 
-
-#### `.json` file parameters
-The `.json` file will look very similar to the other recommendation types with the key change being in the `type` value. This must now include the value `snap/recommendation/bundle`
-
-Example:
-```json
-{
-    "type": "snap/recommendation/bundle",
-    "name": "defaultrecommendations",
-    "label": "DefaultRecommendations",
-    "description": "DefaultRecommendations custom template",
-    "component": "DefaultRecommendations",
-    "orientation": "horizontal",
-    "parameters": [
-        {
-            "name": "title",
-            "label": "Title",
-            "description": "text used for the heading",
-            "defaultValue": "Recommended Products"
-        }
-    ]
-}
-```
-
-
-### Component file: 
-
-additionally the default component `.jsx` file included will look slightly different as it now uses the `BundledRecommendation` component imported from the snap component library. See [Components Preact > BundledRecommendation](https://searchspring.github.io/snap/#/components-preact) for more details.
-
-```jsx
-import { h } from 'preact';
-import { observer } from 'mobx-react';
-
-import { BundledRecommendation } from '@searchspring/snap-preact-components';
-
-export const Bundle = observer((props) => {
-	const controller = props.controller;
-	const store = controller?.store;
-
-	if (!controller.store.loaded && !controller.store.loading) {
-		controller.search();
-	}
-
-	const parameters = store?.profile?.display?.templateParameters;
-
-	return store.results.length > 0 && <BundledRecommendation controller={controller} onAddToCart={(e)=> console.log("added to cart", e)}  title={parameters?.title} />;
-});
-```
+See [Getting Started > Github Setup](https://searchspring.github.io/snap/#/start-github)

packages/snap-preact-components/src/components/Molecules/Carousel/readme.md

@@ -97,7 +97,7 @@ The `onInit` prop can be used to tie into the initialization event for swiper.
 ```
 
 ### modules
-The `modules` prop accepts additional [Swiper Modules](https://swiperjs.com/swiper-api#modules) - these may need additional props and or stylesheets to function. We include `Navigation` and `Pagination` modules by default.
+The `modules` prop accepts additional [Swiper Modules](https://swiperjs.com/swiper-api#modules) - these may need additional props and or stylesheets to function. We include `Navigation`, `Pagination` and `A11y` modules by default.
 
 ```jsx
 import { Scrollbar } from 'swiper';
@@ -110,11 +110,11 @@ The `autoAdjustSlides` prop when set to `false` will disable the carousel from a
 ### breakpoints
 An object that modifies the responsive behavior of the carousel at various viewports. 
 
-The object key specified the viewport for when the parameters will be applied. 
+The object key specifies the viewport for when the parameters will be applied. 
 
 The default configuration contains the following properties, however **`any Carousel props`** or [Swiper API parameters](https://swiperjs.com/react#swiper-props) can also be specified. 
 
-`slidesPerView` - number of products to display per page
+`slidesPerView` - number of products to display per page (for a peekaboo effect use a decimal number here)
 
 `slidesPerGroup` - number of products to scroll by when next/previous button is clicked
 

packages/snap-preact-components/src/components/Organisms/Recommendation/readme.md

@@ -81,7 +81,7 @@ The `nextButton` prop specifies the next button element of the carousel. This ca
 ```
 
 ### modules
-The `modules` prop accepts additional [Swiper Modules](https://swiperjs.com/swiper-api#modules) - these may need additional props and or stylesheets to function. We include `Navigation` and `Pagination` modules by default.
+The `modules` prop accepts additional [Swiper Modules](https://swiperjs.com/swiper-api#modules) - these may need additional props and or stylesheets to function. We include `Navigation`, `Pagination` and `A11y` modules by default.
 
 ```jsx
 import { Scrollbar } from 'swiper';
@@ -95,7 +95,7 @@ The object key specified the viewport for when the parameters will be applied.
 
 The default configuration contains the following properties, however **`any Recommendation props`**, or [Swiper API parameters](https://swiperjs.com/react#swiper-props) can also be specified. 
 
-`slidesPerView` - number of products to display per page
+`slidesPerView` - number of products to display per page (for a peekaboo effect use a decimal number here)
 
 `slidesPerGroup` - number of products to scroll by when next/previous button is clicked
 

packages/snap-preact/README.md

@@ -139,7 +139,7 @@ const config = {
 
 `recommendation.config.batched` - optional boolean (default: `true`) to batch multiple recommendations into a single network request
 
-`recommendation.selector` - optional selector to target recommendation instances if using a non-standard installation. Default selector: `script[type="searchspring/recommend"]`
+`recommendation.selector` - optional selector to target recommendation instances if using a non-standard installation. Selector provided will replace the default selector: `script[type="searchspring/recommend"], script[type="searchspring/personalized-recommendations"]`
 
 `recommendation.services` - optional object of `ControllerServices` 
 

packages/snap-preact/src/Instantiators/RecommendationInstantiator.tsx

@@ -96,9 +96,7 @@ export class RecommendationInstantiator {
 		this.targeter = new DomTargeter(
 			[
 				{
-					selector: `script[type="searchspring/recommend"], script[type="searchspring/personalized-recommendations"]${
-						this.config.selector ? ` , ${this.config.selector}` : ''
-					}`,
+					selector: this.config.selector || 'script[type="searchspring/recommend"], script[type="searchspring/personalized-recommendations"]',
 					autoRetarget: true,
 					clickRetarget: true,
 					inject: {