Dispatch event when a variant is resolved on a given option

Author: loevgaard

src/Resources/public/js/events.js

@@ -13,3 +13,19 @@ export class OptionSelectedEvent extends Event {
         this.option = option;
     }
 }
+
+export class VariantResolvedEvent extends Event {
+    static name = 'ssrn:variant-resolved';
+
+    /**
+     * @param {Option} option
+     */
+    constructor(option) {
+        super(VariantResolvedEvent.name, {
+            bubbles: true,
+            cancelable: true
+        });
+
+        this.option = option;
+    }
+}

src/Resources/public/js/option.js

@@ -1,4 +1,8 @@
-import {OptionSelectedEvent} from "./events.js";
+import {OptionSelectedEvent, VariantResolvedEvent} from "./events.js";
+
+/**
+ * @typedef {import('./types.js').Product} Product
+ */
 
 export default class Option {
     /**
@@ -32,27 +36,38 @@ export default class Option {
         return this.#element.querySelector('.ssrn-option-label').textContent;
     }
 
+    /**
+     * @param {string} label
+     */
+    setLabel(label) {
+        this.#element.querySelector('.ssrn-option-label').textContent = label;
+    }
+
     getValue() {
         return this.#element.dataset.value;
     }
 
+    isSelected() {
+        return this.#element.classList.contains('selected');
+    }
+
     /**
      * @param {boolean} selected
      */
     setSelected(selected = true) {
         this.#element.classList.toggle('selected', selected);
     }
 
-    isSelected() {
-        return this.#element.classList.contains('selected');
+    isInStock() {
+        return !this.#element.classList.contains('out-of-stock');
     }
 
     setInStock(inStock = true) {
         this.#element.classList.toggle('out-of-stock', !inStock);
     }
 
-    isInStock() {
-        return !this.#element.classList.contains('out-of-stock');
+    isAvailable() {
+        return !this.#element.classList.contains('unavailable');
     }
 
     setAvailable(available = true) {
@@ -63,7 +78,21 @@ export default class Option {
         }
     }
 
-    isAvailable() {
-        return !this.#element.classList.contains('unavailable');
+    getVariant() {
+        if('variant' in this.#element.dataset) {
+            return this.#element.dataset.variant;
+        }
+
+        return null;
+    }
+
+    /**
+     * @param {Product} variant
+     */
+    setVariant(variant) {
+        this.setInStock(variant.inStock)
+        this.#element.dataset.variant = variant.code;
+
+        this.#element.dispatchEvent(new VariantResolvedEvent(this));
     }
 }

src/Resources/public/js/select-manager.js

@@ -87,7 +87,7 @@ export default class SelectManager {
             const concreteOptionCombination = optionCombination.concat(option.getValue());
             const variant = this.#repository.getVariantFromOptionCombination(concreteOptionCombination);
             if(null !== variant) {
-                option.setInStock(variant.inStock);
+                option.setVariant(variant);
             }
             option.setAvailable(this.#repository.hasOptionCombination(concreteOptionCombination));
         });