diff --git a/docs/PREACT_RECOMMENDATIONS.md b/docs/PREACT_RECOMMENDATIONS.md index 0f5a14650..c6cd18828 100644 --- a/docs/PREACT_RECOMMENDATIONS.md +++ b/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 && 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 && console.log("added to cart", e)} title={parameters?.title} />; -}); -``` \ No newline at end of file +See [Getting Started > Github Setup](https://searchspring.github.io/snap/#/start-github) \ No newline at end of file diff --git a/packages/snap-preact-components/src/components/Molecules/Carousel/readme.md b/packages/snap-preact-components/src/components/Molecules/Carousel/readme.md index f2f719c8c..ef7a5493d 100644 --- a/packages/snap-preact-components/src/components/Molecules/Carousel/readme.md +++ b/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 diff --git a/packages/snap-preact-components/src/components/Organisms/Recommendation/readme.md b/packages/snap-preact-components/src/components/Organisms/Recommendation/readme.md index c34a265f2..79c9008b1 100644 --- a/packages/snap-preact-components/src/components/Organisms/Recommendation/readme.md +++ b/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 diff --git a/packages/snap-preact/README.md b/packages/snap-preact/README.md index da9022ea6..5646b1cf6 100644 --- a/packages/snap-preact/README.md +++ b/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` diff --git a/packages/snap-preact/src/Instantiators/RecommendationInstantiator.tsx b/packages/snap-preact/src/Instantiators/RecommendationInstantiator.tsx index 426d5a25d..d7440b0ff 100644 --- a/packages/snap-preact/src/Instantiators/RecommendationInstantiator.tsx +++ b/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: {