Accentsconagua

Magento Theme-Entwicklung Produktseite, Teil 1

Code
Share

Nachdem wir die Startseite und die Kategorieseite fertiggestellt haben, können Sie in diesem Lernprogramm die drittwichtigste Seite der eCommerce-Website bearbeiten: die Produktseite. Lassen Sie uns zunächst die Produktseite öffnen und sehen, wie sie jetzt aussieht und wie sie aussehen soll.

Die Produktseite in unserem HTML-Design sieht folgendermaßen aus:

Unsere aktuelle Produktseite sieht so aus:

Um mit der Bearbeitung zu beginnen, machen wir denselben Schritt wie bisher, d. H. Indem wir die Vorlagehinweise aktivieren, um herauszufinden, welche Vorlagendateien für das Rendern dieser Seite verantwortlich sind.


Wie wir sehen, ist die Seite eine Zusammenstellung von über einem Dutzend Dateien, aber zum Glück müssen wir nicht alle bearbeiten. Wir müssen nur drei oder vier dieser Dateien bearbeiten, und im übrigen ändern wir nur die Stile, damit sie wie unser Design aussehen, ohne sich mit den Phtml-Dateien zu beschäftigen.

Wenn Sie genau hinschauen, stammt die Gesamtstruktur des Produktbereichs aus der Datei \ template \ catalog \ product \ view.phtml. Ich habe das durch einen Pfeil im obigen Bild herausgestellt. Diese Datei enthält die äußere Struktur aller Komponenten. Die inneren Teile stammen dann von anderen Vorlagen. Wir bearbeiten diese äußeren jedoch zuerst.

Wir kopieren diese view.phtml-Datei in unser neues Design und beginnen mit der Bearbeitung. Der aktuelle Code dieser Datei sieht folgendermaßen aus:

Helfer ('Katalog / Ausgabe'); ?> getProduct (); ?>  
getMessagesBlock () -> toHtml ()?>
 
 
 
getOptions ()):?> enctype = "multipart / form-data"> getBlockHtml ('formkey')?> 
   
 
 
 
productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
 getChildHtml ('media')?> 
 
 
 productAttribute ($ _ product, $ _product-> getName (), 'name')?> 
 
 getPriceHtml ($ _ product); ?> getChildHtml ('bundle_prices')?> getTierPriceHtml ()?> 
 
 getReviewsSummaryHtml ($ _ product, 'default', false)?> getChildHtml ('product_type_availability'); ?> 
 getChildHtml ('alert_urls')?> getShortDescription ()):?> 
 
productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>
 
  getChildHtml ('other');?> isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('container1', ", true, true)?>  
 
 getChildHtml ('product_type_data')?> getChildHtml ('extrahint')?> hasOptions ()):?> 
 isSaleable ()):?> getChildHtml ('addtocart')?> Helfer ('Wunschliste') -> isAllow () || $ _compareUrl = $ this-> helper ('catalog / product_compare') -> getAddUrl ($ _ product)):?> __ ('ODER')?>   getChildHtml ('addto')?> getChildHtml ('sharing')?> 
 getChildHtml ('extra_buttons')?> isSaleable ()):?> 
 getChildHtml ('addto')?> getChildHtml ('sharing')?> 
  
 getChildHtml ('related_products')?> 
 isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('container2', ", true, true)?>  
  
 
 getChildGroup ('Detailed_info', 'getChildHtml')):?> 
  $ html):?> 
escapeHtml ($ this-> getChildData ($ alias, 'title'))?>
 
 
 
  
  
 getChildHtml ('upsell_products')?> getChildHtml ('product_additional_data')?>

Nun müssen wir unseren HTML-Code auschecken, den gesamten HTML-Code in diese view.phtml-Datei einfügen und mit der Bearbeitung beginnen. Der aktuelle Code der Datei details.html in unserer HTML-Designdatei sieht folgendermaßen aus (ich kopiere nur den Code für den Produktteil, ausgenommen Kopf- und Fußzeile usw.):

 
 
 
 
 
 
     
    •  
    •  
    •  
    •  
    •  
 
 
 
 
Lincoln Corner Unit-Produkte
 
 
Preis : 450,00$450,00$
 
sdf;, hkf
 
 
 
Proin lectus ipsum, gravida und mattis vulputate, tristique ut lectus. Sed et Lorem Nunc. Vestibulum ante ipsum primis bei Faucibus orci luctus und ultrie ces posuere cubilia curae. Proin lectus ipsum, gravida etds mattis vulps utate, tristique ut lectus. Sed et Lorem Nunc… 
 
 
 
Asddas
 
  
 
 
 
 
Asddas
 
  
 
 
 
 
 
Menge:  
 
  
 
 
 
 
 
 
 
 
 
     
  • BESCHREIBUNG
    •  
  • REZENSION
    •  
  • PRODUKT TAGS
    •  
 
 
 
 
Proin lectus ipsum, gravida und mattis vulputate, tristique ut lectus. Sed et Lorem Nunc. Vestibulum ante ipsum primis in faucibus orci luctus und ultri ces posuere cubilia curae Änean eleifend laoreet. Proin lectus ipsum, gravida und mattis vulputate, tristique ut lectus. Sed et Lorem Nunc. Vestibu um ante ipsum primis in fuscibus orci luktus und ultrus ces posuere cubilia curae Änean eleifend laoreet argumentieren. Proin lectus ipsum, gravida und mattis vulputate, tristique ut lectus. Sed et Lorem Nunc. Vestibulum ante ipsum primis in faucibus orci luctus und ultri ces posuere cubilia curae Änean eleifend laoreet. Proin lectus ipsum, gravida und mattis vulputate, tristique ut lectus. Sed et Lorem Nunc. Vestibulum ante ipsum primis bei faucibus orci luctus und ultri ces posuere cubilia curae… 
 
Proin lectus ipsum, gravida und mattis vulputate, tristique ut lectus. Sed et Lorem Nunc. Vestibulum ante ipsum primis in faucibus orci luctus und ultri ces posuere cubilia curae Änean eleifend laoreet. Proin lectus ipsum, gravida und mattis vulputate, tristique ut lectus. Sed et Lorem Nunc. Vestibu um ante ipsum primis in fuscibus orci luktus und ultrus ces posuere cubilia curae Änean eleifend laoreet argumentieren. Proin lectus ipsum, gravida und mattis vulputate, tristique ut lectus. Sed et Lorem Nunc… 
 
 
 
 
  
   1 Stern 2 Sterne 3 Sterne 4 Sterne 5 Sterne 
   
 Qualität      
 
 Preis      
 
 Wert      
  
 
 
 
   
 
   
 
   
 
 
 
   
 
  
 
 
 
 
 
 
  
Name des Gutachters
 
Datum: 01-01-2014
 
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Ganzzahl ein eros neque. In sapien est, malesuada non interdum id, cursus vel neque.
 
 
  
Name des Gutachters
 
Datum: 01-01-2014
 
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Ganzzahl ein eros neque. In sapien est, malesuada non interdum id, cursus vel neque.
 
 
 
 
 Tags hinzufügen :   
 
 
 
 
 
 
Heiß Produkte
 
<>
 
     
  •  
     
     
     
     
      
     Weiterlesen 
     
    Iphone 5s Gold 32 GB 2013
     
    451,00 $
     
     
     
     
     
     
     
     
      
     Weiterlesen 
     
    Iphone 5s Gold 32 GB 2013
     
    451,00 $
     
     
     
     
     
     
     
     
      
     Weiterlesen 
     
    Iphone 5s Gold 32 GB 2013
     
    451,00 $
     
     
     
     
     
     
     
     
      
     Weiterlesen 
     
    Iphone 5s Gold 32 GB 2013
     
    451,00 $
     
     
     
     
     
     
    •  
  •  
     
     
     
    - % 20
     
    Produktname
     
    Iphone 5s Gold 32 GB 2013
     
    451,00 $
     
      
     
     
     
     
     
    Produktname
     
    Iphone 5s Gold 32 GB 2013
     
    451,00 $
     
      
     
     
     
     
     
    Neu
     
    Produktname
     
    Iphone 5s Gold 32 GB 2013
     
    451,00 $
     
      
     
     
     
     
    •  
  •  
     
     
     
    - % 20
     
    Produktname
     
    Iphone 5s Gold 32 GB 2013
     
    451,00 $
     
      
     
     
     
     
     
    Produktname
     
    Iphone 5s Gold 32 GB 2013
     
    451,00 $
     
      
     
     
     
     
     
    Neu
     
    Produktname
     
    Iphone 5s Gold 32 GB 2013
     
    451,00 $
     
      
     
     
     
     
    •

Ich weiß, dass das eine Menge Code ist und Sie vielleicht verschreckt. Aber keine Sorge, denn wie Sie sehen werden, wenn wir die dynamischen Tags einfügen, wird der Code schnell schmelzen und wir müssen uns nicht um das meiste kümmern.

Nun beginnen wir mit der Bearbeitung dieses HTML-Codes, indem wir dynamische Tags aus unserer aktuellen view.phtml-Datei einfügen.

Zuerst fügen wir diese Zeilen oben ein, um die Initialisierung vorzunehmen:

Helfer ('Katalog / Ausgabe'); ?> getProduct (); ?>  
getMessagesBlock () -> toHtml ()?>

Und dann die Produktansicht schließen div am Ende der Datei (Zeile 314):

Als nächstes verpacken wir die Produktdetails div innerhalb eines Formularelements, wie in der tatsächlichen Datei view.phtml. Also fügen wir diese Zeilen in die Produktdetails div in Zeile 10:

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

Ebenso schließen wir das jetzt bilden, und kopiere auch dieses JavaScript aus view.phtml in Zeile 77:

 isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('container2', ", true, true)?>

Im nächsten Schritt in der Tab-Box div Entfernen Sie den gesamten vorhandenen Code (beginnend bei Zeile 129) und kopieren Sie den folgenden Tab-Code aus view.phtml (ca. 100 Codezeilen werden durch diese wenigen Zeilen ersetzt). Um sicherzustellen, dass die Registerkarte JavaScript weiterhin einwandfrei funktioniert, fügen wir die Registerkarte Tab-Box der aktuellen Klassen hinzu div, So sieht der neue Code so aus:

 getChildGroup ('Detailed_info', 'getChildHtml')):?> 
  $ html):?> 
escapeHtml ($ this-> getChildData ($ alias, 'title'))?>

Nachdem dies erledigt ist, werden wir jetzt die einfügen getChildHtml ('related_products')?> tag in den heißen produkten div, Nach dem Entfernen des vorhandenen Codes, so dass er in Zeile 166 so aussieht:

 getChildHtml ('related_products')?>

Sehen Sie, wie nur 150 Zeilen Code durch diese drei Zeilen ersetzt werden. Lassen Sie uns alles speichern und sehen, wie die Seite so weit kommt. Wenn Sie alles richtig gemacht haben, sollte es ungefähr so ​​aussehen:

Es mag alles durcheinander aussehen, aber glauben Sie mir, wir nähern uns dem, wie die Seite aussehen soll. Im nächsten Artikel werden wir die Dateien bearbeiten, die für das Rendern des Abschnitts Bilder, verwandte Produkte usw. verantwortlich sind. Außerdem werden einige Styling-Korrekturen vorgenommen, und unsere Produktseite ist fertig.

Lassen Sie mich am Ende noch einmal betonen, dass die oben gezeigten großen Codeabschnitte Sie zunächst einschüchtern können. Sobald Sie jedoch den Code durch geeignete dynamische Tags ersetzen, werden Sie schnell feststellen, dass das Bearbeiten dieser Codes nicht viel Arbeit bedeutet.

Im nächsten Artikel vervollständigen wir den Rest dieser Seite durch Bearbeiten anderer HTML-Dateien.

Code
×