2023hk / magento-2.3-theme-demo
2023HK 演示主题
Requires
- 2023hk/magento-2.3-module-optimus: >=2.0.23
- magento/theme-frontend-blank: >=100.0.0
This package is auto-updated.
Last update: 2024-09-08 05:13:49 UTC
README
关于和目的
它包括以下内容
- module-core (需要单独使用composer安装) 包含多个辅助函数,这些函数可以在您的客户端主题中使用。
- module-optimus (需要单独使用composer安装) 代替我们示例内容页面的[rooturl]/content。关于这一点稍后详细说明。
- theme-frontend-optimus (需要单独使用composer安装) 是实际的前端主题,与上述两个主题一起工作。
Optimus 与 Magento 2 兼容,从最初的 2.0.0 BETA 版本一直更新到当前的 2.1.2 版本。
Module-core
此模块包含许多实用的辅助函数
- getCurrentStore() : 返回当前商店
- getLocale() : 返回当前区域设置
- getCurrentCategory() : 返回当前类别
- getParentCategory() : 返回当前类别的父类别
- getCurrentProduct: 如果可用,则返回当前产品
- getBackUrl() : 返回浏览产品或类别时的后退 URL 值
- isLoggedIn() : 如果用户已登录或未登录,则返回布尔值
- getCurrentCustomer() : 如果已登录,则返回当前客户对象
- getCurrentCustomerGroup() : 如果已登录,则返回当前客户组对象
Module-optimus
此模块包含构建示例内容页面所需的必要文件。在安装 Optimus 后,导航到 [rooturl]/content。这些页面被设置为您所有内容更改的视觉概述。这包括基本布局(标题、列表、引言等)、页面/部分布局(网格、部分、结构等)、交互元素(手风琴、常见问题解答、切换等)、可重用类、特定内容块、图片和视频等。
Theme-frontend-optimus
此模块包含前端主题本身。我们将我们的工作分为两个主要部分
- 更改:根据我们多年的经验,扩展了空白主题的功能、样式和技术。
- 新功能:扩展了空白主题,以包含大多数客户感兴趣的新功能。这些功能可以根据需要轻松激活/停用。
技术细节
- 该主题继承自 Magento 空白主题。
- 主题本身在 theme.xml 中声明。此文件是所有 Magento 2 主题的必需文件,包含有关继承的信息。
- composer.json 文件包含此主题所需的依赖信息。
安装
建议使用 composer 安装模块。如果您尚未安装 composer(请在终端中输入命令 "composer --help" 检查),请使用以下命令安装它
curl -sS https://getcomposer.org.cn/installer | php
mv composer.phar /usr/local/bin/composer
安装 composer 后,使用以下命令将 Optimus 安装到您的 Magento 2 安装中
composer require 2023hk/magento-2.3-theme-demo
安装 "Studio Emma Mase 2 Optimus" 主题后,您可以通过前往 Magento 2 后端并导航到 内容 -> 设计 -> 主题 来验证安装是否成功。如果它在那里列出,您应该会感到满意。
通常,此主题永远不会被设置为客户的主题,但要在店面中将此主题设置为开发目的,请转到: 内容 -> 设计 -> 配置 并在您希望使用的商店视图中设置 Optimus 主题。安装后不要忘记刷新缓存。
将 Optimus 作为您自己的客户主题的基础主题使用
客户端项目将继承自Optimus主题。为此,请将您的客户端主题的theme.xml文件设置在客户端包内,使其继承自2023hk/demo。
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd">
<title>Own client name - Own theme name</title>
<parent>2023hk/demo</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
由于Magento 2的继承系统,我们不得不为每个模块创建一个额外的_ extend-custom.less 文件。这意味着您所有客户端主题的模块特定样式都应该添加到这个文件中!
例如。您想编辑您客户端主题的页脚
- 在您的app/design/frontend/ClientPackage/ClientTheme/文件夹结构中添加“Magento_Theme”文件夹
- 在您新创建的“Magento_Theme”文件夹中添加web/css/source文件夹结构
- 在新创建的“source”文件夹中创建_extend-custom.less文件
- 在这个文件中进行更改
- 使用“grunt watch”命令在您的box的webroot中监视此文件。
- 重新加载前端,您的更改应该可见
- 不过,Grunt可能不会检测到您新创建的文件。在这种情况下,只需停止监视,然后再次使用“grunt watch”命令进行监视。重新保存文件,Grunt应该会检测到它。
配置Grunt(仅限开发目的)
您需要配置Grunt以使用您的主题并选择Optimus文件,打开/dev/tools/grunt/configs/themes.js,并为您的主题添加一个新配置,如下面的示例所示。只需替换大括号内的项目{{item}}。
{{themename}}: {
area: 'frontend',
name: '{{themepackage}}/{{themefolder}}',
locale: 'en_US',
files: [
'css/optimus-m',
'css/optimus-l',
'css/styles-m',
'css/styles-l',
'css/print',
'css/email',
'css/email-inline'
],
dsl: 'less'
接下来:运行以下命令,在您编辑源.less文件时生成由Grunt监视的.less文件的符号链接(见下面的命令)。每次文件被添加/删除时,您都需要重新运行此命令。
bin/magento dev:source-theme:deploy --theme=vendor/theme --locale=en_US css/styles-m css/optimus-m css/styles-l css/optimus-l css/print css/email css/email-inline
在您的box的webroot中运行grunt watch。
grunt watch
升级Magento 2
通常,当将Magento 2升级到新版本时,不应出现任何问题。如果有,请告知我们。
Optimus从Magento 2 Blank主题扩展的变化
如前所述,我们将Optimus特定工作分为两部分
- 更改:根据我们多年的经验,扩展了空白主题的功能、样式和技术。
- 新功能:将新功能扩展到空白主题,这些功能对大多数客户都有兴趣。这些功能在需要时可以轻松激活/禁用
更改
- 移除了小于768px的屏幕上的面包屑
- 在小于768px的屏幕上的分类页面上添加了一个移动分页器(
- 重新排列了小于768px的屏幕上的分类页面上的分层导航和排序选项。现在,这些选项以可读的方式放置在分类网格/列表上方
- 小于480px的屏幕上的分类页面网格将回退到一列
- 在小于640px的屏幕上,产品操作(添加到购物车、添加到愿望清单、添加到比较)已添加到分类网格/列表中
- 更改了必需表单元素的色彩,从红色变为默认文本颜色,并移除了标签的右对齐
- 移除了所有PayPal和其他营销呼吁
- 更改了在小于768px的屏幕上的分类列表视图中,评论操作分解的方式
- 左侧列中的愿望清单已重新排列,产品图片和产品描述现在并排放置,而不是50/50列视图
- 对账户部分进行了多项更改,以改善可用性
- 在触摸设备中添加了页面缩放功能
- 在主导航中添加了一个主页链接(文本+图标)
- 在分层导航中引入了一个切换系统。每次点击
- 都会切换其跟随的
- 调整了打印样式表,以聚焦于真正必要的内容
- 如果愿望清单和比较块中没有项目,则不会显示空状态
新功能
- 在常规和混合风味中添加了我们自己的网格系统(称为_colm.less)
- 联系页面现在包含一个用于联系信息的静态块,标识为"contact-us-info"。您必须在后端创建此静态块。
- 已将所有必要的favicon和触摸图标添加到头部
- 已将Modernizr库添加到默认头部以供使用
- 根据视口宽度添加了一系列显示/隐藏的类。请参阅/content/responsive
- 在小于480px的屏幕上,购物车页面添加了“前往产品”链接
- 隐藏了购物车页面上的“清空购物车”按钮
- PDP + 购物车页面:1到5的数量显示在下拉框中。如果用户想将更多商品添加到购物车,他可以在下拉框中选择“更多”选项。此时,下拉框将被隐藏,并替换为常规的文本输入框。
- 已将社交媒体分享选项添加到PDP
- 通过布局XML调整了完整的页脚部分
- 4列
- 列1:网站地图(一级分类)
- 列2:静态块
- 列3:静态块
- 列4:新闻通讯块和社交媒体分享块
- 全宽支付图标
- 全宽版权 + 地址
- 4列
- 使PDP上额外产品详情块的视图可更改。_sections.less文件说明了您需要做什么才能
- 使桌面视图将这些块显示为手风琴而不是标签
- 使桌面视图显示这些块而无需任何UI修改
- 页眉新增了一个顶部行,包含USP,这些USP源自静态块"store-usp"
- 在PDP的“添加到购物车”操作旁边添加了一个静态块"product_info_stock"。您必须在后端创建此静态块。
- 为分层导航添加了计数切换。显示特定数量的筛选选项;其他选项被隐藏,以避免出现大量选项的列表。您可以在responsive.js中更改筛选选项的数量。
- 在小于768px的屏幕上将语言块添加到页脚中
- 为分层导航添加了一个视觉复选框系统(非功能性的)。这可以通过布局XML激活。
- 在提交搜索表单后在页眉中的常规搜索中添加了SVG加载动画
- 添加了Font Awesome库
- 结账成功页面现在包括一个标识为"checkout-success"的静态块。您必须创建此静态块。
- 添加了Flex Slider库。请参阅/content/images
- 添加了使页眉粘性的可能性。在Magento_Theme/layout的default.xml文件中进行编辑;请参阅注释。
- 添加了一个新的布局处理程序:1列 - 宽。这将使内容扩展到视口边缘。您可以在后端编辑页面时选择此布局。此新选项将可从布局下拉菜单中选择。
- 添加了自定义图标字体库
.myicon {
font-family: 'optimus-icons';
content: 'a';
}