Reco-slider NPM

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/js-cookie@3.0.1/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.

@infinitebrahmanuniverse/nolb-reco @everything-registry/sub-chunk-2632

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago