color-dots: double-click on colorway chip launches its product page

463100b140f0ffe7a0e821154d1c52b1463edb0f · 2026-05-29 14:38:44 -0700 · Steve Abrams

Steve 2026-05-29 'doubleclick on colorway twice to launch into the product
page for new item' + 'go for all themes'.

color-dots.js renders the saved colorway chips (v1, v2, v3, ...) in the
left-edge toolbar across all 17 PDP theme variants. Before this:
  - single click: applies the colorway in-page (history.pushState ?cw=N)
  - modifier-click / middle-click: browser-native open-in-new-tab

After: ADDS a dblclick handler that does location.href = b.href, so two
quick clicks navigate to the colorway's own product page. Promoted
colorways (those with a real spoon_all_designs row) go to /design/<new_id>;
un-promoted overlays go to /design/<did>?cw=<id>. The href is already
set correctly per the chip() factory; dblclick just commits the nav.

Lives entirely in color-dots.js so this ships to all 17 PDP themes
automatically (v1-v17 all <script>color-dots.js</script>). No server
change required.

Files touched

M public/js/color-dots.js

Diff

commit 463100b140f0ffe7a0e821154d1c52b1463edb0f
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Fri May 29 14:38:44 2026 -0700

    color-dots: double-click on colorway chip launches its product page
    
    Steve 2026-05-29 'doubleclick on colorway twice to launch into the product
    page for new item' + 'go for all themes'.
    
    color-dots.js renders the saved colorway chips (v1, v2, v3, ...) in the
    left-edge toolbar across all 17 PDP theme variants. Before this:
      - single click: applies the colorway in-page (history.pushState ?cw=N)
      - modifier-click / middle-click: browser-native open-in-new-tab
    
    After: ADDS a dblclick handler that does location.href = b.href, so two
    quick clicks navigate to the colorway's own product page. Promoted
    colorways (those with a real spoon_all_designs row) go to /design/<new_id>;
    un-promoted overlays go to /design/<did>?cw=<id>. The href is already
    set correctly per the chip() factory; dblclick just commits the nav.
    
    Lives entirely in color-dots.js so this ships to all 17 PDP themes
    automatically (v1-v17 all <script>color-dots.js</script>). No server
    change required.
---
 public/js/color-dots.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/public/js/color-dots.js b/public/js/color-dots.js
index ec14bf6..7e60d59 100644
--- a/public/js/color-dots.js
+++ b/public/js/color-dots.js
@@ -236,6 +236,19 @@
           history.pushState({ cw: cw.id }, '', u);
         } catch (e) {}
       });
+      // Steve 2026-05-29: "doubleclick on colorway to launch into the product
+      // page for new item". Single-click stays in-page (applies the colorway
+      // via history.pushState — preview without page-load). Double-click
+      // navigates to the chip's href so the colorway loads as its own product
+      // page. For promoted colorways b.href points at /design/{new_design_id}
+      // (a real spoon_all_designs row); for un-promoted overlays it falls back
+      // to /design/{did}?cw={cw.id}. Lives in color-dots.js so it ships across
+      // all 17 PDP theme variants automatically.
+      b.addEventListener('dblclick', function (ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        location.href = b.href;
+      });
       return b;
     }
     // Auto-apply ?cw=<id> from URL on load — makes /design/<id>?cw=<cwid>

← 8ae5031 fix(colorways/promote): designs.json fallback + nullable FK · back to Wallco Ai · /design/:id?cw=<N> server-renders colorway-flavored title/ca 5abd25b →