YSHOP2-191 : COD theme > Product page > Integrate the new design of uploading image variant

assets/dropdown-menu.js

@@ -1,6 +1,6 @@
 const dropdownBtn = $('.dropbtn');
 const dropdownContent = $('.dropdown-content');
-const dropdownOptions = dropdownContent.querySelectorAll('li');
+const dropdownOptions = dropdownContent?.querySelectorAll('li');
 
 function showDropDownMenu(customContent) {
   if(customContent) {

assets/main.css

@@ -290,19 +290,27 @@ input:not([type=radio]),
 
 .yc-upload {
   border: 1px dashed var(--yc-neutral-light-color);
+  color: var(--yc-neutral-color);
   width: 100%;
   height: 120px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  border-radius: 8px;
+  gap: 12px;
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 120%;
   cursor: pointer;
 }
 .yc-upload input {
   display: none;
 }
-.yc-upload .upload-msg {
-  margin-left: 5px;
+.yc-upload .upload-icon {
+  width: 22px;
+  height: 22px;
+  color: #A7A7A7;
 }
 
 .yc-number {

assets/product-card.css

@@ -119,5 +119,5 @@
 #selected-product-variants .image-container img {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
 }

assets/product.css

@@ -194,11 +194,53 @@
     gap: 30px;
   }
 }
-.yc-single-product .product-details .product-options .product-option .yc-upload-preview img {
-  border: 1px solid var(--yc-neutral-light-color);
-  padding: 5px;
-  aspect-ratio: 1;
-  height: 100px;
+.yc-single-product .product-details .product-options .product-option .yc-upload-preview {
+  display: none;
+  background: #F9F9F9;
+  height: auto;
+  border-radius: 8px;
+  padding: 14px 18px;
+}
+.yc-single-product .product-details .product-options .product-option .yc-upload-preview .yc-upload-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 15px;
+}
+.yc-single-product .product-details .product-options .product-option .yc-upload-preview .yc-upload-wrapper .yc-image-preview {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+.yc-single-product .product-details .product-options .product-option .yc-upload-preview .yc-upload-wrapper .yc-image-preview img {
+  width: 67px;
+  height: auto;
+  border-radius: 4px;
+  object-fit: cover;
+}
+.yc-single-product .product-details .product-options .product-option .yc-upload-preview .yc-upload-wrapper .yc-image-preview .yc-image-info {
+  display: grid;
+  gap: 8px;
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 120%;
+  color: var(--yc-neutral-color);
+}
+.yc-single-product .product-details .product-options .product-option .yc-upload-preview .yc-upload-wrapper .yc-image-preview .yc-image-info .image-size {
+  color: #BABABA;
+}
+.yc-single-product .product-details .product-options .product-option .yc-upload-preview .progress-container {
+  width: 100%;
+  height: 3px;
+  background-color: #cecece;
+  border-radius: 5px;
+}
+.yc-single-product .product-details .product-options .product-option .yc-upload-preview .progress-bar {
+  width: 0%;
+  height: 100%;
+  background-color: var(--yc-primary-color);
+  border-radius: 5px;
+  transition: width 1s ease-in-out;
 }
 .yc-single-product .product-details .product-options .active {
   border: 1px solid #000000;

assets/product.js

@@ -13,6 +13,13 @@ function previewProductImage(element) {
 function uploadImage(element) {
   const parentSection = element.closest('.yc-single-product');
   const uploadInput = parentSection.querySelector('#yc-upload');
+  const uploadArea = parentSection.querySelector('.yc-upload');
+  const imagePreview = parentSection.querySelector('.yc-upload-preview');
+  const imageWrapper = imagePreview.querySelector('.yc-image-preview');
+  const progressContainer =  imagePreview.querySelector('.progress-container');
+  const imageName = $('.yc-image-info .image-name');
+  const imageSize = $('.yc-image-info .image-size');
+  const closePreviewButton = $('#close-preview');
   let uploadedImageLink = parentSection.querySelector('#yc-upload-link');
 
   uploadInput.click();
@@ -22,36 +29,81 @@ function uploadImage(element) {
       const reader = new FileReader();
       reader.readAsDataURL(this.files[0]);
 
-      reader.onload = function () {
+      reader.addEventListener("load", () => {
         const base64 = reader.result;
+        const previews = parentSection.querySelectorAll('.yc-image-preview .yc-image img');
 
-        const previews = parentSection.querySelectorAll(
-          '.yc-upload-preview img'
-        );
         previews.forEach((preview) => {
           preview.remove();
         });
 
-        const uploadArea = parentSection.querySelector('.yc-upload');
         uploadArea.style.display = 'none';
+        imagePreview.style.display = 'block';
+        imageWrapper.style.opacity = 0.4;
+        imageName.innerText = this.files[0].name;
+        progressContainer.style.display = "block";
 
         const preview = document.createElement('img');
         preview.src = base64;
+        parentSection.querySelector('.yc-image-preview .yc-image').appendChild(preview);
 
-        preview.addEventListener('click', function () {
+        closePreviewButton.addEventListener('click', function () {
           uploadArea.style.display = 'flex';
+          imagePreview.style.display = 'none';
           uploadInput.value = '';
           preview.remove();
         });
-        parentSection.querySelector('.yc-upload-preview').appendChild(preview);
-      };
+
+        getFileSize(this.files[0], preview);
+        smoothProgressBar();
+      });
 
       const res = await youcanjs.product.upload(this.files[0]);
       if (res.error) return notify(res.error, 'error');
 
       uploadedImageLink.value = res.link;
     }
   });
+
+  function getFileSize(file, source) {
+    const fileSizeInBytes = file.size;
+    const fileSizeInKB = fileSizeInBytes / 1024;
+    const fileSizeInMB = fileSizeInKB / 1024;
+
+    if(fileSizeInMB > 2) {
+      source.src = '';
+      source.style.height = "40px";
+      imageName.style.color = "red";
+      imageName.innerText = sizeBigMessage;
+      imageSize.innerText = fileSizeInMB.toFixed(2) + " Mb";
+    } else if(fileSizeInMB < 1) {
+      imageName.style.color = "inherit";
+      imageSize.innerText = fileSizeInKB.toFixed(2) + " Kb";
+    } else {
+      imageName.style.color = "inherit";
+      imageSize.innerText = fileSizeInMB.toFixed(2) + " Mb";
+    }
+  }
+
+  function smoothProgressBar() {
+    const progressBar = document.querySelector('.progress-bar');
+    let progress = 0;
+    progressBar.style.width = progress;
+    const interval = setInterval(() => {
+      if (progress >= 100) {
+        setTimeout(() => {
+          progressContainer.style.display = 'none';
+          imageWrapper.style.opacity = 1;
+        }, 1000);
+        clearInterval(interval);
+        return;
+      }
+      progress += 10;
+      progressBar.style.width = `${progress}%`;
+    }, 200);
+
+    progressBar.style.transition = 'width 1s ease-in-out';
+  }
 }
 
 (function productImageHoverZoomer() {
@@ -434,7 +486,7 @@ function showSelectedVariants() {
         variantOption = createAndSetText(variantName, imageBasedButton, 'image-container').element;
         break;
       case 'upload_image_zone':
-        const uploadImageZone = variant.querySelector(' .yc-upload-preview img')?.outerHTML;
+        const uploadImageZone = variant.querySelector('.yc-image-preview .yc-image img')?.outerHTML;
         variantOption = createAndSetText(variantName, uploadImageZone, 'image-container').element;
         break;
     }

assets/upload-image.js

@@ -0,0 +1,98 @@
+/**
+ * Upload image input handler
+ * @param {HTMLElement} element
+ */
+function uploadImage(element) {
+  const parentSection = element.closest('.yc-single-product');
+  const uploadInput = parentSection.querySelector('#yc-upload');
+  const uploadArea = parentSection.querySelector('.yc-upload');
+  const imagePreview = parentSection.querySelector('.yc-upload-preview');
+  const imageWrapper = imagePreview.querySelector('.yc-image-preview');
+  const progressContainer =  imagePreview.querySelector('.progress-container');
+  const imageName = $('.yc-image-info .image-name');
+  const imageSize = $('.yc-image-info .image-size');
+  const closePreviewButton = $('#close-preview');
+  let uploadedImageLink = parentSection.querySelector('#yc-upload-link');
+
+  uploadInput.click();
+
+  uploadInput.addEventListener('change', async function () {
+    if (this.files && this.files[0]) {
+      const reader = new FileReader();
+      reader.readAsDataURL(this.files[0]);
+
+      reader.addEventListener("load", () => {
+        const base64 = reader.result;
+        const previews = parentSection.querySelectorAll('.yc-image-preview .yc-image img');
+
+        previews.forEach((preview) => {
+          preview.remove();
+        });
+
+        uploadArea.style.display = 'none';
+        imagePreview.style.display = 'block';
+        imageWrapper.style.opacity = 0.4;
+        imageName.innerText = this.files[0].name;
+        progressContainer.style.display = "block";
+
+        const preview = document.createElement('img');
+        preview.src = base64;
+        parentSection.querySelector('.yc-image-preview .yc-image').appendChild(preview);
+
+        closePreviewButton.addEventListener('click', function () {
+          uploadArea.style.display = 'flex';
+          imagePreview.style.display = 'none';
+          uploadInput.value = '';
+          preview.remove();
+        });
+
+        getFileSize(this.files[0], preview);
+        smoothProgressBar();
+      });
+
+      const res = await youcanjs.product.upload(this.files[0]);
+      if (res.error) return notify(res.error, 'error');
+
+      uploadedImageLink.value = res.link;
+    }
+  });
+
+  function getFileSize(file, source) {
+    const fileSizeInBytes = file.size;
+    const fileSizeInKB = fileSizeInBytes / 1024;
+    const fileSizeInMB = fileSizeInKB / 1024;
+
+    if (fileSizeInMB > 2) {
+      source.src = '';
+      source.style.height = "40px";
+      imageName.style.color = "red";
+      imageName.innerText = sizeBigMessage;
+    }
+
+    if (fileSizeInMB < 1) {
+      return imageSize.innerText = fileSizeInKB.toFixed(2) + " Kb";
+    } else {
+      return imageSize.innerText = fileSizeInMB.toFixed(2) + " Mb";
+    }
+  }
+
+  function smoothProgressBar() {
+    const progressBar = document.querySelector('.progress-bar');
+    let progress = 0;
+    progressBar.style.width = progress;
+    const interval = setInterval(() => {
+      if (progress >= 100) {
+        setTimeout(() => {
+          progressContainer.style.display = 'none';
+          imageWrapper.style.opacity = 1;
+        }, 1000);
+        clearInterval(interval);
+        return;
+      }
+      progress += 10;
+      progressBar.style.width = `${progress}%`;
+    }, 200);
+
+    progressBar.style.transition = 'width 1s ease-in-out';
+  }
+}

locales/ar.default.json

@@ -1,6 +1,7 @@
 {
   "general":{
-    "show_more_button": "عرض المزيد"
+    "show_more_button": "عرض المزيد",
+    "size_big_message": "المرجو تحميل صورة أقل من 2mb"
   },
   "navbar": {
     "search": {
@@ -67,7 +68,7 @@
     "single_product": {
       "quantity": "الكمية",
       "variants": {
-        "upload": "تحميل صورة"
+        "upload": "تحميل صورة (PNG, JPEG)"
       }
     },
     "express_checkout": {

sections/product-column.liquid

@@ -6,16 +6,15 @@
     padding-bottom: {{ section.settings.padding_bottom}}px;
   }
 
-  .product_customization { 
+  .product_customization {
     background-color: {{ section.settings.background_color.hex }};
-  } 
+  }
 
   @media screen and (max-width: 768px) {
     .product_customization {
       display: {% if section.settings.show_product %}block{% else %}none{% endif %};
     }
   }
-
 {%- endstyle -%}
 
 <section class='product_customization'>
@@ -129,6 +128,3 @@
     ]
   }
 {%- endschema -%}
-
-
-{{ 'product.js' | asset_url | script_tag_deferred }}

sections/product.liquid

@@ -356,6 +356,7 @@
   const variants = JSON.parse(variantStr.slice(1, -1));
   const ratings = "{{ 'reviews.ratings' | t }}";
   const productId = '{{ selected_product.id }}';
+  const sizeBigMessage = "{{ 'general.size_big_message' | t }}";
 {%- endjavascript -%}
 
 {{ 'product.js' | asset_url | script_tag_deferred }}