前端模板开发教程 :
最佳入门:
https://docs.magento.com/user-guide/cms/widget-new-products-list.html
前端设计的理论:
参考Magento 2 – Alan Storm, 这是行业内大牛写的教程:《No Frills Magento Layout》,线上看:https://kdocs.cn/l/ckbQR4GYAc9o
[金山文档] No Frills Magento Layout.pdf
有助于理解magento模板机制:
XML ,layout,container, block, widget, page 等概念。
国内资料推荐:
https://www.kancloud.cn/zouhongzhao/magento2-in-action/629747
页面布局:
https://bbs.mallol.cn/question/magento2-general-layout-design-description/
安装主题:
安装方法参考:https://www.kancloud.cn/zouhongzhao/magento2-in-action/672702
大致流程如下:
If you are using Magento 2.4.x then you need to extract solwin-freego-theme-2.4.x.zipfile.4. Copy the app and the pub folder and paste it into your magento ROOT directory.
5. Run upgrade command as specified: php bin/magento setup:upgrade
6. Run deploy command as specified:
For Magento 2.0.x and 2.1.x:php bin/magento setup:static-content:deploy
For Magnento 2.2.x, Magento 2.3.x and Magento 2.4.x:php bin/magento setup:static-content:deploy -f
7. Clear the cache either from the admin panel or command line php bin/magento cache:clean
这里推荐2个简单模板入门:
代码和样式设计都不错的免费主题,比较适合二次开发,代码简洁易懂。参考:
1,https://www.solwininfotech.com/documents/magento2/freego/#pages_configuration
2,https://www.hiddentechies.com/documentation/magento2/bizkick/#customization
注意性能:
You might be surprised, but your website theme can also significantly slow down your website, especially if it has a lot of widgets, sliders and custom blocks. Just imagine how much time it will take to load all of them.
很多时候magento卡慢,是因为我们自己写的模板的性能问题。
解读模范主题:
1,老邹模板:https://gitee.com/zouhongzhao/magento2-action-theme-demo
介绍了引入内容的几种形式,通用的代码注入,必读代码。
2,solwininfotech模板,强烈推荐学习:
https://www.solwininfotech.com/documents/magento2/freego/#pages_configuration
demo地址: http://magedemo.solwininfotech.com/magento2/freego/theme/
a,全部取用覆盖原来模板的方法,简单直接高效。
b,cpanel作为控制面板,容易定制配置。
3, bizkick模板:
bizkick是纯模板,是solwininfotech模板的简单版,没有插件的。
https://www.hiddentechies.com/documentation/magento2/bizkick/#customization
前端模板内容主要是什么形式:
1,管理后台配置形式(复杂)
a,新建page,插入widget内容
b,自定义页面layout模板
c,自定义 product_widget的 样式
Using Layout Updates | Magento 2.3 User Guide
How to add Custom Layout Update in Magento 2.3.4+ – Olegnax
2,代码模板形式 【推荐】
a, 内容直接写在代码, block+template
b, 自定义页面layout模板
c, 自定义 product list 的循环和样式
3,Widgets小插件(很少用) :
写好block , 模板,后台可配置选项,注入到 update layout 各种位置。作用:例如自定义内容注入页面,跟踪埋点注入等。
https://docs.magento.com/user-guide/cms/widget-static-block.html
Custom widget | Adobe Commerce Developer Guide (magento.com)
案例演示:
首页内容:后台编辑器自定义 block Widget:
自定义内容块有 block_id 类的静态内容 ,
{{widget type=”Magento\Cms\Block\Widget\Block” template=”widget/static_block/default.phtml” block_id=”home_banner”}}
静态内容在管理后台修改:
List of default FreeGo home page static block name
- Home banner Block
- Home Advertisement 1
- Home Advertisement 2
- Home Blogs
- Home Testimonials
- Home Brands
- Footer Our services
- Footer Theme Features
product_widget类的动态内容:
{{widget type=”Magento\Catalog\Block\Product\Widget\NewWidget” display_type=”new_products” show_pager=”1″ products_per_page=”5″ products_count=”10″ template=”product/widget/new/content/new_grid.phtml” cache_lifetime=”20″ page_var_name=”allproduct”}}
header 和 footer 内容 管理后台配置化:
后台配置选项option:
在 插件的system.xml 配置 则可。
//配置好,模板可以调用:
$scopeConfig = $objectManager->create('Magento\Framework\App\Config\ScopeConfigInterface');
$categoryId = $scopeConfig->getValue('demo/abc/key',\Magento\Store\Model\ScopeInterface::SCOPE_STORE);
自定义product widget 模板(选):
\Catalog\etc\widget.xml 配置模块模板,自定义样式: