# Okendo Vue Widget Library
This package allows you to install and use the Okendo Vue components in your own VueJS projects.
## Installation
To install the package, run `npm i @okendo/reviews-widget-plus-vue` inside of your project folder.
The Okendo Vue Widget Library is only compatible with Vue version `^2.6.14` and makes a few assumptions about dependant packages that must also be installed in your project. Please ensure the following are installed in your project:
```
npm i vue@^2.6.14
npm i vue-i18n@^8.27.2
```
## Configuration
Please follow the required steps below to set up the Okendo components:
### Step 1: Shopify Subscriber ID
Paste the following code with your Subscriber ID (your Shopify API key unique to each store) in the `` tag of your index.html file.
```html
```
### Step 2: CSS
This package exports it's own bundled CSS file for the Okendo components which must be included in your app to get the correct styling. This can either be imported directly in your `main.js` file, in another CSS file using the `@import` syntax, or in your own custom CSS build process.
```javascript
import '@okendo/reviews-widget-plus-vue/dist/assets/css/bundle.min.css';
```
```css
@import '@okendo/reviews-widget-plus-vue/dist/assets/css/bundle.min.css';
```
### Step 3: Okendo Configuration
The Okendo components use `VueI18n` for localization based on your Okendo & Shopify locale settings and English translations are loaded by default. In addition to this, the Okendo components themselves must also be initialized with certain data from our API to retrieve your reviews, images, videos etc which means you need to run `await okendoConfigure(i18n);` before creating a `new Vue()` instance. Below is an example of how your `main.js` might look.
```javascript
// main.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import {
okendoConfigure,
OkendoVueI18nPlugin
} from '@okendo/reviews-widget-plus-vue';
Vue.use(VueI18n);
Vue.use(OkendoVueI18nPlugin);
const i18n = new VueI18n();
await okendoConfigure(i18n);
new Vue({
i18n,
render: h => h(App)
}).$mount('#app');
```
Due to limitations with the VueI18n library being unsuitable _out-of-the-box_ to be utilized within a component library, you must configure this manually within your project by importing the correct locale file as outlined below and providing those translations to your `VueI18n` instance directly.
By default, Okendo will apply English translations but if your Shopify / Okendo locale is set to any language other than English you will need to import the corresponding locale file and provide to the `messages` property of your `VueI18n` instance.
If you intend on doing localization for your own private components, then these need to be provided to the same `VueI18n` and deep merged with your Okendo translations.
```javascript
// main.js
import deepmerge from 'deepmerge';
const myTranslations = require('./locales').default;
const ja = require('@okendo/reviews-widget-plus-vue/dist/locales/ja.js').default
const i18n = new VueI18n({
messages: deepmerge({
ja
}, appTranslations)
});
// locales.js
export default {
ja: {
'example': '例の日本語訳',
}
}
```
## Components
This package exports the following components which can be used in your Vue project.
```javascript
OkendoHomepageCarousel
OkendoMediaCarousel
OkendoMediaGrid
OkendoQuestionsWidget
OkendoReviewsBadge
OkendoStarRating
OkendoWidget
```
Components can be referenced with either UpperCamelCase sytax or kebab-case syntax. For example
```
...
```
---
## OkendoHomepageCarousel
### Properties
| Property Name | Description | Data Type |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- |
| `productId` | Your Shopify product ID **(optional)** | `string` |
| `groupId` | Your Okendo Admin group ID **(optional)**
If a `groupID` is specified this component will display it will display all reviews from that given group | `string` |
| `carouselDataAttributeSettings` | Used for carousel display and function **(optional)** | `object` |
#### `carouselDataAttributeSettings`
- `autoPlay: boolean` _(optional)_
- `hideHeader: boolean` _(optional)_
- `headerText: string` _(optional)_
- `headerUrl: string` _(optional)_
- `style: object` _(optional)_
- `layout: object` _(optional)_
- `name: string` _'default' | 'featured' | 'testimonial' | 'minimal-centered' (optional)_
- `reviewDetailsPosition: string` _'above' | 'below' (optional)_
- `showProductName: boolean` _(optional)_
- `showAttributeBars: boolean` _(optional)_
### Example Usage
```javascript
```
---
## OkendoMediaCarousel
### Properties
| Property Name | Description | Data Type |
| ------------- | -------------------------------------- | --------- |
| `productId` | Your Shopify product ID **(optional)** | `string` |
### Example Usage
```javascript
```
---
## OkendoMediaGrid
### Properties
| Property Name | Description | Data Type |
| ------------- | -------------------------------------- | --------- |
| `productId` | Your Shopify product ID **(optional)** | `string` |
### Example Usage
```javascript
```
---
## OkendoQuestionsWidget
### Properties
| Property Name | Description | Data Type |
| ------------- | -------------------------------------- | --------- |
| `productId` | Your Shopify product ID **(optional)** | `string` |
### Example Usage
```javascript
```
---
## OkendoReviewsBadge
### Properties
| Property Name | Description | Data Type |
| ------------- | -------------------------------------- | --------- |
| `productId` | Your Shopify product ID **(optional)** | `string` |
### Example Usage
```javascript
```
---
## OkendoStarRating
### Properties
| Property Name | Description | Data Type |
| ------------- | -------------------------------------- | --------- |
| `productId` | Your Shopify product ID **(optional)** | `string` |
### Example Usage
```javascript
```
---
## OkendoWidget
### Properties
| Property Name | Description | Data Type |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `productId` | Your Shopify product ID **(optional)** | `string` |
| `groupId` | Your Okendo Admin group ID **(optional)**
_If a `groupID` is specified this component will display all reviews from that given group_ | `string` |
### Example Usage
```javascript
```
---