Posted on

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/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 配置模块模板,自定义样式: