From 1d37615e19902e66112e0ee8742274d4127842c9 Mon Sep 17 00:00:00 2001 From: Anas <93322743+bj-anas@users.noreply.github.com> Date: Wed, 15 Mar 2023 02:03:48 +0100 Subject: [PATCH 1/5] upload image logic --- assets/dropdown-menu.js | 2 +- assets/product.css | 39 +++++++++++++++--- assets/product.js | 48 ---------------------- assets/upload-image.js | 70 ++++++++++++++++++++++++++++++++ sections/product-column.liquid | 8 +--- sections/product.liquid | 1 + snippets/product-variants.liquid | 21 +++++++--- styles/product.scss | 44 +++++++++++++++++--- 8 files changed, 162 insertions(+), 71 deletions(-) create mode 100644 assets/upload-image.js diff --git a/assets/dropdown-menu.js b/assets/dropdown-menu.js index 279125f6..89d5f494 100644 --- a/assets/dropdown-menu.js +++ b/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) { diff --git a/assets/product.css b/assets/product.css index b30ef354..149b75ed 100644 --- a/assets/product.css +++ b/assets/product.css @@ -194,11 +194,40 @@ 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(--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 .active { border: 1px solid #000000; diff --git a/assets/product.js b/assets/product.js index 433100d1..53c688fe 100644 --- a/assets/product.js +++ b/assets/product.js @@ -6,54 +6,6 @@ function previewProductImage(element) { setElementActive(element); } -/** - * Upload image input handler - * @param {HTMLElement} element - */ -function uploadImage(element) { - const parentSection = element.closest('.yc-single-product'); - const uploadInput = parentSection.querySelector('#yc-upload'); - 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.onload = function () { - const base64 = reader.result; - - const previews = parentSection.querySelectorAll( - '.yc-upload-preview img' - ); - previews.forEach((preview) => { - preview.remove(); - }); - - const uploadArea = parentSection.querySelector('.yc-upload'); - uploadArea.style.display = 'none'; - - const preview = document.createElement('img'); - preview.src = base64; - - preview.addEventListener('click', function () { - uploadArea.style.display = 'flex'; - uploadInput.value = ''; - preview.remove(); - }); - parentSection.querySelector('.yc-upload-preview').appendChild(preview); - }; - - const res = await youcanjs.product.upload(this.files[0]); - if (res.error) return notify(res.error, 'error'); - - uploadedImageLink.value = res.link; - } - }); -} - (function productImageHoverZoomer() { const singleProductImagesPreview = document.querySelectorAll( '.product-images-container' diff --git a/assets/upload-image.js b/assets/upload-image.js new file mode 100644 index 00000000..824fbd9c --- /dev/null +++ b/assets/upload-image.js @@ -0,0 +1,70 @@ +/** + * 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 progressBar = imagePreview.querySelector('.progress-bar'); + 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("loadstart", () => { + console.log('file start uploading'); + uploadArea.style.display = 'none'; + imagePreview.style.display = 'block'; + imageWrapper.style.opacity = 0.4; + progressBar.style.display = "block"; + }); + + reader.addEventListener("load", () => { + console.log('File loaded successfully'); + const base64 = reader.result; + const previews = parentSection.querySelectorAll('.yc-image-preview .yc-image img'); + + previews.forEach((preview) => { + preview.remove(); + }); + imageWrapper.style.opacity = 1; + progressBar.style.display = "none"; + + 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(); + }); + }); + + reader.addEventListener("progress", (event) => { + console.log('Progress event fired'); + if (event.lengthComputable) { + const percent = (event.loaded / event.total) * 100; + progressBar.setAttribute("value", percent); + } + }); + + const res = await youcanjs.product.upload(this.files[0]); + if (res.error) return notify(res.error, 'error'); + + uploadedImageLink.value = res.link; + } + }); +} + + + diff --git a/sections/product-column.liquid b/sections/product-column.liquid index 5bcdd0db..fbb405c8 100644 --- a/sections/product-column.liquid +++ b/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 -%}
@@ -129,6 +128,3 @@ ] } {%- endschema -%} - - -{{ 'product.js' | asset_url | script_tag_deferred }} diff --git a/sections/product.liquid b/sections/product.liquid index 1dfada86..547cd9d8 100644 --- a/sections/product.liquid +++ b/sections/product.liquid @@ -358,4 +358,5 @@ const productId = '{{ selected_product.id }}'; {%- endjavascript -%} +{{ 'upload-image.js' | asset_url | script_tag_deferred }} {{ 'product.js' | asset_url | script_tag_deferred }} diff --git a/snippets/product-variants.liquid b/snippets/product-variants.liquid index 31ac268a..a2f9b78b 100644 --- a/snippets/product-variants.liquid +++ b/snippets/product-variants.liquid @@ -60,14 +60,25 @@ {% endfor %} {% when 'upload_image_zone' %} -
+
{{ 'snippets.single_product.variants.upload' | t }}
-
+
+
+
+ +
+ name of the image + size of the image +
+
+ +
+ +
{% when 'color_base_buttons' %} {% when 'upload_image_zone' %}
- + {{ 'snippets.single_product.variants.upload' | t }}
@@ -77,7 +77,9 @@
- +
+
+
{% when 'color_base_buttons' %}