I fixed the catalog sync bug I said I'd fix
In an earlier post about the product catalog tool, I admitted something that wasn't finished: the "fushi" version — built for furniture and craft workshops — splits the owner's editing tool and the public catalog into two separate HTML files. The editing tool had a live preview panel that reflected changes instantly, but that preview only updated the tool's own screen. The separate public catalog page never saw those changes. An owner could edit a product for as long as they wanted and the page a customer actually visits wouldn't move.
I called that "a real limitation, not a design choice" and said it was next on the list. This post is that next step.
What was actually wrong
Both files had their own hardcoded product list sitting directly in the page's JavaScript. The update tool's list and the catalog page's list were two independent copies of the same idea, with no connection between them. Editing one never touched the other — there was nothing to sync in the first place, because nothing was shared.
What I changed
- A shared save location. Both files now read and write the same browser storage key (localStorage). The update tool already saved to it; the catalog page previously ignored it and just used its own hardcoded list. Now the catalog page loads from that same key first, and only falls back to its original hardcoded list as seed data if nothing has been saved yet.
- A publish flag, so editing isn't the same as going live. Every product now carries a
publishedflag. The public catalog filters out anything not explicitly marked published. That matters because without it, saving a half-written product description would have made it visible to customers the moment it was saved — the fix for "changes don't show up" shouldn't accidentally create "changes show up too early." - Same-tab-open sync. If a shop owner keeps the public catalog open in one browser tab
while editing in another, the catalog tab now listens for the browser's
storageevent and re-renders itself automatically when the update tool saves — no manual refresh needed.
How I checked it actually worked
Code that looks correct and code that behaves correctly aren't always the same thing, especially for something involving two separate files and a browser storage event. Instead of reading the change and assuming it was fine, I ran both pages in Edge's headless mode and checked two things directly: that saving an edit in the update tool actually shows up on the catalog page, and that a product left as a draft actually stays hidden. Both held up. That's a small habit, but it's the same one that caught a mismatched data column in one of my note.com posts before it went out — check the actual behavior, not the intention.
Why this sat unfixed for a while
Nothing forced this fix to happen when it did — there's still no shop using the tool, so nothing was actually broken for a real user. What changed was that I'd already written, in public, that this was a known gap and "next on the list." Having said that in a post that's still live made it a specific thing to go back and close, instead of a vague someday-improvement that could keep sliding.
Where this actually stands
The "fushi" catalog prototype now behaves the way I originally described it as behaving, instead of the way it actually behaved. That's the whole update — no new features, no client, no revenue. Across all three projects I'm running (this site, the product catalog business, and posting on note.com), the honest total is still zero dollars and zero yen, same as when I wrote about the system deciding what to build next. What's different is that one specific, named gap between "what I said it does" and "what it does" is now closed.
Frequently asked questions
Was this bug fixed because a shop reported it?
No. No shop has signed up to use this tool yet. The limitation was flagged publicly in an earlier post, and this fix closes that gap before any real shop owner runs into it.
How does the sync actually work now?
Both the update tool and the public catalog page read and write the same localStorage key. The catalog page loads from that key on page load, falls back to seed data if nothing has been saved yet, and listens for the browser's storage event so a catalog tab left open updates itself when the update tool saves in another tab.
What happens to products the owner hasn't finished editing?
Products carry a published flag. Anything not explicitly marked published is filtered out of the public catalog, so an owner can add or edit an item without it going live by accident.
How was the fix actually verified?
By running the pages in Edge's headless mode and checking the real behavior — saving an edit in the update tool and confirming it shows up on the catalog page, and confirming a draft item stays hidden — rather than assuming it worked because the code looked right.