reco-slider
v0.1.9
Published
Carousel for Product Recommendations
Downloads
27
Readme
Recommendation Slider (RecoSlider) - Wiki
Carousel for product recommendations.
For Recommender System documentation see: https://recommender-system.github.io/
| Note that recommendations for the carousel component must be provided by a custom endpoint (e.g. see GitHub Repo reco-api)
CDN
Add the following link to the css file in your <head>
section:
<!-- needed by recoslider.js (START) -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css' />
<!-- needed by recoslider.js (END) -->
<!-- Add the recoslider-theme.css if you want default styling -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/reco-slider/recoslider/recoslider-theme.css'>
Then, before your closing <body>
tag add:
<!-- needed by recoslider.js (START) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'></script>
<!-- needed by recoslider.js (END) -->
<script src='https://cdn.jsdelivr.net/npm/reco-slider/recoslider/recoslider.min.js'></script>
Getting Started
Add a <div>
tag with a custom class name:
<div class="your-reco-slider"> </div>
Initialize the recoslider with (at least):
$(function () {
$('.your-reco-slider').recoSlider({
url: 'https://******' // replace with custom endpoint
});
});
Configuration
Available configuration fields for reco-slider
(beside slick slider congfiguration):
{
url: 'https://******', // replace with custom endpoint (or list of endpoints) -> sends ajax GET request for fetching items
varParams: {
item_id_seed: $("#example-product-id").innerText // dynamic attributes that will be added to URL attribute
},
urlProbs: [.2, .8, ...], // if URL attribute provides a list -> probabilites of sampling from URL list
title: 'Top Recommendations', // title above slider
evidenceUrl: 'https://******' // endpoint for tracking consumer interaction
}
Troubleshooting
SAP Commerce
- since jQuery is already loaded by SAP Commerce System, an error occurs by simply loading the snippets as describes above, saying that
... slick() is not a function
or...recoSlider() is not a function
. For solution see https://stackoverflow.com/questions/6109847/jquery-is-not-a-function-error. Also note that the SAP Commerce Plugin does NOT use$(function()...
to wait for the DOM to be loaded.