Merge branch 'main' of github.com:shurco/litecart

Author: shurco

internal/queries/products.go

@@ -141,7 +141,7 @@ func (q *ProductQueries) Product(private bool, id string) (*models.Product, erro
 				product.attribute, 
 				product.digital,
 				product.seo, 
-				json_array(json_object('id', product_image.id, 'name', product_image.name, 'ext', product_image.ext)) as images,
+				json_group_array(json_object('id', product_image.id, 'name', product_image.name, 'ext', product_image.ext)) as images,
 				strftime('%s', product.created), 
 				strftime('%s', product.updated)
 			FROM product 

web/site/index.html

@@ -10,8 +10,8 @@
           <div class="relative bg-white mt-2">
             <div class="flex justify-between cursor-pointer">
               <span class="tracking-wider text-gray-900">{{ costFormat( item.amount ) }} {{ currency }}</span>
-              <button @click="inCart(item.id) ? removeCart(item.id) : addCart(item.id)" :class="{'bg-green-600': !inCart(item.id),'bg-red-600': inCart(item.id)}"
-                class="group relative inline-flex items-center overflow-hidden rounded px-6 py-3 text-white focus:outline-none focus:ring">
+
+              <button @click="inCart(item.id) ? removeCart(item.id) : addCart(item.id)" :class="{'bg-green-600': !inCart(item.id),'bg-red-600': inCart(item.id)}" class="group relative inline-flex items-center overflow-hidden rounded px-6 py-3 text-white focus:outline-none focus:ring">
                 <span v-if="!inCart(item.id)" class="absolute -start-full transition-all group-hover:start-4">
                   <svg class="h-4 w-4 text-white">
                     <use xlink:href="/assets/img/sprite.svg#plus" />
@@ -33,6 +33,7 @@
                   </svg>
                 </span>
               </button>
+
             </div>
             <a :href="`/products/${item.slug}`" class="block overflow-hidden group mb-5 mt-2">
               <h3 class="text-sm text-gray-700 group-hover:underline group-hover:underline-offset-4">{{item.name}}</h3>

web/site/product.html

@@ -2,12 +2,31 @@
   <section>
     <div class="max-w-screen-xl px-4 py-8 mx-auto sm:px-6 sm:py-12 lg:px-8">
       <div class="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8" v-if="load">
-        <div class="relative h-[350px] sm:h-[450px]">
-          <img :src="(product.images ? `/uploads/${product.images[0].name}_md.${product.images[0].ext}` : '/assets/img/noimage.png')" alt
-            class="rounded-lg absolute inset-0 h-full w-full object-cover opacity-100 group-hover:opacity-0" />
-          <img :src="(product.images ? `/uploads/${product.images[0].name}_md.${product.images[0].ext}` : '/assets/img/noimage.png')" alt
-            class="rounded-lg absolute inset-0 h-full w-full object-cover opacity-0 group-hover:opacity-100" />
-        </div>
+
+        <template v-if="!product.images">
+          <div class="relative h-[350px] sm:h-[450px]">
+            <img src="/assets/img/noimage.png" alt="" class="rounded-lg absolute inset-0 h-full w-full object-cover" />
+          </div>
+        </template>
+
+        <template v-else-if="product.images.length === 1">
+          <div class="relative h-[350px] sm:h-[450px]">
+            <img :src="`/uploads/${product.images[0].name}_md.${product.images[0].ext}`" alt="" class="rounded-lg absolute inset-0 h-full w-full object-cover" />
+          </div>
+        </template>
+
+        <template v-else>
+          <div class="relative overflow-hidden h-[350px] sm:h-[450px] rounded-lg">
+            <div class="flex w-full h-full transition-transform duration-500 ease-in-out" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
+              <div class="flex-shrink-0 w-full h-full" v-for="(slide, index) in product.images" :key="index">
+                <img :src="`/uploads/${slide.name}_md.${slide.ext}`" alt="" class="block w-full h-full object-cover" />
+              </div>
+            </div>
+            <button @click="prevSlide(product.images.length)" class="absolute left-0 top-1/2 bg-white p-2 rounded-r-lg">&#8592;</button>
+            <button @click="nextSlide(product.images.length)" class="absolute right-0 top-1/2 bg-white p-2 rounded-l-lg">&#8594;</button>
+          </div>
+        </template>
+
         <div class="lg:col-span-2">
           <h1 class="text-xl font-bold text-gray-900 sm:text-3xl">{{product.name}}</h1>
           <div class="mt-4">