Share
Când am planificat inițial această serie, intenționa să fie o serie de 15 articole, în care am planificat să dezvoltăm toate paginile temei, inclusiv coșul de cumpărături, paginile de checkout, paginile de conectare / înscriere și paginile conturilor de utilizator.
Dar după ce am scris primele 10 articole, mi-am dat seama că deja am explicat în detaliu toți pașii necesari pentru a face schimbările în paginile temei Magento, iar editarea celorlalte pagini va fi doar o repetare a pașilor pe care i-am explicat deja inainte de.
Prin urmare, încheiem seria din acest articol, în care vom finaliza pagina de produs de unde am lăsat-o în articolul precedent și vă voi oferi câteva sfaturi despre utilizarea tehnicilor pe care le-ați învățat în această serie pentru a edita singur restul paginilor.
Deci, să reluăm personalizarea paginii cu detalii despre produs. Acesta este modul în care arată în prezent:
Dacă îl comparăm cu designul HTML pe care îl avem, acesta ar trebui să pară:
Pentru a face ca aceasta să semene cu designul nostru HTML, trebuie să facem câteva modificări ale fontului în secțiunile privind titlul, prețul și disponibilitatea produsului. De asemenea, în secțiunea "Adăugați în coș" trebuie să modificăm culoarea și marginea fundalului. În afară de asta, trebuie să facem unele schimbări cu marginile și cu padding-ul. Vom face asta prin adăugarea acestor linii în fișierul theme.css:
/ ***** Detalii produs Pagină de lucru *********** Mai multe vizualizări margin-top: 10px; .product-image-thumbs text-align: center;. vizualizări .product-image-thumbs a: hover border-color: # b39a64; . mai multe vizualizări .product-image-thumbs a float: left; padding: 3px; frontieră: 1px solid #cccccc; .produse-detalii font-family: Georgia, sans-serif; .produse-descriere .name font-family: Georgia, sans-serif; font-size: 30px; .disponibilitate în stoc font-size: 11px; .produse-detalii .produse-descriere .price lățime: 50%; font-size: 25px; culoare: # b39a64; font-weight: 500; .products-description .product-options border: none; padding-left: 30px; .product-view.products-description .product-options.swatch-attr etichetă font-size: 11px; font-family: inherit; font-weight: normal; .products-description .product-options-bottom limita: nimic; fundal: nici unul; padding-left: 30px; font-size: 12px; umplutura: 17px 0 0px 0; frontieră: 1px solid #ccc; margine: 10px 30px 0 30px; .product-view .product-options-bottom .add-to-cart-butoane .button background: # b39a64; culoare: #fff; .product-view .products-description .add-to-cart margin-bottom: 21px;
Codul ar trebui să pară destul de explicativ. După efectuarea acestor modificări, pagina ar trebui să arate astfel:
Acum suntem destul de aproape de cerințele noastre de design HTML. Cu toate acestea, dacă ne uităm la secțiunea filelor din pagina de produse, deși arată bine, nu se potrivește cu cerința de proiectare HTML. Acesta este modul în care arată în prezent:
Pentru a se potrivi cu designul HTML, vom adăuga aceste linii CSS în fișierul nostru theme.css:
/ ***** Tabs Secțiunea *********** / .product-view .product-collateral .toggle-tabs border: none; fundal: nici unul; .product-view .product-collateral .toggle-tabs li.current .product-view .product-collateral .toggle-tabs li float: left; frontieră: 1px solid #ececec; .product-view. produs-garanție> dl> dd padding: 0 15px 15px 0px; frontieră: nici una; .product-view.product-collateral .toggle-tabs li.current> span background-color: #eee; Culoare: # b39a64 ;;
Am schimbat culoarea de fundal pentru titlurile filelor și culoarea pentru fila curentă. Plăcuțele și chenarul pentru acestea sunt de asemenea editate. Asa ar trebui sa arate acum:
Se pare destul de aproape acum. Pagina ar trebui să arate bine, cu excepția unui lucru mic: marja dintre secțiunea filelor și produsele asociate este prea mult și ruinează aspectul întregii pagini.
Acest lucru se datorează faptului că min înălțime proprietate definită pentru .tab-box clasă. Îl vom rezolva cu acest cod rapid:
/ ***** Rezolvarea problemei marginii marginii *********** / .product-view .tab-box min-height: initial;
Problema este rezolvată acum:
Acum, întreaga noastră pagină cu detalii despre produs este gata și este destul de aproape de cerințele noastre de design HTML. Cu aceasta am finalizat cele mai importante trei pagini ale site-ului eCommerce, care sunt: pagina de pornire, lista de produse și pagina cu detalii despre produs.
După cum am menționat la începutul acestui articol, voi încheia această serie de articole aici oferindu-vă câteva sfaturi despre cum puteți personaliza alte pagini ale temei, folosind abilitățile pe care le-ați învățat în această serie.
Să aruncăm o privire la pagina de coș. În prezent, arată astfel:
Cu toate acestea, dacă ne uităm la designul HTML, ar trebui să arate astfel:
Acum, pentru a personaliza, vom folosi aceeași procedură de a activa sugestiile șablonului și de a ne imagina care fișiere șablon sunt responsabile pentru redarea acestei pagini, iar apoi vom face modificări în aceste fișiere:
Aici puteți vedea că aspectul general al paginii vine din fișierul /template/checkout/cart.phtml. Trebuie să o editați pentru a plasa componentele în poziția corectă. Vom plasa codul HTML pe care îl avem în fișierul HTML și vom începe să înlocuim codul cu codul dinamic.
În mod similar, putem vedea că rândurile de produse sunt redate din fișierul template / checkout / cart / item / default.phtml. Va trebui să editați și acel fișier. În afară de asta, nu cred că va trebui să facem alte modificări în fișierele phtml, deoarece putem face restul cu ușurință prin CSS.
Acum hai să verificăm pagina de casă. În prezent, arată astfel:
Conform codului nostru HTML, ar trebui să arate astfel:
Permiteți repetarea aceleiași proceduri din nou și găsiți fișierele phtml pe care trebuie să le modificăm aici. Acolo puteți vedea că structura principală provine de la /template/checkout/onepage.phtml. Și bara de progres este populată de acest fișier: template / checkout / onepage / progress.phtml.
Putem schimba aceste două fișiere prin compararea codului cu fișierul HTML. După efectuarea modificărilor în aceste două fișiere, puteți face restul schimbărilor prin intermediul CSS. Nu cred că va trebui să modificați orice alt fișier phtml pentru această pagină.
Dați-mi voie să reiterez că nu trebuie să faceți modificările în tema prestabilită. Ar trebui să creați întotdeauna o copie a fișierului phtml pe care doriți să o editați în noua dvs. temă și să o editați numai acolo.
Trecând mai departe la pagina de conectare, aceasta arată în prezent:
Aici vom repeta din nou toți aceiași pași și vom începe să activați sugestiile șablonului:
Aici puteți vedea că fișierul principal pe care trebuie să îl editați este: template \ persistent / customer / form / login.phtml. Puteți modifica majoritatea aspectului paginii din acest fișier. Pentru schimbările de stil, puteți face acest lucru prin intermediul CSS.
De asemenea, putem vedea modul de editare a paginii de înscriere. Mai întâi vom permite sugestia pentru șablon:
Din sugestiile șablonului putem vedea că aspectul general al secțiunii de înscriere vine din șablon / persistent / client / form / register.phtml. Puteți să o modificați modificând acest fișier.
Dacă ați urmat până acum, ar trebui să știți, probabil, toți pașii. Puteți continua și edita paginile conturilor de utilizator utilizând aceleași proceduri pe care le-ați învățat aici.
Vă puteți felicita în mod oficial acum: vă puteți numi un dezvoltator de temă Magento, deoarece ați dezvoltat de fapt o temă Magento și ați învățat toate metodele și procedurile de bază necesare pentru aceasta.
În timp ce scriam această serie, am făcut un efort deosebit pentru a fi ușor și clar de urmat. Sper că această serie a fost o experiență bună de învățare pentru dvs.!
Oferiți feedback despre această serie în secțiunea de comentarii și continuați să reveniți la Tuts + pentru a consulta alte articole utile. Și nu uitați să vedeți ce extensii sunt disponibile pentru a vă extinde munca cu Magento.
Au o mare experiență de învățare!
Accentsconagua