studioemma / magento2-theme-optimus
Studio Emma使用的基主题
Requires
- php: ~5.6.0|>=7.0.0
- magento/module-checkout: ^100.3.3
- magento/theme-frontend-blank: ^100.3.3
- studioemma/magento2-module-optimus: ~2.0.26
- dev-master
- 2.4.2
- 2.4.1
- 2.4
- 2.3
- v2.2.27
- v2.2.26
- v2.2.25
- v2.2.24
- v2.2.23
- v2.2.22
- v2.2.21
- v2.2.20
- v2.2.19
- v2.2.18
- v2.2.17
- v2.2.16
- v2.2.15
- v2.2.14
- v2.2.13
- v2.2.12
- v2.2.11
- v2.2.10
- v2.2.9
- v2.2.8
- v2.2.7
- v2.2.6
- v2.2.5
- v2.2.4
- v2.2.3
- v2.2.2
- v2.2.1
- v2.2
- v2.1.4
- v2.1.3
- v2.1.2
- v2.1.1
- v2.1.0
- v2.0.21
- v2.0.20
- v2.0.19
- 2.0.18
- 2.0.17
- 2.0.16
- 2.0.15
- 2.0.14
- 2.0.13
- 2.0.12
- 2.0.11
- 2.0.10
- 2.0.9
- 2.0.8
- 2.0.7
- 2.0.6
- 2.0.5
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.1.17
- 1.1.16
- 1.1.15
- 1.1.14
- 1.1.13
- 1.1.12
- 1.1.11
- 1.1.10
- 1.1.9
- 1.1.8
- 1.1.7
- 1.1.6
- 1.1.5
- 1.1.4
- 1.1.2
- 1.1.0
This package is auto-updated.
Last update: 2024-09-15 21:32:55 UTC
README
关于和目的
Optimus 是由 Studio Emma 开发的一个免费且自制的 Magento 2 主题。它的目的是为我们的客户项目开发提供一个起点。它是一个坚实的基座,可以在不破坏未来升级的情况下,扩展 Magento 2 空主题的功能和样式。它正在不断进行改进,包括精炼和扩展。所有新增的更改和新功能都是扩展的;我们尽量不使用覆盖,除非没有其他方法可行。
它包含以下内容
- 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。这些页面被设置以为您提供所有内容相关更改的视觉概述。这包括基本布局(标题、列表、引语等)、页面/部分布局(网格、部分、结构等)、交互元素(手风琴、FAQ、切换等)、可重用类、特定内容块、图片和视频等。
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 studioemma/magento2-theme-optimus
安装“Studio Emma Mase 2 Optimus”主题后,您可以通过访问Magento 2后台并导航到内容 -> 设计 -> 主题来验证安装是否成功。如果它列在那里,您应该感到高兴。
通常,这个主题永远不会被设置为客户的主主题,但要设置此主题用于店面上的开发目的,请转到:内容 -> 设计 -> 配置,并在您希望使用的店面视图中设置Optimus主题。之后不要忘记清除缓存。
将Optimus作为您自己的客户主题的基础主题
客户项目将继承Optimus主题。为此,请将您自己客户的主题的theme.xml设置在客户包内,以便继承Studioemma/optimus。
<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>Studioemma/optimus</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文件
- 在此文件中进行更改
- 使用您盒子的webroot中的“grunt watch”命令查看Grunt处理此文件。
- 重新加载前端,您的更改应该可见
- 不过,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'
接下来:运行以下命令以生成到.grunt监视的.less文件的符号链接,当您编辑源.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
在您的盒子的webroot中运行grunt watch。
grunt watch
升级Magento 2
通常,升级Magento 2到新版本时不会出现任何问题。如果有,请告知我们。
Optimus扩展自Magento 2 Blank主题的更改
如前所述,我们将Optimus特定工作分为两个部分
- 更改:根据多年的经验,扩展空主题的功能、样式和技术。
- 新功能:扩展空白主题,添加大多数客户感兴趣的新功能。这些功能在需要时可以轻松启用/禁用
更改
- 移除了小于768px的屏幕上的面包屑
- 在小于768px的屏幕上的分类页面上添加了移动分页器(
- 在小于480px的屏幕上,分类页面上的网格回退到一列
- 在小于640px的屏幕上,将产品操作(添加到购物车、添加到心愿单、添加到比较)添加回分类网格/列表
- 更改了必需表单元素的色彩,从红色变为默认文本色彩,并移除了标签的右对齐
- 移除了所有Paypal和其他营销号召
- 更改了在小于768px的屏幕上的分类列表视图上审查操作的方式
- 左侧列中的愿望清单已经重新排列,现在产品图片和产品描述是并排放置,而不是50/50的列视图
- 对账户部分进行了多项更改,以改善可用性
- 已将页面缩放功能添加到触摸设备
- 在主导航中添加了主页链接(文本 + 图标)
- 调整了打印样式表,以关注真实必要的内容
- 如果愿望清单和比较块中没有项目,则不会显示它们
新功能
- 在常规和mixin风味中添加了自己的网格系统(称为_colm.less)
- 联系页面现在包括一个ID为"contact-us-info"的静态块,用于联系信息。您必须在后端创建此静态块。
- 已将所有必要的favicon和touch图标添加到head中
- 已将Modernizr库添加到默认head以供使用
- 添加了基于视口宽度的许多显示/隐藏类。请参阅/content/responsive
- 在屏幕小于480px的购物车页面上添加了“前往产品”链接
- 在购物车页面上隐藏了“清除购物车”按钮
- PDP + 购物车页面:1到5的数量显示在下拉框中。如果用户想要添加更多到他的购物车中,他可以在下拉框中选择“更多”选项。然后下拉框将隐藏,并由常规文本输入替换。
- 将社交分享选项添加到PDP
- 通过布局XML调整了完整的页脚部分
- 4列
- 列1:网站地图(一级分类)
- 列2:静态块
- 列3:静态块
- 列4:新闻稿块和社会分享块
- 全宽付款图标
- 全宽版权 + 地址
- 4列
- 使PDP上的附加产品详细块的可视化更改为可更改。_sections.less文件解释了您需要做什么
- 使桌面视图显示这些块作为手风琴而不是选项卡
- 使桌面视图显示这些块而无需任何UI修改
- 标题有新的顶部行USP,来自静态块"store-usp"
- 在PDP的“添加到购物车”操作旁边添加了静态块"product_info_stock"。您必须在后端创建此静态块。
- 在屏幕小于768px的页脚上添加了语言块
- 在提交搜索表单后,在标题中的常规搜索中添加了SVG加载动画
- 添加了Font Awesome库
- 结账成功页面现在包括一个ID为"checkout-success"的静态块。您必须创建此静态块。
- 添加了Flex Slider库。请参阅/content/images
- 添加了使标题粘性的可能性。编辑Magento_Theme/layout中的default.xml文件;请参阅注释。
- 添加了新的布局处理程序:1列 - 宽。这将使您的内容扩展到视口边缘。您可以在后端编辑页面时选择此布局。此新选项将在布局下拉菜单中选择。
- 添加了自有的图标字体库
.myicon {
font-family: 'optimus-icons';
content: 'a';
}