@salla.sa/twilight-components
Version:
Salla Web Component
148 lines (142 loc) • 7.51 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { I as IconArrowLeft } from './arrow-left.js';
import { H as Helper } from './Helper.js';
import { d as defineCustomElement$3 } from './salla-rating-stars2.js';
import { d as defineCustomElement$2 } from './salla-slider2.js';
var IconQuoteOpen = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>quote-open</title>
<path d="M8 12v-5.333c0-0.737-0.596-1.333-1.333-1.333-3.676 0-6.667 2.991-6.667 6.667v8c0 3.676 2.991 6.667 6.667 6.667h1.333c3.676 0 6.667-2.991 6.667-6.667v-1.333c0-3.676-2.991-6.667-6.667-6.667zM12 20c0 2.205-1.795 4-4 4h-1.333c-2.205 0-4-1.795-4-4v-8c0-1.739 1.115-3.221 2.667-3.772v5.105c0 0.737 0.596 1.333 1.333 1.333h1.333c2.205 0 4 1.795 4 4zM25.333 12v-5.333c0-0.737-0.596-1.333-1.333-1.333-3.676 0-6.667 2.991-6.667 6.667v8c0 3.676 2.991 6.667 6.667 6.667h1.333c3.676 0 6.667-2.991 6.667-6.667v-1.333c0-3.676-2.991-6.667-6.667-6.667zM29.333 20c0 2.205-1.795 4-4 4h-1.333c-2.205 0-4-1.795-4-4v-8c0-1.739 1.115-3.221 2.667-3.772v5.105c0 0.737 0.596 1.333 1.333 1.333h1.333c2.205 0 4 1.795 4 4z"></path>
</svg>
`;
const sallaReviewsCss = "";
const SallaReviews$1 = /*@__PURE__*/ proxyCustomElement(class SallaReviews extends HTMLElement {
constructor() {
super();
this.__registerHost();
/**
* Defines the maximum number of reviews to retrieve from the API.
*
* @type {number}
* @default 5
*/
this.limit = 5;
/**
* Specifies the type of reviews to fetch.
* Available options:
* - "all": Fetches reviews from all sources.
* - "store": Fetches reviews specific to the store.
* - "products": Fetches reviews specific to products.
*
* @type {ReviewType}
* @default store
*/
this.type = "store";
/**
* Specifies the sorting criteria for the fetched reviews.
* Available options:
* - "top_rating": Sorts reviews based on top ratings.
* - "random": Sorts reviews randomly.
* - "latest": Sorts reviews based on the latest ones (default).
*
* @type {SortingOption}
* @default latest
*/
this.sort = "latest";
/**
* Specifies whether to hide customer information in the component.
* When set to true, customer information will be hidden.
* Defaults to false, meaning customer information will be displayed.
*/
this.hideCustomerInfo = false;
this.reviews = [];
this.showReviews = false;
this.testimonialText = salla.lang.get('blocks.home.testimonials');
this.displayAllLinkText = salla.lang.get('blocks.home.display_all');
this.displayAllURL = null;
this.source = this.source;
salla.onReady(() => {
this.displayAllURL = salla.url.get('testimonials');
this.isRTL = salla.config.get('theme.is_rtl', true);
});
salla.lang.onLoaded(() => {
this.testimonialText = salla.lang.get('blocks.home.testimonials');
this.displayAllLinkText = salla.lang.get('blocks.home.display_all');
});
}
fetchReviews() {
if (this.source === 'json') {
return Promise.resolve(JSON.parse(this.sourceValue));
}
const isJsonEncoded = ['products', 'categories'].includes(this.source);
const params = {
limit: this.limit,
source: this.source,
items: isJsonEncoded ? JSON.parse(this.sourceValue) : this.sourceValue,
sort: this.sort,
type: this.type,
hide_customer_info: this.hideCustomerInfo ? 1 : 0
};
return salla.api.request('reviews', { params }, 'get');
}
componentWillLoad() {
return (new Promise(resolve => salla.onReady(resolve)))
.then(() => this.fetchReviews())
.then((resp) => resp.data || [])
.then(reviews => {
if (reviews.length) {
this.reviews = reviews;
this.showReviews = true;
Helper.generateReviewSchema(this.reviews);
}
});
}
render() {
return (h("div", { key: 'edab3103293378d4ebc9dbd16873e734aece0bf9', class: "s-reviews-container" }, h("div", { key: '2562073f29f9257e1d0133ccb7f1534075b3c330', class: "s-reviews-header-wrapper" }, h("h1", { key: '18be1f853b46b13263014940814c3bb276d7d4f9', class: "s-reviews-header" }, this.testimonialText), !!this.displayAllLink ? (h("a", { href: this.displayAllURL, class: "s-reviews-display-all" }, this.displayAllLinkText, h("span", { class: "s-reviews-display-all-icon", innerHTML: IconArrowLeft }))) : null), h("salla-slider", { key: '7b466442e7888112bf43f0cd40182554f446155b', centered: true, "slides-per-view": 1, type: "testimonials", class: "s-reviews-testimonials-slider", "controls-outer": true, "auto-play": true, id: `testimonials-${this.source}-slider` }, h("div", { key: 'bf5be97ea0169b36296f3555ffd4890a9b96863b', slot: "items" }, this.reviews.map((item, index) => (h("div", { key: index, class: "s-reviews-swiper-slide" }, h("div", { class: "s-reviews-testimonial" }, h("div", { class: "s-reviews-testimonial__inner" }, h("div", { class: "s-reviews-testimonial__avatar" }, h("img", { src: 'images/s-empty.png', "data-src": item.avatar, alt: item.name ? item.name : 'testimonial-' + index, class: "lazy" })), h("div", { class: "s-reviews-testimonial__text" }, h("p", { innerHTML: item.content }), h("div", { class: "s-reviews-testimonial__name_wrapper" }, h("div", { class: "s-reviews-testimonial__info" }, item.name && h("h2", null, `${item.name}`)), h("div", { class: "s-reviews-testimonial__rating" }, h("salla-rating-stars", { size: "small", value: item.stars })))), h("span", { class: "s-reviews-testimonial__icon", innerHTML: IconQuoteOpen }))))))))));
}
static get style() { return sallaReviewsCss; }
}, [0, "salla-reviews", {
"displayAllLink": [516, "display-all-link"],
"source": [513],
"sourceValue": [513, "source-value"],
"limit": [514],
"type": [1],
"sort": [1],
"hideCustomerInfo": [4, "hide-customer-info"],
"reviews": [32],
"isRTL": [32],
"showReviews": [32],
"testimonialText": [32],
"displayAllLinkText": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-reviews", "salla-rating-stars", "salla-slider"];
components.forEach(tagName => { switch (tagName) {
case "salla-reviews":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaReviews$1);
}
break;
case "salla-rating-stars":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "salla-slider":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const SallaReviews = SallaReviews$1;
const defineCustomElement = defineCustomElement$1;
export { SallaReviews, defineCustomElement };
//# sourceMappingURL=salla-reviews.js.map
//# sourceMappingURL=salla-reviews.js.map