Magento voor ontwerpers deel 5

Magento is een verbluffend krachtig e-commerceplatform. In deze miniserie leren we hoe je aan de slag kunt met het platform, de terminologieën leert kennen, een winkel en alle gerelateerde aspecten ervan kunt opzetten en uiteindelijk leren hoe je het kunt aanpassen om het ons eigen te maken..

In dit vijfde deel bouwen we een van de belangrijkste weergaven van onze winkel - de productinformatiepagina. Opgewonden? Laten we beginnen!

De volledige reeks

Deel 1: Installatie en instellingen
Deel 2: Producten, belastingen, categorieën, betalingsgateways, enz.
Deel 3: Thema's
Deel 4: Het thema bouwen
Deel 5: De productinformatiepagina bouwen

Een snelle samenvatting

In het laatste deel hebben we het kader voor het thema vastgelegd door de herhalende delen van het thema te bouwen en in wezen de algemene lay-out van het thema te definiëren.

We hebben ook een praktische blik geworpen op hoe thema's in Magento werken door door te nemen hoe de lay-out is opgebouwd, hoe de blokken werken en hoe alle verschillende stukjes van de puzzel in elkaar passen.

Wat zijn we aan het bouwen vandaag?

Vandaag zullen we de individuele productweergavepagina maken. Net als voorheen zijn de bronbestanden, zowel het front-end als het back-end, inbegrepen. Je kunt het gebruiken om te zien hoe de pagina er uitziet maar daarbuiten, het thema zou er kapot uit moeten zien, weet je, we hebben de rest van de views nog niet aangeraakt. Dus tot we de rest hebben opgebouwd probeer je niet uit onze sandbox te stappen.

Doelen voor de pagina

Ons doel voor deze specifieke pagina is relatief eenvoudig. We willen een no-nonsense pagina die alleen de essentiële dingen doet. Daarom heb ik een korte lijst met elementen opgesteld die ik denk dat het nodig heeft:

De titel van het product: tamelijk voor de hand liggend
Mogelijkheid om een afbeelding van het product te tonen
Een snel en volledig overzicht
Beschikbaarheid en prijs van het product en tot slot
Een knop om aan winkelwagen toe te voegen om in de winkelwagen te plaatsen

Dat is het. Ik wil het zo simpel mogelijk houden en daarom heb ik ervoor gekozen om het niet te doen. Als je eenmaal de algemene principes hebt geleerd, voeg dan zoveel mogelijk whizbang-functies toe.

De basislook

De pagina moet er in feite zo uitzien:

Stap 1 - De HTML

We zullen eerst alleen naar de HTML voor het contentgedeelte kijken. Ik ga ervan uit dat je redelijk vloeiend bent in HTML en CSS, dus ik ga door naar de vrij belangrijke delen.

  
  Beschikbaarheid Op voorraad
 Prijs $ 29.00
 Voeg toe aan winkelmandje 
 Photoshop naar HTML
 Snel overzicht
  Productomschrijving

Merk eerst op dat ik de productafbeelding heb gewikkeld met een div om het gemakkelijker te maken om in de toekomst functies toe te voegen. Stel dat u in de toekomst een snel bijschrift wilt toevoegen aan de weergegeven afbeelding, op deze manier kunnen we dit veel sneller toevoegen.

We hebben een ander div-element dat de informatie over beschikbaarheid en prijsbepaling bijhoudt, samen met de Voeg toe aan winkelmandje knop. We zullen het in een beetje verfraaien met een beetje CSS3.

De rest van de HTML is heel eenvoudig. De titel bevindt zich in een h1-sectie, terwijl de afzonderlijke secties van de secties h2 innemen. Het snelle overzicht is genest in een alinea terwijl het volledige overzicht een div opneemt.

We kunnen nu doorgaan naar het stylinggedeelte.

Stap 2 - De CSS

 / * Productpagina * / # main-product-image margin: 0 20px 10px 0; opvulling: 10px; zweven: links; rand: 1px vast # E1E1E1; achtergrond: # F3F3F3;  # productgegevens width: 180px; opvulling: 10px; zweven: rechts; rand: 1px vast # E1E1E1; achtergrond: # F3F3F3; marge: 0 0 0 20px;  # product-beschikbaarheid span.available, # product-prijsbereik color: # 7db000; zweven: rechts;  .button margin: 10px auto; weergave: blok; breedte: 140 px; opvulling: 5px 10px; text-align: center; tekstdecoratie: geen; kleur: # 555; border: 1px solid #ccc; lettergrootte: 18px; achtergrond: #ddd; grensradius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; box-shadow: 1px 1px 2px rgba (0,0,0, .5); -webkit-box-shadow: 1px 1px 2px rgba (0,0,0, .5); -moz-box-shadow: 1px 1px 2px rgba (0,0,0, .5); text-shadow: #fff 0px 1px 1px; achtergrond: -webkit-gradiënt (lineair, links bovenaan, links onderaan, van (#eeeeee), tot (#cccccc)); achtergrond: -moz-linear-gradient (top, #eeeeee, #cccccc);  .button: hover background: # 014464; achtergrond: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, van (#cccccc), tot (# 999999)); achtergrond: -moz-linear-gradient (top, #cccccc, # 999999); kleur: # 000;  .knop: actief -moz-box-shadow: 0 2px 6px zwart; -webkit-box-shadow: 0 2px 6px zwart;

Niets bijzonders hier. Zeer eenvoudige CSS om de elementen in positie te plaatsen.

Ik heb ook een beetje CSS3 gebruikt om de knoppen er iets beter uit te laten zien.

Stap 3 - Ons bestand catalog.xml maken

Zoals ik in het vorige deel al zei, krijgt elke module een eigen XML-bestand om te dicteren welke items moeten worden opgenomen en de algemene lay-out van de pagina. De pagina die we vandaag bouwen, vertrouwt op een bestand met de naam catalog.xml om de inhoud en structuur ervan te definiëren.

Dit bestand zou aanwezig moeten zijn in de lay-out map, dus laten we een XML-bestand maken en een naam geven catalogus.

Het volledige bestand voor vandaag ziet er zo uit. Ik zal elk bitgedeelte uitleggen per onderdeel hieronder.

    Catalogus Productweergave (Alle)      css / product.css

Negeer de initiële XML en lay-outversieaanduidingen. Ze zijn nu niet van belang voor ons.

Ten eerste laten we het systeem weten dat we van plan zijn om het productzichtgedeelte van het systeem te wijzigen. Dit is zo omdat catalog.xml bevat de lay-out voor een aantal andere weergaven en daarom is het noodzakelijk dat we aangeven welke weergave we willen wijzigen.

Nu vertellen we Magento om de. Te laden 1column.phtml bestand als de hoofdsjabloon voor deze weergave. Dit komt omdat elke individuele weergave elke vooraf gedefinieerde structuur kan gebruiken. Uw startpagina kan bijvoorbeeld een zeer complexe aangepaste structuur gebruiken, uw productpagina een dubbele kolom en uw zoekpagina één kolomlay-out.

Als er niets is opgegeven, wordt de standaardsjabloon geladen die wordt vermeld in page.xml. Aangezien we het voor al het andere gebruiken, is dit onderdeel overbodig, maar als u deze sjabloon voor persoonlijk gebruik aanpast, is het bewerken van de bestandsnaam een stuk eenvoudiger dan het toevoegen van stukjes XML aan het lay-outbestand.

  css / product.css

En nu komen we een van de niftere delen van Magento tegen. Ja, we kunnen al onze visie-specifieke CSS in één gigantisch CSS-bestand plaatsen, maar we zijn geen holbewoners, toch? Oproepen van meerdere HTTP-verzoeken opzij, deze methode laat ons onze CSS beter stroomlijnen.

Eerst krijgen we een verwijzing naar het hoofdgedeelte van het bestand en voegen vervolgens onze paginaspecifieke inhoud erin toe. Hier plaats ik een bestand met de naam product.css die alle paginaspecifieke CSS bevat waarnaar we hierboven hebben gekeken.

Merk op dat je niet beperkt bent tot CSS. Inclusief JS en andere activa is ook mogelijk.

We vragen Magento nu om een specifieke sjabloon te gebruiken voor het inhoudsgedeelte van de pagina

Dit blok definieert alle individuele blokken binnen het hoofdinhoudblok. We gebruiken hoofdzakelijk individuele sjablonen voor het weergeven van de afbeelding, het overzicht en de beschrijving, de beschikbaarheid / prijs en tot slot de functionaliteit voor toevoegen aan winkelwagentje.

En daarmee onze basis catalog.xml bestand is voltooid.

Stap 4 - Onze hoofdsjabloon maken

Okay, nu we onze lay-out hebben gespecificeerd, kunnen we verder gaan met het maken van de catalogus / product / view.phtml bestand dat we eerder hebben opgegeven als de hoofdsjabloon voor de inhoudssectie in de XML.

Dit bestand wijkt enigszins af van de skeletsjabloon die we in het laatste deel hebben gemaakt, omdat we een aantal kleine dingen direct zullen toevoegen in plaats van het sjabloonpad te doorlopen om bloat en een hele reeks API-aanroepen te voorkomen om ons te helpen.

 helper ( 'catalogus / output'); $ _product = $ this-> getProduct (); ?> getOptions ()):?> enctype = "multipart / form-data">    getChildHtml ('media')?>
  getChildHtml ('product_type_data')?> getChildHtml ('addtocart')?> 
 productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getShortDescription ()):?> __ ('Snel overzicht')?>
 productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>
  getChildHtml ('description')?>

Als je snel kijkt, zie je dat we er een aantal maken getChildHtml oproepen om dat te verwerven blokkeert inhoud. Deze werken net zoals verwacht en de inhoud van deze inhoud wordt iets later hieronder besproken.

 helper ( 'catalogus / output'); $ _product = $ this-> getProduct (); ?>

Op dit moment hoeven we niet te weten wat dit betekent. Maar in termen van leken vragen we in feite Magento om de winkelinformatie van dit specifieke product, zodat we het kunnen verwerken en vervolgens op de pagina kunnen weergeven.

 getOptions ()):?> enctype = "multipart / form-data">

Hier gebruiken we een van Magento's API-methoden om dynamisch de URL te genereren waarnaar het formulier moet posten.

 productAttribute ($ _ product, $ _product-> getName (), 'name')?>

We gebruiken een andere methode van Magento om de titel van het product rechtstreeks te verkrijgen.

 getShortDescription ()):?> __ ('Snel overzicht')?>
 productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>

En nogmaals, aangezien het snelle overzicht slechts een zin of twee zal zijn, kies ik ervoor om het direct te importeren in plaats van een sjabloon te gebruiken. We gebruiken dezelfde functie die we hebben gebruikt om de titel te verkrijgen.

Stap 5 - De sjablonen voor onze blokken maken

Nu alle belangrijke onderdelen gereed zijn, kunnen we ons nu concentreren op de individuele blokken. Nu we dit al hebben behandeld bij het samenstellen van de hoofdsjabloon, zou dit nu een stuk eenvoudiger moeten zijn.

We pakken ze allemaal in volgorde van uiterlijk aan in onze code:

Product afbeelding

getChildHtml ( 'media') kaarten direct naar catalogus / product / view / media.phtml. Ons bestand ziet er zo uit:

 getProduct (); $ _helper = $ this-> helper ('catalogus / uitvoer'); ?> helper ('catalogus / afbeelding') -> init ($ _ product, 'image'). '"alt ="'. $ this-> htmlEscape ($ this-> getImageLabel ()). '"title ="'. $ this-> htmlEscape ($ this-> getImageLabel ()). '"/>'; echo $ _helper-> productAttribute ($ _ product, $ _img, 'image');?>

Enkele eenvoudige PHP-code. We gebruiken de hulpmethoden om de afbeelding van het product te verkrijgen en deze vervolgens op het scherm weer te geven.

Beschikbaarheid / Prijs

getChildHtml ( 'product_type_data') kaarten direct naar catalogus / product / view / soort / simple.phtml. Ons bestand ziet er zo uit:

 getProduct ()?> Beschikbaarheid isSaleable ()):?> __ ('In voorraad')?>  __ ('Niet op voorraad')?>  
 Prijs getPriceHtml ($ _ product)?>

We controleren eerst of het item beschikbaar is of niet en geven vervolgens de vereiste HTML af. Het verkrijgen van de prijs van het product is een eenvoudige methode om te bellen!

Voeg toe aan winkelmandje

getChildHtml ( 'addToCart') kaarten direct naar catalogus / product / view / addtocart.phtml. Ons bestand ziet er zo uit:

 getProduct ()?> isSaleable ()):?>

Zoals logisch is, controleren we of een artikel te koop is voordat we de vereiste HTML uitvoeren. Het is een eenvoudige knop zoals duidelijk is.

Productomschrijving

getChildHtml ( 'beschrijving') kaarten direct naar catalogus / product / view / description.phtml. Ons bestand ziet er zo uit:

 getProduct () -> getDescription (); ?>  Productomschrijving
 helper ('catalogus / uitvoer') -> productAttribute ($ this-> getProduct (), nl2br ($ _ description), 'description')?>

Vergelijkbaar met hoe we het snelle overzicht hebben opgenomen, gebruiken we de ingebouwde methoden van Magento om de benodigde informatie te verkrijgen. We controleren het bestaan van de beschrijving voordat we het genereren.

In het geval dat je nieuwsgierig bent, neig ik meestal om de beschrijving afzonderlijk op te nemen via sjablonen, vooral omdat je in productiesjablonen bijna altijd de volgorde van de beschrijving op de een of andere manier beschrijft. In die scenario's is het eenvoudiger om deze logica op te splitsen in zijn eigen sjabloon. Een snel overzicht is daarentegen meestal vrij klein en wordt daarom direct opgenomen.

Wat we in het volgende deel gaan bouwen

... is helemaal aan jou. Er zijn nogal wat weergaven die je zou kunnen ontwerpen, maar het is nogal aanmatigend van mij om er een te kiezen. Daarom vraag ik u, de lezer, om een weergave voor te stellen om in het volgende deel te behandelen door een opmerking in de opmerkingen hieronder. Vergeet niet om mij te vertellen welke ik hierna zal behandelen!

Het laatste woord

En we zijn klaar! Vandaag hebben we de eerste weergave gemaakt van ons aangepaste Magento-thema, de productweergave en een manier waarop Magento ons paginaspecifieke items en inhoud kan toevoegen. Hopelijk was dit nuttig voor jou en je vond het interessant. Aangezien dit voor veel lezers een nogal nieuw onderwerp is, zal ik de commentarensectie die daar binnen zit, nauwlettend in de gaten houden als je twijfelt.

Vragen? Leuke dingen om te zeggen? Kritiek? Klik op het gedeelte Opmerkingen en laat een opmerking achter. Happy codering!

Code