Plain JavaScript
Basic Example with HTML/CSS/JS
This contrived example demonstrates how to show a simple recommendation using the UMD version of the library.
The following code demonstrates synchronous script tag loading. If you prefer asynchronous, simply use the defer flag in your <script>tags. The scripts will load asynchronously, while preserving execution order. Be sure any script you load also has the deferflag, and is placed after the recommend api script.
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://cdn.obviyo.net/lib/obv-api.js"></script>
</head>
<body>
<h4>Headless Recommendations</h4>
<p>Using standard JavaScript</p>
<script src="index.js"></script>
</body>body {
font-family: Arial, Helvetica, sans-serif;
}
.item {
border: 1px solid #ccc;
padding: 0 10px;
margin: 5px;
width: 200px;
height: 300px;
display: inline-block;
vertical-align: top;
}
.item>a {
text-decoration: none;
}
.item>a>img {
width: 100%;
max-width: 200px;
}
/* global obviyo */
const { $fetchRecommendationData } = window.obviyo
const SITE_ID = '{your siteId}'
/**
* Helper function to append a recommendation item
*/
function appendItem(item) {
const div = document.createElement('div')
div.className = 'item'
const html = `
<a href="${item.onlineStoreUrl}">
<h4>${item.title}</h4>
<img src=${item.featuredImage.originalSrc}>
</a>
`
div.innerHTML = html.trim()
document.body.appendChild(div)
}
/**
* Example function which calls for a recommendation
* In this case, most popular
*/
async function $showRecommendations() {
const result = await $fetchRecommendationData({
siteId: SITE_ID,
qualifiedName: 'psz-mpop'
})
const items = result.items
if (items && items.length) {
items.map(appendItem)
}
}
/**
* Simulate document ready
*/
function onDocumentReady(callback) {
if (
document.readyState === "complete" ||
(document.readyState !== "loading" && !document.documentElement.doScroll)
) {
callback()
} else {
document.addEventListener("DOMContentLoaded", callback)
}
}
onDocumentReady(() => {
$showRecommendations()
})
Last updated
Was this helpful?