This package has been deprecated

Author message:

This package is deprecated. To integrate a third party script with your Nuxt project, follow our docs here: https://docs.getnacelle.com/nuxt/external-scripts.html

@nacelle/nacelle-yotpo-nuxt-module

[DEPRECATED]

This package is deprecated. To integrate a third party script with your Nuxt project, follow our docs here: https://docs.getnacelle.com/nuxt/external-scripts.html

Nacelle Yotpo Reviews

Adds Vue.js components for integrating Yotpo product reviews in your Nacelle Nuxt project.

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 hace 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.

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 )

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
  }]
],