From 812b8473e2f4b8abcb27c7cc077db09101b84bb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20K=C3=B6n=C3=B6nen?= Date: Thu, 24 Feb 2022 13:21:21 +0200 Subject: [PATCH] Add support for Woostify swatches size selectors --- index1s.html | 997 ++++++++++++++++++++++++++++++++++++++++ src/api/SizeSelector.js | 60 +++ webpack.config.js | 1 + 3 files changed, 1058 insertions(+) create mode 100644 index1s.html diff --git a/index1s.html b/index1s.html new file mode 100644 index 0000000..dbd3454 --- /dev/null +++ b/index1s.html @@ -0,0 +1,997 @@ + + + + T-SHIRT (PRODUCT-DB) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+ +
+
+
+ + + + + +
+
+

Default welcome msg!

+ +
+ + +
+
+
+
+
+
+
+
    +
  • + Home + / +
    • +
  • + T-SHIRT (PRODUCT-DB) +
    • +
+
+
+ +
+
+
+
+ +
+ + +
+ +
+
+

T-SHIRT (PRODUCT-DB)

+
+ + + +

Be + the first to review this product

+ +

Availability: In stock

+ + +
+ + €10.00 + +
+ + +
+

Quick Overview

+
T-shirt with Product DB
+
+ +
+ +
+
+
+
+ +
+ S + M + L + XL +
+
+
+
+ + + + + +

* Required Fields

+
+ +
+ + +
+ + €10.00 + +
+ +
+ + + +
+ + + +
+ +
+ +
+

+ T-SHIRT (PRODUCT-DB)

+

Double click on above image to view full + picture

+
+ Zoom Out +
+
+
+ Zoom In +
+ +
+

More Views

+
    +
  • + +
    • +
+
+
+ +
+
+ +
+ +
+
+

Details

+
+ Just a simple T-shirt with measurements from the SizeMe Product Database +
+
+
+

Product Tags

+
+
+ +
+ +
+ +
+
+

Use spaces to separate tags. Use single quotes (') for phrases.

+ +
+
+
+ + + + + + + + +
+
+
+
+ My Cart +
+
+

You have no items in your shopping cart.

+
+
+
+
+ Keep your eyes open for our special Back to School items and save A LOT! +
+
+ +
+
+ Community Poll +
+
+
+

What is your favorite color

+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ +
+ +
+
+
+
+ +
+
+
+
+
+ + + +

Help Us to Keep Magento Healthy - Report All + Bugs (ver. 1.9.3.0)

+
© 2016 Magento Demo Store. All Rights Reserved.
+
+
+ + +
+
+ + + + + + + + \ No newline at end of file diff --git a/src/api/SizeSelector.js b/src/api/SizeSelector.js index 5da50c7..6a5d01b 100644 --- a/src/api/SizeSelector.js +++ b/src/api/SizeSelector.js @@ -140,6 +140,62 @@ class SwatchesSelect extends AbstractSelect { }; } +class SwatchesWoostifySelect extends AbstractSelect { + constructor (element) { + super(element, { event: "click", useCapture: true }); + + this.getSize = e => e.target.dataset.value; + + this.getSelectedSize = () => { + const selected = element.querySelector("span.selected"); + if (selected) { + return selected.dataset.value; + } else { + return ""; + } + }; + + this.clearSelection = () => { + const selected = element.querySelector("span.selected"); + if (selected && selected.classList) { + selected.classList.remove("selected"); + } + }; + + const options = element.querySelectorAll("span.swatch-label"); + const mkSelectFn = option => () => option.click(); + for (let i = 0; i < options.length; i++) { + const option = options.item(i); + const sizeValue = option.dataset.value; + this.selectors[sizeValue] = mkSelectFn(option); + this.sizeMapper.push([sizeValue, option.innerText.trim()]); + } + } + + clone = () => { + if (this.el) { + const clone = this.el.cloneNode(true); + const clearSelected = () => { + clone.querySelector("span.selected").classList.remove("selected"); + }; + + const links = clone.querySelectorAll("span"); + const mkEventListener = link => e => { + clearSelected(); + link.classList.add("selected"); + this.setSelected(e.currentTarget.dataset.value); + }; + for (let i = 0; i < links.length; i++) { + const link = links.item(i); + link.addEventListener("click", mkEventListener(link), true); + } + return clone; + } else { + return document.createElement("div"); + } + }; +} + class KooKenkaSwatchesSelect extends AbstractSelect { constructor (element) { super(element, { event: "click", useCapture: true }); @@ -328,6 +384,10 @@ const initSizeSelector = selectSizeFn => { selector = getInstance(CrasmanForKooKenkaSelect); break; + case "swatches-woostify": + selector = getInstance(SwatchesWoostifySelect); + break; + default: selector = getInstance(DefaultSelect); } diff --git a/webpack.config.js b/webpack.config.js index 3f1c497..7468258 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -76,6 +76,7 @@ const developmentConfig = () => merge([ parts.page({ template: "index1d.html", filename: "index1d.html" }), parts.page({ template: "index1e.html", filename: "index1e.html" }), parts.page({ template: "index1h1.html", filename: "index1h1.html" }), + parts.page({ template: "index1s.html", filename: "index1s.html" }), parts.page({ template: "index2.html", filename: "index2.html" }), parts.page({ template: "index2r.html", filename: "index2r.html" }), parts.page({ template: "index2kk.html", filename: "index2kk.html" }),