@okendo/reviews-widget-plus-vue

v0.1.7

Published

2 months ago

This package allows you to install and use the Okendo Vue components in your own VueJS projects.

Downloads

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>