[Product page] Add 2 column layout for desktop and mobile (#1766)

Shopify · Sep 8, 2022 · 05bac18 · 05bac18
1 parent 00026ae
commit 05bac18
Show file tree

Hide file tree

Showing 27 changed files with 325 additions and 148 deletions.
diff --git a/assets/media-gallery.js b/assets/media-gallery.js
@@ -14,7 +14,7 @@ if (!customElements.get('media-gallery')) {
       this.elements.thumbnails.querySelectorAll('[data-target]').forEach((mediaToSwitch) => {
         mediaToSwitch.querySelector('button').addEventListener('click', this.setActiveMedia.bind(this, mediaToSwitch.dataset.target, false));
       });
-      if (this.dataset.desktopLayout !== 'stacked' && this.mql.matches) this.removeListSemantic();
+      if (this.dataset.desktopLayout.includes('thumbnail') && this.mql.matches) this.removeListSemantic();
     }
 
     onSlideChanged(event) {

diff --git a/assets/quick-add.css b/assets/quick-add.css
@@ -94,6 +94,10 @@
   .quick-add-modal__content-info > * {
     max-height: 100%;
   }
+
+  quick-add-modal .product--mobile-columns .product__media-item {
+    width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing));
+  }
 }
 
 .quick-add-modal__toggle {
@@ -137,7 +141,7 @@ quick-add-modal .slider.slider--mobile {
   overflow: visible;
 }
 
-quick-add-modal .product__media-list {
+quick-add-modal .product__media-gallery .product__media-list {
   margin-bottom: 0;
 }
 
@@ -148,7 +152,8 @@ quick-add-modal .product__media-list .deferred-media {
 
 quick-add-modal .product--thumbnail .product__media-gallery,
 quick-add-modal .product--thumbnail_slider .product__media-gallery,
-quick-add-modal .product--stacked .product__info-container--sticky {
+quick-add-modal .product--stacked .product__info-container--sticky,
+quick-add-modal .product--columns .product__info-container--sticky {
   top: 0;
   position: relative;
 }
@@ -165,6 +170,11 @@ quick-add-modal .product--stacked .product__info-container--sticky {
     width: calc(54% - var(--grid-desktop-horizontal-spacing) / 2)
   }
 
+  quick-add-modal .product--columns .product__media-item:not(.product__media-item--single):not(:only-child) {
+    max-width: 100%;
+    width: 100%;
+  }
+
   quick-add-modal .thumbnail-slider .thumbnail-list.slider--tablet-up {
     display: none;
   }

diff --git a/assets/quick-add.js b/assets/quick-add.js
@@ -35,6 +35,7 @@ if (!customElements.get('quick-add-modal')) {
           if (window.ProductModel) window.ProductModel.loadShopifyXR();
 
           this.removeGalleryListSemantic();
+          this.updateImageSizes();
           this.preventVariantURLSwitching();
           super.show(opener);
         })
@@ -86,5 +87,24 @@ if (!customElements.get('quick-add-modal')) {
       galleryList.setAttribute('role', 'presentation');
       galleryList.querySelectorAll('[id^="Slide-"]').forEach(li => li.setAttribute('role', 'presentation'));
     }
+
+    updateImageSizes() {
+      const product = this.modalContent.querySelector('.product');
+      const desktopColumns = product.classList.contains('product--columns');
+      if (!desktopColumns) return;
+
+      const mediaImages = product.querySelectorAll('.product__media img');
+      if (!mediaImages.length) return;
+
+      let mediaImageSizes = '(min-width: 1000px) 715px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)';
+
+      if (product.classList.contains('product--medium')) {
+        mediaImageSizes = mediaImageSizes.replace('715px', '605px');
+      } else if (product.classList.contains('product--small')) {
+        mediaImageSizes = mediaImageSizes.replace('715px', '495px');
+      }
+
+      mediaImages.forEach(img => img.setAttribute('sizes', mediaImageSizes));
+    }
   });
 }
diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -18,7 +18,8 @@
 @media screen and (min-width: 750px) {
   .product--thumbnail .product__media-gallery,
   .product--thumbnail_slider .product__media-gallery,
-  .product--stacked .product__info-container--sticky {
+  .product--stacked .product__info-container--sticky,
+  .product--columns .product__info-container--sticky {
     display: block;
     position: sticky;
     top: 3rem;
@@ -45,6 +46,10 @@
     padding: 0 8rem 0 0;
   }
 
+  .product--right .product__media-list {
+    margin-bottom: 2rem;
+  }
+
   .product__media-container .slider-buttons {
     display: none;
   }
@@ -505,6 +510,10 @@ a.product__text {
   .product__media-list .product__media-item {
     width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing));
   }
+
+  .product--mobile-columns .product__media-item {
+    width: calc(50% - 1.5rem - var(--grid-mobile-horizontal-spacing));
+  }
 }
 
 @media screen and (min-width: 750px) {
@@ -593,15 +602,44 @@ a.product__text {
   .grid__item.product__media-item--full {
     width: 100%;
   }
+
+  .product--columns .product__media-item:not(.product__media-item--single):not(:only-child) {
+    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
+  }
+
+  .product--large.product--columns .product__media-item--full .deferred-media__poster-button {
+    height: 5rem;
+    width: 5rem;
+  }
+
+  .product--medium.product--columns .product__media-item--full .deferred-media__poster-button {
+    height: 4.2rem;
+    width: 4.2rem;
+  }
+
+  .product--medium.product--columns .product__media-item--full .deferred-media__poster-button .icon {
+    width: 1.8rem;
+    height: 1.8rem;
+  }
+
+  .product--small.product--columns .product__media-item--full .deferred-media__poster-button {
+    height: 3.6rem;
+    width: 3.6rem;
+  }
+
+  .product--small.product--columns .product__media-item--full .deferred-media__poster-button .icon {
+    width: 1.6rem;
+    height: 1.6rem;
+  }
 }
 
 @media screen and (min-width: 990px) {
   .product--stacked .product__media-item {
     max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
   }
 
-  .product__media-list .product__media-item:first-child,
-  .product__media-list .product__media-item--full {
+  .product:not(.product--columns) .product__media-list .product__media-item:first-child,
+  .product:not(.product--columns) .product__media-list .product__media-item--full {
     width: 100%;
     max-width: 100%;
   }

diff --git a/locales/cs.schema.json b/locales/cs.schema.json
@@ -1743,9 +1743,12 @@
             "label": "Nad sebou"
           },
           "options__2": {
-            "label": "Miniatury"
+            "label": "2 sloupce"
           },
           "options__3": {
+            "label": "Miniatury"
+          },
+          "options__4": {
             "label": "Karusel miniatur"
           }
         },
@@ -1765,9 +1768,12 @@
         "mobile_thumbnails": {
           "label": "Mobilní rozvržení",
           "options__1": {
-            "label": "Zobrazit miniatury"
+            "label": "2 sloupce"
           },
           "options__2": {
+            "label": "Zobrazit miniatury"
+          },
+          "options__3": {
             "label": "Skrýt miniatury"
           }
         },

diff --git a/locales/da.schema.json b/locales/da.schema.json
@@ -1743,9 +1743,12 @@
             "label": "Stablet"
           },
           "options__2": {
-            "label": "Miniaturer"
+            "label": "2 kolonner"
           },
           "options__3": {
+            "label": "Miniaturer"
+          },
+          "options__4": {
             "label": "Miniaturekarussel"
           }
         },
@@ -1765,9 +1768,12 @@
         "mobile_thumbnails": {
           "label": "Mobillayout",
           "options__1": {
-            "label": "Vis miniaturer"
+            "label": "2 kolonner"
           },
           "options__2": {
+            "label": "Vis miniaturer"
+          },
+          "options__3": {
             "label": "Skjul miniaturer"
           }
         },

diff --git a/locales/de.schema.json b/locales/de.schema.json
@@ -1742,9 +1742,12 @@
             "label": "Gestapelt"
           },
           "options__2": {
-            "label": "Vorschaubilder"
+            "label": "2 Spalten"
           },
           "options__3": {
+            "label": "Vorschaubilder"
+          },
+          "options__4": {
             "label": "Karussell mit Vorschaubildern"
           }
         },
@@ -1764,9 +1767,12 @@
         "mobile_thumbnails": {
           "label": "Mobiles Layout",
           "options__1": {
-            "label": "Vorschaubilder anzeigen"
+            "label": "2 Spalten"
           },
           "options__2": {
+            "label": "Vorschaubilder anzeigen"
+          },
+          "options__3": {
             "label": "Vorschaubilder ausblenden"
           }
         },

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -1884,9 +1884,12 @@
             "label": "Stacked"
           },
           "options__2": {
-            "label": "Thumbnails"
+            "label": "2 columns"
           },
           "options__3": {
+            "label": "Thumbnails"
+          },
+          "options__4": {
             "label": "Thumbnail carousel"
           }
         },
@@ -1916,9 +1919,12 @@
         "mobile_thumbnails": {
           "label": "Mobile layout",
           "options__1": {
-            "label": "Show thumbnails"
+            "label": "2 columns"
           },
           "options__2": {
+            "label": "Show thumbnails"
+          },
+          "options__3": {
             "label": "Hide thumbnails"
           }
         },
@@ -2841,4 +2847,4 @@
       }
     }
   }
-}
+}
diff --git a/locales/es.schema.json b/locales/es.schema.json
@@ -1743,9 +1743,12 @@
             "label": "Apilado"
           },
           "options__2": {
-            "label": "Miniaturas"
+            "label": "2 columnas"
           },
           "options__3": {
+            "label": "Miniaturas"
+          },
+          "options__4": {
             "label": "Carrusel de miniaturas"
           }
         },
@@ -1765,9 +1768,12 @@
         "mobile_thumbnails": {
           "label": "Diseño para móviles",
           "options__1": {
-            "label": "Mostrar miniaturas"
+            "label": "2 columnas"
           },
           "options__2": {
+            "label": "Mostrar miniaturas"
+          },
+          "options__3": {
             "label": "Ocultar miniaturas"
           }
         },

diff --git a/locales/fi.schema.json b/locales/fi.schema.json
@@ -1742,9 +1742,12 @@
             "label": "Päällekkäin"
           },
           "options__2": {
-            "label": "Pikkukuvat"
+            "label": "2 saraketta"
           },
           "options__3": {
+            "label": "Pikkukuvat"
+          },
+          "options__4": {
             "label": "Pikkukuvien karuselli"
           }
         },
@@ -1764,9 +1767,12 @@
         "mobile_thumbnails": {
           "label": "Mobiiliasettelu",
           "options__1": {
-            "label": "Näytä pikkukuvat"
+            "label": "2 saraketta"
           },
           "options__2": {
+            "label": "Näytä pikkukuvat"
+          },
+          "options__3": {
             "label": "Piilota pikkukuvat"
           }
         },

diff --git a/locales/fr.schema.json b/locales/fr.schema.json
@@ -1742,9 +1742,12 @@
             "label": "Empilé"
           },
           "options__2": {
-            "label": "Vignettes"
+            "label": "2 colonnes"
           },
           "options__3": {
+            "label": "Vignettes"
+          },
+          "options__4": {
             "label": "Carrousel de vignettes"
           }
         },
@@ -1764,9 +1767,12 @@
         "mobile_thumbnails": {
           "label": "Mise en page sur mobile",
           "options__1": {
-            "label": "Afficher les vignettes"
+            "label": "2 colonnes"
           },
           "options__2": {
+            "label": "Afficher les vignettes"
+          },
+          "options__3": {
             "label": "Masquer les vignettes"
           }
         },

diff --git a/locales/it.schema.json b/locales/it.schema.json
@@ -1743,9 +1743,12 @@
             "label": "Elencato"
           },
           "options__2": {
-            "label": "Miniature"
+            "label": "2 colonne"
           },
           "options__3": {
+            "label": "Miniature"
+          },
+          "options__4": {
             "label": "Carosello miniature"
           }
         },
@@ -1765,9 +1768,12 @@
         "mobile_thumbnails": {
           "label": "Layout dispositivo mobile",
           "options__1": {
-            "label": "Mostra miniature"
+            "label": "2 colonne"
           },
           "options__2": {
+            "label": "Mostra miniature"
+          },
+          "options__3": {
             "label": "Nascondi miniature"
           }
         },