@magento/recommendations-js-sdk

Product Recommendations JavaScript SDK

📚 JavaScript library for retrieving and displaying product recommendations.

📦 Installation

This SDK can be pulled down from a CDN or installed as a module from NPM.

CDN

The latest version of the SDK is placed in the latest directory.

<script src="https://sdk.magento-datasolutions.com/latest/index.js"></script>

Specific versions are also published on the CDN under their respective directories.

<script src="https://sdk.magento-datasolutions.com/v0.0.24/index.js"></script>

NPM

npm install @magento/recommendations-js-sdk

🥑 Usage

import RecommendationsClient from "@magento/recommendations-js-sdk"

// create the client
const client = new RecommendationsClient()

// register pre-built recommendation unit
client.register({
    name: "people also viewed",
    type: "people also viewed",
})

// retrieve recommendations for all units
const {status, data} = await client.fetch({
    currentSku: "134524",
})

// status: 200
// data: {
//     "units": [
//         {
//             "unitInstanceId": "123456789",
//             "unitName": "people also viewed",
//             "searchTime": 2,
//             "totalResults": 5,
//             "results": [
//                 {
//                     "rank": 1,
//                     "score": 9000,
//                     "sku": "123456",
//                     "name": "Product One",
//                     "base_price": 50.0,
//                     "special_price": 0.0,
//                     "tier_price": 0.0,
//                     "price": 50.0,
//                     "currency_code": "USD",
//                     "canonical_url": "https://company.com/product-one",
//                     "main_image_url": "https://company.com/product-one.jpg",
//                     "categories": []
//                 },
//                 ...
//             ]
//         }
//         ...
//     ]
// }

// render the markup
const markup = client.render({
    unit: data.units[0],
})

// markup:
// <div class="product-recommendations-unit">
//     <h2 class="product-recommendations-label">Recommended Products</h2>
//
//     <div class="product-recommendations">
//             <div class="product-recommendation">
//                 <a class="product-recommendation-image" href="https://company.com/product-one">
//                     <img src="https://company.com/product-one.jpg" alt="Product One">
//                 </a>
//
//                 <a class="product-recommendation-name" href="https://company.com/product-one">
//                     Product One
//                 </a>
//
//                 <p class="product-recommendation-price">
//                     $50
//                 </p>
//             </div>
//             ...
//     </div>
// </div>

❓ Questions

If you have questions or need help, there are a few ways you can get in touch.

📧 Email us at [e-mail]
💬 Find me (@garropy) in the Magento Commerce Engineering Slack workspace
🐞 Open an issue in the repository