Magento Theme Development Home Page, deel 2

In de vorige zelfstudie in deze serie zijn we begonnen met het aanpassen van het kopgedeelte van de startpagina. In deze zelfstudie beginnen we waar we waren gebleven met de verbetering van de kopgedeelte, en vervolgens maken we het nieuwe CMS-blok voor schuiven en bellen dit vanuit onze sjabloonbestanden. Zoals we in dit artikel veel moeten bespreken, laten we zonder verdere vertraging beginnen.

Aangezien we de bovenste koptekst gedeeltelijk hebben gerepareerd, is het enige onderdeel dat moet worden gefixeerd het bovenste gedeelte van de winkelwagen. Om de winkelwagen aan te passen, proberen we eerst uit te zoeken welke sjabloonbestanden verantwoordelijk zijn voor het weergeven van dat onderdeel. Om dat te analyseren, voegen we eerst een aantal producten toe aan het winkelwagentje, zodat we het volledig kunnen onderzoeken.

Als we de hints voor de sjabloon inschakelen, kunnen we zien dat de buitenste container van de header cart afkomstig is van dit sjabloonbestand: frontend / RWD / default / template / checkout / cart / minicart.phtml.Klik vervolgens op, het uitgebreide gedeelte wordt weergegeven via dit bestand: frontend / RWD / default / template / checkout / cart / minicart / items.phtml. Ten slotte wordt elk winkelwagenitem weergegeven via dit bestand: frontend / RWD / default / template / checkout / cart / minicart / default.phtml.

We importeren al deze bestanden in ons nieuwe thema en gaan ze vervolgens aanpassen.

Laten we het aanpassingsproces beginnen met de buitenste minicart.phtml het dossier. Dit is de huidige code van dit bestand:

getSummaryCount (); if (empty ($ _ cartQty)) $ _cartQty = 0; ?> helper ('afrekenen / winkelwagentje') -> getCartUrl (); ?> "data-target-element =" # header-cart ">  __ ( 'winkelwagen'); ?>    getChildHtml ( 'minicart_content');?>

Laten we, voordat we beginnen met het aanbrengen van wijzigingen, de code van onze header-winkelwagentje in ons originele HTML-bestand controleren. De code daar ziet er als volgt uit:

 kar     
  Lincoln stoel
 Grootte: Een maat
 Aantal stuks: 01
 
  $ 30.00
 
 
 
   
  Lincoln stoel
 Grootte: Een maat
 Aantal stuks: 01
 
  $ 30.00
 
 
 
 Totaal $ 60.00

We gaan dus de PHP-bestandscode aanpassen om deze te laten lijken op onze HTML-code. We gebruiken hier alleen een ankertag om het cartpictogram in te pakken en daarna laten we de minikunstinhoud zien. Daarom ziet onze code er zo uit:

helper ( 'checkout / cart') -> getCartUrl (); ?> "> Cart  getChildHtml ( 'minicart_content');?>

Hier hebben we de buitenste wikkel van de bovenste winkelwagen vervangen, maar nu moeten we de vervolgkeuzelaag bewerken. Zoals we al hebben gezien, komt die verpakking erachter frontend / RWD / default / template / checkout / cart / minicart / items.phtml. Laten we de huidige code van dit bestand controleren:

getSummaryCount (); if (empty ($ _ cartQty)) $ _cartQty = 0; ?> 
 
   __ ('Recent toegevoegde item (s)')?> __ ('Sluiten'); ?> "> × 
 getRecentItems ()?>      getItemHtml ($ _ item)?>  
 
   getChildHtml ('cart_promotion')?> 
   canApplyMsrp ()):?> __ ('BESTEL TOTAAL ZAL WORDEN WEERGEGEVEN VOORDAT U DE BESTELLING INLEVERT'); ?>  __ ('Subtotaal winkelwagentje')?> formatPrice ($ this-> getSubtotal ())?> getSubtotalInclTax ()):?> 
(formatPrice ($ _ subtotalInclTax)?> getIncExcText (true)?>)   
 
  isPossibleOnepageCheckout ()):?>  getChildHtml ('extra_actions')?>  __ ('Afrekenen')?> "Href ="getCheckoutUrl ()?> "> __ ('Afrekenen')?>  
 
  getUrl ( 'checkout / cart'); ?> "> __ ('Bekijk winkelwagen'); ?>  
  __ ('U heeft geen items in uw winkelwagentje.')?>

Wanneer we het vergelijken met onze HTML-sjabloon, zijn er enkele dingen die we moeten doen. Allereerst in de minikaart-verpakking div, we zullen beginnen met het implementeren van onze ul, en voor elk item dat we herhalen onder de li label. Aan het einde geven we het totaal van de winkelwagen weer of geven we aan dat er geen items in de winkelwagen zitten. Onze definitieve code voor dit bestand ziet er als volgt uit:

getSummaryCount (); if (empty ($ _ cartQty)) $ _cartQty = 0; ?> 
 
 getRecentItems ()?>      getItemHtml ($ _ item)?>    canApplyMsrp ()):?> __ ('BESTEL TOTAAL ZAL WORDEN WEERGEGEVEN VOORDAT U DE BESTELLING INLEVERT'); ?>  __ ('Subtotaal winkelwagentje')?> formatPrice ($ this-> getSubtotal ())?> getSubtotalInclTax ()):?> 
(formatPrice ($ _ subtotalInclTax)?> getIncExcText (true)?>)     
  __ ('U heeft geen items in uw winkelwagentje.')?>

Nu is het laatste deel dat overblijft het item in de winkelwagenlijst zelf aan het vormgeven. Zoals we al hebben vastgesteld, is het bestand dat verantwoordelijk is voor dat deel: frontend / RWD / default / template / checkout / cart / minicart / default.phtml.

De huidige code van dit bestand lijkt vrij lang en moeilijk te begrijpen, maar laat u niet intimideren. We hoeven dit niet allemaal te bewerken, omdat het grootste deel van de bestandscode alleen de juiste prijs en andere productopties berekent. Nogmaals, we controleren onze HTML-code, plaatsen deze in dit bestand en beginnen de statische tekst te vervangen door dynamische waarden. Dit is de code voor elk winkelwagenitem in onze HTML:

  
  Lincoln stoel
 Grootte: Een maat
 Aantal stuks: 01
 
  $ 30.00

We zullen de img tag met deze:

Vervolgens vervangen we de naam door dynamische code:

hasProductUrl ()):?> getProductUrl ()?> ">escapeHtml ($ this-> getProductName ())?>hasProductUrl ()):?>

Voor het weergeven van de productopties gebruiken we deze dynamische code:

getOptionList ()):?>  escapeHtml ($ _ option ['label'])?>:

Vervolgens bepalen en tonen we de hoeveelheid met behulp van deze code:

__ ( 'Aantal:'); ?> getQty ()?>

Voor prijsberekening voeren we deze code in op de plaats van de statische prijs:

 __ ('Zie prijs voor orderbevestiging.'); ?>  helper ('belasting') -> displayCartPriceExclTax () || $ this-> helper ('belasting') -> displayCartBothPrices ()):?> helper ('belasting') -> displayCartBothPrices ()):?> __ ('Excl.-belasting'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ( 'checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>  helper ('afrekenen') -> formatPrice ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) als $ belasting):?> : formatPrice ($ belasting [ 'bedrag'], true, true); ?>   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) als $ belasting):?> : formatPrice ($ belasting [ 'amount_incl_tax'], true, true); ?>
  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) als $ belasting):?> : formatPrice ($ belasting [ 'amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __('Totaal'); ?>:
 helper ( 'checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>    helper ('belasting') -> displayCartPriceInclTax () || $ this-> helper ('belasting') -> displayCartBothPrices ()):?> helper ( 'checkout') -> getPriceInclTax ($ _ item); ?> helper ('belasting') -> displayCartBothPrices ()):?> 
__ ('Inclusief BTW'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ('afrekenen') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  helper ('afrekenen') -> formatPrice ($ _ incl - $ _ item-> getWeeeTaxDisposition ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) als $ belasting):?> : formatPrice ($ belasting [ 'bedrag'], true, true); ?>
   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) als $ belasting):?> : formatPrice ($ belasting [ 'amount_incl_tax'], true, true); ?>  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) als $ belasting):?> : formatPrice ($ belasting [ 'amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __ ('Totaal incl. Belasting'); ?>:
 helper ('afrekenen') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>

En als laatste stap vervangen we de href om de URL met deze te verwijderen:

getAjaxDeleteUrl ()?>

Ik heb al deze code gevonden van de echte default.phtml. Je hoeft niet zelf alle logica en code te achterhalen, maar als je goed kijkt, kun je het vinden in het bestand dat je probeert te wijzigen.

Dus de definitieve code van onze default.phtml bestand ziet er als volgt uit:

getItem (); $ isVisibleProduct = $ _item-> getProduct () -> isVisibleInSiteVisibility (); $ canApplyMsrp = Mage :: helper ('catalogus') -> canApplyMsrp ($ _ item-> getProduct (), Mage_Catalog_Model_Product_Attribute_Source_Msrp_Type :: TYPE_BEFORE_ORDER_CONFIRM); ?>   
  hasProductUrl ()):?> getProductUrl ()?> ">escapeHtml ($ this-> getProductName ())?>hasProductUrl ()):?>
  getOptionList ()):?>  escapeHtml ($ _ option ['label'])?>:        
  __ ( 'Aantal:'); ?> getQty ()?> 
 
    __ ('Zie prijs voor orderbevestiging.'); ?>  helper ('belasting') -> displayCartPriceExclTax () || $ this-> helper ('belasting') -> displayCartBothPrices ()):?> helper ('belasting') -> displayCartBothPrices ()):?> __ ('Excl.-belasting'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ( 'checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>  helper ('afrekenen') -> formatPrice ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) als $ belasting):?> : formatPrice ($ belasting [ 'bedrag'], true, true); ?>   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) als $ belasting):?> : formatPrice ($ belasting [ 'amount_incl_tax'], true, true); ?>
  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) als $ belasting):?> : formatPrice ($ belasting [ 'amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __('Totaal'); ?>:
 helper ( 'checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>    helper ('belasting') -> displayCartPriceInclTax () || $ this-> helper ('belasting') -> displayCartBothPrices ()):?> helper ( 'checkout') -> getPriceInclTax ($ _ item); ?> helper ('belasting') -> displayCartBothPrices ()):?> 
__ ('Inclusief BTW'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ('afrekenen') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  helper ('afrekenen') -> formatPrice ($ _ incl - $ _ item-> getWeeeTaxDisposition ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) als $ belasting):?> : formatPrice ($ belasting [ 'bedrag'], true, true); ?>
   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) als $ belasting):?> : formatPrice ($ belasting [ 'amount_incl_tax'], true, true); ?>  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) als $ belasting):?> : formatPrice ($ belasting [ 'amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __ ('Totaal incl. Belasting'); ?>:
 helper ('afrekenen') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>     
 getAjaxDeleteUrl ()?> ">

Als u nu al deze bestanden opslaat en de startpagina opnieuw laadt, ziet u zoiets als dit:

We hebben wat problemen met de stijlen, maar de HTML-weergave komt redelijk in de buurt van ons vereiste HTML-ontwerp. Nu we het bovenste kopgedeelte hebben voltooid, is het volgende het logogedeelte. Gelukkig is er niets anders te doen behalve het stylinggedeelte (om het logo in het midden uit te lijnen) die we in het stylingartikel zullen doen. Onze menu-items lijken ook vrij dicht bij wat we verwachten, dus we moeten alleen de zoekbalk en vervolgens de hoofdschuifregelaar aanpassen.

Om onze zoekbalk aan te passen, laten we de hints van de sjabloon inschakelen en zien welk onderdeel verantwoordelijk is voor het weergeven van deze code: frontend / RWD / default / template / Winkel zoeken / form.mini.phtml.

Momenteel ziet dit bestand er als volgt uit:

  __ ('Zoeken:')?>   
 
  
 Als we de HTML van de zoekbalk in ons HTML-ontwerpbestand bekijken, ziet het er als volgt uit:

Dus we gebruiken de uiterlijke kenmerken van de HTML en vervangen de innerlijke inhoud door de dynamische inhoud. Onze nieuwe form.mini.phtml bestand ziet er als volgt uit:

In het laatste deel van dit artikel bewerken we de hoofdschuifregelaar. Daarvoor zullen we een nieuw statisch blok maken, door naar te gaan CMS> Statische blokken> Nieuw blok toevoegen. We noemen dit blok 'Homepage Slider', en we zullen de identificatie invoegen als 'Home-slider'-zo zal de code dit blok kunnen vinden.

Nu voeren we de schuifregelaarcode in vanuit onze HTML.


 
    
 
   
  lichtstraal
 Lorem Ipsum is gewoon dummy tekst van de drukkerij- en zetbranche.
 Winkel nu 
 
   lichtstraal
 Lorem Ipsum is gewoon dummy tekst van de drukkerij- en zetbranche.
 Winkel nu

Merk op dat we de afbeeldingsbron ten opzichte van de skin directory hebben vervangen met behulp van de skin_url label zoals dit:

Nu voegen we deze regels toe aan het bestand header.phtml dat we in het laatste artikel hebben gemaakt, net boven de laatste regel getChildHtml (topContainer); ?>.

getIsHomePage ()):?> getLayout () -> createBlock ('csms / block') -> setBlockId ('home-slider') -> toHtml (); ?>

De laatste stap is om de huidige schuifregelaar te verwijderen. Ga hiervoor naar CMS-pagina's> Madison Island, en van de Inhoud sectie, verwijder alle code tot aan het begin van de stijlsectie.

Sla alles op en laad de startpagina opnieuw, en nu zou je het allemaal heel goed moeten zien aankomen. Sommige stijlen zijn uitgeschakeld, maar we zullen dit behandelen in een afzonderlijke styling-tutorial. Voorlopig hoeven we alleen nog maar te zorgen voor het inhoudgedeelte van de startpagina, waar we een nieuwste productencarrousel laten zien en dan zullen we het voettekst aanpassen. We zullen dit allemaal doen in de volgende tutorial, dus houd het in de gaten!

Code