Skip to content

Commit

Permalink
[PDP] Add SKU block (#1987)
Browse files Browse the repository at this point in the history 
Add SKU block to PDP
  • Loading branch information
@eugenekasimov
eugenekasimov authored Oct 25, 2022
1 parent 339c84f commit 0643730
Show file tree
Hide file tree
Showing 56 changed files with 866 additions and 40 deletions.
10 changes: 10 additions & 0 deletions assets/global.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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() {
Expand Down
7 changes: 7 additions & 0 deletions assets/section-main-product.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down
3 changes: 2 additions & 1 deletion locales/bg-BG.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": "Мултимедийна галерия"
Expand Down
3 changes: 2 additions & 1 deletion locales/cs.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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í"
Expand Down
34 changes: 34 additions & 0 deletions locales/cs.schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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": {
Expand Down
3 changes: 2 additions & 1 deletion locales/da.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
34 changes: 34 additions & 0 deletions locales/da.schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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": {
Expand Down
3 changes: 2 additions & 1 deletion locales/de.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
34 changes: 34 additions & 0 deletions locales/de.schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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": {
Expand Down
3 changes: 2 additions & 1 deletion locales/el.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": "Συλλογή μέσων"
Expand Down
1 change: 1 addition & 0 deletions locales/en.default.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
34 changes: 34 additions & 0 deletions locales/en.default.schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down Expand Up @@ -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": {
Expand Down
3 changes: 2 additions & 1 deletion locales/es.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
34 changes: 34 additions & 0 deletions locales/es.schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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": {
Expand Down
3 changes: 2 additions & 1 deletion locales/fi.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading

0 comments on commit 0643730

Please sign in to comment.