Magento主题开发：产品页面，第2部分

最新推荐文章于 2020-09-28 13:02:24 发布
最新推荐文章于 2020-09-28 13:02:24 发布
阅读量163 收藏
点赞数
文章标签： java html js web vue ViewUI

在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 &nbsp;&nbsp;:
  <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="#">&lt;</a><a id="next_hot" class="next" href="#">&gt;</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="#">&lt;</a><a id="next_hot" class="next" href="#">&gt;</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问题，页面就可以准备好了。 当前页面如下所示：

product page before CSS

我们完成了大部分工作。 现在，我们只需要编辑CSS即可在此页面中进行最后的更改，我们将在下一篇文章中进行此操作，这也是本系列的最后一篇文章。 除了此页面CSS更改之外，我还将说明如何使用本系列中学习的技术自己在主题的其他页面中进行更改。

翻译自: https://code.tutsplus.com/articles/magento-theme-development-product-page-part-2--cms-25001

cunjie3951
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
magento2-attribute-description:Magento 2模块，用于向产品属性添加描述
05-25
Magento 2的Dmatthew_AttributeDescription模块 这是一个Magento 2模块，它增加了向产品属性添加描述的功能。 将描述添加到可配置属性，并将其显示在您的产品视图页面上。 使用属性描述可以帮助向客户解释复杂的属性。 如果您具有唯一的属性，除了该属性的名称之外，还需要其他说明，那么该模块将为您工作。 属性描述存储在新的eav_attribute_description表中。 通过管理员管理属性描述 开发人员使用情况 一般用法 /** @var $attribute Dmatthew\AttributeDescription\Model\Entity\Attribute **/ $ description = $ attribute -> getStoreDescription ( $ storeId ); 前端使用 该属性描述已添加到JSON配置中的可
magento2-page-builder-docs：页面构建器开发文档
02-10
Magento 2 页面构建器是一款强大的可视化内容编辑工具，允许商家和开发者轻松创建和自定义网站的页面布局。这个“magento2-page-builder-docs”压缩包包含的是该功能的开发文档，旨在帮助开发者深入理解Page Builder...
magento2 后台产品详情页面、block内容详情页面加载无内容
adu198888的博客
03-03 1624
报错如下：Uncaught ReferenceError: Unable to process binding "if: function (){return opened() || _wasOpened }" Message: _wasOpened is not defined at if (eval at createBindingsStringEvaluator (knockout.j
magento2 重建产品、分类、静态页面UrlRewrite
adu198888的博客
02-21 1290
安装插件链接 https://github.com/karliuka/m2.IndexerUrlRewrite
magento2自定义添加.html文件
相濡以沫的博客
05-17 830
工作解决方案 只需从下面的路径创建或编辑requirejs-config.js文件即可。 /app/code/Namespace/Module/view/frontend/requirejs-config.js 并将代码放置在requirejs-config.js中 var config = { map: { '*': { 'Mage...
Magento-addressAutoComplete:Magneto 结帐地址自动完成
06-08
2. **AJAX**：异步 JavaScript 和 XML，用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。 3. **JSON**：数据交换格式，用于在前端 JavaScript 和后端服务器之间传递地址信息。 4. **API 集成**：...
fwm-theme:Freshway 的 Magento 主题
06-20
这个主题由"Freshway"开发，可能包含了丰富的定制选项，以及对Magento核心功能的优化，以提升网站的用户体验和销售性能。 在深入探讨这个主题之前，我们先来了解一下HTML（超文本标记语言）。HTML是构建网页的基础...
magento：magento-ce 2.4.0
02-15
"magento-master" 文件夹很可能包含了 Magento 2.4.0 的源代码，开发者可以深入研究这些文件，了解其内部结构和工作原理，以便进行二次开发或自定义功能。在实际项目中，开发者通常会按照 Magento 的开发指南进行...
magento开发教程
09-03
Magento开发教程旨在帮助开发者深入理解和掌握Magento电子商务平台的构建与扩展。Magento是一个强大的开源电子商务解决方案，以其高度可定制和灵活性而著称。 1. **Magento的配置系统**： - **目录结构**：Magento...
【magento2模板开发专题15】重写布局
深漂小码哥
07-30 734
不是所有的布局定制可以扩展现有的布局。 如果自定义的量大，你可以使用重写函数所需的布局文件。 这意味着在主题中放置的新文件将代替父主题布局文件基本layout file布局文件. 本文中，页面布局, 页面配置, 和通用布局 被称为“布局文件”，因为它们的重写机制类似于所有的文件。 怎样重写一个布局（Layout） 本节讨论如何重写： 基地布局 主题布局 覆盖基础布局 添加一个重写的基础...
dedecms常见修改，参考大全，二次开发
热门推荐
PHP_前端_ios软件制件_概念西瓜专栏
09-08 1万+
收集自己觉得好的资料 //织梦的网站查询手册 //红色为问题集  //橄榄色为注释  //紫色为拓展 1.网站标题（优化）:  {dede:field.title/}_{dede:global.cfg_webname/} 2.当前名称： {dede:field name='typename'/} 3.导航条（父类、子类）： {
Magento教程 18：Magento功能导览(2) 展示商品
Just Code
09-11 244
Magento是强大的电子商务网站，可以多样化的呈现商品以及支援多种客制化选项，提供客户在选购商品时可以附上更加详细的资讯，以下就来看看Magento在商品方面的呈现。 分类商品页面 Magento教程 18：Magento功能导览(2) 展示商品 在分类商品页面你可以选择版面的配置，目前画面中是三栏式，但是可以依照你的需求在系统中调整成二栏或着是单栏配置，在商品清单的上下有设置...
magento additional & details 分解开来
weixin_30817749的博客
05-07 79
<?php foreach ($this->getChildGroup('detailed_info', 'getChildHtml') as $alias => $html):?> <div class="box-collateral <?php echo "box-{$alias}"?>"> <?php ...
jquery带缩略图轮播_带有jQuery和PHP的新鲜滑动缩略图库
culiao9310的博客
09-28 552
jquery带缩略图轮播View demo 查看演示Download Source 下载源In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when movi...
如何修改magento产品详细页面的栏目
weixin_34183910的博客
09-15 242
magento默认模板里面的产品信息页面的布局是以两栏带右侧栏显示的，那么如何修改为两栏带左侧栏或者三栏、一栏的方式显示呢？下面教大家一种很简单的方法就可以实现。下面是默认的布局预览：修改成两栏带左侧栏后的效果：修改成三栏后的效果：修改成一栏效果：这样的效果很容易实现的，首先你需打开catalog.xml文件1.3版本: app > design > fronte...
Magento2 产品详情页添加自定义内容
weixin_34268753的博客
09-20 783
自定义内容,只需要依照原路经在自己模块下新建相同的路径内容, 添加自定义内容 step1.新建/xxx/xxx/Block/Product/View/Extra.php <?php /** * Created by PhpStorm. * User: denson * Date: 16-9-19 * Time: 下午15:...
magento输出到phtml
xmlife的专栏
01-16 941
//第一种 [php] view plaincopy $block=$this->getLayout()->createBlock(‘newslettercampaign/adminhtml_view’)    ->setTemplate(“newslettercampaign/test.phtml”);    $block->assign(‘id’,$id);//输出变量
magento -- 移动产品页选项和购买按钮到简介下方
似水年华
02-17 886
<br /> Magento的产品页显示自定义选项或可配置产品的配置项在模板文件里都是归类于Options，默认模板下这一块会显示在产品信息的下方，如图<br /><br /> 这个位置很多人觉得并不好看或合理，想要把它挪到图片的右边，也就是Quick Overview所在的位置，如下图<br /><br /> 打开后台产品页，找到Design下的Display product options in属性，可以看到两个选项：Product Info Column和Block after Info

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值