@okendo/okendo-widgets-vue

Okendo components for Vue apps

Usage no npm install needed!

<script type="module">
  import okendoOkendoWidgetsVue from 'https://cdn.skypack.dev/@okendo/okendo-widgets-vue';
</script>

README

Okendo Reviews Vue Components

Library of Okendo widgets for use in Vue apps.

Installation

1. Install the package

npm install @okendo/okendo-widgets-vue

2. Import the default css

@import '~@okendo/okendo-widgets-vue/dist/css/main.min.css';

3. Install Flickity, the library which handles the media sliders and galleries. Please ensure you have the correct license for your usage. You can install the package through npm or add the .js file directly to your html <head>

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js" async></script>

4. Run configureOkendo in your app root to set the subscriberId (API key unique to each store) and any widget settings (following the schema below). This only needs to run once before your Okendo components are mounted, i.e. in App.vue or similar

import { configureOkendo } from '@okendo/okendo-widgets-vue';

configureOkendo({
    subscriberId: 'your-subscriber-id-here',
    widgetSettings: {
        dateFormat: 'MMM/d/yyyy',
        enableFilters: true,
        defaultReviewsSortOrder: 'rating desc'
    }
});
widgetSettings Description Data Type Default Value Accepted Values
dateFormat Date formatting on individual reviews and questions string relative date-fns accetped values
enableFilters Filter reviews by product attributes boolean false false | true
defaultReviewsSortOrder Initial reviews sorting order string 'date desc' 'date desc' | 'date asc' | 'has_media desc' | 'rating desc' | 'rating asc' | 'helpful desc' | 'unhelpful desc'

5. Import the components you need

import { OkendoStarRating } from '@okendo/okendo-widgets-vue';
import { OkendoReviewsWidget } from '@okendo/okendo-widgets-vue';

export default {
    components: {
        OkendoStarRating,
        OkendoReviewsWidget,
        OkendoQuestionsWidget,
        OkendoCombinedWidget
    }
};

The combined widget displays both the question and review widgets in tabs

6. Include the components in your template, providing the Shopify product ID as a prop

<okendo-star-rating :productId="shopifyProductId" />
<okendo-reviews-widget :productId="shopifyProductId" />
<okendo-questions-widget :productId="shopifyProductId" />
<okendo-combined-widget :productId="shopifyProductId" />

Note: The reviews widget component will show reviews for all products if the productId is omitted