Add shop select

diff --git a/docs/assets/javascript/shop.js b/docs/assets/javascript/shop.js
index 4ffce379123b4753d63518e188722f45dbe4451c..71002ef7d43e1ca860eb0768a2988f038e2b34b3 100644 (file)
--- a/docs/assets/javascript/shop.js
+++ b/docs/assets/javascript/shop.js
@@ -452,29 +452,34 @@ document.addEventListener("DOMContentLoaded", () => {
   const buildOptions = (el, product) => {
     const { variants } = product;
 
-    const $options = El(
-      "shop-product-variants buttons has-addons are-small variants",
-    );
-    $options.className += variants.length > 1 ? " multiple" : " single";
+    const $select = El("shop-product-variants select is-success");
+    const $options = El("shop-product-select", "select");
 
     if (variants.length > 1) {
       variants.forEach((variant) => {
         const { id, title } = variant;
 
-        const $option = El("button", "button");
+        const $option = El("", "option");
         $option.dataset.id = id;
         $option.innerText = title;
 
-        $option.addEventListener("click", (event) => {
-          event.preventDefault();
-          product.selectedVariant = id;
-          update();
-        });
+        // $option.addEventListener("click", (event) => {
+        //   event.preventDefault();
+        //   product.selectedVariant = id;
+        //   update();
+        // });
 
         $options.appendChild($option);
       });
 
-      el.appendChild($options);
+      $select.addEventListener("change", (event) => {
+        event.preventDefault();
+        product.selectedVariant = id;
+        update();
+      });
+
+      $select.appendChild($options);
+      el.appendChild($select);
     }
   };
 
@@ -715,17 +720,17 @@ document.addEventListener("DOMContentLoaded", () => {
         `.shop-product-${getId(product.id)}`,
       );
 
-      $blocs.forEach(($bloc) => {
-        const $variants = $bloc.querySelectorAll(`.variants .button`);
-
-        $variants.forEach(($el) => {
-          if ($el.dataset.id === product.selectedVariant) {
-            $el.classList.add(`is-${THEME_COLOR}`);
-          } else {
-            $el.classList.remove(`is-${THEME_COLOR}`);
-          }
-        });
-      });
+      // $blocs.forEach(($bloc) => {
+      //   const $variants = $bloc.querySelectorAll(`.variants .button`);
+
+      //   $variants.forEach(($el) => {
+      //     if ($el.dataset.id === product.selectedVariant) {
+      //       $el.classList.add(`is-${THEME_COLOR}`);
+      //     } else {
+      //       $el.classList.remove(`is-${THEME_COLOR}`);
+      //     }
+      //   });
+      // });
     });
   };
 

diff --git a/docs/shop.html b/docs/shop.html
index c44dfaef2f8fbcff4dace77ee1b54acd8223f3d6..67ccfe573608e0f0b2cb199b20cf2965bb7f4173 100644 (file)
--- a/docs/shop.html
+++ b/docs/shop.html
@@ -225,6 +225,10 @@ breadcrumb:
     margin-top: 1em;
   }
 
+  .shop-product-select {
+    width: 100%;
+  }
+
   .shop-product-description {
     display: flex;
     flex-grow: 1;