Share
Toen ik deze serie aanvankelijk gepland had, was het de bedoeling om een reeks van 15 artikelen te zijn, waarin we van plan waren alle pagina's van het thema te ontwikkelen, inclusief het winkelwagentje, afrekenpagina's, aanmeldings- / aanmeldingspagina's en de pagina's van de gebruikersaccounts.
Maar na het schrijven van de eerste 10 artikelen, realiseerde ik me dat we in detail al de benodigde stappen voor het maken van de wijzigingen in je Magento-themapagina's hebben uitgelegd en dat het bewerken van de andere pagina's slechts een herhaling is van de stappen die we al hebben uitgelegd voor.
Daarom sluit ik de reeks in dit artikel af, waar we de productpagina afmaken van waar we het in het vorige artikel hebben achtergelaten, en ik zal je een paar tips geven over het gebruik van de technieken die je in deze serie hebt geleerd. om de rest van de pagina's zelf te bewerken.
Dus laten we de aanpassing van de productdetailspagina hervatten. Zo ziet het er op dit moment uit:
Als we het vergelijken met het HTML-ontwerp dat we hebben, moet dit er zo uit zien:
Om het op ons HTML-ontwerp te laten lijken, moeten we wat lettertype-wijzigingen aanbrengen in de secties voor producthoofdstukken, prijzen en beschikbaarheid. Ook moeten we in de sectie 'Aan winkelwagen toevoegen' de achtergrondkleur en randen wijzigen. Anders dan dat, moeten we enkele wijzigingen aanbrengen met de marges en de opvulling. We doen dat door deze regels toe te voegen in ons theme.css-bestand:
/ ***** Productdetails Pagina *********** / .more-views margin-top: 10px; .product-image-thumbs text-align: center; .more- views .product-image-thumbs a: hover border-color: # b39a64; .more-views .product-image-thumbs a float: left; opvulling: 3px; border: 1px solid #cccccc; .products-details font-family: Georgia, sans-serif; .products-description .name font-family: Georgia, sans-serif; lettertypegrootte: 30px; .availability.in-stock font-size: 11px; .products-details .products-description .price width: 50%; font-size: 25px; kleur: # b39a64; font-weight: 500; .products-description .product-options border: none; padding-links: 30px; .product-view .products-description .product-options .swatch-attr-label font-size: 11px; font-family: inherit; font-gewicht: normaal; .products-description .product-options-bottom border: none; achtergrond: geen; padding-left: 30px; lettergrootte: 12px; opvulling: 17px 0 0px 0; border-top: 1px solid #ccc; marge: 10px 30px 0 30px; .product-view .product-options-bottom .add-to-cart-buttons. button background: # b39a64; kleur: #fff; .product-view .products-description .add-to-cart margin-bottom: 21px;
De code moet er redelijk vanzelfsprekend uitzien. Na het aanbrengen van deze wijzigingen zou de pagina er als volgt uit moeten zien:
Nu zijn we vrij dicht bij onze HTML-ontwerpvereisten. Als we echter naar het tabbladgedeelte van de productenpagina kijken, hoewel het er goed uitziet, komt het niet overeen met onze HTML-ontwerpvereiste. Zo ziet het er op dit moment uit:
Om het te laten matchen met ons HTML-ontwerp, voegen we deze CSS-regels toe aan ons theme.css-bestand:
/ ***** Tabs Section *********** / .product-view .product-collateral .toggle-tabs border: none; achtergrond: geen; .product-view .product-collateral .toggle-tabs li.current .product-view .product-collateral .toggle-tabs li float: left; rand: 1px solide #ececec; .product-view .product-collateral> dl> dd opvulling: 0 15px 15px 0px; border: none; .product-view .product-collateral .toggle-tabs li.current> span background-color: #eee; color: # b39a64 ;;
We hebben de achtergrondkleur voor de tabtitels en de kleur voor het huidige tabblad gewijzigd. De opvulling en rand hiervoor zijn ook bewerkt. Dit is hoe het er nu uit zou moeten zien:
Het ziet er nu vrij dichtbij uit. De pagina ziet er allemaal goed uit, behalve één klein ding: de marge tussen de tabbladen en de gerelateerde producten is veel te veel en verpest het uiterlijk van de hele pagina.
Dit komt door de min-height eigenschap gedefinieerd voor de .tab-box klasse. We lossen het op met deze snelle code:
/ ***** Fixing Margin Bottom Problem *********** / .product-view .tab-box min-height: initial;
Het probleem is nu opgelost:
Nu is onze volledige productdetailpagina gereed en komt redelijk dicht bij onze HTML-ontwerpvereisten. Hiermee hebben we de drie belangrijkste pagina's van de eCommerce-website voltooid, die zijn: homepage, pagina met productvermeldingen en pagina met productdetails..
Zoals ik aan het begin van dit artikel al heb vermeld, zal ik deze artikelreeks hier samenvatten door u enkele tips te geven over hoe u andere pagina's van het thema kunt aanpassen, door de vaardigheden te gebruiken die u in deze serie hebt geleerd.
Laten we de winkelwagenpagina eens bekijken. Het ziet er momenteel als volgt uit:
Als we echter naar ons HTML-ontwerp kijken, ziet het er als volgt uit:
Om het aan te passen, gebruiken we dezelfde procedure om de hints van de sjabloon in te schakelen en onze sjabloonbestanden te bepalen die verantwoordelijk zijn voor het weergeven van deze pagina. Vervolgens zullen we de volgende wijzigingen aanbrengen:
Hier kunt u zien dat de algemene lay-out van de pagina afkomstig is van het bestand /template/checkout/cart.phtml. We moeten het bewerken om de componenten op de juiste plaats te plaatsen. We plaatsen de HTML-code die we in ons HTML-bestand hebben en beginnen de code te vervangen door de dynamische code.
Op dezelfde manier kunnen we zien dat de productrijen worden weergegeven in het sjabloon / uitcheck / cart / item / default.phtml-bestand. We zullen ook dat bestand moeten bewerken. Verder denk ik niet dat we nog andere wijzigingen moeten aanbrengen in de phtml-bestanden, omdat we de rest eenvoudig kunnen doen via CSS.
Laten we nu de afrekenpagina bekijken. Het ziet er momenteel als volgt uit:
Volgens onze HTML zou dit er echter als volgt uit moeten zien:
Laten we dezelfde procedure herhalen en de phtml-bestanden bekijken die we hier moeten wijzigen. Daar kunt u zien dat de hoofdlay-out afkomstig is van /template/checkout/onepage.phtml. En de voortgangsbalk wordt gevuld door dit bestand: template / checkout / onepage / progress.phtml.
We kunnen wijzigingen aanbrengen in deze twee bestanden door de code te vergelijken met ons HTML-bestand. Nadat u de wijzigingen in deze twee bestanden hebt aangebracht, kunt u de rest van de wijzigingen via CSS doorvoeren. Ik denk niet dat je een ander phtml-bestand voor deze pagina moet wijzigen.
Laat me hier herhalen dat je de wijzigingen in het standaardthema niet moet aanbrengen. Maak altijd een kopie van het phtml-bestand dat u in uw nieuwe thema wilt bewerken en bewerk het alleen daar.
Als u doorgaat naar de inlogpagina, ziet het er op dit moment als volgt uit:
Hier herhalen we opnieuw dezelfde stappen en beginnen we met het inschakelen van de sjabloontoetsen:
Hier kunt u zien dat het belangrijkste bestand dat u moet bewerken, is: template \ persistent / customer / form / login.phtml. U kunt het grootste deel van de lay-out van de pagina vanuit dit bestand wijzigen. Voor de stijlwijzigingen kunt u dat doen via CSS.
Evenzo kunnen we zien hoe de Aanmeldingspagina kan worden bewerkt. Eerst zullen we de hints van de sjabloon inschakelen:
Aan de hand van sjabloonhints zien we dat de algemene lay-out van de aanmeldingssectie afkomstig is van template / persistent / customer / form / register.phtml. U kunt dit wijzigen door dit bestand te bewerken.
Als je tot nu toe hebt gevolgd, zou je waarschijnlijk alle stappen uit je hoofd moeten kennen. U kunt doorgaan en de pagina's van gebruikersaccounts bewerken met behulp van dezelfde procedures die u hier hebt geleerd.
Je kunt jezelf nu formeel feliciteren: je kunt jezelf een Magento-thema-ontwikkelaar noemen, omdat je een Magento-thema hebt ontwikkeld en alle basismethoden en -procedures hebt geleerd die daarvoor nodig zijn.
Tijdens het schrijven van deze serie heb ik mijn uiterste best gedaan om het gemakkelijk en duidelijk te maken. Ik hoop dat deze serie een goede leerervaring voor je was!
Verstrek uw feedback over deze serie in de sectie Opmerkingen en blijf terugkomen naar Tuts + om andere nuttige artikelen te bekijken. En vergeet niet om te zien welke extensies beschikbaar zijn om uw werk met Magento uit te breiden.
Heb een geweldige leerervaring!
Accentsconagua