You are viewing the v1 Nacelle Docs for existing merchants.New merchants can find the V2 docs here: nacelle.com/docs.

# Yotpo Reviews & Ratings Setup

To fully integrate Yotpo and Nacelle, please follow the steps below.

# Requirements

  • A Nacelle project set up locally. See https://docs.getnacelle.com for getting started.
  • A Yotpo app installed and setup.

# Setup

# Add Module to Nacelle

Once you have Nacelle and Yotpo set up you can install this module in your project from npm:

npm install @nacelle/nacelle-yotpo-nuxt-module --save

After the package has installed, open nuxt.config.js. Under modules add @nacelle/nacelle-yotpo-nuxt-module to the array. It should look something like this:

modules: [
  // other modules,
  '@nacelle/nacelle-yotpo-nuxt-module'
],

Then add your Yotpo API Key to your environment variables .env file.

Finding the Yotpo API key in the Yotpo dashboard

YOTPO_API_KEY=xxxxxxxxxxxxx

Lastly, add the environment variable to the nacelle block of nuxt.config.js:

// nuxt.config.js
nacelle: {
  // ...other Nacelle config,
  yotpoAPIKey: process.env.YOTPO_API_KEY
}

# Add the components to your Nacelle Storefront

There are two components you can add to your Nacelle site: <reviews-widget /> and <star-rating />.

Review Widget will display a list of product reviews as well as a form for customers to submit reviews. Add this component to pages/products/_handle.vue or anywhere you use products and pass the product object as a prop along with the route pathname so the submitted review can link to the proper page.

<reviews-widget v-if="product" :product="product" :pathname="$route.fullPath" />

Star Rating will display an average star rating for a product along w/ the number of reviews. Add this component to either components/ProductDetails.vue or components/ProductCard.vue. It accepts the product object as a prop. Alternatively, a product ID can be used via the id prop.

<star-rating :product="product" />

Testimonials Widget will display site reviews and products reviews. Add this component to a dedicated review page.

<testimonials-widget />

Instagram Widget will display a shoppable instagram feed.

<instagram-widget />

# What is this module doing?

The challenge is to properly load a DOM dependent sdk into a PWA. The sdk assumes each route change will be a page reload, but in Nuxt we dynamically render pages and content without a hard page load.

The plugin registers an event bus for us to emit global events, in this case, listening for the mounted:yotpo and activated:yotpo events. When the reviews-widget or star-rating components are mounted or activated, when make sure to emit the respective events.

example:

mounted() {
  this.$yotpo.$bus.$emit('mounted:yotpo', {
    id: '123456789',
    type: 'star-rating'
  })
}

or (if you are using keep-alive (opens new window) )

activated() {
  this.$yotpo.$bus.$emit('activated:yotpo', {
    id: '123456789',
    type: 'star-rating'
  })
}

Lets say we have a collection page and each product card contains a star-rating, this would fire off events for each component that mounts on the page. In order to reduce redundant network requests, we debounce these events so that only the last one triggers the refresh.

If you have custom requirements, the injected object $yotpo.sdk on the nuxt instance references window.yotpo. You can refresh the visible widgets using this method: this.$yotpo.sdk.refreshWidgets().

# Module Options

You may want control over the debounce wait time. The module accepts a debounceWait option, which takes an number representing milliseconds.

modules: [
  ...
  ['@nacelle/nacelle-yotpo-nuxt-module', {
    debounceWait: 600 // default is 200 ms
  }]
],