[PDP] Add SKU block

assets/global.js

@@ -855,15 +855,22 @@ class VariantSelects extends HTMLElement {
         const html = new DOMParser().parseFromString(responseText, 'text/html')
         const destination = document.getElementById(`price-${this.dataset.section}`);
         const source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
+        const skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
+        const skuDestination = document.getElementById(`Sku-${this.dataset.section}`);
         const variantPickerDestination = document.getElementById(`variant-radios-${this.dataset.section}`) || document.getElementById(`variant-selects-${this.dataset.section}`);
         const variantPickerSource = html.getElementById(`variant-radios-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`) || html.getElementById(`variant-selects-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
 
         if (source && destination) destination.innerHTML = source.innerHTML;
         if (variantPickerSource && variantPickerDestination) variantPickerDestination.innerHTML = variantPickerSource.innerHTML;
+        if (skuSource && skuDestination) {
+          skuDestination.innerHTML = skuSource.innerHTML;
+          skuDestination.classList.toggle('visibility-hidden', skuSource.classList.contains('visibility-hidden'));
+        }
 
         const price = document.getElementById(`price-${this.dataset.section}`);
 
         if (price) price.classList.remove('visibility-hidden');
+
         this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut);
 
         document.querySelector('variant-radios') ? this.querySelector(`[for="${activeElementId}"]`).focus() : this.querySelector(`#${activeElementId}`).focus();
@@ -893,9 +900,12 @@ class VariantSelects extends HTMLElement {
     const addButton = button.querySelector('[name="add"]');
     const addButtonText = button.querySelector('[name="add"] > span');
     const price = document.getElementById(`price-${this.dataset.section}`);
+    const sku = document.getElementById(`Sku-${this.dataset.section}`);
+
     if (!addButton) return;
     addButtonText.textContent = window.variantStrings.unavailable;
     if (price) price.classList.add('visibility-hidden');
+    if (sku) sku.classList.add('visibility-hidden');
   }
 
   getVariantData() {

assets/section-main-product.css

@@ -406,6 +406,7 @@ a.product__text {
 .product--no-media .product__text,
 .product--no-media noscript .product-form__input,
 .product--no-media .product__tax,
+.product--no-media .product__sku,
 .product--no-media shopify-payment-terms {
   text-align: center;
 }
@@ -1322,6 +1323,12 @@ a.product__text {
   margin-bottom: var(--icon-size);
 }
 
+/* SKU block */
+
+.product__sku.visibility-hidden::after {
+  content: "#";
+}
+
 /* Product-thumbnail snippet */
 
 .product-media-container {

locales/bg-BG.json

@@ -152,7 +152,8 @@
       "choose_options": "Изберете опции",
       "choose_product_options": "Изберете опции за {{ product_name }}",
       "value_unavailable": "{{ option_value }} [Неналично]",
-      "variant_sold_out_or_unavailable": "Вариантът е изчерпан или неналичен."
+      "variant_sold_out_or_unavailable": "Вариантът е изчерпан или неналичен.",
+      "sku": "SKU"
     },
     "modal": {
       "label": "Мултимедийна галерия"

locales/cs.json

@@ -154,7 +154,8 @@
       "choose_options": "Výběr možností",
       "choose_product_options": "Zvolte možnosti pro: {{ product_name }}",
       "value_unavailable": "{{ option_value }} [nedostupné]",
-      "variant_sold_out_or_unavailable": "Vyprodaná nebo nedostupná varianta"
+      "variant_sold_out_or_unavailable": "Vyprodaná nebo nedostupná varianta",
+      "sku": "SKU"
     },
     "modal": {
       "label": "Galerie multimédií"

locales/cs.schema.json

@@ -1813,6 +1813,23 @@
               "label": "Třetí nadpis"
             }
           }
+        },
+        "sku": {
+          "name": "SKU",
+          "settings": {
+            "text_style": {
+              "label": "Textový styl",
+              "options__1": {
+                "label": "Hlavní část"
+              },
+              "options__2": {
+                "label": "Podtitul"
+              },
+              "options__3": {
+                "label": "Velká písmena"
+              }
+            }
+          }
         }
       },
       "settings": {
@@ -2374,6 +2391,23 @@
               "content": "Pokud chcete zobrazovat hodnocení, přidejte si aplikaci pro hodnocení produktů. [Zjistit více](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#featured-product-rating)"
             }
           }
+        },
+        "sku": {
+          "name": "SKU",
+          "settings": {
+            "text_style": {
+              "label": "Textový styl",
+              "options__1": {
+                "label": "Hlavní část"
+              },
+              "options__2": {
+                "label": "Podtitul"
+              },
+              "options__3": {
+                "label": "Velká písmena"
+              }
+            }
+          }
         }
       },
       "settings": {

locales/da.json

@@ -152,7 +152,8 @@
       "choose_options": "Vælg muligheder",
       "choose_product_options": "Vælg muligheder for {{ product_name }}",
       "value_unavailable": "{{ option_value }} [Utilgængelig]",
-      "variant_sold_out_or_unavailable": "Varianten er udsolgt eller utilgængelig"
+      "variant_sold_out_or_unavailable": "Varianten er udsolgt eller utilgængelig",
+      "sku": "SKU"
     },
     "modal": {
       "label": "Mediegalleri"

locales/da.schema.json

@@ -1813,6 +1813,23 @@
               "label": "Tredje overskrift"
             }
           }
+        },
+        "sku": {
+          "name": "SKU",
+          "settings": {
+            "text_style": {
+              "label": "Teksttypografi",
+              "options__1": {
+                "label": "Brødtekst"
+              },
+              "options__2": {
+                "label": "Underoverskrift"
+              },
+              "options__3": {
+                "label": "Store bogstaver"
+              }
+            }
+          }
         }
       },
       "settings": {
@@ -2374,6 +2391,23 @@
               "content": "Hvis du vil vise bedømmelser, skal du tilføje en app til produktbedømmelse. [Få mere at vide](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#featured-product-rating)"
             }
           }
+        },
+        "sku": {
+          "name": "SKU",
+          "settings": {
+            "text_style": {
+              "label": "Teksttypografi",
+              "options__1": {
+                "label": "Brødtekst"
+              },
+              "options__2": {
+                "label": "Underoverskrift"
+              },
+              "options__3": {
+                "label": "Store bogstaver"
+              }
+            }
+          }
         }
       },
       "settings": {

locales/de.json

@@ -152,7 +152,8 @@
       "choose_options": "Optionen auswählen",
       "choose_product_options": "Optionen für {{ product_name }} auswählen",
       "value_unavailable": "{{ option_value }} [Nicht verfügbar]",
-      "variant_sold_out_or_unavailable": "Variante ausverkauft oder nicht verfügbar"
+      "variant_sold_out_or_unavailable": "Variante ausverkauft oder nicht verfügbar",
+      "sku": "SKU"
     },
     "modal": {
       "label": "Medien-Galerie"

locales/de.schema.json

@@ -1812,6 +1812,23 @@
               "label": "Dritte Überschrift"
             }
           }
+        },
+        "sku": {
+          "name": "SKU",
+          "settings": {
+            "text_style": {
+              "label": "Textstil",
+              "options__1": {
+                "label": "Nachricht"
+              },
+              "options__2": {
+                "label": "Untertitel"
+              },
+              "options__3": {
+                "label": "Großbuchstaben"
+              }
+            }
+          }
         }
       },
       "settings": {
@@ -2374,6 +2391,23 @@
               "content": "Um eine Bewertung anzuzeigen, musst du eine Produktbewertungs-App hinzufügen. [Mehr Informationen](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#featured-product-rating)"
             }
           }
+        },
+        "sku": {
+          "name": "SKU",
+          "settings": {
+            "text_style": {
+              "label": "Textstil",
+              "options__1": {
+                "label": "Nachricht"
+              },
+              "options__2": {
+                "label": "Untertitel"
+              },
+              "options__3": {
+                "label": "Großbuchstaben"
+              }
+            }
+          }
         }
       },
       "settings": {

locales/el.json

@@ -152,7 +152,8 @@
       "choose_options": "Ορίστε επιλογές",
       "choose_product_options": "Ορίστε επιλογές για {{ product_name }}",
       "value_unavailable": "{{ option_value }} [Μη διαθέσιμο]",
-      "variant_sold_out_or_unavailable": "Η παραλλαγή εξαντλήθηκε ή δεν είναι διαθέσιμη"
+      "variant_sold_out_or_unavailable": "Η παραλλαγή εξαντλήθηκε ή δεν είναι διαθέσιμη",
+      "sku": "SKU"
     },
     "modal": {
       "label": "Συλλογή μέσων"

locales/en.default.json

@@ -108,6 +108,7 @@
       "choose_options": "Choose options",
       "choose_product_options": "Choose options for {{ product_name }}",
       "description": "Description",
+      "sku": "SKU",
       "on_sale": "Sale",
       "product_variants": "Product variants",
       "media": {

locales/en.default.schema.json

@@ -799,6 +799,23 @@
             }
           }
         },
+        "sku": {
+          "name": "SKU",
+          "settings": {
+            "text_style": {
+              "label": "Text style",
+              "options__1": {
+                "label": "Body"
+              },
+              "options__2": {
+                "label": "Subtitle"
+              },
+              "options__3": {
+                "label": "Uppercase"
+              }
+            }
+          }
+        },
         "description": {
           "name": "Description"
         },
@@ -1677,6 +1694,23 @@
         "description": {
           "name": "Description"
         },
+        "sku": {
+          "name": "SKU",
+          "settings": {
+            "text_style": {
+              "label": "Text style",
+              "options__1": {
+                "label": "Body"
+              },
+              "options__2": {
+                "label": "Subtitle"
+              },
+              "options__3": {
+                "label": "Uppercase"
+              }
+            }
+          }
+        },
         "share": {
           "name": "Share",
           "settings": {

locales/es.json

@@ -153,7 +153,8 @@
       "choose_options": "Seleccionar opciones",
       "choose_product_options": "Elegir opciones para {{ product_name }}",
       "value_unavailable": "{{ option_value }} (no disponible)",
-      "variant_sold_out_or_unavailable": "Variante agotada o no disponible"
+      "variant_sold_out_or_unavailable": "Variante agotada o no disponible",
+      "sku": "SKU"
     },
     "modal": {
       "label": "Galería multimedia"

locales/es.schema.json

@@ -1813,6 +1813,23 @@
               "label": "Tercer encabezado"
             }
           }
+        },
+        "sku": {
+          "name": "SKU",
+          "settings": {
+            "text_style": {
+              "label": "Estilo de texto",
+              "options__1": {
+                "label": "Cuerpo"
+              },
+              "options__2": {
+                "label": "Subtítulo"
+              },
+              "options__3": {
+                "label": "Mayúscula"
+              }
+            }
+          }
         }
       },
       "settings": {
@@ -2374,6 +2391,23 @@
               "content": "Agrega una aplicación para mostrar las calificaciones de los productos. [Más información](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#featured-product-rating)"
             }
           }
+        },
+        "sku": {
+          "name": "SKU",
+          "settings": {
+            "text_style": {
+              "label": "Estilo de texto",
+              "options__1": {
+                "label": "Cuerpo"
+              },
+              "options__2": {
+                "label": "Subtítulo"
+              },
+              "options__3": {
+                "label": "Mayúscula"
+              }
+            }
+          }
         }
       },
       "settings": {

locales/fi.json

@@ -152,7 +152,8 @@
       "choose_options": "Valitse vaihtoehdot",
       "choose_product_options": "Valitse vaihtoehtoja tuotteelle {{ product_name }}",
       "value_unavailable": "{{ option_value }} [ei saatavilla]",
-      "variant_sold_out_or_unavailable": "Versio on loppuunmyyty tai ei saatavilla"
+      "variant_sold_out_or_unavailable": "Versio on loppuunmyyty tai ei saatavilla",
+      "sku": "SKU-koodi"
     },
     "modal": {
       "label": "Mediagalleria"