Magento Theme-Entwicklung Startseite, Teil 2

Im vorherigen Tutorial dieser Serie haben wir begonnen, den Header-Abschnitt der Homepage zu ändern. In diesem Lernprogramm beginnen wir dort, wo wir mit der Verbesserung des Header-Abschnitts aufgehört haben. Dann erstellen wir den neuen CMS-Block für Schieberegler und rufen ihn aus unseren Vorlagendateien auf. Da wir in diesem Artikel viel zu behandeln haben, beginnen wir ohne weitere Verzögerung.

Da wir den oberen Kopfbereich teilweise fixiert haben, muss dort nur der obere Wagenabschnitt repariert werden. Um die Kopfzeile des Headers anzupassen, versuchen wir zunächst herauszufinden, welche Vorlagendateien für das Rendern dieses Teils verantwortlich sind. Um dies zu analysieren, fügen wir zunächst einige Produkte in den Warenkorb, damit wir sie umfassend untersuchen können.

Wenn wir die Vorlagenhinweise aktivieren, können wir sehen, dass der äußere Container des Headerwagens aus dieser Vorlagendatei stammt: Frontend / rwd / default / template / checkout / cart / minicart.phtml.Beim Klicken wird der erweiterte Teil durch diese Datei gerendert: Frontend / rwd / default / template / checkout / cart / minicart / items.phtml. Schließlich wird jeder Warenkorbartikel über diese Datei gerendert: Frontend / rwd / default / template / checkout / cart / minicart / default.phtml.

Wir importieren alle diese Dateien in unser neu erstelltes Design und beginnen dann, sie zu ändern.

Beginnen wir den Änderungsprozess mit dem äußersten minicart.phtml Datei. Dies ist der aktuelle Code dieser Datei:

getSummaryCount (); if (leer ($ _ cartQty)) $ _cartQty = 0; ?> Helfer ('Kasse / Warenkorb') -> getCartUrl (); ?> "data-target-element =" # header-cart ">  __('Wagen'); ?>    getChildHtml ('minicart_content');?>

Bevor wir nun mit Änderungen beginnen, prüfen wir den Code unseres Header-Cart-Abschnitts in unserer ursprünglichen HTML-Datei. Der Code dort sieht so aus:

 Wagen     
  Lincoln Stuhl
 Größe: Einheitsgröße
 Menge: 01
 
  30,00 $
 
 
 
   
  Lincoln Stuhl
 Größe: Einheitsgröße
 Menge: 01
 
  30,00 $
 
 
 
 Gesamt 60,00 $

Also fangen wir an, den PHP-Dateicode zu ändern, damit er unserem HTML-Code ähnelt. Wir verwenden hier nur ein Ankertag, um das Einkaufswagen-Symbol einzuwickeln, und anschließend zeigen wir den Inhalt der Minicart. Daher wird unser Code so aussehen:

Helfer ('Kasse / Warenkorb') -> getCartUrl (); ?> "> Warenkorb  getChildHtml ('minicart_content');?>

Hier haben wir den äußersten Wrapper des oberen Wagens ersetzt, aber jetzt müssen wir den Dropdown-Abschnitt-Wrapper bearbeiten. Wie wir bereits gesehen haben, kommt dieser Wrapper Frontend / rwd / default / template / checkout / cart / minicart / items.phtml. Lassen Sie uns den aktuellen Code dieser Datei überprüfen:

getSummaryCount (); if (leer ($ _ cartQty)) $ _cartQty = 0; ?> 
 
   __ ('Kürzlich hinzugefügte Artikel)'> __ ('Schließen'); ?> "> × 
 getRecentItems ()?>      getItemHtml ($ _ item)?>  
 
   getChildHtml ('cart_promotion')?> 
   canApplyMsrp ()):?> __ ('BESTELLGESAMT WIRD ANGEZEIGT, BEVOR SIE DIE BESTELLUNG BESTELLEN'); ?>  __ ('Warenkorb-Zwischensumme:')?> formatPrice ($ this-> getSubtotal ())?> getSubtotalInclTax ()):?> 
(formatPrice ($ _ subtotalInclTax)?> getIncExcText (true)?>)   
 
  isPossibleOnepageCheckout ()):?>  getChildHtml ('extra_actions')?>  __ ('zur Kasse')?> "Href ="getCheckoutUrl ()?> "> __ ("zur Kasse")?>  
 
  getUrl ('Kasse / Warenkorb'); ?> "> __('Einkaufswagen anzeigen'); ?>  
  __ ("Sie haben keine Artikel in Ihrem Einkaufswagen.")?>

Beim Vergleich mit unserer HTML-Vorlage gibt es ein paar Dinge, die wir tun müssen. Vor allem im Minicart-Wrapper div, Wir werden mit der Implementierung unserer beginnen ul, und für jedes Element werden wir unter dem iterieren li Etikett. Am Ende zeigen wir den Warenkorb insgesamt oder zeigen an, dass sich keine Artikel im Warenkorb befinden. Unser endgültiger Code für diese Datei wird folgendermaßen aussehen:

getSummaryCount (); if (leer ($ _ cartQty)) $ _cartQty = 0; ?> 
 
 getRecentItems ()?>      getItemHtml ($ _ item)?>    canApplyMsrp ()):?> __ ('BESTELLGESAMT WIRD ANGEZEIGT, BEVOR SIE DIE BESTELLUNG BESTELLEN'); ?>  __ ('Warenkorb-Zwischensumme:')?> formatPrice ($ this-> getSubtotal ())?> getSubtotalInclTax ()):?> 
(formatPrice ($ _ subtotalInclTax)?> getIncExcText (true)?>)     
  __ ("Sie haben keine Artikel in Ihrem Einkaufswagen.")?>

Jetzt wird der letzte Teil, der noch übrig ist, den Artikel der Wagenliste selbst gestalten. Wie wir bereits herausgefunden haben, ist die Datei für diesen Teil verantwortlich: Frontend / rwd / default / template / checkout / cart / minicart / default.phtml.

Der aktuelle Code dieser Datei sieht ziemlich lang und schwer verständlich aus, ist aber nicht einschüchternd. Wir müssen nicht all das bearbeiten, da der Hauptteil des Dateicodes nur den richtigen Preis und andere Produktoptionen berechnet. Wir überprüfen erneut unseren HTML-Code, fügen ihn in diese Datei ein und beginnen, den statischen Text durch dynamische Werte zu ersetzen. Dies ist der Code für jeden Warenkorbartikel in unserem HTML:

  
  Lincoln Stuhl
 Größe: Einheitsgröße
 Menge: 01
 
  30,00 $

Wir werden das ersetzen img tag mit diesem ein:

Als Nächstes ersetzen wir den Namen durch dynamischen Code:

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

Um die Produktoptionen anzuzeigen, verwenden wir diesen dynamischen Code:

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

Dann bestimmen und zeigen wir die Menge anhand dieses Codes:

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

Zur Preisberechnung geben wir diesen Code anstelle des statischen Preises ein:

 __ ('Siehe Preis vor Auftragsbestätigung.'); ?>  Helfer ('Steuer') -> DisplayCartPriceExclTax () || $ this-> helper ('tax') -> displayCartBothPrices ()):?> helper ('tax') -> displayCartBothPrices ()):?> __ ('exklusive Steuer'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>  helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) als $ tax):?> : formatPrice ($ tax ['Betrag'], wahr, wahr); ?>   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) als $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) als $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __('Gesamt'); ?>:
 helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>    Helfer ('Steuer') -> DisplayCartPriceInclTax () || $ this-> helper ('tax') -> displayCartBothPrices ()):?> Helfer ('checkout') -> getPriceInclTax ($ _ item); ?> helper ('tax') -> displayCartBothPrices ()):?> 
__ ('inkl. Steuern'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ('checkout') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  helper ('checkout') -> formatPrice ($ _ incl - $ _ item-> getWeeeTaxDisposition ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) als $ tax):?> : formatPrice ($ tax ['Betrag'], wahr, wahr); ?>
   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) als $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) als $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __ ('Summe inkl. Steuer'); ?>:
 helper ('checkout') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>

Als letzten Schritt ersetzen wir die URL, um die URL durch diese URL zu entfernen:

getAjaxDeleteUrl ()?>

Ich habe den ganzen Code aus dem aktuellen gefunden default.phtml. Sie müssen nicht die gesamte Logik und den Code selbst herausfinden, aber wenn Sie genau hinschauen, finden Sie sie in der Datei, die Sie ändern möchten.

Also der endgültige Code von unserem default.phtml Datei sieht so aus:

getItem (); $ isVisibleProduct = $ _item-> getProduct () -> isVisibleInSiteVisibility (); $ canApplyMsrp = Mage :: Helper ('catalog') -> 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'])?>:        
  __ ('Anzahl:'); ?> getQty ()?> 
 
    __ ('Siehe Preis vor Auftragsbestätigung.'); ?>  Helfer ('Steuer') -> DisplayCartPriceExclTax () || $ this-> helper ('tax') -> displayCartBothPrices ()):?> helper ('tax') -> displayCartBothPrices ()):?> __ ('exklusive Steuer'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>  helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) als $ tax):?> : formatPrice ($ tax ['Betrag'], wahr, wahr); ?>   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) als $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) als $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __('Gesamt'); ?>:
 helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>    Helfer ('Steuer') -> DisplayCartPriceInclTax () || $ this-> helper ('tax') -> displayCartBothPrices ()):?> Helfer ('checkout') -> getPriceInclTax ($ _ item); ?> helper ('tax') -> displayCartBothPrices ()):?> 
__ ('inkl. Steuern'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'sales')):?> helper ('checkout') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  helper ('checkout') -> formatPrice ($ _ incl - $ _ item-> getWeeeTaxDisposition ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) als $ tax):?> : formatPrice ($ tax ['Betrag'], wahr, wahr); ?>
   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) als $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) als $ tax):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __ ('Summe inkl. Steuer'); ?>:
 helper ('checkout') -> formatPrice ($ _ incl + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>     
 getAjaxDeleteUrl ()?> ">

Wenn Sie nun alle diese Dateien speichern und die Homepage neu laden, sollten Sie etwa Folgendes sehen:

Wir haben einige Probleme mit den Stilen, aber das HTML-Rendering ist ziemlich nahe an unserem erforderlichen HTML-Design. Nun, da wir den oberen Kopfbereich fertiggestellt haben, folgt der Logo-Bereich. Glücklicherweise gibt es dort nicht viel zu tun, außer dem Styling-Teil (um das Logo zentriert auszurichten), den wir im Styling-Artikel ausführen werden. Unsere Menüpunkte scheinen auch ziemlich nah an dem zu sein, was wir erwarten. Wir müssen also nur die Suchleiste und dann den Hauptregler verändern.

Um unsere Suchleiste zu ändern, aktivieren Sie die Vorlagenhinweise und sehen Sie, welcher Teil für die Wiedergabe dieses Codes verantwortlich ist: Frontend / rwd / default / template / catalogsearch / form.mini.phtml.

Momentan sieht diese Datei so aus:

  __ ('Suchen:')?>   
 
  
 Wenn wir uns den HTML-Code der Suchleiste in unserer HTML-Designdatei ansehen, sieht das so aus:

Wir verwenden also die äußeren divs des HTML-Codes und ersetzen den inneren Inhalt durch den dynamischen Inhalt. Unser neuer form.mini.phtml Datei sieht so aus:

Im letzten Teil dieses Artikels bearbeiten wir den Hauptregler. Dafür erstellen wir einen neuen statischen Block, indem Sie zu gehen CMS> Statische Blöcke> Neuen Block hinzufügen. Wir nennen diesen Block "Homepage Slider", und wir werden den Bezeichner als einfügen Home-Slider-So kann der Code diesen Block finden.

Nun geben wir den Slider-Code aus unserem HTML-Code ein.


 
    
 
   
  Lichtstrahl
 Lorem Ipsum ist einfach Dummy-Text der Druck- und Satzindustrie.
 Jetzt einkaufen 
 
   Lichtstrahl
 Lorem Ipsum ist einfach Dummy-Text der Druck- und Satzindustrie.
 Jetzt einkaufen

Beachten Sie, dass wir die Bildquelle relativ zum Skin-Verzeichnis mit der ersetzt haben Skin-URL tag wie folgt:

Jetzt fügen wir diese Zeilen in der Datei header.phtml hinzu, die wir im letzten Artikel direkt über der letzten Zeile erstellt haben getChildHtml ('topContainer'); ?>.

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

Der letzte Schritt ist das Entfernen des aktuellen Schiebereglers. Um das zu tun, gehe zu CMS-Seiten> Madison Island, und aus dem Inhalt Entfernen Sie den gesamten Code bis zum Beginn des Style-Abschnitts.

Speichern Sie alles und laden Sie die Startseite neu. Jetzt sollten Sie sehen, dass alles sehr gut läuft. Einige Styles sind deaktiviert, aber wir werden das in einem separaten Styling-Tutorial behandeln. Jetzt müssen wir uns nur noch um den Inhalt der Startseite kümmern, in dem wir ein Karussell für die neuesten Produkte zeigen, und dann die Fußzeile anpassen. Wir werden das alles im nächsten Tutorial machen, also bleibt dran!

Code