Magento的前端页面开发方法

前端模板开发教程：

最佳入门：
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/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 配置模块模板，自定义样式：

前端模板开发教程 ：