@okendo/reviews-widget-plus-vue
TypeScript icon, indicating that this package has built-in type declarations

0.1.7 • Public • Published

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>

Readme

Keywords

none

Package Sidebar

Install

npm i @okendo/reviews-widget-plus-vue

Weekly Downloads

1

Version

0.1.7

License

SEE LICENSE IN LICENSE.txt

Unpacked Size

3.69 MB

Total Files

318

Last publish

Collaborators

  • ranjandavid_ok
  • kevina
  • lachlanvass
  • nik-okendo
  • alex_okendo
  • damienpace
  • mason.rosecampbell
  • splurtcake
  • andrew.boynton
  • alex.dempsey
  • ben.louwong
  • rowanp
  • jon.hughes
  • kyle.summers
  • susannepeng.okendo
  • stephen-dundas
  • matt.garven
  • jfulcher
  • thomen
  • rachaek
  • okendo-webby
  • rhysokendo
  • ken.sumetvarapa
  • minhvu77377
  • nikolakucerova
  • chriscozma
  • mkedzierski_ok
  • keithpaul
  • cheng.lou
  • hunterwall