@ecomplus/widget-martan 1.1.0

package/src/widgets/reviews/VideoPlayer.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="mt-player">
+    <video preload="metadata" ref="videoPlayer">
+      <source :src="video" type="video/mp4" />
+    </video>
+
+    <div class="mt-player__controls">
+      <button ref="playButton" class="playPauseBtn" title="tocar vídeo">
+        <svg
+          v-if="this.isPlaying"
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon icon-tabler icon-tabler-player-play"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M7 4v16l13 -8z" />
+        </svg>
+        <svg
+          v-else
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon icon-tabler icon-tabler-player-pause"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"
+          />
+          <path
+            d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VideoPlayer",
+
+  props: {
+    video: {
+      type: String,
+      required: true
+    },
+  },
+
+  data() {
+    return {
+      isPlaying: true,
+    };
+  },
+
+  methods: {
+    play() {
+      if (this.$refs.videoPlayer.paused || this.$refs.videoPlayer.ended) {
+        this.$refs.videoPlayer.play();
+      } else {
+        this.$refs.videoPlayer.pause();
+      }
+    },
+    updateBtn() {
+      this.isPlaying = this.$refs.videoPlayer.paused;
+    },
+  },
+  mounted: function () {
+    this.$refs.playButton.addEventListener("click", this.play);
+    this.$refs.videoPlayer.addEventListener("click", this.play);
+    this.$refs.videoPlayer.addEventListener("play", this.updateBtn);
+    this.$refs.videoPlayer.addEventListener("pause", this.updateBtn);
+  },
+};
+</script>
+
+<style lang="scss">
+.mt-player {
+  video {
+    display: block;
+    width: 100%;
+  }
+
+  .playPauseBtn {
+    background: none;
+    border: 0;
+    line-height: 1;
+    color: #212529;
+    text-align: center;
+    outline: 0;
+    padding: 0;
+    cursor: pointer;
+    max-width: 50px;
+  }
+
+  &__controls {
+    width: 100%;
+    transform: translateY(0);
+    padding: 5px;
+  }
+
+  &__controls > * {
+    flex: 1;
+  }
+
+  &__progress {
+    flex: 10;
+    position: relative;
+    display: flex;
+    flex-basis: 100%;
+    height: 5px;
+    background: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    max-width: 430px;
+    width: 100%;
+    &--filled {
+      width: 50%;
+      background: #aa5500;
+      flex: 0;
+      flex-basis: 0%;
+    }
+  }
+}
+</style>

package/src/widgets/reviews/index.js

@@ -0,0 +1,52 @@
+import Vue from 'vue'
+import Reviews from './Reviews.vue'
+
+export default (options = {}, elId = 'reviews_widget') => {
+  const $el = document.getElementById(elId)
+  if (!options || !$el || !$el.dataset || !$el.dataset.product) {
+    return
+  }
+
+  const { product } = $el.dataset
+
+  const storeId = options.store_id
+  const webId = options.web_id
+  const widgetOptions = options.widget_review || {}
+
+  const starColor = widgetOptions.star_color || null
+  const title = widgetOptions.title || null
+  const headerLayout = widgetOptions.header_layout || null
+  const reviewsLayout = widgetOptions.reviews_layout || null
+
+  const obs = new IntersectionObserver(
+    (entries, observe) => {
+      entries.forEach(function (entry) {
+        const { isIntersecting, intersectionRatio } = entry
+        if (isIntersecting === true || intersectionRatio > 0) {
+          new Vue({
+            render(h) {
+              return h(Reviews, {
+                props: {
+                  product,
+                  storeId,
+                  webId,
+                  title,
+                  starColor,
+                  headerLayout,
+                  reviewsLayout
+                }
+              })
+            }
+          }).$mount($el)
+
+          observe.disconnect()
+        }
+      })
+    },
+    {
+      rootMargin: '250px'
+    }
+  )
+
+  obs.observe($el)
+}

package/src/widgets/reviews/isRecommended.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="mt-is__recomended"
+    :title="
+      recommended
+        ? i19customerRecommendProduct
+        : i19customerNoRecommendProduct
+    "
+  >
+    <span> {{ i19recommendProductQn }} </span>
+    <span>{{ recommended ? i19yes : i19no }}</span>
+  </div>
+</template>
+
+<script>
+
+import {
+  i19yes,
+  i19no
+} from '@ecomplus/i18n'
+
+import { i18n } from '@ecomplus/utils'
+
+export default {
+
+  name: "isRecommended",
+
+  props: {
+    recommended: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  computed: {
+    i19customerRecommendProduct: () => 'Cliente recomendaria o produto',
+    i19customerNoRecommendProduct: () => 'Cliente não recomendaria o produto',
+    i19no: () => i18n(i19no),
+    i19recommendProductQn: () => 'Recomendaria o produto ?',
+    i19yes: () => i18n(i19yes),
+  },
+
+};
+</script>

package/src/widgets/snippets/Rating.vue

@@ -0,0 +1,71 @@
+<template>
+  <span class="martan-rating">
+    <svg 
+      v-for="(star, index) in stars"  
+      :key="index"
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon icon-tabler"
+      :class="`${stars[index]} ? 'icon-tabler-star-filled' : icon-tabler-star`" 
+      width="14" 
+      height="14" 
+      viewBox="0 0 24 24" 
+      stroke-width="2"
+      stroke="currentColor" 
+      fill="none" 
+      stroke-linecap="round" 
+      stroke-linejoin="round" 
+      :style="{ color }"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path
+        :d="stars[index] ? 'M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z' : 'M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z'"
+        :fill="stars[index] ? 'currentColor' : 'none'" />
+    </svg>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'Rating',
+
+  props: {
+    rating: {
+      type: Number,
+      default: 5
+    },
+
+    color: {
+      type: String,
+      default: "#000000"
+    },
+  },
+
+  data() {
+    return {
+      stars: Array(5).fill(false)
+    };
+  },
+
+  mounted() {
+    this.updateStars();
+  },
+
+  methods: {
+    updateStars() {
+      const filledStars = Math.floor(this.rating);
+      this.stars = this.stars.map((star, index) => index < filledStars);
+    }
+  },
+
+  watch: {
+    rating: 'updateStars'
+  }
+};
+</script>
+
+<style lang="css">
+.martan-rating {
+  display: flex;
+  gap: 4px;
+}
+</style>

package/src/widgets/snippets/Snippets.vue

@@ -0,0 +1,311 @@
+<template>
+  <div
+    id="mt-snippet"
+    ref="wrapper"
+    class="glide martan-snippets d-none"
+    style="margin-bottom: 1rem; height: 85px"
+  >
+    <div class="glide__track" data-glide-el="track">
+      <ul class="glide__slides">
+        <li class="glide__slide" v-for="review in list" :key="review.id">
+          <div class="martan-snippets__galery" v-if="getImageUrl(review)">
+            <img
+              :alt="`Foto da avaliação do produto feita por ${review.display_name}`"
+              :src="getImageUrl(review)"
+            />
+          </div>
+
+          <div class="martan-snippets__reviews snippet-review">
+            <div class="martan-snippets__reviews-info snippet-review__info">
+              <span>{{ review.display_name }}</span>
+              <rating :rating="review.rating" :color="starColor" />
+            </div>
+
+            <div
+              class="martan-snippets__reviews-body snippet-review__body"
+              v-if="review.body"
+            >
+              <span>{{ review.body.substring(0, 115) }}...</span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="martan-snippets__controls" data-glide-el="controls">
+      <button
+        v-if="glide && glide.index > 0"
+        :title="i19previous"
+        :aria-label="i19previous"
+        class="left"
+        data-glide-dir="<"
+        v-on:click="glide.go('<')"
+      >
+        <i class="i-chevron-left"></i>
+      </button>
+
+      <button
+        v-if="glide && glide.index !== list.length - 1"
+        :title="i19next"
+        :aria-label="i19next"
+        class="right"
+        data-glide-dir=">"
+        v-on:click="glide.go('>')"
+        :data-glide="glide.index"
+      >
+        <i class="i-chevron-right"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import Glide, { Breakpoints } from "@glidejs/glide";
+import { i19next, i19previous } from "@ecomplus/i18n";
+import { i18n } from "@ecomplus/utils";
+
+import Rating from "./Rating.vue";
+import Quickview from "../reviews/Quickview.vue";
+import { MARTAN_API } from "../..";
+
+export default {
+  name: "SnippetWidget",
+
+  components: {
+    Rating,
+    Quickview,
+  },
+
+  data: function () {
+    return {
+      list: [],
+      glide: null,
+      isVisible: false,
+      isOpenQuickView: false,
+      selectedReview: null,
+    };
+  },
+
+  computed: {
+    i19next: () => i18n(i19next),
+    i19previous: () => i18n(i19previous),
+  },
+
+  props: {
+    storeId: {
+      type: Number,
+      required: true,
+    },
+    webId: {
+      type: String,
+      required: true,
+    },
+    product: {
+      type: String,
+      required: true,
+    },
+    starColor: {
+      type: String,
+      required: true,
+    },
+    backgroundColor: {
+      type: String,
+      default: "#f8f9fa",
+    },
+    textColor: {
+      type: String,
+      default: "#212529",
+    },
+    border: {
+      type: Boolean,
+      default: false,
+    },
+    borderColor: {
+      type: String,
+      default: "#212529",
+    },
+  },
+
+  methods: {
+    openQuickview: function ({ review, slide }) {
+      this.selectedReview = review;
+      this.isOpenQuickView = true;
+    },
+
+    onCloseQuickview: function () {
+      this.isOpenQuickView = false;
+      this.selectedReview = null;
+    },
+
+    fetch() {
+      axios({
+        url: MARTAN_API + "/reviews.json",
+        headers: {
+          "X-Store-Id": this.storeId,
+          "X-Web-Id": this.webId,
+        },
+        params: {
+          sku: this.product,
+          limit: 10,
+          offset: 0,
+        },
+      })
+        .then(({ data }) => {
+          if (data && data.result) {
+            const filted = data.result.filter((r) => r.body);
+            this.list = filted || [];
+
+            this.glide = new Glide("#mt-snippet", {
+              keyboard: false,
+              rewind: false,
+              type: "slider",
+              startAt: 0,
+              perView: 1,
+              touchAngle: 0,
+              breakpoints: {
+                1900: {
+                  perView: 1,
+                },
+                1024: {
+                  perView: 1,
+                },
+                600: {
+                  perView: 1,
+                },
+              },
+            });
+
+            return filted;
+          }
+
+          return []
+        })
+        .then((data) => {
+          if (data.length >= 2) {
+            this.$refs.wrapper.classList.remove("d-none");
+            this.glide.mount();
+            this.isVisible = true;
+          }
+
+          return this;
+        })
+        .then((t) => {
+          if (t.isVisible) {
+            this.glide.update({ perView: 1 });
+          }
+        });
+    },
+
+    getImageUrl(review) {
+      if (
+        review &&
+        review.pictures &&
+        review.pictures.length &&
+        review.pictures[0].thumb
+      ) {
+        return review.pictures[0].thumb;
+      }
+      return null;
+    },
+
+    loadWidgetOptions() {
+      this.$refs.wrapper.style.color = this.textColor;
+      this.$refs.wrapper.style.backgroundColor = this.backgroundColor;
+      if (this.border) {
+        this.$refs.wrapper.style.border = `1px solid ${this.borderColor}`;
+      }
+    },
+  },
+
+  mounted: function () {
+    if (this.storeId && this.webId && this.product) {
+      this.fetch();
+      this.loadWidgetOptions();
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.martan-snippets {
+  max-width: 525px;
+  border-radius: 8px;
+  display: flex;
+  overflow: hidden;
+  background-color: #e3e3e3;
+  box-shadow: none;
+
+  &__galery {
+    img {
+      border-radius: 6px;
+      aspect-ratio: 1 / 1;
+      width: 60px;
+      object-fit: cover;
+    }
+  }
+
+  &__reviews {
+    height: 60px;
+    max-width: fit-content;
+    flex: 1 1 0%;
+    display: flex;
+    flex-direction: column;
+    // overflow: hidden;
+
+    &-info {
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+  }
+
+  &__controls {
+    button {
+      background: #fff;
+      border-radius: 50%;
+      border: none;
+      color: var(--secondary);
+      cursor: pointer;
+      display: block;
+      font-size: 10px;
+      line-height: 1;
+      opacity: 0.9;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      transition: opacity 0.2s;
+      z-index: 2;
+      height: 20px;
+      width: 20px;
+      box-shadow: 0px -2px 12px rgba(0, 0, 0, 0.08);
+      transition: all ease-in-out 0.3s;
+      &:hover {
+        opacity: 0.7;
+      }
+      &.left {
+        left: -5px;
+      }
+
+      &.right {
+        right: -5px;
+      }
+    }
+  }
+
+  .glide__slide {
+    margin-left: 5px;
+    margin-right: 5px;
+    font-size: 14px;
+    line-height: 1.5;
+    font-weight: normal;
+    scroll-snap-align: start;
+    display: flex;
+    align-items: center;
+    justify-content: stretch;
+    padding: 12px;
+    gap: 12px;
+  }
+}
+</style>

package/src/widgets/snippets/index.js

@@ -0,0 +1,45 @@
+import Vue from 'vue'
+import Snippets from './Snippets.vue'
+
+export default (options = {}, elId = 'snippet_widget') => {
+  const $el = document.getElementById(elId)
+
+  if (!options || !$el || !$el.dataset || !$el.dataset.sku) {
+    return
+  }
+
+  const { sku } = $el.dataset
+
+  const storeId = options.store_id
+  const webId = options.web_id
+  const widgetOptions = options.widget_snippet || {}
+
+  const starColor = widgetOptions.star_color || null
+  const border = widgetOptions.border || false
+  const backgroundColor = widgetOptions.background_color || null
+  const textColor = widgetOptions.text_color || null
+  const borderColor = widgetOptions.border_color || null
+
+  const obs = new IntersectionObserver((_, observe) => {
+    new Vue({
+      render(h) {
+        return h(Snippets, {
+          props: {
+            product: sku,
+            storeId,
+            webId,
+            starColor,
+            border,
+            borderColor,
+            backgroundColor,
+            textColor
+          }
+        })
+      }
+    }).$mount($el)
+
+    observe.disconnect()
+  })
+
+  obs.observe($el)
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('../../webpack.config')