Add Inventory status block (#1979)

assets/global.js

@@ -859,8 +859,11 @@ class VariantSelects extends HTMLElement {
         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}`);
+        const inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
+        const inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`);
 
         if (source && destination) destination.innerHTML = source.innerHTML;
+        if (inventorySource && inventoryDestination) inventoryDestination.innerHTML = inventorySource.innerHTML;
         if (variantPickerSource && variantPickerDestination) variantPickerDestination.innerHTML = variantPickerSource.innerHTML;
         if (skuSource && skuDestination) {
           skuDestination.innerHTML = skuSource.innerHTML;
@@ -871,6 +874,8 @@ class VariantSelects extends HTMLElement {
 
         if (price) price.classList.remove('visibility-hidden');
 
+        if (inventoryDestination) inventoryDestination.classList.toggle('visibility-hidden', inventorySource.innerText === '');
+
         this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut);
 
         document.querySelector('variant-radios') ? this.querySelector(`[for="${activeElementId}"]`).focus() : this.querySelector(`#${activeElementId}`).focus();
@@ -900,11 +905,13 @@ 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 inventory = document.getElementById(`Inventory-${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 (inventory) inventory.classList.add('visibility-hidden');
     if (sku) sku.classList.add('visibility-hidden');
   }
 

assets/section-main-product.css

@@ -1286,6 +1286,27 @@ a.product__text {
   flex-shrink: 0;
 }
 
+/* Inventory status */
+
+.product__inventory {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.product--no-media .product__inventory {
+  justify-content: center;
+}
+
+/* This keeps the container from getting display: none; applied to it and to make sure we're not introducing some layout shift when switching to an unavailable variant */
+.product__inventory.visibility-hidden:empty {
+  display: block;
+}
+
+.product__inventory.visibility-hidden:empty::after {
+  content: "#";
+}
+
 /* Icon with text */
 .icon-with-text {
   --icon-size: calc(var(--font-heading-scale) * 3rem);

locales/bg-BG.json

@@ -153,6 +153,12 @@
       "choose_product_options": "Изберете опции за {{ product_name }}",
       "value_unavailable": "{{ option_value }} [Неналично]",
       "variant_sold_out_or_unavailable": "Вариантът е изчерпан или неналичен.",
+      "inventory_in_stock": "В наличност",
+      "inventory_in_stock_show_count": "{{ quantity }} в наличност",
+      "inventory_low_stock": "Ниски наличности",
+      "inventory_low_stock_show_count": "Ниски наличности: остават {{ quantity }}",
+      "inventory_out_of_stock": "Изчерпано количество",
+      "inventory_out_of_stock_continue_selling": "В наличност",
       "sku": "SKU"
     },
     "modal": {

locales/cs.json

@@ -155,7 +155,13 @@
       "choose_product_options": "Zvolte možnosti pro: {{ product_name }}",
       "value_unavailable": "{{ option_value }} [nedostupné]",
       "variant_sold_out_or_unavailable": "Vyprodaná nebo nedostupná varianta",
-      "sku": "SKU"
+      "inventory_in_stock": "Skladem",
+      "inventory_in_stock_show_count": "{{ quantity }} skladem",
+      "inventory_low_stock": "Skladové zásoby docházejí",
+      "inventory_low_stock_show_count": "Skladové zásoby docházejí, zbývající množství: {{ quantity }}",
+      "inventory_out_of_stock": "Není skladem",
+      "sku": "SKU",
+      "inventory_out_of_stock_continue_selling": "Skladem"
     },
     "modal": {
       "label": "Galerie multimédií"

locales/cs.schema.json

@@ -1830,6 +1830,30 @@
               }
             }
           }
+        },
+        "inventory": {
+          "name": "Stav skladových zásob",
+          "settings": {
+            "text_style": {
+              "label": "Textový styl",
+              "options__1": {
+                "label": "Hlavní část"
+              },
+              "options__2": {
+                "label": "Podtitul"
+              },
+              "options__3": {
+                "label": "Velká písmena"
+              }
+            },
+            "inventory_threshold": {
+              "label": "Práh docházejících skladových zásob",
+              "info": "Zvolte 0, pokud chcete vždy zobrazoval stav Skladem, když je zboží k dispozici."
+            },
+            "show_inventory_quantity": {
+              "label": "Zobrazovat objem skladových zásob"
+            }
+          }
         }
       },
       "settings": {

locales/da.json

@@ -153,6 +153,12 @@
       "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",
+      "inventory_in_stock": "På lager",
+      "inventory_in_stock_show_count": "{{ quantity }} på lager",
+      "inventory_low_stock": "Lav lagerbeholdning",
+      "inventory_low_stock_show_count": "Lav lagerbeholdning: {{ quantity }} tilbage",
+      "inventory_out_of_stock": "Ikke på lager",
+      "inventory_out_of_stock_continue_selling": "På lager",
       "sku": "SKU"
     },
     "modal": {

locales/da.schema.json

@@ -1830,6 +1830,30 @@
               }
             }
           }
+        },
+        "inventory": {
+          "name": "Lagerstatus",
+          "settings": {
+            "text_style": {
+              "label": "Teksttypografi",
+              "options__1": {
+                "label": "Brødtekst"
+              },
+              "options__2": {
+                "label": "Underoverskrift"
+              },
+              "options__3": {
+                "label": "Store bogstaver"
+              }
+            },
+            "inventory_threshold": {
+              "label": "Lav grænse for lagerbeholdning",
+              "info": "Vælg 0 for altid at vise på lager, hvis tilgængelig."
+            },
+            "show_inventory_quantity": {
+              "label": "Vis lagerantal"
+            }
+          }
         }
       },
       "settings": {

locales/de.json

@@ -153,6 +153,12 @@
       "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",
+      "inventory_in_stock": "Auf Lager",
+      "inventory_in_stock_show_count": "{{ quantity }} auf Lager",
+      "inventory_low_stock": "Niedriger Lagerbestand",
+      "inventory_low_stock_show_count": "Niedriger Lagerbestand: {{ quantity }} verbleibend",
+      "inventory_out_of_stock": "Nicht vorrätig",
+      "inventory_out_of_stock_continue_selling": "Auf Lager",
       "sku": "SKU"
     },
     "modal": {

locales/de.schema.json

@@ -1829,6 +1829,30 @@
               }
             }
           }
+        },
+        "inventory": {
+          "name": "Inventarstatus",
+          "settings": {
+            "text_style": {
+              "label": "Textstil",
+              "options__1": {
+                "label": "Nachricht"
+              },
+              "options__2": {
+                "label": "Untertitel"
+              },
+              "options__3": {
+                "label": "Großbuchstaben"
+              }
+            },
+            "inventory_threshold": {
+              "label": "Geringer Inventarschwellenwert",
+              "info": "Wähle 0 aus, um immer den Lagerbestand anzuzeigen, falls verfügbar."
+            },
+            "show_inventory_quantity": {
+              "label": "Inventar anzeigen"
+            }
+          }
         }
       },
       "settings": {

locales/el.json

@@ -153,6 +153,12 @@
       "choose_product_options": "Ορίστε επιλογές για {{ product_name }}",
       "value_unavailable": "{{ option_value }} [Μη διαθέσιμο]",
       "variant_sold_out_or_unavailable": "Η παραλλαγή εξαντλήθηκε ή δεν είναι διαθέσιμη",
+      "inventory_in_stock": "Σε απόθεμα",
+      "inventory_in_stock_show_count": "{{ quantity }} σε απόθεμα",
+      "inventory_low_stock": "Χαμηλό απόθεμα",
+      "inventory_low_stock_show_count": "Χαμηλό απόθεμα: Απομένουν {{ quantity }}",
+      "inventory_out_of_stock": "Χωρίς απόθεμα",
+      "inventory_out_of_stock_continue_selling": "Σε απόθεμα",
       "sku": "SKU"
     },
     "modal": {

locales/en.default.json

@@ -108,6 +108,12 @@
       "choose_options": "Choose options",
       "choose_product_options": "Choose options for {{ product_name }}",
       "description": "Description",
+      "inventory_in_stock": "In stock",
+      "inventory_in_stock_show_count": "{{ quantity }} in stock",
+      "inventory_low_stock": "Low stock",
+      "inventory_low_stock_show_count": "Low stock: {{ quantity }} left",
+      "inventory_out_of_stock": "Out of stock",
+      "inventory_out_of_stock_continue_selling": "In stock",
       "sku": "SKU",
       "on_sale": "Sale",
       "product_variants": "Product variants",

locales/en.default.schema.json

@@ -1662,6 +1662,30 @@
         "price": {
           "name": "Price"
         },
+        "inventory": {
+          "name": "Inventory status",
+          "settings": {
+            "text_style": {
+              "label": "Text style",
+              "options__1": {
+                "label": "Body"
+              },
+              "options__2": {
+                "label": "Subtitle"
+              },
+              "options__3": {
+                "label": "Uppercase"
+              }
+            },
+            "inventory_threshold": {
+              "label": "Low inventory threshold",
+              "info": "Choose 0 to always show in stock if available."
+            },
+            "show_inventory_quantity": {
+              "label": "Show inventory count"
+            }
+          }
+        },
         "quantity_selector": {
           "name": "Quantity selector"
         },

locales/es.json

@@ -154,6 +154,12 @@
       "choose_product_options": "Elegir opciones para {{ product_name }}",
       "value_unavailable": "{{ option_value }} (no disponible)",
       "variant_sold_out_or_unavailable": "Variante agotada o no disponible",
+      "inventory_in_stock": "En existencias",
+      "inventory_in_stock_show_count": "{{ quantity }} en existencias",
+      "inventory_low_stock": "Bajas existencias",
+      "inventory_low_stock_show_count": "Bajas existencias: quedan {{ quantity }}",
+      "inventory_out_of_stock": "Agotado",
+      "inventory_out_of_stock_continue_selling": "En existencias",
       "sku": "SKU"
     },
     "modal": {

locales/es.schema.json

@@ -1830,6 +1830,30 @@
               }
             }
           }
+        },
+        "inventory": {
+          "name": "Estado del inventario",
+          "settings": {
+            "text_style": {
+              "label": "Estilo de texto",
+              "options__1": {
+                "label": "Cuerpo"
+              },
+              "options__2": {
+                "label": "Subtítulo"
+              },
+              "options__3": {
+                "label": "Mayúscula"
+              }
+            },
+            "inventory_threshold": {
+              "label": "Umbral de inventario bajo",
+              "info": "Elige 0 para que siempre se muestre en existencias si está disponible."
+            },
+            "show_inventory_quantity": {
+              "label": "Mostrar recuento de inventario"
+            }
+          }
         }
       },
       "settings": {

locales/fi.json

@@ -153,7 +153,13 @@
       "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",
-      "sku": "SKU-koodi"
+      "inventory_in_stock": "Varastossa",
+      "inventory_in_stock_show_count": "{{ quantity }} varastossa",
+      "inventory_low_stock": "Varasto vähissä",
+      "inventory_low_stock_show_count": "Varasto vähissä: {{ quantity }} jäljellä",
+      "inventory_out_of_stock": "Loppunut varastosta",
+      "sku": "SKU-koodi",
+      "inventory_out_of_stock_continue_selling": "Varastossa"
     },
     "modal": {
       "label": "Mediagalleria"

locales/fi.schema.json

@@ -1829,6 +1829,30 @@
               }
             }
           }
+        },
+        "inventory": {
+          "name": "Varaston tila",
+          "settings": {
+            "text_style": {
+              "label": "Tekstityyli",
+              "options__1": {
+                "label": "Leipäteksti"
+              },
+              "options__2": {
+                "label": "Alaotsikko"
+              },
+              "options__3": {
+                "label": "Isot kirjaimet"
+              }
+            },
+            "inventory_threshold": {
+              "label": "Vähäisen varaston kynnysarvo",
+              "info": "Valitse 0, jos haluat näyttää aina varastossa, jos saatavilla."
+            },
+            "show_inventory_quantity": {
+              "label": "Näytä varastomäärä"
+            }
+          }
         }
       },
       "settings": {

locales/fr.json

@@ -154,7 +154,13 @@
       "choose_product_options": "Choisir des options pour {{ product_name }}",
       "value_unavailable": "{{ option_value }} [Indisponible]",
       "variant_sold_out_or_unavailable": "Variante épuisée ou indisponible",
-      "sku": "SKU"
+      "inventory_in_stock": "En stock",
+      "inventory_in_stock_show_count": "{{ quantity }} en stock",
+      "inventory_low_stock": "Stock bas",
+      "inventory_low_stock_show_count": "Stock bas : {{ quantity }} restant(s)",
+      "sku": "SKU",
+      "inventory_out_of_stock": "En rupture de stock",
+      "inventory_out_of_stock_continue_selling": "En stock"
     },
     "modal": {
       "label": "Galerie de supports multimédias"