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