npm package: @nacelle/nacelle-yotpo-nuxt-module
Description: Integrates Yotpo Reviews into your Nacelle Nuxt project
Latest version: 1.0.10
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

# [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](https://www.yotpo.com/) product reviews in your [Nacelle](https://getnacelle.com/) 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`:

```sh
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:

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

Then add your Yotpo API Key to your environment variables `.env` file.
[![Yotpo](yotpo_settings_guide.png)](./yotpo_settings_guide.png)

```sh
YOTPO_API_KEY=xxxxxxxxxxxxx
```

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

```javascript
// 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.

```html
<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.

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

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

```html
<testimonials-widget />
```

**Instagram Widget** will display a shoppable instagram feed.

```html
<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:

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

or (if you are using [keep-alive](https://nuxtjs.org/api/components-nuxt-child/#the-activated-and-deactivated-hooks) )

```js
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.

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