Github Page

Shopify · Jan 30, 2024 · fa29dc4 · fa29dc4
1 parent da18312
commit fa29dc4
Show file tree

Hide file tree

Showing 2 changed files with 150 additions and 0 deletions.
diff --git a/.spin/Procfile b/.spin/Procfile
@@ -0,0 +1 @@
+server: ruby -run -e httpd ./src -p 2399
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Shopify Taxonomies</title>
+  <script src="https://cdn.jsdelivr.net/npm/js-yaml@3.14.1/dist/js-yaml.min.js"></script>
+</head>
+
+<body>
+  <h1>Shopify Taxonomy</h1>
+  <h2 class="container_title">Categories</h2>
+  <div class="scroll_container">
+
+  </div>
+  <style>
+    body {
+      margin: 10;
+    }
+    .sibling-list {
+      display: none;
+    }
+
+    .sibling-list.root,
+    .sibling-list.expanded {
+      display: block;
+    }
+
+    .sibling-list ul {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .accordion-item {
+      padding: 5px 10px;
+      margin: 2.5px;
+      border-radius: 25px;
+      background-color: #f5f5f5;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+    }
+
+    .accordion-item.selected {
+      background-color: #eedbff;
+    }
+
+    .accordion-item:hover {
+      background-color: #eedbff;
+    }
+
+    .accordion-content {
+      display: none;
+      flex-direction: column;
+    }
+  </style>
+  <script>
+    const selectedNodes = {};
+    const toggleNode = (event) => {
+      const nodeId = event.target.getAttribute('node_id');
+      const depth = event.target.closest(".sibling-list").getAttribute('node_depth');
+      if (selectedNodes[depth] === nodeId) {
+        delete selectedNodes[depth];
+      } else {
+        selectedNodes[depth] = nodeId;
+      }
+      Object.keys(selectedNodes).forEach(key => {
+        if (key > depth) {
+          delete selectedNodes[key];
+        }
+      });
+
+      document.querySelectorAll(".sibling-list").forEach(list => {
+        const parentId = list.getAttribute('parent_id');
+        const depth = list.getAttribute('node_depth') - 1;
+        if (selectedNodes[depth] === parentId) {
+          list.classList.add("expanded");
+        } else {
+          list.classList.remove("expanded");
+        }
+      });
+
+      document.querySelectorAll(".accordion-item").forEach(item => {
+        const nodeId = item.getAttribute('node_id');
+        if (Object.values(selectedNodes).includes(nodeId)) {
+          item.classList.add("selected");
+        } else {
+          item.classList.remove("selected");
+        }
+      });
+    }
+
+    const loadNodes = async () => {
+      const fileNames = [
+        'shopify/categories/aa_apparel_accessories.yml',
+        'shopify/categories/hg_home_garden.yml',
+        'shopify/categories/sg_sporting_goods.yml',
+        'shopify/categories/undefined_food_beverages_tobacco.yml',
+        'shopify/categories/undefined_furniture.yml',
+        'shopify/categories/undefined_health_beauty.yml',
+      ]
+      const responses = await Promise.all(fileNames.map(fileName => fetch(fileName)));
+      const yamlTexts = await Promise.all(responses.map(response => response.text()));
+      const parsedYamls = yamlTexts.map(yamlText => jsyaml.load(yamlText));
+      const allNodes = parsedYamls.flat();
+
+      const siblingLists = allNodes.reduce((obj, item) => {
+        item["depth"] = item.fully_qualified_type.split('>').length - 1;
+        obj[item.depth] ||= {}
+        obj[item.depth][item.parent_id] ||= []
+        obj[item.depth][item.parent_id].push(item);
+        return obj;
+      }, {});
+
+      function generateSiblingListMarkup(siblingList) {
+        return siblingList.map(node => {
+          return `<li class="accordion-item" node_id="${node.public_id}">${node.name}</li>`
+        }).join('')
+      }
+
+      function generateSiblingMarkup() {
+        const markup = []
+        Object.keys(siblingLists).sort().forEach(depth => {
+          Object.entries(siblingLists[depth]).forEach(([parentId, siblingList]) => {
+            markup.push(`<div class="sibling-list ${depth === "0" ? "root" : "leaf"}" node_depth="${depth}" parent_id="${parentId}">
+              <h3>Level ${parseInt(depth) + 1}</h3>
+              <ul>
+                ${generateSiblingListMarkup(siblingList)}
+              </ul>
+            </div>`)
+          })
+        })
+        return markup.join('')
+      }
+
+      document.querySelector('.scroll_container').innerHTML = generateSiblingMarkup();
+      document.querySelectorAll('.accordion-item').forEach(item => {
+        item.addEventListener('click', toggleNode);
+      })
+    }
+    loadNodes();
+  </script>
+</body>
+
+</html>