Make the checkout pickup-point chooser testable and extensible#109
Merged
Conversation
…ble templates The shop pickup-point chooser was a closed IIFE that built all its markup in JavaScript, so none of it was unit-testable and a consumer could only customize it by forking the whole file. Rewrite public/js/setono-pickup-point.js as a native ES module (loaded with <script type="module">, still no bundler) exporting the pure helpers and a PickupPointChooser class. The class builds the UI by cloning server-rendered <template>s from the new templates/shop/checkout/_pickup_point_templates.html.twig partial and filling their [data-slot]/[data-role]/[data-action] hooks, so all markup, translations and styling live in Twig — overriding that one partial restyles the chooser with no JavaScript. A missing template renders nothing rather than fabricating markup. Consumers can also subclass PickupPointChooser (registered on window.SetonoSyliusPickupPointChooser), listen for the bubbling setono:pickup-point(s):* CustomEvents, or set window.setonoSyliusPickupPointConfig. The field partial drops its eight data-*-text attributes (the strings moved into the templates), and the templates partial is emitted once per checkout page via the sylius_shop.checkout#javascripts hook.
Cover the now-exported helpers (decodeToken/identity/addressLine) and the PickupPointChooser render/list/state/event/boot behaviour with Vitest + jsdom, added to tests/Application (the repo's Node tooling home). A javascript-tests workflow job runs them; because tests/Application/package.json has file: deps on the installed Sylius/Symfony assets, the job sets up PHP + composer (to populate vendor/) before yarn + vitest, mirroring the functional-tests setup. The Vitest config is a .mjs file so tests/Application/package.json need not become "type": "module" (which would break Encore's CommonJS webpack.config.js).
Add docs/customizing-the-chooser.md describing the four extension levels (override the Twig templates, config object, DOM events, subclass) and update README, CLAUDE.md and UPGRADE.md to note the chooser is now an ES module that clones overridable templates.
ramsey/composer-install already falls back to highest when there is no composer.lock, so stating it explicitly added nothing.
Each <template> now sits in its own {% block setono_sylius_pickup_point_* %} so a
consumer can override a single template via Twig inheritance instead of copying the
whole partial. The rendered output (and the <template> ids the JS clones) is unchanged.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refactors the shop checkout pickup-point chooser (
public/js/setono-pickup-point.js) from a closed IIFE that built all its markup in JavaScript into a class-based native ES module — testable, and extensible by plugin users without forking. No bundler / build step is introduced; it's still a single hand-served file, now loaded with<script type="module">.What changed
<template>s from the newtemplates/shop/checkout/_pickup_point_templates.html.twigpartial and filling[data-slot]/[data-role]/[data-action]hooks. All markup, translations and styling are in Twig — overriding that one partial restyles the chooser with no JavaScript. A missing template renders nothing rather than fabricating markup. The field partial drops its eightdata-*-textattributes accordingly.docs/customizing-the-chooser.md): override the Twig templates →window.setonoSyliusPickupPointConfig→ bubblingsetono:pickup-point(s):*CustomEvents (theselectedone is cancelable) → subclassPickupPointChooserviawindow.SetonoSyliusPickupPointChooser.javascript-testsCI job.Behaviour preserved
Two-state summary/list widget, auto-select-nearest, identity-based "Selected" badge on reload (now matching the server's
provider+ididentity), loading/empty/error states, multi-shipment support, and a single shared/pickup-pointsfetch per visit.Verification
vitest25/25, PHPStan, ECS,lint:twig,lint:containerall green locally.selected/loadedevents fire.Base:
2.x.