From be47516e23040d751126579a377ad520df849f61 Mon Sep 17 00:00:00 2001 From: Monica Mateiu Date: Wed, 19 Oct 2022 08:58:03 +0100 Subject: [PATCH 1/9] Add 'lightbox', 'hover', and 'none' zoom settings to images --- assets/magnify.js | 43 +++++++++++++++++++++++++++++++ assets/section-main-product.css | 42 ++++++++++++++++++++++++++++++ assets/theme-editor.js | 10 +++++++ locales/cs.schema.json | 13 ++++++++++ locales/da.schema.json | 13 ++++++++++ locales/de.schema.json | 13 ++++++++++ locales/en.default.schema.json | 13 ++++++++++ locales/es.schema.json | 13 ++++++++++ locales/fi.schema.json | 13 ++++++++++ locales/fr.schema.json | 13 ++++++++++ locales/it.schema.json | 13 ++++++++++ locales/ja.schema.json | 13 ++++++++++ locales/ko.schema.json | 13 ++++++++++ locales/nb.schema.json | 13 ++++++++++ locales/nl.schema.json | 13 ++++++++++ locales/pl.schema.json | 13 ++++++++++ locales/pt-BR.schema.json | 13 ++++++++++ locales/pt-PT.schema.json | 13 ++++++++++ locales/sv.schema.json | 13 ++++++++++ locales/th.schema.json | 13 ++++++++++ locales/tr.schema.json | 13 ++++++++++ locales/vi.schema.json | 13 ++++++++++ locales/zh-CN.schema.json | 13 ++++++++++ locales/zh-TW.schema.json | 13 ++++++++++ sections/featured-product.liquid | 28 ++++++++++++++++++++ sections/main-product.liquid | 27 +++++++++++++++++++ snippets/product-thumbnail.liquid | 9 +++++-- 27 files changed, 430 insertions(+), 2 deletions(-) create mode 100644 assets/magnify.js diff --git a/assets/magnify.js b/assets/magnify.js new file mode 100644 index 00000000000..31f6400451e --- /dev/null +++ b/assets/magnify.js @@ -0,0 +1,43 @@ +// create a container and set the full-size image as its background +function createOverlay(image) { + overlay = document.createElement('div'); + overlay.setAttribute('class', 'image-magnify-full-size'); + overlay.setAttribute('aria-hidden', 'true'); + overlay.style.backgroundImage = `url('${image.src}')`; + image.parentElement.insertBefore(overlay, image); + return overlay; +}; + +function moveWithHover(image, event, zoomRatio) { + // calculate mouse position + const ratio = image.height / image.width; + const container = event.target.getBoundingClientRect(); + const xPosition = event.clientX - container.left; + const yPosition = event.clientY - container.top; + const xPercent = `${xPosition / (overlay.clientWidth / 100)}%`; + const yPercent = `${yPosition / ((overlay.clientWidth * ratio) / 100)}%`; + + // determine what to show in the frame + overlay.style.backgroundPosition = `${xPercent} ${yPercent}`; + overlay.style.backgroundSize = `${image.width * zoomRatio}px`; +}; + +function magnify(image, zoomRatio) { + // add full-size image on top of original + const overlay = createOverlay(image); + overlay.onclick = () => overlay.remove(); + overlay.onmousemove = (event) => moveWithHover(image, event, zoomRatio); + overlay.onmouseleave = () => overlay.remove(); +} + +function enableZoomOnHover(zoomRatio) { + const images = document.querySelectorAll('.image-magnify-hover'); + images.forEach(image => { + image.onclick = (event) => { + magnify(image, zoomRatio); + moveWithHover(image, event, zoomRatio); + }; + }); +} + +enableZoomOnHover(2); diff --git a/assets/section-main-product.css b/assets/section-main-product.css index 743937bb19e..c3657602010 100644 --- a/assets/section-main-product.css +++ b/assets/section-main-product.css @@ -1148,6 +1148,48 @@ a.product__text { border-color: rgb(var(--color-foreground)); } +.image-magnify-full-size { + cursor: zoom-out; + z-index: 1; + margin: 0; +} + +.image-magnify-hover { + cursor: zoom-in; +} + +.product__media-zoom-none { + display: none; +} + +.product__media-icon--none { + display: none; +} + +@media (hover: hover) { + .product__media-zoom-hover { + display: none; + } + + .product__media-icon--hover { + display: none; + } +} + +@media screen and (max-width: 23.4375rem) { + .product__media-zoom-hover { + display: flex; + } + + .product__media-icon--hover { + display: flex; + } +} + +.js .product__media { + overflow: hidden !important; +} + .thumbnail[aria-current]:focus-visible { box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); } diff --git a/assets/theme-editor.js b/assets/theme-editor.js index c847f7a9e69..10b33c5fe19 100644 --- a/assets/theme-editor.js +++ b/assets/theme-editor.js @@ -18,3 +18,13 @@ document.addEventListener('shopify:block:deselect', function(event) { const parentSlideshowComponent = event.target.closest('slideshow-component'); if (parentSlideshowComponent.autoplayButtonIsSetToPlay) parentSlideshowComponent.play(); }); + +document.addEventListener('shopify:section:load', () => { + const zoomOnHoverScript = document.querySelector('[id^=enableZoomOnHover]'); + if (!zoomOnHoverScript) return; + if (zoomOnHoverScript) { + const newScriptTag = document.createElement('script'); + newScriptTag.src = zoomOnHoverScript.src; + zoomOnHoverScript.parentNode.replaceChild(newScriptTag, zoomOnHoverScript); + } +}); diff --git a/locales/cs.schema.json b/locales/cs.schema.json index d1d2f247d5f..c8063728be6 100644 --- a/locales/cs.schema.json +++ b/locales/cs.schema.json @@ -1878,6 +1878,19 @@ "options__2": { "label": "Vpravo" } + }, + "image_zoom": { + "label": "Zvětšení obrázků", + "info": "Klikněte a podržte kurzor nad výchozími možnostmi. Tím otevřete Lightbox na mobilním zařízení.", + "options__1": { + "label": "Otevřít Lightbox" + }, + "options__2": { + "label": "Kliknout a podržet kurzor" + }, + "options__3": { + "label": "Bez zvětšení" + } } } }, diff --git a/locales/da.schema.json b/locales/da.schema.json index 85955798443..40e2c52928c 100644 --- a/locales/da.schema.json +++ b/locales/da.schema.json @@ -1878,6 +1878,19 @@ "options__2": { "label": "Højre" } + }, + "image_zoom": { + "label": "Billedzoom", + "info": "Klik og hold musen over standarder for at åbne lightbox på mobilen.", + "options__1": { + "label": "Åbn lightbox" + }, + "options__2": { + "label": "Klik og hold musen over" + }, + "options__3": { + "label": "Ingen zoom" + } } } }, diff --git a/locales/de.schema.json b/locales/de.schema.json index 07a52b5e061..a54324fb626 100644 --- a/locales/de.schema.json +++ b/locales/de.schema.json @@ -1877,6 +1877,19 @@ "options__2": { "label": "Rechts" } + }, + "image_zoom": { + "label": "Bildzoom", + "info": "Klicke auf und fahre mit der Maus über \"Standards\", um Lightbox auf deinem Mobilgerät zu öffnen.", + "options__1": { + "label": "Lightbox öffnen" + }, + "options__2": { + "label": "Klicken und mit der Maus darüber fahren" + }, + "options__3": { + "label": "Nicht zoomen" + } } }, "name": "Produktinformationen" diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index 6d0e5397817..7fb0106bd29 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -1998,6 +1998,19 @@ "label": "Large" } }, + "image_zoom": { + "label": "Image zoom", + "info": "Click and hover defaults to open lightbox on mobile.", + "options__1": { + "label": "Open lightbox" + }, + "options__2": { + "label": "Click and hover" + }, + "options__3": { + "label": "No zoom" + } + }, "media_position": { "label": "Desktop media position", "info": "Position is automatically optimized for mobile.", diff --git a/locales/es.schema.json b/locales/es.schema.json index 0286a1af238..bdffcab3a8d 100644 --- a/locales/es.schema.json +++ b/locales/es.schema.json @@ -1878,6 +1878,19 @@ "options__2": { "label": "Derecha" } + }, + "image_zoom": { + "label": "Ampliar imagen", + "info": "En dispositivos móviles, la opción Hacer clic y pasar sobre el elemento cambia a Abrir Lightbox de forma predeterminada.", + "options__1": { + "label": "Abrir Lightbox" + }, + "options__2": { + "label": "Hacer clic y pasar sobre el elemento" + }, + "options__3": { + "label": "Sin zoom" + } } } }, diff --git a/locales/fi.schema.json b/locales/fi.schema.json index ced6a5c76fc..6e33724bd74 100644 --- a/locales/fi.schema.json +++ b/locales/fi.schema.json @@ -1877,6 +1877,19 @@ "options__2": { "label": "Oikea" } + }, + "image_zoom": { + "label": "Kuvan zoomaus", + "info": "Avaa lightbox-ikkuna mobiililaitteessa napsauttamalla oletusarvoja ja viemällä osoitin niiden päälle.", + "options__1": { + "label": "Avaa lightbox-ikkuna" + }, + "options__2": { + "label": "Napsauta ja vie osoitin päälle" + }, + "options__3": { + "label": "Ei zoomausta" + } } }, "name": "Tuotetiedot" diff --git a/locales/fr.schema.json b/locales/fr.schema.json index 4fb55d4d591..d244d6b0053 100644 --- a/locales/fr.schema.json +++ b/locales/fr.schema.json @@ -1877,6 +1877,19 @@ "options__2": { "label": "Droite" } + }, + "image_zoom": { + "label": "Le zoom sur image", + "info": "Cliquez et passez la souris sur les éléments par défaut pour ouvrir lightbox sur mobile.", + "options__1": { + "label": "Ouvrir lightbox" + }, + "options__2": { + "label": "Cliquer et passer la souris" + }, + "options__3": { + "label": "Pas de zoom" + } } }, "name": "Informations produits" diff --git a/locales/it.schema.json b/locales/it.schema.json index 1e672966024..bf604fe7848 100644 --- a/locales/it.schema.json +++ b/locales/it.schema.json @@ -1878,6 +1878,19 @@ "options__2": { "label": "A destra" } + }, + "image_zoom": { + "label": "Zoom immagine", + "info": "Clicca e fai scorrere il mouse sopra le impostazioni predefinite per aprire una lightbox sul dispositivo mobile.", + "options__1": { + "label": "Apri la lightbox" + }, + "options__2": { + "label": "Clicca e fai scorrere il mouse" + }, + "options__3": { + "label": "Nessuno zoom" + } } } }, diff --git a/locales/ja.schema.json b/locales/ja.schema.json index 78820b28653..fcbaa7bfbe5 100644 --- a/locales/ja.schema.json +++ b/locales/ja.schema.json @@ -1878,6 +1878,19 @@ "options__2": { "label": "右" } + }, + "image_zoom": { + "label": "画像ズーム", + "info": "デフォルト設定では、クリックしてカーソルを合わせると、モバイルのLightboxが開きます。", + "options__1": { + "label": "Lightboxを開く" + }, + "options__2": { + "label": "クリックしてカーソルを合わせる" + }, + "options__3": { + "label": "ズームなし" + } } } }, diff --git a/locales/ko.schema.json b/locales/ko.schema.json index fc368e4a756..0a3add1bd5d 100644 --- a/locales/ko.schema.json +++ b/locales/ko.schema.json @@ -1878,6 +1878,19 @@ "options__2": { "label": "오른쪽" } + }, + "image_zoom": { + "label": "이미지 확대/축소", + "info": "클릭 및 커서 올리기는 모바일에서 라이트박스 열기로 기본값이 설정됩니다.", + "options__1": { + "label": "라이트박스 열기" + }, + "options__2": { + "label": "클릭 및 커서 올리기" + }, + "options__3": { + "label": "확대/축소 안 함" + } } } }, diff --git a/locales/nb.schema.json b/locales/nb.schema.json index 403c81ed3d3..df85467fd65 100644 --- a/locales/nb.schema.json +++ b/locales/nb.schema.json @@ -1877,6 +1877,19 @@ "options__2": { "label": "Høyre" } + }, + "image_zoom": { + "label": "Bildezoom", + "info": "Standard for klikk og markør for å åpne lysboks på mobil.", + "options__1": { + "label": "Åpne lysboks" + }, + "options__2": { + "label": "Klikk og hold markøren over" + }, + "options__3": { + "label": "Ingen zoom" + } } }, "name": "Produktinformasjon" diff --git a/locales/nl.schema.json b/locales/nl.schema.json index 19d3ac0a3e0..3dc97b50718 100644 --- a/locales/nl.schema.json +++ b/locales/nl.schema.json @@ -1878,6 +1878,19 @@ "options__2": { "label": "Rechts" } + }, + "image_zoom": { + "label": "Inzoomen op afbeelding", + "info": "Standaarden voor klikken en aanwijzen om Lightbox te openen op mobiel.", + "options__1": { + "label": "Lightbox openen" + }, + "options__2": { + "label": "Klikken en aanwijzen" + }, + "options__3": { + "label": "Geen zoom" + } } } }, diff --git a/locales/pl.schema.json b/locales/pl.schema.json index 5e9f50d3cb8..62c4eb500de 100644 --- a/locales/pl.schema.json +++ b/locales/pl.schema.json @@ -1878,6 +1878,19 @@ "options__2": { "label": "Prawa strona" } + }, + "image_zoom": { + "label": "Powiększenie obrazu", + "info": "Kliknij i najedź kursorem na wartości domyślne, aby otworzyć lightbox na urządzeniu mobilnym.", + "options__1": { + "label": "Otwórz lightbox" + }, + "options__2": { + "label": "Kliknij i najedź kursorem" + }, + "options__3": { + "label": "Bez powiększenia" + } } } }, diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json index ed774ece39f..a010265e4b9 100644 --- a/locales/pt-BR.schema.json +++ b/locales/pt-BR.schema.json @@ -1877,6 +1877,19 @@ "options__2": { "label": "Direita" } + }, + "image_zoom": { + "label": "Zoom de imagem", + "info": "Clique e passe o cursor para abrir a janela modal no celular.", + "options__1": { + "label": "Abrir janela modal" + }, + "options__2": { + "label": "Clicar e passar o cursor" + }, + "options__3": { + "label": "Sem zoom" + } } }, "name": "Informações do produto" diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json index b0d9db52052..ca3d1241083 100644 --- a/locales/pt-PT.schema.json +++ b/locales/pt-PT.schema.json @@ -1878,6 +1878,19 @@ "options__2": { "label": "Direita" } + }, + "image_zoom": { + "label": "Zoom da imagem", + "info": "Clique e passe o cursor para abrir a janela modal (lightbox) no telemóvel.", + "options__1": { + "label": "Abrir janela modal (lightbox)" + }, + "options__2": { + "label": "Clicar e passar o cursor" + }, + "options__3": { + "label": "Sem zoom" + } } } }, diff --git a/locales/sv.schema.json b/locales/sv.schema.json index 9620e44b5a2..30d0360ecec 100644 --- a/locales/sv.schema.json +++ b/locales/sv.schema.json @@ -1878,6 +1878,19 @@ "options__2": { "label": "Höger" } + }, + "image_zoom": { + "label": "Bildzoom", + "info": "Klicka och svep över för att öppna lightbox på mobilen.", + "options__1": { + "label": "Öppna lightbox" + }, + "options__2": { + "label": "Klicka och svep över" + }, + "options__3": { + "label": "Ingen zoom" + } } } }, diff --git a/locales/th.schema.json b/locales/th.schema.json index 7a549e9c900..939571f55dc 100644 --- a/locales/th.schema.json +++ b/locales/th.schema.json @@ -1878,6 +1878,19 @@ "options__2": { "label": "ขวา" } + }, + "image_zoom": { + "label": "การซูมรูปภาพ", + "info": "ตัวเลือก “คลิกและเลื่อนเมาส์” จะเปิด Lightbox บนอุปกรณ์เคลื่อนที่โดยค่าเริ่มต้น", + "options__1": { + "label": "เปิด Lightbox" + }, + "options__2": { + "label": "คลิกและเลื่อนเมาส์" + }, + "options__3": { + "label": "ไม่มีการซูม" + } } } }, diff --git a/locales/tr.schema.json b/locales/tr.schema.json index 054728277fe..2a29313e644 100644 --- a/locales/tr.schema.json +++ b/locales/tr.schema.json @@ -1877,6 +1877,19 @@ "options__2": { "label": "Sağ" } + }, + "image_zoom": { + "label": "Görsel yakınlaştırma", + "info": "Ligtbox'ı mobilde açmak için tıklayın ve imleci varsayılan seçeneklerin üzerine getirin.", + "options__1": { + "label": "Lightbox'ı aç" + }, + "options__2": { + "label": "Tıkla ve imleci üzerine getir" + }, + "options__3": { + "label": "Yakınlaştırma yok" + } } }, "name": "Ürün bilgileri" diff --git a/locales/vi.schema.json b/locales/vi.schema.json index fd2a39fd698..a823a454d2d 100644 --- a/locales/vi.schema.json +++ b/locales/vi.schema.json @@ -1878,6 +1878,19 @@ "options__2": { "label": "Bên phải" } + }, + "image_zoom": { + "label": "Thu phóng hình ảnh", + "info": "Nhấp và di chuột đến mục Mặc định để mở lightbox trên thiết bị di động.", + "options__1": { + "label": "Mở lightbox" + }, + "options__2": { + "label": "Nhấp và di chuột" + }, + "options__3": { + "label": "Không thu phóng" + } } } }, diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json index 0939694480c..0779a90f729 100644 --- a/locales/zh-CN.schema.json +++ b/locales/zh-CN.schema.json @@ -1878,6 +1878,19 @@ "options__2": { "label": "右" } + }, + "image_zoom": { + "label": "图片缩放", + "info": "在移动设备上打开灯箱的点击和悬停默认设置。", + "options__1": { + "label": "打开灯箱" + }, + "options__2": { + "label": "点击和悬停" + }, + "options__3": { + "label": "无缩放" + } } } }, diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json index d864b0b2815..56c490c86fc 100644 --- a/locales/zh-TW.schema.json +++ b/locales/zh-TW.schema.json @@ -1878,6 +1878,19 @@ "options__2": { "label": "靠右" } + }, + "image_zoom": { + "label": "圖片縮放", + "info": "點擊並暫留在預設值上，即可在行動裝置上開啟燈箱。", + "options__1": { + "label": "開啟燈箱" + }, + "options__2": { + "label": "點擊並暫留" + }, + "options__3": { + "label": "無縮放" + } } } }, diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid index ac5e82fa363..16e9c5856f5 100644 --- a/sections/featured-product.liquid +++ b/sections/featured-product.liquid @@ -617,6 +617,13 @@ +{%- if section.settings.image_zoom == 'hover' -%} + +{%- endif %} +{%- if request.design_mode -%} + +{%- endif -%} + {%- if first_3d_model -%} + {% if section.settings.image_zoom == 'hover' %} + + {% endif %} + {%- if request.design_mode -%} + + {%- endif -%} {%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%} {%- if first_3d_model -%} @@ -2094,6 +2100,27 @@ "label": "t:sections.main-product.settings.media_size.label", "info": "t:sections.main-product.settings.media_size.info" }, + { + "type": "select", + "id": "image_zoom", + "options": [ + { + "value": "lightbox", + "label": "t:sections.main-product.settings.image_zoom.options__1.label" + }, + { + "value": "hover", + "label": "t:sections.main-product.settings.image_zoom.options__2.label" + }, + { + "value": "none", + "label": "t:sections.main-product.settings.image_zoom.options__3.label" + } + ], + "default": "lightbox", + "label": "t:sections.main-product.settings.image_zoom.label", + "info": "t:sections.main-product.settings.image_zoom.info" + }, { "type": "select", "id": "mobile_thumbnails", diff --git a/snippets/product-thumbnail.liquid b/snippets/product-thumbnail.liquid index f350cd36580..c75e6e8c04f 100644 --- a/snippets/product-thumbnail.liquid +++ b/snippets/product-thumbnail.liquid @@ -40,6 +40,10 @@ assign preview_media_ratio = 1 | divided_by: media.preview_image.aspect_ratio | times: 100 assign media_ratio = 1 | divided_by: media.aspect_ratio | times: 100 + + if media.media_type == 'image' + assign image_class = 'image-magnify-' | append: section.settings.image_zoom + endif -%} {%- capture sizes -%} @@ -77,7 +81,7 @@ -