[Magento 2 定制化开发] 之三:删除 Magento 2.4.6 首页及产品分类列表页的 Add to cart 按钮

文章目录

    Magento 2.4.6 主题,首页及产品分类列表页的商品卡片,在鼠标放上去时,会显示 Add to cart 按钮。

    但是我想去掉这个按钮。

    在小试牛刀 定制化修改 magento 2.4.6 主题代码 完成了 compare 模块之后,我以为已经精通了 magento 主题的配置。但是添加购物车按钮的修改还是给我当头一棒,后来发现这个按钮属于 phtml 硬编码,需要修改代码才能解决。

    URL 链接格式

    • 首页
    • 列表页:https://www.sunzhongwei.com/catalog/category/view/s/some-product/id/4/

    catalog 是目录的意思,这个单词我一直记不住。。。

    代码目录

    docker 目录

    # make fpm_bin
    

    进入 magento 代码目录。因为是使用 composer 安装的主题,所以目录是:

    vendor/swissup
    

    但是,后面我发现,不只是这个目录,还有 vendor/magento 目录。

    Add to cart 按钮代码

    记录按钮代码的目的是,方便搜索代码:

    <button type="submit" title="Add to Cart" class="action tocart primary">
    	<span>Add to Cart</span>
    </button>
    

    搜索定位代码 (无效,定位错误)

    果然有所收获:

    # grep "Add to Cart" -r .
    
    ./module-breeze/view/frontend/templates/catalog/recent-products.phtml:
    title="<?= $block->escapeHtml(__('Add to Cart')) ?>"
    
    ./module-breeze/view/frontend/templates/catalog/recent-products.phtml:
    <span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
    

    修改之前一定要备份。

    cd ./module-breeze/view/frontend/templates/catalog/
    cp recent-products.phtml recent-products.phtml.bak20241204
    

    修改后生效

    需要执行 magento 清理缓存的命令:

    cd docker_dir
    make fpm_bin
    cd magento2
    php bin/magento cache:clean
    php bin/magento cache:flush
    

    修改了不生效

    我感觉就是这个文件,不知道为何不生效。。。

    php bin/magento cache:flush is used when you change .php files. When you change .phtml or .XML files you have to deploy static content.

    php bin/magento setup:static-content:deploy -f
    php bin/magento cache:flush
    

    其实这个说法是错误的,修改 phtml 文件,并不需要 static content deploy。只有 css js 文件才需要。

    https://magento.stackexchange.com/questions/242122/changes-in-phtml-not-visible-in-the-browser

    同样不行

    但是这个链接里最后一个答案,提供了一个思路,打开后台的调试功能,可以看到具体的页面里每个元素的路径。

    stores - configuration - advanced - developer

    Enable Template Path Hints for Storefront

    虽然看不到商品了,但是可以看到不发代码来自 vendor/magento

    还有部分代码来自

    vendor/magento/module-msrp/view/frontend/templates/popup.phtml

    😆 果然:

    vendor/magento# grep "action tocart primary" -r .
    
    ./module-catalog/view/frontend/templates/product/list.phtml:
    class="action tocart primary"
    
    ./module-catalog/view/frontend/templates/product/list/items.phtml:
    class="action tocart primary"
    
    ./module-catalog/view/frontend/templates/product/list/items.phtml:
    class="action tocart primary">
    

    搜出来的相关文件很多,这里只列出 3 个,实际上改第一个文件就可以了。

    这就对了

    https://magento.stackexchange.com/questions/272720/remove-add-to-cart-on-category-product

    vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

    将 button 注释掉即可:

    <!--
    <button type="submit"
            title="<?= $block->escapeHtml(__('Add to Cart')) ?>"
            class="action tocart primary">
        <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
    </button>
    -->
    

    然后执行:

    php bin/magento cache:clean
    php bin/magento cache:flush
    

    哈哈,果然列表页的 Add to Cart 消失了。

    但是,这还没完。因为主题首页的商品列表中的 Add to Cart 按钮还在。

    phtml 模板文件的注释语法

    phtml 模板文件,实际上就是 php + html。

    所以注释语法用 html 的注释语法即可。

    主题首页的 Add to Cart

    还是基于之前 grep 的结果列表:

    vendor/magento# grep "action tocart primary" -r .
    

    需要耐心的逐一排查,有些从文件名看就可以过滤掉,例如 popup,carousel;
    有些从代码看直接就可以过滤掉。

    测试之后发现实际上是这个文件:

    ./module-catalog-widget/view/frontend/templates/product/widget/content/grid.phtml

    OK, 解决了。

    顺便处理一下首页的 compare 角标

    还是上面那个文件,搜索 tocompare, 注释掉 a 标签即可。

    OK,收工。

    继续阅读 🌳

    Magento 2 主题定制化开发系列教程

    关于作者 🌱

    我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊,或者关注我的个人公众号“大象工具”, 查看更多联系方式