Read Time:
12 mins
German (Deutsch) translation by Wei Zhang (you can also view the original English article)
Nachdem wir die Startseite und die Kategorieseite fertig gestellt haben, können Sie in diesem Tutorial 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 Ihrem 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 für den Rest ändern wir einfach 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:
<?php $_helper = $this->helper('catalog/output'); ?>
<?php $_product = $this->getProduct(); ?>
<script type="text/javascript">
var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->toHtml() ?></div>
<div class="product-view">
<div class="product-essential">
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<?php echo $this->getBlockHtml('formkey') ?>
<div class="no-display">
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
</div>
<div class="product-img-box">
<div class="product-name">
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
</div>
<?php echo $this->getChildHtml('media') ?>
</div>
<div class="product-shop">
<div class="product-name">
<span class="h1"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></span>
</div>
<div class="price-info">
<?php echo $this->getPriceHtml($_product); ?>
<?php echo $this->getChildHtml('bundle_prices') ?>
<?php echo $this->getTierPriceHtml() ?>
</div>
<div class="extra-info">
<?php echo $this->getReviewsSummaryHtml($_product, 'default', false)?>
<?php echo $this->getChildHtml('product_type_availability'); ?>
</div>
<?php echo $this->getChildHtml('alert_urls') ?>
<?php if ($_product->getShortDescription()):?>
<div class="short-description">
<div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
</div>
<?php endif;?>
<?php echo $this->getChildHtml('other');?>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container1', '', true, true) ?>
<?php endif;?>
</div>
<div class="add-to-cart-wrapper">
<?php echo $this->getChildHtml('product_type_data') ?>
<?php echo $this->getChildHtml('extrahint') ?>
<?php if (!$this->hasOptions()):?>
<div class="add-to-box">
<?php if($_product->isSaleable()): ?>
<?php echo $this->getChildHtml('addtocart') ?>
<?php if( $this->helper('wishlist')->isAllow() || $_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product)): ?>
<span class="or"><?php echo $this->__('OR') ?></span>
<?php endif; ?>
<?php endif; ?>
<?php echo $this->getChildHtml('addto') ?>
<?php echo $this->getChildHtml('sharing') ?>
</div>
<?php echo $this->getChildHtml('extra_buttons') ?>
<?php elseif (!$_product->isSaleable()): ?>
<div class="add-to-box">
<?php echo $this->getChildHtml('addto') ?>
<?php echo $this->getChildHtml('sharing') ?>
</div>
<?php endif; ?>
</div>
<?php echo $this->getChildHtml('related_products') ?>
<div class="clearer"></div>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
</form>
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;
if (url) {
form.action = url;
}
var e = null;
try {
this.form.submit();
} catch (e) {
}
this.form.action = oldUrl;
if (e) {
throw e;
}
if (button && button != 'undefined') {
button.disabled = true;
}
}
}.bind(productAddToCartForm);
productAddToCartForm.submitLight = function(button, url){
if(this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
// Remove custom datetime validators
for (var methodName in Validation.methods) {
if (methodName.match(/^validate-datetime-.*/i)) {
delete Validation.methods[methodName];
}
}
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
//]]>
</script>
</div>
<div class="product-collateral toggle-content tabs">
<?php if ($detailedInfoGroup = $this->getChildGroup('detailed_info', 'getChildHtml')):?>
<dl id="collateral-tabs" class="collateral-tabs">
<?php foreach ($detailedInfoGroup as $alias => $html):?>
<dt class="tab"><span><?php echo $this->escapeHtml($this->getChildData($alias, 'title')) ?></span></dt>
<dd class="tab-container">
<div class="tab-content"><?php echo $html ?></div>
</dd>
<?php endforeach;?>
</dl>
<?php endif; ?>
</div>
<?php echo $this->getChildHtml('upsell_products') ?>
<?php echo $this->getChildHtml('product_additional_data') ?>
</div>
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.):
<div class="row">
<div class="col-md-12">
<div class="products-details">
<div class="preview_image">
<div class="preview-small"><img id="zoom_03" src="images/products/medium/products-01.jpg" data-zoom-image="images/products/Large/products-01.jpg" alt=""></div>
<div class="thum-image">
<ul id="gallery_01" class="prev-thum">
<li><a href="#" data-image="images/products/medium/products-01.jpg" data-zoom-image="images/products/Large/products-01.jpg"><img src="images/products/thum/products-01.png" alt=""></a></li>
<li><a href="#" data-image="images/products/medium/products-02.jpg" data-zoom-image="images/products/Large/products-02.jpg"><img src="images/products/thum/products-02.png" alt=""></a></li>
<li><a href="#" data-image="images/products/medium/products-03.jpg" data-zoom-image="images/products/Large/products-03.jpg"><img src="images/products/thum/products-03.png" alt=""></a></li>
<li><a href="#" data-image="images/products/medium/products-04.jpg" data-zoom-image="images/products/Large/products-04.jpg"><img src="images/products/thum/products-04.png" alt=""></a></li>
<li><a href="#" data-image="images/products/medium/products-05.jpg" data-zoom-image="images/products/Large/products-05.jpg"><img src="images/products/thum/products-05.png" alt=""></a></li>
</ul>
<a class="control-left" id="thum-prev" href="javascript:void(0);"><i class="fa fa-chevron-left"></i></a><a class="control-right" id="thum-next" href="javascript:void(0);"><i class="fa fa-chevron-right"></i></a></div>
</div>
<div class="products-description">
<h5 class="name">Lincoln Corner Unit Products</h5>
<hr class="border">
<div class="price pull-left">Price : <span class="new_price">450.00<sup>$</sup></span><span class="old_price">450.00<sup>$</sup></span></div>
<div class="pull-right">sdf;,hkf</div>
<div class="clearfix"></div>
<hr class="border">
<p>Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrie ces posuere cubilia curae. Proin lectus ipsum, gravida etds mattis vulps utate, tristique ut lectus. Sed et lorem nunc...</p>
<div class="row sizeInput">
<div class="col-xs-12 drodpwn">
<h6>asddas</h6>
<div class="inline-middle styled-dd">
<select>
<option>Select a Size</option>
<option value="Black">Black</option>
<option value="Aubergine">Aubergine</option>
</select>
</div>
</div>
<div class="space30 visible-xs"></div>
<div class="col-xs-12 drodpwn">
<h6>asddas</h6>
<div class="inline-middle styled-dd">
<select>
<option>Choose a Material</option>
<option value="xs">X-Small</option>
<option value="s">Small</option>
</select>
</div>
</div>
</div>
<hr class="border">
<div class="wided">
<div class="qty">Qty :
<select>
<option>1</option>
</select>
</div>
<div class="button_group">
<button class="button" >Add To Cart</button>
</div>
</div>
<div class="clearfix"></div>
<hr class="border">
<img src="images/share.png" alt="" class="pull-left"></div>
</div>
<div class="clearfix"></div>
<div class="tab-box">
<div id="tabnav">
<ul>
<li><a href="#Descraption">DESCRIPTION</a></li>
<li><a href="#Reviews">REVIEW</a></li>
<li><a href="#tags">PRODUCT TAGS</a></li>
</ul>
</div>
<div class="tab-content-wrap">
<div class="tab-content" id="Descraption">
<p>Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibu um ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae...</p>
<p>Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibu um ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc...</p>
</div>
<div class="tab-content" id="Reviews">
<form>
<table>
<thead>
<tr>
<th> </th>
<th>1 star</th>
<th>2 stars</th>
<th>3 stars</th>
<th>4 stars</th>
<th>5 stars</th>
</tr>
</thead>
<tbody>
<tr>
<td>Quality</td>
<td><input type="radio" name="quality" value="Blue"/></td>
<td><input type="radio" name="quality" value=""></td>
<td><input type="radio" name="quality" value=""></td>
<td><input type="radio" name="quality" value=""></td>
<td><input type="radio" name="quality" value=""></td>
</tr>
<tr>
<td>Price</td>
<td><input type="radio" name="price" value=""></td>
<td><input type="radio" name="price" value=""></td>
<td><input type="radio" name="price" value=""></td>
<td><input type="radio" name="price" value=""></td>
<td><input type="radio" name="price" value=""></td>
</tr>
<tr>
<td>Value</td>
<td><input type="radio" name="value" value=""></td>
<td><input type="radio" name="value" value=""></td>
<td><input type="radio" name="value" value=""></td>
<td><input type="radio" name="value" value=""></td>
<td><input type="radio" name="value" value=""></td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-row">
<label class="lebel-abs">Your Name <strong class="red">*</strong></label>
<input type="text" name="" class="input namefild">
</div>
<div class="form-row">
<label class="lebel-abs">Your Email <strong class="red">*</strong></label>
<input type="email" name="" class="input emailfild">
</div>
<div class="form-row">
<label class="lebel-abs">Summary of You Review <strong class="red">*</strong></label>
<input type="text" name="" class="input summeryfild">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-row">
<label class="lebel-abs">Your Name <strong class="red">*</strong></label>
<textarea class="input textareafild" name="" rows="7" ></textarea>
</div>
<div class="form-row">
<input type="submit" value="Submit" class="button">
</div>
</div>
</div>
</form>
</div>
<div class="tab-content" >
<div class="review">
<p class="rating"><i class="fa fa-star light-red"></i><i class="fa fa-star light-red"></i><i class="fa fa-star light-red"></i><i class="fa fa-star-half-o gray"></i><i class="fa fa-star-o gray"></i></p>
<h5 class="reviewer">Reviewer name</h5>
<p class="review-date">Date: 01-01-2014</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a eros neque. In sapien est, malesuada non interdum id, cursus vel neque.</p>
</div>
<div class="review">
<p class="rating"><i class="fa fa-star light-red"></i><i class="fa fa-star light-red"></i><i class="fa fa-star light-red"></i><i class="fa fa-star-half-o gray"></i><i class="fa fa-star-o gray"></i></p>
<h5 class="reviewer">Reviewer name</h5>
<p class="review-date">Date: 01-01-2014</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a eros neque. In sapien est, malesuada non interdum id, cursus vel neque.</p>
</div>
</div>
<div class="tab-content" id="tags">
<div class="tag"> Add Tags :
<input type="text" name="">
<input type="submit" value="Tag">
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div id="productsDetails" class="hot-products">
<h3 class="title"><strong>Hot</strong> Products</h3>
<div class="control"><a id="prev_hot" class="prev" href="#"><</a><a id="next_hot" class="next" href="#">></a></div>
<ul id="hot">
<li>
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="products">
<div class="main">
<div class="view view-eighth">
<img src="images/products/small/products-02.jpg" />
<div class="mask">
<a href="#" class="info">Read More</a>
</div>
<div class="productname">Iphone 5s Gold 32 Gb 2013</div>
<h4 class="price">$451.00</h4>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="products">
<div class="main">
<div class="view view-eighth">
<img src="images/products/small/products-02.jpg" />
<div class="mask">
<a href="#" class="info">Read More</a>
</div>
<div class="productname">Iphone 5s Gold 32 Gb 2013</div>
<h4 class="price">$451.00</h4>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="products">
<div class="main">
<div class="view view-eighth">
<img src="images/products/small/products-02.jpg" />
<div class="mask">
<a href="#" class="info">Read More</a>
</div>
<div class="productname">Iphone 5s Gold 32 Gb 2013</div>
<h4 class="price">$451.00</h4>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="products">
<div class="main">
<div class="view view-eighth">
<img src="images/products/small/products-02.jpg" />
<div class="mask">
<a href="#" class="info">Read More</a>
</div>
<div class="productname">Iphone 5s Gold 32 Gb 2013</div>
<h4 class="price">$451.00</h4>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="products">
<div class="offer">- %20</div>
<div class="thumbnail"><img src="images/products/small/products-01.png" alt="Product Name"></div>
<div class="productname">Iphone 5s Gold 32 Gb 2013</div>
<h4 class="price">$451.00</h4>
<div class="button_group">
<button class="button add-cart" type="button">Add To Cart</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="products">
<div class="thumbnail"><img src="images/products/small/products-02.png" alt="Product Name"></div>
<div class="productname">Iphone 5s Gold 32 Gb 2013</div>
<h4 class="price">$451.00</h4>
<div class="button_group">
<button class="button add-cart" type="button">Add To Cart</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="products">
<div class="offer">New</div>
<div class="thumbnail"><img src="images/products/small/products-03.png" alt="Product Name"></div>
<div class="productname">Iphone 5s Gold 32 Gb 2013</div>
<h4 class="price">$451.00</h4>
<div class="button_group">
<button class="button add-cart" type="button">Add To Cart</button>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="products">
<div class="offer">- %20</div>
<div class="thumbnail"><img src="images/products/small/products-01.png" alt="Product Name"></div>
<div class="productname">Iphone 5s Gold 32 Gb 2013</div>
<h4 class="price">$451.00</h4>
<div class="button_group">
<button class="button add-cart" type="button">Add To Cart</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="products">
<div class="thumbnail"><img src="images/products/small/products-02.png" alt="Product Name"></div>
<div class="productname">Iphone 5s Gold 32 Gb 2013</div>
<h4 class="price">$451.00</h4>
<div class="button_group">
<button class="button add-cart" type="button">Add To Cart</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="products">
<div class="offer">New</div>
<div class="thumbnail"><img src="images/products/small/products-03.png" alt="Product Name"></div>
<div class="productname">Iphone 5s Gold 32 Gb 2013</div>
<h4 class="price">$451.00</h4>
<div class="button_group">
<button class="button add-cart" type="button">Add To Cart</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
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 keine Sorgen mehr machen.
Jetzt beginnen wir mit der Bearbeitung dieses HTML-Codes, indem wir dynamische Tags aus unserer aktuellen Datei view.phtml einfügen.
Zuerst fügen wir diese Zeilen oben ein, um die Initialisierung durchzuführen:
<?php $_helper = $this->helper('catalog/output'); ?>
<?php $_product = $this->getProduct(); ?>
<script type="text/javascript">
var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->toHtml() ?></div>
<div class="product-view">
Schließen Sie dann die Produktansicht div am Ende der Datei (Zeile 314):
Als Nächstes packen wir die Produktdetails div in ein Formularelement, wie es in der eigentlichen Datei view.phtml enthalten ist. Also fügen wir diese Zeile in die product-detailsin Zeile 10 ein:
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<?php echo $this->getBlockHtml('formkey') ?>
<div class="no-display">
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
</div>
In ähnlicher Weise schließen wir nun diesen form und kopieren dieses JavaScript auch aus view.phtml in Zeile 77:
<div class="clearer"></div>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
</form>
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;
if (url) {
form.action = url;
}
var e = null;
try {
this.form.submit();
} catch (e) {
}
this.form.action = oldUrl;
if (e) {
throw e;
}
if (button && button != 'undefined') {
button.disabled = true;
}
}
}.bind(productAddToCartForm);
productAddToCartForm.submitLight = function(button, url){
if(this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
// Remove custom datetime validators
for (var methodName in Validation.methods) {
if (methodName.match(/^validate-datetime-.*/i)) {
delete Validation.methods[methodName];
}
}
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
//]]>
</script>
Entfernen Sie im nächsten Schritt in der Tab-Box div (beginnend bei Zeile 129) den gesamten vorhandenen Code, und kopieren Sie den folgenden Tab-Code aus view.phtml (etwa 100 Codezeilen werden durch diese wenigen Zeilen ersetzt). Um sicherzustellen, dass die Registerkarte JavaScript weiterhin einwandfrei funktioniert, fügen wir die Tab-Box div der aktuellen Registerkarte für Klassen hinzu. Der neue Code sieht daher folgendermaßen aus:
<div class="tab-box product-collateral toggle-content tabs">
<?php if ($detailedInfoGroup = $this->getChildGroup('detailed_info', 'getChildHtml')):?>
<dl id="collateral-tabs" class="collateral-tabs">
<?php foreach ($detailedInfoGroup as $alias => $html):?>
<dt class="tab"><span><?php echo $this->escapeHtml($this->getChildData($alias, 'title')) ?></span></dt>
<dd class="tab-container">
<div class="tab-content"><?php echo $html ?></div>
</dd>
<?php endforeach;?>
</dl>
<?php endif; ?>
</div>
Nachdem dies erledigt ist, fügen wir nun den <?php echo $this->getChildHtml ('related_products')?> - Tag in das hot-products -div ein, nachdem der vorhandene Code entfernt wurde, sodass er in Zeile 166 wie folgt aussieht:
<div id="productsDetails" class="hot-products">
<?php echo $this->getChildHtml('related_products') ?>
</div>
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, und schließlich 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 ersetzt haben, 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.
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Sign up
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.
