Files

Jacek Pyziak 7ac795ba3f feat(new-layout): add-to-cart handler + piece configurator (Phase 02 plans 01-02)

Plan 02-01 (piece/crop configurator, complete):
- #piece reuse z shared partial product-cover-thumbnails.tpl
- 8 hidden inputs (is_crop, crop_pos_x/y, crop_width/height, piece_bg_top/left, is_reflection) w formie #add-to-cart-or-refresh
- Defensive setup w custom.js: setTimeout(600) init, no-op override totalpriceinfospecific/prod, DOM stubs
- CSS scope pod body#product .product-size-data .product-size-data--new

Plan 02-02 (add-to-cart submission, PARTIAL):
- Capture-phase native addEventListener (useCapture=true) blokuje PS core crash
  (button poza formą w nowym layoucie — closest('form') zwracało 0)
- Manualny AJAX POST: form.serialize() + qty + add=1&action=update do /pl/koszyk
- Fancybox-blocker port z custom.js:327 (nie odpalał się bo selector 0 matches)
- Manual sync is_crop/crop_width/height przed POST (obejście crash checkedHandler)
- prestashop.emit('updatedCart') + defensive blockcart refresh fetch
- Loading spinner + success flash CSS
- Inline handler mirror w product.tpl z idempotency guard (window.__p02p02Bound)
  — cache-buster dla browser cachowanego custom.js

Deferred do Plan 02-03 (customization + modal blocker dla production):
- Customization nie zapisuje się (squaremeter hook gate'owany discretion=on + brak dimension fields)
- Success modal (wymaga POST do /module/ps_shoppingcart/ajax)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-04-23 23:33:45 +02:00

2.8 KiB

Raw Blame History

PROJECT.md

Name

newwalls.pl — PrestaShop 1.7 (theme: ayon)

Mission

Sklep z tapetami na wymiar. Klient prowadzi migrację wyglądu strony produktu na nowy layout. Do czasu zakończenia testów nowy layout jest warunkowany IP administratora.

Core Constraints

Stary i nowy wygląd strony produktu współegzystują w themes/ayon/templates/catalog/product.tpl:
- Stary layout: {if $smarty.server.REMOTE_ADDR != '89.69.31.86'} ... {/if}
- Nowy layout: {if $smarty.server.REMOTE_ADDR == '89.69.31.86'} ... {/if}
Nie wolno modyfikować starego layoutu (produkcja działa dla zwykłych użytkowników).
Partial themes/ayon/templates/catalog/_partials/product-variants.tpl jest współdzielony — zmiany w nim muszą być zgodne z oboma layoutami.
Stack: PrestaShop 1.7, Smarty, jQuery, SCSS (themes/ayon/assets/css/custom.scss → custom.css).

Value Proposition

Nowy layout strony produktu ma dać czystszy, bardziej prezentowalny UI konfiguratora tapety przy zachowaniu dotychczasowej funkcjonalności (wybór wariantu kolorystycznego, wymiary, dodanie do koszyka itd.).

Known Broken After Redesign

✅ Naprawione (Phase 01)

.product-variants (wariant kolorystyczny) — wygląd grid 3×1 wg Figma 27:9867 + klik zmienia wariant in-place (AJAX action=refresh + history.pushState).

⚠️ Do naprawy (Phase 02+)

Brak <form id="add-to-cart-or-refresh"> / .product-actions wokół product_add_to_cart w nowym layoucie — „Dodaj do koszyka" prawdopodobnie nie działa.
Puste bloki <div class="product-box--data"></div>: product-size-data, product-protect, product-installation, product-order-sample.
Konfigurator rozmiaru „piece" (crop + odbicie lustrzane) — brak markup'u.
Brakujące elementy dla pełnego PS updatedProduct flow (.product-cover-thumbnails, .js-product-images2-modal, .product-details, .product-customization, .product-additional-info) — wpływa na edge case'y przy zmianie wariantu z różnymi miniaturami/opisami.

Established Patterns (Phase 01)

Scoped CSS under body#product .product-variants-data--new — izoluje zmiany nowego layoutu od globalnych reguł i starego widoku.
Własny AJAX refresh w custom.js — action=refresh (nie productrefresh), POST na window.location.href.split('?')[0].split('#')[0], dataType: 'json', header Accept: application/json.
In-place DOM update: history.pushState(resp.product_url) + $('.product-prices-data .product-prices').replaceWith(resp.product_prices) + $('.product_image_wrapper').html(resp.product_cover_thumbnails) + prestashop.emit('updatedProduct', resp). Fallback na window.location.reload() przy błędzie.
Pipeline SCSS → CSS: edytuj tylko themes/ayon/assets/css/custom.scss, custom.css auto-generowany przez user'a watcher (feedback memory).

2.8 KiB Raw Blame History Unescape Escape