feat: image processing improve

frontend/admin/src/utils/helpers.js

@@ -1,9 +1,7 @@
 export function getThumb(imageUrl) {
-  if (!imageUrl) return '/image/no_image.png';
-  const extIndex = imageUrl.lastIndexOf('.');
-  const ext = imageUrl.substring(extIndex);
-  const filename = imageUrl.substring(0, extIndex);
-  return `/image/cache/${filename}-100x100${ext}`;
+  const route = 'extension/tgshop/handle';
+  const url = new URL(`${window.TeleCart.shop_base_url}/index.php?route=${route}&api_action=getImage&path=${imageUrl}&size=100x100`);
+  return url.toString();
 }
 
 export function rub(value) {

frontend/spa/package-lock.json

@@ -19,7 +19,7 @@
         "js-md5": "^0.8.3",
         "ofetch": "^1.4.1",
         "pinia": "^3.0.3",
-        "swiper": "^11.2.10",
+        "swiper": "^12.0.3",
         "vue": "^3.5.22",
         "vue-imask": "^7.6.1",
         "vue-router": "^4.6.3",
@@ -5638,9 +5638,9 @@
       }
     },
     "node_modules/swiper": {
-      "version": "11.2.10",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.10.tgz",
-      "integrity": "sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==",
+      "version": "12.0.3",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.0.3.tgz",
+      "integrity": "sha512-BHd6U1VPEIksrXlyXjMmRWO0onmdNPaTAFduzqR3pgjvi7KfmUCAm/0cj49u2D7B0zNjMw02TSeXfinC1hDCXg==",
       "funding": [
         {
           "type": "patreon",

frontend/spa/package.json

@@ -24,7 +24,7 @@
     "js-md5": "^0.8.3",
     "ofetch": "^1.4.1",
     "pinia": "^3.0.3",
-    "swiper": "^11.2.10",
+    "swiper": "^12.0.3",
     "vue": "^3.5.22",
     "vue-imask": "^7.6.1",
     "vue-router": "^4.6.3",

frontend/spa/src/components/ProductImageSwiper.vue

@@ -1,28 +1,36 @@
 <template>
   <Swiper
-      :lazy="true"
       :modules="modules"
       :pagination="pagination"
+      :virtual="virtual"
       @sliderMove="hapticScroll"
       class="radius-box"
   >
     <SwiperSlide
-        v-for="image in images"
+        v-for="(image, index) in images"
         :key="image.url"
+        :virtualIndex="index"
     >
       <img
           :src="image.url"
-          :alt="image.alt"
           loading="lazy"
+          :alt="image.alt"
           class="w-full h-full radius-box"
+          @load="onLoad(image.url)"
+          @error="onLoad(image.url)"
       />
+      <div v-if="!loaded[image.url]" class="swiper-lazy-preloader"></div>
     </SwiperSlide>
   </Swiper>
 </template>
 
 <script setup>
+import {ref} from 'vue';
 import {Swiper, SwiperSlide} from 'swiper/vue';
+import {Pagination, Virtual} from 'swiper/modules';
 import {useHapticScroll} from "@/composables/useHapticScroll.js";
+import 'swiper/css';
+import 'swiper/css/pagination';
 
 const props = defineProps({
   images: {
@@ -31,12 +39,22 @@ const props = defineProps({
   },
 });
 
-const modules = [];
+const modules = [Pagination, Virtual];
 const hapticScroll = useHapticScroll();
 const pagination = {
   clickable: true,
   dynamicBullets: false,
 };
+const virtual = {
+  enabled: true,
+  addSlidesAfter: 1,
+  addSlidesBefore: 0,
+};
+
+const loaded = ref({});
+const onLoad = (url) => {
+  if (url) loaded.value[url] = true;
+};
 </script>
 
 <style scoped>