[Product layout] Add desktop media position (Shopify#1720)

TimmersThomas · Aug 29, 2022 · b289ba8 · b289ba8
1 parent 906bb95
commit b289ba8
Show file tree

Hide file tree

Showing 26 changed files with 727 additions and 22 deletions.
diff --git a/assets/global.js b/assets/global.js
@@ -784,8 +784,8 @@ class VariantSelects extends HTMLElement {
     if (!this.currentVariant) return;
     if (!this.currentVariant.featured_media) return;
 
-    const mediaGallery = document.getElementById(`MediaGallery-${this.dataset.section}`);
-    mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, true);
+    const mediaGalleries = document.querySelectorAll(`[id^="MediaGallery-${this.dataset.section}"]`);
+    mediaGalleries.forEach(mediaGallery => mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, true));
 
     const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`);
     if (!modalContent) return;

diff --git a/assets/section-featured-product.css b/assets/section-featured-product.css
@@ -56,6 +56,10 @@
     padding: 0 0 0 5rem;
   }
 
+  .background-secondary .featured-product:not(.product--no-media).product--right > .product__info-wrapper {
+    padding: 0 5rem 0 0;
+  }
+
   .featured-product:not(.product--no-media) > .product__info-wrapper {
     padding: 0 7rem;
   }

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -15,11 +15,6 @@
   padding-left: 0;
 }
 
-.product__info-wrapper {
-  padding-left: 0;
-  padding-bottom: 0;
-}
-
 @media screen and (min-width: 750px) {
   .product--thumbnail .product__media-gallery,
   .product--thumbnail_slider .product__media-gallery,
@@ -35,11 +30,19 @@
   }
 
   .product__info-wrapper {
-    padding-left: 5rem;
+    padding: 0 0 0 5rem;
   }
 
   .product__info-wrapper--extra-padding {
-    padding-left: 8rem;
+    padding: 0 0 0 8rem;
+  }
+
+  .product--right .product__info-wrapper {
+    padding: 0 5rem 0 0;
+  }
+
+  .product--right .product__info-wrapper--extra-padding {
+    padding: 0 8rem 0 0;
   }
 
   .product__media-container .slider-buttons {
@@ -54,11 +57,15 @@
   }
 
   .product--large:not(.product--no-media) .product__info-wrapper {
-    padding-left: 4rem;
+    padding: 0 0 0 4rem;
     max-width: 35%;
     width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2);
   }
 
+  .product--large:not(.product--no-media).product--right .product__info-wrapper {
+    padding: 0 4rem 0 0;
+  }
+
   .product--medium:not(.product--no-media) .product__media-wrapper,
   .product--small:not(.product--no-media) .product__info-wrapper {
     max-width: 55%;
@@ -388,7 +395,8 @@ a.product__text {
   text-align: center;
 }
 
-.product--no-media .product__media-wrapper {
+.product--no-media .product__media-wrapper,
+.product--no-media .product__info-wrapper {
   padding: 0;
 }
 
@@ -460,10 +468,6 @@ a.product__text {
   text-align: center;
 }
 
-.product--no-media .product__info-wrapper {
-  padding-left: 0;
-}
-
 /* Product media */
 .product__media-list video {
   border-radius: calc(var(--media-radius) - var(--media-border-width));

diff --git a/locales/cs.schema.json b/locales/cs.schema.json
@@ -1770,6 +1770,16 @@
           "options__2": {
             "label": "Skrýt miniatury"
           }
+        },
+        "media_position": {
+          "label": "Pozice multimediálního obsahu na počítači",
+          "info": "Pozice se automaticky optimalizuje pro mobilní prostředí.",
+          "options__1": {
+            "label": "Vlevo"
+          },
+          "options__2": {
+            "label": "Vpravo"
+          }
         }
       }
     },
@@ -2284,6 +2294,16 @@
         },
         "hide_variants": {
           "label": "Skrýt v počítači multimédia nevybraných variant"
+        },
+        "media_position": {
+          "label": "Pozice multimediálního obsahu na počítači",
+          "info": "Pozice se automaticky optimalizuje pro mobilní prostředí.",
+          "options__1": {
+            "label": "Vlevo"
+          },
+          "options__2": {
+            "label": "Vpravo"
+          }
         }
       },
       "presets": {

diff --git a/locales/da.schema.json b/locales/da.schema.json
@@ -1770,6 +1770,16 @@
           "options__2": {
             "label": "Skjul miniaturer"
           }
+        },
+        "media_position": {
+          "label": "Placering af medie på computer",
+          "info": "Placeringen optimeres automatisk til mobil.",
+          "options__1": {
+            "label": "Venstre"
+          },
+          "options__2": {
+            "label": "Højre"
+          }
         }
       }
     },
@@ -2284,6 +2294,16 @@
         },
         "hide_variants": {
           "label": "Skjul medier for ikke-valgte varianter på computer"
+        },
+        "media_position": {
+          "label": "Placering af medie på computer",
+          "info": "Placeringen optimeres automatisk til mobil.",
+          "options__1": {
+            "label": "Venstre"
+          },
+          "options__2": {
+            "label": "Højre"
+          }
         }
       },
       "presets": {

diff --git a/locales/de.schema.json b/locales/de.schema.json
@@ -1769,6 +1769,16 @@
           "options__2": {
             "label": "Vorschaubilder ausblenden"
           }
+        },
+        "media_position": {
+          "label": "Desktop-Medienposition",
+          "info": "Positionen werden automatisch für die mobile Nutzung optimiert.",
+          "options__1": {
+            "label": "Links"
+          },
+          "options__2": {
+            "label": "Rechts"
+          }
         }
       },
       "name": "Produktinformationen"
@@ -2284,6 +2294,16 @@
         },
         "hide_variants": {
           "label": "Medien von nicht ausgewählten Varianten auf dem Desktop ausblenden"
+        },
+        "media_position": {
+          "label": "Desktop-Medienposition",
+          "info": "Positionen werden automatisch für die mobile Nutzung optimiert.",
+          "options__1": {
+            "label": "Links"
+          },
+          "options__2": {
+            "label": "Rechts"
+          }
         }
       },
       "presets": {

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -844,6 +844,16 @@
           "content": "Media",
           "info": "Learn more about [media types](https:\/\/help.shopify.com\/manual\/products\/product-media)"
         },
+        "media_position": {
+          "label": "Desktop media position",
+          "info": "Position is automatically optimized for mobile.",
+          "options__1": {
+            "label": "Left"
+          },
+          "options__2": {
+            "label": "Right"
+          }
+        },
         "hide_variants": {
           "label": "Hide unselected variants’ media on desktop"
         },
@@ -1896,6 +1906,16 @@
             "label": "Large"
           }
         },
+        "media_position": {
+          "label": "Desktop media position",
+          "info": "Position is automatically optimized for mobile.",
+          "options__1": {
+            "label": "Left"
+          },
+          "options__2": {
+            "label": "Right"
+          }
+        },
         "mobile_thumbnails": {
           "label": "Mobile layout",
           "options__1": {

diff --git a/locales/es.schema.json b/locales/es.schema.json
@@ -1770,6 +1770,16 @@
           "options__2": {
             "label": "Ocultar miniaturas"
           }
+        },
+        "media_position": {
+          "label": "Posición de contenido multimedia en el escritorio",
+          "info": "La posición se optimiza automáticamente para dispositivos móviles.",
+          "options__1": {
+            "label": "Izquierda"
+          },
+          "options__2": {
+            "label": "Derecha"
+          }
         }
       }
     },
@@ -2284,6 +2294,16 @@
         },
         "hide_variants": {
           "label": "Ocultar elementos multimedia de variantes no seleccionadas en el escritorio"
+        },
+        "media_position": {
+          "label": "Posición de contenido multimedia en el escritorio",
+          "info": "La posición se optimiza automáticamente para dispositivos móviles.",
+          "options__1": {
+            "label": "Izquierda"
+          },
+          "options__2": {
+            "label": "Derecha"
+          }
         }
       },
       "presets": {

diff --git a/locales/fi.schema.json b/locales/fi.schema.json
@@ -1769,6 +1769,16 @@
           "options__2": {
             "label": "Piilota pikkukuvat"
           }
+        },
+        "media_position": {
+          "label": "Työpöytämedian sijainti",
+          "info": "Sijainti optimoidaan automaattisesti mobiililaitteille.",
+          "options__1": {
+            "label": "Vasen"
+          },
+          "options__2": {
+            "label": "Oikea"
+          }
         }
       },
       "name": "Tuotetiedot"
@@ -2284,6 +2294,16 @@
         },
         "hide_variants": {
           "label": "Piilota valitsemattomien versioiden media tietokoneversiossa"
+        },
+        "media_position": {
+          "label": "Työpöytämedian sijainti",
+          "info": "Sijainti optimoidaan automaattisesti mobiililaitteille.",
+          "options__1": {
+            "label": "Vasen"
+          },
+          "options__2": {
+            "label": "Oikea"
+          }
         }
       },
       "presets": {

diff --git a/locales/fr.schema.json b/locales/fr.schema.json
@@ -1769,6 +1769,16 @@
           "options__2": {
             "label": "Masquer les vignettes"
           }
+        },
+        "media_position": {
+          "label": "Position des supports multimédias sur ordinateur",
+          "info": "La position est automatiquement optimisée pour les mobiles.",
+          "options__1": {
+            "label": "Gauche"
+          },
+          "options__2": {
+            "label": "Droite"
+          }
         }
       },
       "name": "Informations produits"
@@ -2284,6 +2294,16 @@
         },
         "hide_variants": {
           "label": "Masquer les médias des variantes non sélectionnées sur le bureau"
+        },
+        "media_position": {
+          "label": "Position des supports multimédias sur ordinateur",
+          "info": "La position est automatiquement optimisée pour les mobiles.",
+          "options__1": {
+            "label": "Gauche"
+          },
+          "options__2": {
+            "label": "Droite"
+          }
         }
       },
       "presets": {

diff --git a/locales/it.schema.json b/locales/it.schema.json
@@ -1770,6 +1770,16 @@
           "options__2": {
             "label": "Nascondi miniature"
           }
+        },
+        "media_position": {
+          "label": "Posizione contenuti multimediali su desktop",
+          "info": "Posizione automaticamente ottimizzata per dispositivi mobili.",
+          "options__1": {
+            "label": "A sinistra"
+          },
+          "options__2": {
+            "label": "A destra"
+          }
         }
       }
     },
@@ -2284,6 +2294,16 @@
         },
         "hide_variants": {
           "label": "Nascondi contenuti multimediali delle varianti non selezionate sul desktop"
+        },
+        "media_position": {
+          "label": "Posizione contenuti multimediali su desktop",
+          "info": "Posizione automaticamente ottimizzata per dispositivi mobili.",
+          "options__1": {
+            "label": "A sinistra"
+          },
+          "options__2": {
+            "label": "A destra"
+          }
         }
       },
       "presets": {

diff --git a/locales/ja.schema.json b/locales/ja.schema.json
@@ -1770,6 +1770,16 @@
           "options__2": {
             "label": "サムネイルを非表示にする"
           }
+        },
+        "media_position": {
+          "label": "デスクトップのメディア位置",
+          "info": "位置はモバイル用に自動で最適化されます。",
+          "options__1": {
+            "label": "左"
+          },
+          "options__2": {
+            "label": "右"
+          }
         }
       }
     },
@@ -2284,6 +2294,16 @@
         },
         "hide_variants": {
           "label": "デスクトップで選択されていないバリエーションのメディアを非表示にする"
+        },
+        "media_position": {
+          "label": "デスクトップのメディア位置",
+          "info": "位置はモバイル用に自動で最適化されます。",
+          "options__1": {
+            "label": "左"
+          },
+          "options__2": {
+            "label": "右"
+          }
         }
       },
       "presets": {