După ce am descărcat și instalat componenta, să aruncăm o privire la fragmentele noastre care vin împreună cu componenta:
- addComparison - fragment de adăugare a elementelor în lista de comparații
- CompareList - fragmentul tabelului de comparație
- getComparison - fragment pentru afișarea unui link către o comparație existentă a produselor de oriunde
Deci, începem ca întotdeauna cu bucăți. Să facem adăugarea unei bucăți în comparație (addComparisonTpl):
Dacă te uiți atent, vei vedea că afișajul va fi diferit de cel prezent pe site. Se întâmplă - nu vă fie teamă. Apoi, sună fragmentul addComparison în șablonul de produs:
Listid este identificatorul paginii pe care vom afișa tabelul de comparație, îl vom crea mai târziu
Id este identificatorul mărfurilor care urmează să fie adăugate la comparație
Tpl este piesa de ieșire, l-am creat mai devreme
Și în lista bucățiProductTpl, gridProductTpl și lookProductTpl sunăm după cum urmează:
Acum trebuie să creați un șablon pentru lista noastră de comparație (comparați produse):
- vendor.name - numele producătorului
- preț - preț
- articol - articol
- option.memory - opțiunea "Capacitate memorie" (am creat-o într-una din lecțiile anterioare)
- option.cpucore - opțiunea "Numărul de nuclee de procesoare" (am creat-o într-una din lecțiile anterioare)
În continuare avem nevoie pentru a crea o resursă cu un anumit model. Nu uitați să schimbați id-ul în bucăți listProductTpl, gridProductTpl și lookedProductTpl și șabloane pentru produsul dvs., dacă este diferit de la 20.
Comparați produsele pe care ar trebui să le aveți, verificați. Și trebuie doar să retragem referința la comparație în antetul site-ului:
Pentru a face acest lucru, creați o bucată (getComparisonTpl):
Și sună fragmentul getComparison în antetul și antetul bucăți interioare:
Aici, parametrul listă este configurat numai pentru configurația mobilă. În scopul de a configura pentru alte configurații, aș scrie pentru ea un wrapper de fragmente. Acest lucru ne vom ocupa în părțile finale ale cursului.
Aici, în principiu, asta e tot. Poate că este necesar să corectăm stilurile de pe pagina de comparație.