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()
})

PreviousExamples NextJavaScript ES modules

Last updated 4 years ago

Was this helpful?