Magento Theme-Entwicklung Startseite, Teil 1

Während wir im vorherigen Artikel zum Bootstrapping die Bühne bereiteten, ist es jetzt an der Zeit, tief in den Code einzutauchen und Änderungen vorzunehmen. Als naheliegende Option starten wir den Bearbeitungsprozess von der Startseite aus.

In diesem ersten Artikel werden wir den Kopfabschnitt teilweise bearbeiten. Wir bearbeiten die Standard-Wrapper-Dateien und die Datei header.phtml, und dann beginnen wir mit der Bearbeitung der verschiedenen Header-Komponenten, wie z. B. Währung, Sprachauswahl usw.. Wir beginnen also ohne weiteres, den Bearbeitungsprozess.

Zuerst aktivieren wir das Vorlagenhinweise vom Admin-Panel aus, indem Sie auf gehen System> Entwickler> Debuggen, und währenddessen machen wir das sicher Aktueller Konfigurationsbereich ist eingestellt auf Hauptwebsite. Durch Aktivieren von Vorlagenhinweisen wissen wir, welche Vorlage für die Kopfzeilenstile verantwortlich ist. So sieht die Homepage aus, wenn die Vorlagenhinweise angezeigt werden.

Wie Sie sehen, stammt der äußerste Wrapper, in den sich alle anderen Dateien befinden, aus Frontend / rwd / default / template / page / 1column.phtml, Dies ist aus dem RWD-Thema, da wir unser Thema von diesem Standardthema geerbt haben. Anstatt diese Datei direkt im RWD-Design zu bearbeiten, erstellen wir an dieser Stelle einen ähnlichen Ordner in unserem vstyle-Design: Frontend / Tutsplus / Vstyle / Vorlage / Seite. Dann kopieren wir diese Dateien in diesen Ordner und bearbeiten sie dort. Also gehen wir zum Frontend / rwd / default / template / page Verzeichnis und Kopie 1 column.phtml, 2column-left.phtml, 2column-right.phtml, und 3column.phtml in diesen neu erstellten Ordner.

Wenn wir uns den Code von ansehen 1-column.phtml, es ist so:

         getChildHtml ('head')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?>  getChildHtml ('header')?>   getChildHtml ('Breadcrumbs')?>  getChildHtml ('globale_meldungen')?> getChildHtml ('content')?> 
 
 
 getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Jetzt müssen wir es an unsere index.html-Datei anpassen, so dass wir unsere Körper- und Containerklassen verwenden und zusätzliche divs hinzufügen. Der bearbeitete Code sieht dann so aus:

   getChildHtml ('head')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('header')?>   getChildHtml ('globale_meldungen')?> getChildHtml ('content')?> 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Ebenso werden wir auch die bearbeiten 2column-left.phtml, 2column-right.phtml, und 3column.phtml Dateien. So wird der geänderte Code aussehen 2-spalte-left.phtml:

   getChildHtml ('head')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('header')?>     getChildHtml ('left')?> 
  getChildHtml ('globale_meldungen')?> getChildHtml ('content')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Nächster, 2columns-right.phtml wird nach der Bearbeitung so aussehen:

   getChildHtml ('head')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('header')?>     getChildHtml ('globale_meldungen')?> getChildHtml ('content')?> 
  getChildHtml ('right')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Zuletzt werden wir bearbeiten 3columns.phtml so was:

   getChildHtml ('head')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('header')?>     getChildHtml ('left')?> 
  getChildHtml ('globale_meldungen')?> getChildHtml ('content')?> 
  getChildHtml ('right')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Sehen Sie sich die Änderungen an diesen Vorlagendateien genau an. Wenn Sie es mit der Datei index.html unserer HTML-Website vergleichen, ist das für Sie sinnvoll.

So sollte die Website nach dem Bearbeiten dieser Dateien aussehen. Sie werden nicht viel Unterschied sehen, aber wir gehen in die richtige Richtung.

Als nächstes werden wir die Datei header.phtml bearbeiten, da wir sehen, dass dies die Datei ist, die den Wrapper-Inhalt des Header-Abschnitts enthält. Also kopieren wir die Frontend / rwd / default / template / page / html / header.phtml Datei, verschieben Sie es in die Frontend / tutsplus / vstyle / template / page / html Ordner und beginnen Sie mit der Bearbeitung. Derzeit sieht der Code so aus:

   getChildHtml ('store_language')?> 
 getChildHtml ('currency_switcher')?> getChildHtml ('welcome')?> getAdditionalHtml ()?>
 
 
   getUrl (")?>">     
     __('Speisekarte'); ?>    __('Suche'); ?>   Helfer ('Kunde') -> getAccountUrl (); ?> "data-target-element =" # header-account ">  __('Konto'); ?>    getChildHtml ('minicart_head'); ?> 
 
 
   getChildHtml ('topMenu')?> 
   getChildHtml ('topSearch')?> 
   getChildHtml ('topLinks')?> 
 
  getChildHtml ('topContainer'); ?>

Wir werden es mit dem Header-Abschnitt unseres HTML-Codes vergleichen und diese Änderungen daran vornehmen:

     Ruf uns jetzt an! 0800-123-456-78
 
      Eng
 Vns
 Fer
 Juwel
 
 
   USD
 UKD
 FER
 
 
 
  
 
  Wagen     
  Lincoln Stuhl
 Größe: Einheitsgröße
 Menge: 01
 
  30,00 $
 
 
 
   
  Lincoln Stuhl
 Größe: Einheitsgröße
 Menge: 01
 
  30,00 $
 
 
 
 Gesamt 60,00 $

Wir fügen diesen HTML-Code in die Datei "header.phtml" ein und ersetzen die Differenzabschnitte durch die entsprechenden dynamischen Vorlagen-Tags wie Währungsumschalter, Speichersprache, Logo, Menü, Suchleiste usw. So sieht der Code nach diesen Änderungen aus:

     getChildHtml ('welcome')?> getAdditionalHtml ()?>
 
    getChildHtml ('currency_switcher')?> getChildHtml ('store_language')?> 
  ">
 
   getChildHtml ('minicart_head'); ?> 
 
 
 
 
 
 
 
      getUrl (")?>">    
 
 
 
 
      getChildHtml ('topMenu')?> 
 
    getChildHtml ('topSearch')?> 
 
 
 
 
 
 getChildHtml ('topContainer'); ?>

So sieht der Kopfbereich nach der Bearbeitung von aus header.phtml Datei:

Wie Sie sehen können, müssen wir den Code der verschiedenen Abschnitte, die wir verwenden, wie Sprach- und Währungsauswahl, Schieberegler, Menü, Suchleiste usw., ändern. Zu Beginn bearbeiten wir die Währungs- und Sprachauswahl. Wenn wir die Vorlagenhinweise erneut aktivieren, können wir sehen, dass der Sprachauswahlabschnitt stammt base / default / template / page / switch / languages.phtml, Also kopieren wir diese Datei am selben Ort in unser Theme und beginnen mit der Bearbeitung, damit sie unserem HTML-Code entspricht. Das Original sprachen.phtml Datei sieht so aus:

getStores ())> 1):?>  __ ("Ihre Sprache:")?>

Der ursprüngliche HTML-Code für die Sprach- und Währungsauswahl sieht folgendermaßen aus:

   Eng
 Vns
 Fer
 Juwel
 
 
   USD
 UKD
 FER

Nachdem wir modifiziert haben sprachen.phtml Um mit dem HTML-Code übereinzustimmen, sieht es folgendermaßen aus:

getStores ())> 1):?>    getStores () als $ _lang):?>  getCurrentUrl ()?> "> escapeHtml ($ _ lang-> getName ()); $ langName = substr ("$ langName", 0, 3); $ langName = strtoupper ($ langName); echo $ langName; ?>

Wie Sie sehen, wird der Währungswähler momentan nicht auf unserer Website angezeigt. Wir müssen zuerst die Währungsauswahl im Admin-Panel aktivieren. Von System> Konfiguration> Allgemein> Währung einrichten, Sie müssen zuerst einige Sprachen aktivieren und dann von System> Währung verwalten> Kurse Währungskurse einstellen. Dann sehen Sie, dass die Währungsauswahl auf Ihrer Website aktiviert ist. Wenn Sie die Vorlage erneut aktivieren, können Sie sehen, dass die Vorlage vorhanden ist rwd / default / template / verzeichnis / währung.phtml, und der aktuelle Code wird folgendermaßen aussehen:

getCurrencyCount ()> 1):?>  __ ('Ihre Währung:')?>

Wir werden ihn so anpassen, dass er zu unserem HTML-Code passt. Der modifizierte Code sieht dann so aus:

getCurrencyCount ()> 1):?>    getCurrencies () als $ _code => $ _name):?>  getSwitchCurrencyUrl ($ _ code)?> ">

Als Nächstes bearbeiten wir unsere Begrüßungsnachricht, um sie an unser HTML-Design anzupassen. Dafür müssen wir gehen System> Konfiguration / Allgemein / Design / Kopfzeile / Begrüßungstext. Nach der Bearbeitung sieht der Header so aus:

Wenn Sie alle Schritte richtig ausgeführt haben, hoffe ich, dass Sie einen großen Fortschritt in den Looks Ihrer Homepage sehen können. Da wir den Header-Bereich teilweise bearbeitet haben, werden wir den Header-Abschnitt im nächsten Artikel weiter bearbeiten und auch den Hauptschieberegler in diesem Artikel bearbeiten.

Bitte erläutern Sie Ihre Erfahrungen im Kommentarbereich!

Code