npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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

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>