@okendo/okendo-widgets-vue NPM

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

axios date-fns vue

@infinitebrahmanuniverse/nolb-_ok @everything-registry/sub-chunk-678 @zalastax/nolb-_ok @nacelle/segmentation-sdk

2 years ago

3 years ago

3 years ago

3 years ago