在Magento主题开发系列的这篇文章中,我们将在上一篇文章的结尾处完成产品页面的定稿。 我们将编辑负责渲染媒体部分,相关产品部分等的phtml文件。
现在,让我们开始在我们在上一篇文章中开始编辑的产品详细信息div内添加图像,价格,描述等的动态标签。
我们将从添加图像的动态标签开始。 如果我们看一下经过编辑HTML,则媒体代码从19行扩展到28行。我们将所有这些替换为一行代码:
<?php echo $this->getChildHtml('media') ?>
从实际的view.phtml文件中可以看到,这一行正在获取显示图像的所有代码。
因此,第18行的新代码将如下所示:
<div class="preview_image">
<?php echo $this->getChildHtml('media') ?>
</div>
接下来,我们将第22行的产品名称替换为以下动态代码:
<?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
在第24行,我们将价格代码替换为:
<div class="price pull-left">
<?php echo $this->getPriceHtml($_product); ?>
<?php echo $this->getChildHtml('bundle_prices') ?>
<?php echo $this->getTierPriceHtml() ?>
</div>
在第29行的pull-right类中,我们将添加用于显示评论和产品可用性的代码。 因此,第29行的新代码将如下所示:
<div class="pull-right">
<?php echo $this->getReviewsSummaryHtml($_product, 'default', false)?>
<?php echo $this->getChildHtml('product_type_availability'); ?>
</div>
接下来,我们将用此动态标签替换第33行上的硬编码描述:
<?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?>
如果我们查看正在编辑HTML文件,那么接下来看到的是用于选择产品选项的下拉框。 我们将用以下动态代码替换size-input div中的代码:
<?php echo $this->getChildHtml('other');?>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container1', '', true, true) ?>
<?php endif;?>
现在,此代码将不会自动生成产品的选项,但还会显示“添加到购物车”按钮和共享选项。 因此,我们也可以删除.size-input 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">
现在,如果我们查看当前页面,则一切就绪,并且工作正常。 我们只需要修改一些元素的内部代码,例如图像区域,相关产品部分等。最后,我们只需要整理一下CSS,页面就可以准备好了。
不用再拖延了,让我们开始编辑图像部分的代码。 记住,我们只用一行代码替换了所有HTML图片: <?php echo $this->getChildHtml('media') ?>
。 此行代码在此处显示来自文件template \ catalog \ product \ view \ media.phtml的代码:您还可以通过启用模板提示并检查图像部分的代码从何而来进行验证。
现在,我们已经确定了负责生成此代码的文件,让我们将该文件从默认的rwd主题复制到我们的新主题中,然后开始对其进行编辑。 media.phtml文件的代码如下所示:
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
<div class="product-image product-image-zoom">
<div class="product-image-gallery">
<img id="image-main"
class="gallery-image visible"
src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"
alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"
title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" />
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<img id="image-<?php echo $i; ?>"
class="gallery-image"
src="<?php echo $this->getGalleryImageUrl($_image); ?>"
data-zoom-image="<?php echo $this->getGalleryImageUrl($_image); ?>" />
<?php endif; ?>
<?php $i++; endforeach; ?>
</div>
</div>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<h2><?php echo $this->__('More Views') ?></h2>
<ul class="product-image-thumbs">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<li>
<a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" data-image-index="<?php echo $i; ?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</li>
<?php endif; ?>
<?php $i++; endforeach; ?>
</ul>
</div>
<?php endif; ?>
<?php echo $this->getChildHtml('after'); ?>
首先,我们将图像部分HTML代码复制到新复制的media.phtml文件中:
<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>
现在,我们将开始修改此代码,以将动态代码与实际的media.phtml文件进行比较,以将其插入适当的位置。
我们将从在文件顶部添加以下行开始:
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
我们将使用以下代码将div替换为class Preview-small:
<div class="product-image-gallery">
<img id="image-main"
class="gallery-image visible"
src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"
alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"
title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" />
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<img id="image-<?php echo $i; ?>"
class="gallery-image"
src="<?php echo $this->getGalleryImageUrl($_image); ?>"
data-zoom-image="<?php echo $this->getGalleryImageUrl($_image); ?>" />
<?php endif; ?>
<?php $i++; endforeach; ?>
</div>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<ul class="product-image-thumbs">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<li>
<a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" data-image-index="<?php echo $i; ?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(50); ?>"
width="50" height="50" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</li>
<?php endif; ?>
<?php $i++; endforeach; ?>
</ul>
</div>
<?php endif; ?>
同样,我们将使用以下代码将div替换为thum-image类:
在代码末尾,我们将添加以下行:
<?php echo $this->getChildHtml('after'); ?>
因此,文件的代码最终将如下所示:
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
<div class="preview_image">
<div class="product-image-gallery">
<img id="image-main"
class="gallery-image visible"
src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"
alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"
title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" />
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<img id="image-<?php echo $i; ?>"
class="gallery-image"
src="<?php echo $this->getGalleryImageUrl($_image); ?>"
data-zoom-image="<?php echo $this->getGalleryImageUrl($_image); ?>" />
<?php endif; ?>
<?php $i++; endforeach; ?>
</div>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<ul class="product-image-thumbs">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<li>
<a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" data-image-index="<?php echo $i; ?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(50); ?>"
width="50" height="50" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</li>
<?php endif; ?>
<?php $i++; endforeach; ?>
</ul>
</div>
<?php endif; ?>
</div>
<?php echo $this->getChildHtml('after'); ?>
现在我们几乎完成了图像部分。 最后,我们将解决一些CSS问题,看起来与我们HTML设计非常接近。
接下来是修复相关部分。 通过启用模板提示,我们可以看到页面的这一部分来自文件:template \ catalog \ product \ list \ related.phtml。
您可能会猜到,下一步是将该文件复制到我们的新主题文件夹,然后开始对其进行编辑。
我们将创建一个新文件,并从HTML主题中复制相关产品部分HTML代码。 在这里,我们仅保留该产品的一个实例,因为我们将在phtml文件中对其进行循环。 我们将复制的代码为:
<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>
</li>
</ul>
</div>
现在,通过将动态标签放入其中,同时将其与实际的related.phtml文件进行比较,开始使其具有动态性。
我们将整个代码放在此if标记中:
<?php if($this->getItems()->getSize()): ?>
接下来,将其放置在div行之后的for循环中:
<?php foreach($this->getItems() as $_item): ?>
接下来,我们将像在主页上编辑产品时所做的那样,在产品div中放置产品名称,价格,描述,URL等的动态标签。
编辑后该文件的整个代码如下所示:
<?php if($this->getItems()->getSize()): ?>
<div id="productsDetails" class="hot-products">
<h3 class="title"><strong>Related</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">
<?php foreach($this->getItems() as $_item): ?>
<div class="col-md-3 col-sm-4">
<div class="products">
<div class="main">
<div class="view view-eighth">
<img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(214,323) ?>" width="214" height="323" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" />
<div class="mask">
<a href="<?php echo $_item->getProductUrl() ?>" class="info">View Product</a>
</div>
<div class="productname"><?php echo $this->escapeHtml($_item->getName()) ?></div>
<h4 class="price">
<?php echo $this->getPriceHtml($_item, true, '-related') ?>
</h4>
</div>
</div>
</div>
</div>
<?php endforeach ?>
</div>
</li>
</ul>
</div>
<?php endif ?>
现在我们几乎完成了产品页面的phtml文件编辑。 我们只需要解决一些CSS问题,页面就可以准备好了。 当前页面如下所示:
我们完成了大部分工作。 现在,我们只需要编辑CSS即可在此页面中进行最后的更改,我们将在下一篇文章中进行此操作,这也是本系列的最后一篇文章。 除了此页面CSS更改之外,我还将说明如何使用本系列中学习的技术自己在主题的其他页面中进行更改。
翻译自: https://code.tutsplus.com/articles/magento-theme-development-product-page-part-2--cms-25001