您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
magento2-theme-design-2（bundle）
发布时间：2023-06-30 14:19:03编辑：雪饮阅读（）
-
词汇
Newsletter （机构定期寄发给成员的）通讯，简报
Owl 鸮，猫头鹰
Carousel 旋转木马；（机场的）行李传送带
July 七月
Jul 七月（等于 July）
container 容器；集装箱
reference 提到；引用
reserve 拥有，保留（某种权利）
reserved 拥有（某种权利等）（reserve 的过去式和过去分词形式）
Footer 页脚 懒散地工作
Copyright 版权，著作权
bundle 一大笔钱；软件包
任务
1、banner轮播更换为OwlCarousel2-2.3.4实现
这里只是简单的实现，只要用到OwlCarousel2-2.3.4这个就行了，后台的哪些风格之类的，就暂时先不管了。
首先咱们需要将上次OwlCarousel2-2.3.4的示例中用到的owl.carousel.min.css，复制到如app\design\frontend\Magento\blank2\Magestore_Bannerslider\web\css中
同理，用到的owl.theme.default.min.css，也复制到如app\design\frontend\Magento\blank2\Magestore_Bannerslider\web\css中
js的话，我们首先要覆写app\code\Magestore\Bannerslider\view\frontend\requirejs-config.js,覆写到如app\design\frontend\Magento\blank2\Magestore_Bannerslider目录中
然后接下来是要把上次示例中用到的owl.carousel.min.js复制到如：app\design\frontend\Magento\blank2\Magestore_Bannerslider\web\js中
然后咱们app\design\frontend\Magento\blank2\Magestore_Bannerslider\requirejs-config.js中config.map.*添加组件条目如：'magestore/owl.carousel.min': 'Magestore_Bannerslider/js/owl.carousel.min'
这个的意思就是说声明了一个组件名为“magestore/owl.carousel.min”，其路径是Magestore_Bannerslider/js/owl.carousel.min，而这个路径就正好对应了app\design\frontend\Magento\blank2\Magestore_Bannerslider\web\js\owl.carousel.min.js
接下来还要在app\design\frontend\Magento\blank2\Magestore_Bannerslider\requirejs-config.js中config.shim中添加组件依赖条目如：
'magestore/owl.carousel.min': {
deps: ['jquery']
}
因为咱们的OwlCarousel2-2.3.4依赖jquery，但是由于magento2是使用require的，不是原生的那种，所以你不太好实现将jquery的加载写到owl.carousel.min.js的前面，因为magento2已经内置加载了jquery，其js加载顺序就是托管给了require的。
那么接下来上次我们覆写的这个轮播组件app\design\frontend\Magento\blank2\Magestore_Bannerslider\templates\slider\flexslider.phtml修改后如：
<?php
/**
* Magestore
*
* NOTICE OF LICENSE
*
* This source file is subject to the Magestore.com license that is
* available through the world-wide-web at this URL:
* http://www.magestore.com/license-agreement.html
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade this extension to newer
* version in the future.
*
* @category Magestore
* @package Magestore_Bannerslider
* @copyright Copyright (c) 2012 Magestore (http://www.magestore.com/)
* @license http://www.magestore.com/license-agreement.html
*/
?>
<?php
/** @var \Magestore\Bannerslider\Block\SliderItem $block */
$styleSlide = $block->getSlider()->getStyleSlide();
$slider = $block->getSlider();
$htmlId = $block->getFlexsliderHtmlId();
$bannerCollection = $block->getBannerCollection();
?>
<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Magestore_Bannerslider::css/owl.carousel.min.css')?>">
<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Magestore_Bannerslider::css/owl.theme.default.min.css')?>">
<!--
默认已加载jQuery JavaScript Library v1.12.4，据说是高于jquery1.8.3的，那么OwlCarousel2-2.3.4肯定是支持的
-->
<script type="text/javascript">
//这段前端代码是使用RequireJS加载jQuery和Magestore Flexslider模块，并在加载完成后执行回调函数。
//require(['jquery', 'magestore/flexslider'], function($) { console.log("随便输出点什么");});
require(['jquery', 'magestore/owl.carousel.min'], function($) {
$(document).ready(function($) {
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
});
});
</script>
<div class="owl-carousel">
<?php foreach ($bannerCollection as $banner): ?>
<div><img src="<?php echo $block->getBannerImageUrl($banner);?>" /></div>
<?php endforeach ?>
</div>
2、导航
导航菜单原路径
app\code\Smartwave\Megamenu\view\frontend\templates\topmenu.phtml
那么覆写的路径则就在
app\design\frontend\Magento\blank2\Smartwave_Megamenu\templates\topmenu.phtml
3、搜索
首先是发现了我继承了magento/blank主题，但是为什么首页没有顶部的搜索框
可能一开始是有的吧，后面被我覆写什么其它东西的时候弄坏了吧。
后来我跟着零碎的记忆，怀疑这个路径
app\design\frontend\Magento\blank2\Magento_Theme\layout
对比检查magento/blank主题的这个路径
app\design\frontend\Magento\blank\Magento_Theme\layout
我还原后就ok。
在还原过程中我发现好像还有报错的情况，就是首页都直接进不去了。
报错信息比较多，我这里就只拿第一行做为示例如：
Warning: ltrim() expects parameter 1 to be string, object given in 中间省略我的本地电脑路径到magento2的安装路径\lib\internal\Magento\Framework\Code\Generator\EntityAbstract.php on line 152
这次这个错误好像也是因为我折腾顶部没有搜索框过程中，遇到一个错误就是首页没有样式了，说是如果覆盖主题过程中有过自定义css
则需要执行命令如
D:\phpstudy_pro\Extensions\php\php5.6.9nts\php.exe -c D:\phpstudy_pro\Extensions\php\php5.6.9nts\php.ini .\bin\magento setup:di:compile
我不记得有没有自定义过css了，所以干脆执行吧。
这个或许后面还会用到，可能就是说主题改动后，最好还是执行下的好吧。
当然，原本我首页还有调用banner，我看了下时间好像是相关banner到期了，或许也是banner到期了，所以轮播哪里有问题了，因为发生这个错误我结合那个完整的错误堆栈抛出，好像也可能是由于数组为处理上，引发的ltrim错误。
具体情况没有细究，就直接去修改了下每个banner的到期时间都延长了一个月。
理解布局之间的引用覆盖追加逻辑
首先就是blank默认布局如
app\code\Magento\Theme\view\frontend\layout\default.xml
中有定义了一个名为header-wrapper的container
然后app\code\Magento\Search\view\frontend\layout\default.xml中又使用referenceContainer引用了名为header-wrapper的container并可以在引用后进行修改container内部的结构
那么具体是container中是新增还是修改。
这里以一个一个实例来看看
<container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="header content">
<block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
<arguments>
<argument name="logo_img_width" xsi:type="number">189</argument>
<argument name="logo_img_height" xsi:type="number">64</argument>
</arguments>
</block>
<block class="Magento\Cms\Block\Block" name="test_block" template="Magento_Cms::block.phtml">
<arguments>
<argument name="block_id" xsi:type="string">test_block20230617</argument>
</arguments>
</block>
<block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml" />
</container>
在这里app\code\Magento\Theme\view\frontend\layout\default.xml中名为header-wrapper的container中定义了名为logo的block和名为test_block的block，以及名为top.search的block
然而app\code\Magento\Search\view\frontend\layout\default.xml中引用的referenceContainer名为header-wrapper的container定义如
<referenceContainer name="header-wrapper">
<block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini2.phtml" />
</referenceContainer>
可见app\code\Magento\Search\view\frontend\layout\default.xml中引用的referenceContainer名为header-wrapper的container中又定义了名为top.search的block
那么对比app\code\Magento\Theme\view\frontend\layout\default.xml中名为header-wrapper的container中定义的block，就是名为top.search的block是重复定义了的
所以最后的效果就是app\code\Magento\Search\view\frontend\layout\default.xml中引用的referenceContainer名为header-wrapper的container中又定义了名为top.search的block会覆盖
app\code\Magento\Theme\view\frontend\layout\default.xml中名为header-wrapper的container中定义的block，就是名为top.search的block
那么同理app\code\Magento\Search\view\frontend\layout\default.xml中引用的referenceContainer名为header-wrapper的container中定义的block的名称
在app\code\Magento\Theme\view\frontend\layout\default.xml中名为header-wrapper的container中定义的block里面没有找到同名的，
则相当于app\code\Magento\Search\view\frontend\layout\default.xml中引用的referenceContainer名为header-wrapper的container中定义的block为新增的内容
如app\code\Magento\Theme\view\frontend\layout\default.xml中名为header-wrapper的container中定义的block如下：
<container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="header content">
<block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
<arguments>
<argument name="logo_img_width" xsi:type="number">189</argument>
<argument name="logo_img_height" xsi:type="number">64</argument>
</arguments>
</block>
<block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml" />
</container>
而app\code\Magento\Search\view\frontend\layout\default.xml中引用的referenceContainer名为header-wrapper的container中定义的block如下
<referenceContainer name="header-wrapper">
<block class="Magento\Cms\Block\Block" name="test_block" template="Magento_Cms::block.phtml">
<arguments>
<argument name="block_id" xsi:type="string">test_block20230617</argument>
</arguments>
</block>
</referenceContainer>
那么这里test_block就相当于是新增的了
为什么是这样呢，因为magento2会默认加载如app\code\Magento\Theme\view\frontend\layout\default.xml，然后再加载各个主题或者模块中的一些layout，
后面加载的layout中的定义一般都会通过referenceContainer进行覆盖或者追加前面的layout中的container
这些是我结合chatgpt，加上自己的理解，具体可能不是很详尽或者很准确，所以可以只做参考吧。
另外就是查资料过程中学到布局文件可以通过<update>指令引用其他布局文件，以便复用和扩展布局结构。
那么其实这里单纯只是想要修改搜索栏那块，其实将
app\code\Magento\Search\view\frontend\templates\default.xml
进行覆盖，覆盖路径如
app\design\frontend\Magento\blank2\Magento_Search\templates\form.mini.phtml
然后进行相关修改即可
4、底部
关于底部，一般也就是修改下版权信息吧，一般在后台管理系统
Content=》Design=》Configuration=》找到名为Default Store View条目（一般也是你当前正在使用的主题）后面的Edit=》Footer=》Copyright
里面就可以直接修改这个版权信息
那么根据上面”3、搜索“的研究，我们照样找到app\code\Magento\Theme\view\frontend\layout\default.xml，则很快也可以找到底部版权信息对应的如果直接修改代码的地方的phtml模板路径如
app\code\Magento\Theme\view\frontend\templates\html\copyright.phtml
那么在我们主题中的目标路径则如
app\design\frontend\Magento\blank2\Magento_Theme\templates\html\copyright.phtml
然后再修改内容即可
5、Newsletter
所谓Newsletter，就是首页右下角的那个邮箱订阅那一块儿
Newsletter的原始布局路径如
app\code\Magento\Newsletter\view\frontend\layout\default.xml
那么其中引用的phtml的原始路径如
app\code\Magento\Newsletter\view\frontend\templates\subscribe.phtml
在我们主题中进行覆盖时候的目标路径如：
app\design\frontend\Magento\blank2\Magento_Newsletter\templates\subscribe.phtml
5、首页（这里先空着）
6、列表页
首先第一个问题，就是首页为什么不显示后台设置的分类，常理应该是在导航的那个位置显示才对。
这里我折腾后发现，好像是根分类不会直接显示，
然后你的产品要挂在二级分类上，并且此时二级分类 Enable Category为yes， Include in Menu为Yes，
然后我还设置了我的一个产品的Set Product as New From为有效的时间段内[这个或许是可选的]，并且产品的 Enable Product为Yes
当然我的一级分类也设置了 Enable Category为yes， Include in Menu为Yes
我这里只是保险起见。
可能这些步骤不用全部操作，只需要操作个别吧。
那么这里有了分类后，在首页点击分类后的页面中商品列表的phtml模板路径原始的如：app\code\Magento\Catalog\view\frontend\templates\product\list.phtml
那么我们覆写于我们的主题中的路径如：app\design\frontend\Magento\blank2\Magento_Catalog\templates\product\list.phtml
然后进行相关修改即可
7、产品详细页左侧
我们从”6、列表页“中点击某个商品后进入到商品详情页后
这里所谓的详细页左侧，说实话老师讲的我看了个大概，主要是是太啰嗦，而且ppt上面和实际讲的内容好像是出入蛮大的，所以我这边是自己根据我的理解，这里说的详细页左侧应该是指的那个”有货“哪里
不同产品不同设置可能不一样，我这里的一个示例产品里面前端展示这里的局部展示如：
”有货 SKU Product test1“
可能是我覆写太多，破坏了一些地方，导致看所谓的左侧看的不是很明显，所以我仅以我这里看到的效果的所谓的左侧做为左侧吧。
由于是我安装配置了汉化包，所以我这里叫”有货“，原版可能不是这样哦。
回到正题，那么这个”有货“的原始phtml模板路径如：
app\code\Magento\Catalog\view\frontend\templates\product\view\type\default.phtml
那么覆写到我们主题中的目标路径如
app\design\frontend\Magento\blank2\Magento_Catalog\templates\product\view\type\default.phtml
这个按理来说，应该是可以覆写的，但是这里我怎么都不生效。。。
算啦，我表示放弃了。
毕竟这个版本太老了。或许有bug也说不定吧。
补充：
我又找到了app\code\Magento\Catalog\view\frontend\templates\product\view\type\default.phtml这个的调用地方，
是在app\code\Magento\Catalog\view\frontend\layout\catalog_product_view_type_simple.xml
然后覆盖的目标路径如：
app\design\frontend\Magento\blank2\Magento_Catalog\layout\catalog_product_view_type_simple.xml
不过也是没有什么用。。。
8、产品详细页右侧（xml）
和”7、产品详细页左侧“一样，那么这里说的右侧，我认为就是这里显示商品名的地方如我这里就是”Product test1“，对应html中的元素就是
<div class="product attribute sku">
<strong class="type">SKU</strong> <div class="value" itemprop="sku">Product test1</div>
</div>
然后这个对应的phtml我找到的对应我们当前的原始路径就是如app\code\Magento\Catalog\view\frontend\templates\product\view\attribute.phtml
但这里有强调是xml，那么我找到这个原始路径的调用的就是如：app\code\Magento\Catalog\view\frontend\layout\catalog_product_view.xml
那么首先就是覆写这个路径的目标路径如：app\design\frontend\Magento\blank2\Magento_Catalog\layout\catalog_product_view.xml
那么大概就是在第36行左右的：
<container name="product.info.type" before="-"/>
这个下面我给它添加一个自定义内容如：
<block class="Magento\Cms\Block\Block" name="test_block" template="Magento_Cms::block.phtml">
<arguments>
<argument name="block_id" xsi:type="string">test_block20230617</argument>
</arguments>
</block>
这里就是添加了我们之前magento2中后台管理系统中创建的一个block为例了。
关键字词：bundle
相关文章
-
无相关信息