@okendo/reviews-widget-plus-vue
v0.1.7
Published
This package allows you to install and use the Okendo Vue components in your own VueJS projects.
Downloads
4
Maintainers
Keywords
Readme
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 <head>
tag of your index.html file.
<meta name="oke:subscriber_id" content="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" />
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.
import '@okendo/reviews-widget-plus-vue/dist/assets/css/bundle.min.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.
// 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.
// 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.
OkendoHomepageCarousel
OkendoMediaCarousel
OkendoMediaGrid
OkendoQuestionsWidget
OkendoReviewsBadge
OkendoStarRating
OkendoWidget
Components can be referenced with either UpperCamelCase sytax or kebab-case syntax. For example
<OkendoWidget productId="shopify-XXXXXXXXXXXXX" />
...
<okendo-widget productId="shopify-XXXXXXXXXXXXX" />
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
<template>
<OkendoHomepageCarousel
productId="shopify-XXXXXXXXXXXXX"
:carouselDataAttributeSettings="{
autoPlay: true,
hideHeader: false,
headerText: 'See what our customers have to say',
headerUrl: 'https://www.okendo.io',
style: {
layout: {
name: 'featured',
reviewDetailsPosition: 'above',
showProductName: false,
showAttributeBars: true
}
}
}"
/>
</template>
<script>
import { OkendoHomepageCarousel } from '@okendo/reviews-widget-plus-vue';
export default {
components: {
OkendoHomepageCarousel
}
};
</script>
OkendoMediaCarousel
Properties
| Property Name | Description | Data Type |
| ------------- | -------------------------------------- | --------- |
| productId
| Your Shopify product ID (optional) | string
|
Example Usage
<template>
<OkendoMediaCarousel productId="shopify-XXXXXXXXXXXXX" />
</template>
<script>
import { OkendoMediaCarousel } from '@okendo/reviews-widget-plus-vue';
export default {
components: {
OkendoMediaCarousel
}
};
</script>
OkendoMediaGrid
Properties
| Property Name | Description | Data Type |
| ------------- | -------------------------------------- | --------- |
| productId
| Your Shopify product ID (optional) | string
|
Example Usage
<template>
<OkendoMediaGrid productId="shopify-XXXXXXXXXXXXX" />
</template>
<script>
import { OkendoMediaGrid } from '@okendo/reviews-widget-plus-vue';
export default {
components: {
OkendoMediaGrid
}
};
</script>
OkendoQuestionsWidget
Properties
| Property Name | Description | Data Type |
| ------------- | -------------------------------------- | --------- |
| productId
| Your Shopify product ID (optional) | string
|
Example Usage
<template>
<OkendoQuestionsWidget productId="shopify-XXXXXXXXXXXXX" />
</template>
<script>
import { OkendoQuestionsWidget } from '@okendo/reviews-widget-plus-vue';
export default {
components: {
OkendoQuestionsWidget
}
};
</script>
OkendoReviewsBadge
Properties
| Property Name | Description | Data Type |
| ------------- | -------------------------------------- | --------- |
| productId
| Your Shopify product ID (optional) | string
|
Example Usage
<template>
<OkendoReviewsBadge productId="shopify-XXXXXXXXXXXXX" />
</template>
<script>
import { OkendoReviewsBadge } from '@okendo/reviews-widget-plus-vue';
export default {
components: {
OkendoReviewsBadge
}
};
</script>
OkendoStarRating
Properties
| Property Name | Description | Data Type |
| ------------- | -------------------------------------- | --------- |
| productId
| Your Shopify product ID (optional) | string
|
Example Usage
<template>
<OkendoStarRating productId="shopify-XXXXXXXXXXXXX" />
</template>
<script>
import { OkendoStarRating } from '@okendo/reviews-widget-plus-vue';
export default {
components: {
OkendoStarRating
}
};
</script>
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
<template>
<OkendoWidget productId="shopify-XXXXXXXXXXXXX" />
</template>
<script>
import { OkendoWidget } from '@okendo/reviews-widget-plus-vue';
export default {
components: {
OkendoWidget
}
};
</script>