[FEATURE] JS changes available BE variant stock

With activated stock handling for BE variants
the JavaScript which changes the prices does
also change change the available stock.

Requirements:
-This requires that the select view contains
a data atrribute 'data-available-stock' with
the stock for the BE variant.
- Furthermore some HTML has to be present which
will be used to insert the available stock.

Both changes will be made in a commit in
EXT:cart_products.

!!!
This commit changes also the buggy behaviour that
reselecting "Please choose..." from the select
field shows the price of the last chosen item.
Instead a ` ` will be inserted (to display
no price while avoiding 'jumping' layout.

Fixes: #487

Build/Sources/JavaScript/change_be_variant.js

@@ -1,10 +1,25 @@
 import { dispatchCustomEvent } from './helper/dispatch_custom_event';
 
 document.addEventListener('DOMContentLoaded', () => {
-  function setValue (parentElement, targetElementClass, value) {
+  function setValue (parentElement, targetElementClass, spanClass, value) {
+
     const targetElement = parentElement.querySelector(targetElementClass);
     if (targetElement) {
-      targetElement.querySelector('.price').innerHTML = value;
+      const spanElement = targetElement.querySelector(spanClass);
+
+      if(typeof(value) === 'undefined'){
+        spanElement.innerHTML = ' ';
+        return
+      }
+
+      if (spanClass !== '.stock') {
+        spanElement.innerHTML = value;
+      } else {
+        const template = Number(value) === 1 ? spanElement.dataset.stockSingular : spanElement.dataset.stockPlural;
+        const placeholder = '%1$s';
+        const text = template.replace(placeholder, value);
+        spanElement.innerHTML = text;
+      }
     }
   }
 
@@ -16,10 +31,12 @@ document.addEventListener('DOMContentLoaded', () => {
       const { specialPrice } = selectedOption.dataset;
       const { regularPrice } = selectedOption.dataset;
       const { specialPricePercentageDiscount } = selectedOption.dataset;
+      const { availableStock } = selectedOption.dataset;
 
-      setValue(productPrice, '.special_price', specialPrice);
-      setValue(productPrice, '.regular_price', regularPrice);
-      setValue(productPrice, '.special_price_percentage_discount', specialPricePercentageDiscount);
+      setValue(productPrice, '.special_price', '.price', specialPrice);
+      setValue(productPrice, '.regular_price', '.price', regularPrice);
+      setValue(productPrice, '.special_price_percentage_discount', '.price', specialPricePercentageDiscount);
+      setValue(productPrice, '.available_stock', '.stock', availableStock);
 
       dispatchCustomEvent(
         'extcode:be-variant-was-changed',

Resources/Public/JavaScript/change_be_variant.js

@@ -14,10 +14,22 @@
 
   // JavaScript/change_be_variant.js
   document.addEventListener("DOMContentLoaded", () => {
-    function setValue(parentElement, targetElementClass, value) {
+    function setValue(parentElement, targetElementClass, spanClass, value) {
       const targetElement = parentElement.querySelector(targetElementClass);
       if (targetElement) {
-        targetElement.querySelector(".price").innerHTML = value;
+        const spanElement = targetElement.querySelector(spanClass);
+        if (typeof value === "undefined") {
+          spanElement.innerHTML = " ";
+          return;
+        }
+        if (spanClass !== ".stock") {
+          spanElement.innerHTML = value;
+        } else {
+          const template = Number(value) === 1 ? spanElement.dataset.stockSingular : spanElement.dataset.stockPlural;
+          const placeholder = "%1$s";
+          const text = template.replace(placeholder, value);
+          spanElement.innerHTML = text;
+        }
       }
     }
     const productPrice = document.querySelector("#product-price");
@@ -26,9 +38,11 @@
       const { specialPrice } = selectedOption.dataset;
       const { regularPrice } = selectedOption.dataset;
       const { specialPricePercentageDiscount } = selectedOption.dataset;
-      setValue(productPrice, ".special_price", specialPrice);
-      setValue(productPrice, ".regular_price", regularPrice);
-      setValue(productPrice, ".special_price_percentage_discount", specialPricePercentageDiscount);
+      const { availableStock } = selectedOption.dataset;
+      setValue(productPrice, ".special_price", ".price", specialPrice);
+      setValue(productPrice, ".regular_price", ".price", regularPrice);
+      setValue(productPrice, ".special_price_percentage_discount", ".price", specialPricePercentageDiscount);
+      setValue(productPrice, ".available_stock", ".stock", availableStock);
       dispatchCustomEvent(
         "extcode:be-variant-was-changed",
         {