# 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).