您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

magento2 模板设计 三(主题创建)

发布时间：2023-06-24 19:03:15编辑：雪饮阅读（）

词汇
block            一块（木料、石头等)
Blocks            楼群（block 的复数）
text            （书、杂志等中区别于图片的）正文
dropdown        （计算机菜单）下拉式的
Engine            发动机，引擎
Luma            亮度，（Luma）人名
LUMA            亮度，（Luma）人名
Vendor            （出售某类商品的）销售商，供应商
picture            图片，绘画
Pictures        绘画作品（picture 的复数）
frontend        前端
Smartwave        任意波形
Swissup            Swissup公司
parent            父亲（或母亲）
Minify            使变小；贬低
Filterable        滤过性的；可滤过的
Manufacturer    生产商，制造商
type            类型，种类
Type            （type）类型
任务
模板设计，包含静态块的调用和下拉菜单的调用以及文本域调用

    实践：
        （主题目录参考）
        自己创建新主题
        D:\phpstudy_pro\WWW\www.xymegento.com\app\design\frontend\Xy
        像这样的一个目录是你的vendor目录，vendor名自定义
        然后接下来
        D:\phpstudy_pro\WWW\www.xymegento.com\app\design\frontend\Xy\theme2
        这样的一个目录就是你的主题目录，主题目录名自定义
        （声明主题参考）
        再接下来
        D:\phpstudy_pro\WWW\www.xymegento.com\app\design\frontend\Xy\theme2\theme.xml声明你的主题如：
        
        
        <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
            <!--当前主题的标题-->
           <title>theme2</title> <!-- your theme's name -->
           <!--这个parent节点如果没有，
           就默认为Magento/blank，我这里填写为我现在正在制作的这个主题比如我填写为Xy/theme1则在后台管理系统中
           CONTENT=》Design=》Themes中找不到我们新创建的这个主题
           -->
           <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
           <media>
              <!--当前主题的主题预览图，相对于当前主题路径-->
              <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
           </media>
        </theme>
        （注册主题参考）
        那么再接下来
        D:\phpstudy_pro\WWW\www.xymegento.com\app\design\frontend\Xy\theme2\registration.php注册你的主题如
        
        
        <?php
        /**
         * Copyright © Magento, Inc. All rights reserved.
         * See COPYING.txt for license details.
         */

        use \Magento\Framework\Component\ComponentRegistrar;

        ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Xy/theme2', __DIR__);
        （主题预览图片参考）
        D:\phpstudy_pro\WWW\www.xymegento.com\app\design\frontend\Xy\theme2\media\preview.jpg
        
        （其它）
        本来想继续覆盖下这里所继承的magento/blank的首页的布局，结果一直没有搞成功。
        相关资料说什么default.xml或cms_index_index.xml都发现没有用，default.xml我最后在挨个（为什么是挨个？后台有3个条目都是关于view的，我不是很理解，于是这3个都切换试试）切换主题为我这个新主题时候
        magento根目录的var/exception.log出现有包含如下的错误日志
        [2023-06-24 10:11:44] main.CRITICAL: exception 'Magento\Framework\Exception\FileSystemException' with message 'Cannot read contents from file "D:/phpstudy_pro/WWW/www.xymegento.com/pub/static/frontend/Xy/theme2/zh_Hans_CN/mage/requirejs/mixins.js" 
        暂时不晓得如何解决，暂时先放放


补充：
    （1）默认布局页面
    默认布局页面路径位于如：
    D:\phpstudy_pro\WWW\www.xymegento.com\app\code\Magento\Theme\view\base\page_layout\empty.xml
    但是覆盖路径应该如：
    D:\phpstudy_pro\WWW\www.xymegento.com\app\design\frontend\Xy\theme2\Magento_Theme\page_layout\empty.xml
    然后我这里的覆盖文件如
    <?xml version="1.0"?>
    <!--
    /**
     * Copyright © 2013-2017 Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */
    -->
    <layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
        <container name="root">
           
        </container>
    </layout>
    另外需要说明的就是频繁调试模板，每次那么多命令真的很烦耶，试试封装一个脚本，例如temp.bat
    D:\phpstudy_pro\Extensions\php\php5.6.9nts\php.exe -c D:\phpstudy_pro\Extensions\php\php5.6.9nts\php.ini .\bin\magento cache:clean 
    D:\phpstudy_pro\Extensions\php\php5.6.9nts\php.exe -c D:\phpstudy_pro\Extensions\php\php5.6.9nts\php.ini .\bin\magento setup:upgrade
    D:\phpstudy_pro\Extensions\php\php5.6.9nts\php.exe -c D:\phpstudy_pro\Extensions\php\php5.6.9nts\php.ini .\bin\magento setup:static-content:deploy
    需要注意的是我这里默认已开启了开发模式的
    更改为开发模式
    D:\phpstudy_pro\Extensions\php\php5.6.9nts\php.exe -c D:\phpstudy_pro\Extensions\php\php5.6.9nts\php.ini .\bin\magento deploy:mode:set developer
    如果已经是开发模式，应该不需要再次开启吧，重复开启是否有问题，这里没有过多研究
    （2）顶部导航条
    我要修改我magento2首页顶部导航，我修改app\code\Magento\Theme\view\frontend\templates\html\topmenu.phtml没有生效，但是我修改app\code\Smartwave\Megamenu\view\frontend\templates\topmenu.phtml就有效果，这是为什么？
    这个好像是因为我当时自己另外下载的一个扩展，原版里面好像没有这个东西
    （3）调用静态块
    虽然顶部导航条，这里用了扩展，但是这里我暂时就先直接在这个扩展上面调用哈，我是直接在app\code\Smartwave\Megamenu\view\frontend\templates\topmenu.phtml文件内容末尾加入如
    <div>下面是静态块</div>
    <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('test_block20230617')->toHtml(); ?>
    （4）顶部导航条的覆盖
    虽然说顶部导航条只是扩展，但是大概意思是这个扩展，说白了，也是一种风格吧，也是继承官方的，但是具体是官方的那个主题，就没有研究了。
    那么像是（3）中这样直接修改源代码的方式，显然还是不太好的，所以我决定还是走继承路线吧。
    那么按照上面的这个路径，我需要创建一个配置文件
    D:\phpstudy_pro\WWW\www.xymegento.com\app\design\frontend\Xy\theme2\Smartwave_Megamenu\layout\default.xml:
    <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <referenceBlock name="top.menu">
                <action method="setTemplate">
                    <argument name="template" xsi:type="string">Smartwave_Megamenu::topmenu.phtml</argument>
                </action>
            </referenceBlock>
        </body>
    </page>
    那么这第二步就是创建D:\phpstudy_pro\WWW\www.xymegento.com\app\design\frontend\Xy\theme2\Smartwave_Megamenu\templates\topmenu.phtml，其中的内容就是复制的app\code\Smartwave\Megamenu\view\frontend\templates\topmenu.phtml中的
    (5)制作主题副本
    本来想要做商品详情页的覆盖，但是发现我新主题什么都没有做的情况下，也可以理解为新主题没有商品详情页，但是既然继承了magento/blank，那么按理来说应该是可以使用默认的商品详情页的。
    但是就一进入商品详情页就报错。
    主要错误如：
    Exception #0 (Exception): Warning: Illegal offset type in D:\phpstudy_pro\WWW\www.xymegento.com\app\code\Magento\Catalog\Model\CategoryRepository.php on line 133
    那么这个错误一直没有找到解决方法。
    然后我想的是先制作一个blank主题副本，在该副本主题上再进行相关商品详情页覆盖操作（发现商品详情页又是由多个部分组成，不单纯是一个页面）
    
    magento2复制主题形成一个副本主题的最快方法?
    要复制一个主题并形成副本主题，可以按照以下步骤进行操作：
    在Magento 2的主题目录中创建一个新的文件夹，命名为副本主题的名称。
    复制原始主题的所有文件和文件夹到新的副本主题文件夹中。
    在副本主题文件夹中打开theme.xml文件，并将主题名称和主题父级名称更改为副本主题的名称和原始主题的名称。
    在副本主题文件夹中打开composer.json文件，并将主题名称和主题父级名称更改为副本主题的名称和原始主题的名称。【可选】
    在副本主题文件夹中打开registration.php文件，并将主题名称更改为副本主题的名称。
    在Magento 2的后台中，转到“内容”>“设计”>“配置”并选择要使用副本主题的网站。
    在“主题”下拉菜单中选择副本主题的名称，并保存更改。
    现在，您已经成功地复制了一个主题并形成了一个副本主题。
    （6）给商品新增自定义属性（text类和dropdown类型）
    在商品编辑界面右上角Add Attribute添加属性
    在新界面中
    Create New Attribute
    按钮点击后再次进入第二个新界面
    catalog Input Type for Store Owner选择属性类型
    然后属性类型这里今天我们就只选择Text Field或Dropdown就行。
    Text Field就简单，单纯的文本输入框。
    如果是Dropdown，则会出现一个Values的列表，可以在其下面的Add Value增加列表项
    每个列表项有两个比较重要的字段Default Store View是相当于select->options中每个option的值，那么Admin同样也是这样的
    只不过区别是Admin的值是该属性添加后管理员在商品编辑页面选中的值，而Default Store View则是显示管理员所选中的这个值所在Value的Default Store View，用于显示在前端商品详情页上面的。
    属性增加好后就回到了商品编辑页面在Attributes里面有我们增加的Text Field属性，直接填写值即可，也有我们新增的Dropdown属性，我们下拉选择值即可
    （7）调用text类和dropdown类型的属性
    如果上面(6)的时候添加属性的第三个界面中Advanced Attribute Properties 展开后里面有个 Attribute Code是用来填写属性代码的,属性代码用于在代码中调用该属性的,如果忘记了填写(上面(6)中也忘记了说明...)
    那么可以在数据库中还能找到,应该是如此,我这里个人琢磨出来的,我这里是没有问题的,仅供参考.
    select attribute_code,frontend_label from eav_attribute where frontend_label like "%20230625%"
    这里like的就是你自己的属性名,也就是Attribute Label
    我的理解attribute_code字段值就是我们可以用来调用的,如果忘记填写了,这里好像默认按Attribute Label进行生成的.
    那么调用text类和dropdown类型的属性,可能不同的页面啊模块啊之类的,反正就是不同地方应该是效果以及调用方式都或多或少有一些差异的,我这里只在
    D:\phpstudy_pro\WWW\www.xymegento.com\app\code\Magento\Catalog\view\frontend\templates\product\view\attribute.phtml中的调用示例如:
    <?php
    /**
     * Copyright © 2013-2017 Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */

    // @codingStandardsIgnoreFile

    /**
     * Product view template
     *
     * @see \Magento\Catalog\Block\Product\View\Description
     */
    ?>
    <?php
    $_helper = $this->helper('Magento\Catalog\Helper\Output');
    $_product = $block->getProduct();
    $_call = $block->getAtCall();
    $_code = $block->getAtCode();
    $_className = $block->getCssClass();
    $_attributeLabel = $block->getAtLabel();
    $_attributeType = $block->getAtType();
    $_attributeAddAttribute = $block->getAddAttribute();

    if ($_attributeLabel && $_attributeLabel == 'default') {
        $_attributeLabel = $_product->getResource()->getAttribute($_code)->getFrontendLabel();
    }
    if ($_attributeType && $_attributeType == 'text') {
        $_attributeValue = ($_helper->productAttribute($_product, $_product->$_call(), $_code)) ? $_product->getAttributeText($_code) : '';
    } else {
        $_attributeValue = $_helper->productAttribute($_product, $_product->$_call(), $_code);
    }
    ?>

    <?php if ($_attributeValue): ?>
    <div class="product attribute <?php /* @escapeNotVerified */ echo $_className?>">
        <?php if ($_attributeLabel != 'none'): ?><strong class="type"><?php /* @escapeNotVerified */ echo $_attributeLabel?></strong><?php endif; ?>
        <div class="value" <?php /* @escapeNotVerified */ echo $_attributeAddAttribute;?>><?php /* @escapeNotVerified */ echo $_attributeValue; ?></div>
    </div>
    <?php endif; ?>

    <!--从这里以下的代码都是我写的-->
    <div style="display:flex;">
        <div>属性attribute(text)20230625</div>
        <div>
            <?php 
            $_code='attribute20230625';
            echo $_product->getResource()->getAttribute($_code)->getFrontend()->getValue($_product);
            ?>
        </div>
    </div>
    <div style="display:flex;">
        <div>属性attribute(dropdown)20230625</div>
        <?php 
        $_code='dropdown20230625';
        ?>
        <div style="display:flex;">
            <div style="display:flex;">
                <div>文本值（选中option的文本节点值）</div>
                <div><?php echo $_product->getAttributeText($_code); ?></div>
            </div>
            <div style="display:flex;">
                <!--这里好像有点问题，调用出来的还是文本节点值-->
                <div>值（选中option的value值）</div>
                <div><?php 
                
                echo $_product->getResource()->getAttribute($_code)->getFrontend()->getValue($_product);
                
                ?></div>
            </div>
            <div style="display:flex;">
                <!--这里好像有点问题，我以为会调出下拉框相关的html，例如select或者option或者两者完整的，结果发现这里调用出来的是选中option的value值。。。-->
                <div>原始值</div>
                <div><?php echo $_product->getData($_code); ?></div>
            </div>
        </div>
    </div>
    (8)覆写app\code\Magento\Catalog\view\frontend\templates\product\view\attribute.phtml
    虽然上面实现了文本属性和下拉属性的调用,但是也是在原来的主题,父级主题进行修改的,我是觉得,也要在自己主题上覆写比较合理的
    那么自己的主题上建立路径如
    D:\phpstudy_pro\WWW\www.xymegento.com\app\design\frontend\Magento\blank2\Magento_Catalog\templates\product\view
    然后将D:\phpstudy_pro\WWW\www.xymegento.com\app\code\Magento\Catalog\view\frontend\templates\product\view\attribute.phtml
    复制到D:\phpstudy_pro\WWW\www.xymegento.com\app\design\frontend\Magento\blank2\Magento_Catalog\templates\product\view里面
    然后自己酌情修改即可