Invictus Medical - schelet magazin

De la macheta la tema Shopify

Ce are programatorul in mana, ce ii mai trebuie, si in ce ordine se construieste. Documentul e scris ca sa poata fi dat direct lui Claude, sarcina cu sarcina.

Ce e deja rezolvat de macheta

Toate cotele: grila, spatiere, tipografie, culoare - se citesc direct din codul paginii
Comportamentul real: meniu in doua panouri, sertar mobil, filtre, galerie, ancore, bara lipita jos
Punctele de rupere si layoutul de telefon, deja verificate la 414 px
Ordinea sectiunilor pe cele trei pagini si ce sta deasupra liniei de plutire

Ce lipseste ca sa poata fi construit

Harta bloc din macheta → fisier de tema si sursa de date
Definitiile de metacampuri, fara care filtrele si tabelul tehnic nu au de unde sa se alimenteze
Configurarea filtrelor si a cautarii
Ordinea de lucru si criteriile de acceptanta

Toate patru sunt in documentul asta.

01Punct de plecare

Se pleaca de la Dawn, tema oficiala si gratuita Shopify, forkuita in depozit propriu. Nu se cumpara tema: la un catalog tehnic ajungem oricum sa rescriem cardul de produs, filtrele si meniul, iar o tema cumparata inseamna sa lupti cu deciziile altcuiva. Sectiunile proprii primesc prefixul inv-, ca sa se distinga instant de cele mostenite din Dawn.

Ce	Cum
Mediu de lucru	Shopify CLI, tema de dezvoltare (`shopify theme dev`), niciodata direct pe tema publicata
Versionare	Depozit git cu tema; fiecare etapa = ramura proprie si tema nepublicata pentru verificare
Backup	Export JSON al temei live inainte de prima publicare
Date de test	20 de produse pilot, reale, cu toate metacampurile completate - nu se construieste pe produse goale

02Harta: bloc din macheta → fisier de tema

Fiecare bloc vizibil in macheta are un fisier si o sursa de date. Coloana a treia e cea care conteaza: de acolo vine continutul, si daca sursa nu exista, blocul nu se poate construi.

Antet si subsol - se aplica pe toate paginile

Bloc	Fisier	Sursa datelor
Bara utilitara	`sections/inv-topbar.liquid`	Setari de sectiune (telefon, WhatsApp, mesaj livrare)
Antet + cautare	`sections/inv-header.liquid` in `sections/header-group.json`	Logo din setari tema; cautare = `/search` cu sugestii (Predictive Search)
Meniu doua panouri	acelasi fisier + `snippets/inv-mega.liquid`	Meniu Shopify (Navigation) + metacamp de parinte pe colectie
Bara de incredere	`sections/inv-trust.liquid`	Setari de sectiune, 4 blocuri repetabile
Sertar mobil	`snippets/inv-drawer.liquid`	Acelasi meniu, randat pe doua niveluri
Subsol	`sections/inv-footer.liquid` in `footer-group.json`	Meniuri + setari (CUI, adresa, ANPC, plati)

Acasa - `templates/index.json`

Bloc	Fisier	Sursa datelor
Hero	`sections/inv-hero.liquid`	Setari: supratitlu, titlu, text, doua butoane, pastile, imagine
Comanda din nou	`sections/inv-reorder.liquid`	Ultimele comenzi ale clientului autentificat; ascuns cand nu e logat
Grila de categorii	`sections/inv-category-grid.liquid`	Lista de colectii; numarul de produse = `collection.products_count`; subcategoriile din metacampul de copii
Alege dupa lucrare	`sections/inv-tasks.liquid`	Blocuri repetabile, fiecare cu link spre o colectie dedicata
Cele mai cerute	`featured-collection` (Dawn) cu cardul nostru	Colectie automata sortata dupa vanzari
De ce de la noi	`sections/inv-why.liquid`	Setari, 4 blocuri
Producatori	`sections/inv-brands.liquid`	Lista de vendori sau colectii de brand
Intrebari frecvente	`sections/inv-faq.liquid`	Blocuri repetabile + marcaj FAQPage in `snippets/inv-schema-faq.liquid`

Categorie - `templates/collection.json`

Bloc	Fisier	Sursa datelor
Firimituri	`snippets/inv-breadcrumbs.liquid`	Metacamp de parinte pe colectie + marcaj BreadcrumbList
Titlu + introducere	`sections/inv-collection-head.liquid`	`collection.title` + metacamp `intro`
Pastile subcategorii	acelasi fisier	Colectiile copil din metacamp
Bara de control + filtre + grila	`sections/main-collection-product-grid.liquid` (Dawn, rescris)	Search & Discovery peste metacampuri; produsele din colectie
Card de produs	`snippets/inv-product-card.liquid`	Titlu, SKU, lot, valabilitate, stoc, pret, adaugare in cos
Paginare	acelasi fisier	`paginate`, 24-36 pe pagina. Nu derulare infinita
Cum alegi	`sections/inv-howto.liquid`	Metacamp `howto` (text bogat, cu tabel)
Text categorie + intrebari	`sections/inv-collection-body.liquid`	Metacampuri `body` si `faq`
Categorii inrudite	`sections/inv-related-collections.liquid`	Metacamp lista de colectii

Produs - `templates/product.json`

Bloc	Fisier	Sursa datelor
Galerie	`main-product` (Dawn) cu media rescrisa	Imaginile produsului; prima se incarca prioritar
Coloana de cumparare	`snippets/inv-buy-box.liquid`	Titlu, vendor, SKU al variantei, pret cu si fara TVA, stoc, formular de cos
Data estimata de livrare	`snippets/inv-delivery-eta.liquid`	Calcul din setari (ora limita, zile lucratoare) + prag de greutate
Caseta lot si pastrare	`snippets/inv-lotbox.liquid`	Metacampuri `lot`, `expiry`, `storage`; ascunsa cand lipsesc
Ce contine pachetul	`snippets/inv-kit.liquid`	Metacamp `kit_contents`
Ancore	`sections/inv-anchors.liquid`	Static; continutul ramane in pagina, fara taburi
Descriere structurata	`main-product` blocul de descriere	`product.description`, cu subtitluri dupa sablon fix
Tabel date tehnice	`snippets/inv-spec-table.liquid`	Aceleasi metacampuri ca filtrele - o sursa, doua afisari
Documente	`snippets/inv-docs.liquid`	Metacamp lista de fisiere (fisa tehnica, IFU, CE)
Se foloseste cu	`product-recommendations` + metacamp manual	Recomandari Shopify, suprascrise de lista manuala unde exista
Intrebari produs	`snippets/inv-product-faq.liquid`	Metacamp `faq` + marcaj FAQPage
Pareri	extensie de aplicatie (Judge.me / Loox)	Aplicatie, nu tema. Starea goala se stilizeaza
Bara lipita jos	`snippets/inv-sticky-buy.liquid`	Pret + adaugare in cos, doar sub 900 px
Marcaj Product	`snippets/inv-schema-product.liquid`	sku, gtin, brand, pret, moneda, disponibilitate

03Metacampuri - fara ele nu merge nimic

Astea sunt fundatia. Filtrele din categorie si tabelul tehnic de pe produs se alimenteaza din aceleasi definitii. Se creeaza inainte de a scrie prima linie de Liquid, cu acces activat pentru magazin, altfel nu apar nici in tema, nici in filtre.

Cheie	Tip	Unde apare	Obligatoriu
`product.custom.spec_*`	text sau numar cu unitate	Tabel tehnic + filtre (cate unul per atribut real al categoriei)	Da
`product.custom.lot`	text	Caseta lot, card de produs	La marfa cu termen
`product.custom.expiry`	data	Valabilitate, filtru "valabilitate minima"	La marfa cu termen
`product.custom.storage`	text	Conditii de pastrare	La marfa cu termen
`product.custom.ce_mark`	text	Eticheta de conformitate langa cod	Da
`product.custom.kit_contents`	lista de text	Ce contine pachetul	La kituri
`product.custom.docs`	lista de fisiere	Fisa tehnica, IFU, declaratie CE	Da
`product.custom.faq`	text bogat sau metaobiect	Intrebari despre produs	Nu
`product.custom.goes_with`	lista de produse	Se foloseste impreuna cu	Nu
`collection.custom.parent`	referinta colectie	Meniu pe trei niveluri, firimituri	Da
`collection.custom.children`	lista de colectii	Pastile de subcategorii, grila de pe Acasa	Da
`collection.custom.intro`	text bogat	Introducerea de deasupra grilei	Da
`collection.custom.body`	text bogat	Textul de sub produse	Da
`collection.custom.howto`	text bogat	Ghidul de selectie si tabelul comparativ	Nu
`collection.custom.faq`	text bogat	Intrebari de categorie	Nu

Regula de aur: daca o valoare apare in tabelul tehnic, produsul trebuie sa apara si in filtrul corespunzator. Aceeasi definitie alimenteaza ambele. Se verifica automat: numarul din filtru trebuie sa fie egal cu numarul de produse care au valoarea aia.

04Filtre, cautare, navigatie

Zona	Cum se face	De stiut inainte
Filtre	Aplicatia Search & Discovery, filtre construite peste metacampuri, disponibilitate si pret	Numarul de filtre e limitat - se verifica plafonul in aplicatie inainte sa promiti 8 filtre pe categorie. Filtrele functioneaza pe paginile de colectie si de cautare
Cautare	Cautarea nativa + sinonime din aceeasi aplicatie	Se testeaza pe catalogul real ca SKU-ul intoarce produsul. Daca nu, se trece pe un motor dedicat - decizia se ia devreme, nu la final
Sugestii instant	Predictive Search, cu poza, pret si stoc in rezultat	Se randeaza din `snippets/inv-search-suggest.liquid`
Trei niveluri	Meniu Shopify pentru afisare + metacampuri parinte/copii pentru relatii	Colectiile sunt plate si adresa e fixa `/collections/<nume>`. Ierarhia nu se poate face din adrese
Adresa produsului	Doar `/products/<nume>`	Nu se genereaza legaturi de tip `/collections/x/products/y` - fac dubluri
Filtre in adresa	Parametri de tip `?filter.p.m...`	Primesc noindex si canonic spre colectia curata

05Ce nu se face in tema

RecenziiAplicatie dedicata cu extensie de tema. In tema se stilizeaza doar starea goala si blocul de afisare.

Feed pentru reclameSe face in Feed Tool, nu in tema.

Preturi si stocVin din produs si inventar. Tema doar afiseaza, nu calculeaza.

Plata la termen pe firmaRegula comerciala, nu tema. Pe plan standard se rezolva prin proforma si validare manuala.

Documente PDFFisiere in Shopify, legate prin metacamp. Nu se pun in cod.

Continut de categorieTextele si intrebarile se scriu si se incarca in metacampuri, nu se codeaza in sabloane.

06Ordinea de lucru

Sapte etape, fiecare cu un livrabil care se poate verifica singur. Nu se trece la urmatoarea pana cea curenta nu trece proba.

Fundatia
Fork Dawn, variabilele de culoare, tipografie si spatiere copiate din macheta in assets/inv-tokens.css. Antet, meniu in doua panouri, sertar mobil, bara de incredere, subsol.
Proba: meniul se deschide pe desktop, sertarul pe telefon, zero depasire orizontala la 414 px
Metacampuri
Toate definitiile din capitolul 03, cu acces activat pentru magazin. Completate pe cele 20 de produse pilot.
Proba: metacampurile se citesc in tema si apar in lista de filtre din aplicatie
Pagina de produs
Galerie, coloana de cumparare, lot, kit, ancore, tabel tehnic, documente, intrebari, marcaj Product, bara lipita jos.
Proba: pe cele 20 de produse pilot, fara camp gol si fara bloc rupt cand un metacamp lipseste
Pagina de categorie
Firimituri, intro, pastile, bara de control, filtre, grila, paginare, ghid de selectie, text si intrebari.
Proba: filtrele intorc acelasi numar ca tabelele tehnice ale produselor
Acasa
Hero, comanda din nou, grila de categorii, alege dupa lucrare, cele mai cerute, dovezi, producatori, intrebari.
Proba: toate legaturile duc in colectii reale, niciun link mort
Telefon si viteza
Trecere pe toate cele trei sabloane la 414 px. Imaginea principala prioritara, restul lenese.
Proba: zero depasire orizontala, LCP sub 2,5 s pe mobil pe produs si categorie
Predare
Import complet de catalog, verificare finala, publicare temei.
Proba: lista din capitolul 07, bifata integral

07Definitia de gata

Criteriu	Cum se masoara
Fara depasire orizontala	`document.documentElement.scrollWidth` egal cu latimea ecranului, la 414 px, pe cele trei sabloane
Viteza	LCP sub 2,5 s pe mobil, pe produs si pe categorie
Marcaj valid	Product, BreadcrumbList si FAQPage trec testul Google de rezultate imbogatite
Filtre corecte	Numarul afisat in filtru = numarul real de produse cu acea valoare
Cautare dupa cod	Zece coduri reale, luate la intamplare, intorc produsul corect
Fara continut fabricat	Zero recenzii inventate, zero preturi taiate fictiv, zero note fara pareri reale
Stari goale	Categorie fara rezultate, produs fara pareri, produs fara lot - toate arata intentionat
Tastatura	Meniul, filtrele si galeria se pot folosi fara mouse, cu focus vizibil

08Cum se lucreaza cu Claude

Claude construieste bine cand primeste o sarcina inchisa, cu sursa si criteriu de acceptanta. Nu ii dai "fa magazinul", ii dai o sectiune. Astea trei lucruri i se pun in fata la fiecare sarcina.

Accesul
Depozitul temei local, aplicatia Shopify CLI conectata la magazinul de dezvoltare, si un token de Admin API cu drepturi pe teme, produse si metacampuri.
Referinta
Linkul machetei si al acestui document. Codul machetei se citeste direct din pagina, deci Claude poate lua cotele exacte, nu aproximari.
Sarcina
Un singur bloc din harta de la capitolul 02, cu fisierul tinta si proba de trecere.

Sablon de sarcina

# Context
Tema: fork Dawn, depozit local. Magazin de dezvoltare conectat prin Shopify CLI.
Referinta vizuala: https://design.devrika.ro/01-invictus-desktop-mobil.html
Specificatia: https://design.devrika.ro/00-PREDARE-DESIGNER.html
Harta si metacampuri: https://design.devrika.ro/04-IMPLEMENTARE-SHOPIFY.html

# Sarcina
Construieste blocul "Card de produs" din harta (capitolul 02, pagina Categorie).
Fisier tinta: snippets/inv-product-card.liquid

Cerinte:
- Ordinea in card: cod produs, titlu (max 3 randuri), lot si valabilitate,
  stoc, pret cu TVA, buton de adaugare in cos
- Cotele exacte se iau din macheta, clasa .pcard (citeste codul paginii)
- Lotul si valabilitatea vin din metacampurile custom.lot si custom.expiry
  si se ascund cand lipsesc, fara sa lase spatiu gol
- Stocul are punct colorat SI text; niciodata doar culoare

# Proba de trecere
- Randat intr-o colectie cu 24 de produse, la 1440 px si la 414 px
- Zero depasire orizontala la 414 px
- Un produs fara lot arata corect, fara gaura in card
- Fara stiluri scrise inline; totul in assets/inv-*.css

Regula de verificare: dupa fiecare sectiune, Claude ruleaza proba si arata rezultatul masurat, nu declara "gata". Daca proba nu e definita, sectiunea nu se incepe.

Ce nu se cere lui Claude: sa scrie continut de produs sau de categorie inventat, sa genereze recenzii, sau sa mute in tema lucruri care apartin aplicatiilor. Continutul vine de la noi.

Revizia A - 28.07.2026 - Devrika

Ce e deja rezolvat de macheta

Ce lipseste ca sa poata fi construit

01Punct de plecare

02Harta: bloc din macheta → fisier de tema

Antet si subsol - se aplica pe toate paginile

Acasa - templates/index.json

Categorie - templates/collection.json

Produs - templates/product.json

03Metacampuri - fara ele nu merge nimic

04Filtre, cautare, navigatie

05Ce nu se face in tema

06Ordinea de lucru

07Definitia de gata

08Cum se lucreaza cu Claude

Sablon de sarcina

Acasa - `templates/index.json`

Categorie - `templates/collection.json`

Produs - `templates/product.json`