为什么要安装 Elasticsearch?Elasticsearch 是一个实时分布式搜索引擎,能够执行各种类型的搜索。它在您的 Web 服务器上运行,其灵活的特性使其能够搜索各种类型的文档,无论其数据类型如何,包括结构化、非结构化、地理和指标数据类型。通过安装 Elasticsearch,您可以提高电子商务网站搜索查询的性能和准确性。
继续阅读如何在 Magento 2 中安装 ElasticSearch
如何以编程方式将产品添加到购物车
在本文中,我们将向您展示如何在 Magento 2 中以编程方式将产品添加到购物车。这在您想要向购物车中的商品添加额外数据、添加需要自定义逻辑的产品或只是为购物车添加礼物时最有用。购买您的产品的客户。
继续阅读如何在 Magento 2 - 2022 完整指南中创建日期字段
当需要在上下文中为特定事件选择未知日期或安排某些计划时,主要需要日期字段。它不仅减少了打字错误,而且还标准化了格式。它还通过允许用户简单地选择而不是使用键盘输入来帮助改善用户体验。
在本文中,我们将向您展示如何在 Magento 2 中创建日期字段,尤其是在自定义表单中
继续阅读Magento 2 允许内存耗尽错误
在本文中,我们将了解问题的原因以及如何解决 Magento2 中“允许的内存耗尽错误”的问题。
“allowed memory size of bytes exhausted”错误的原因与内存不足有关。如果您尝试使用比您通过“memory_limit”在 php.ini 文件中指定的更多的 RAM 资源,则会发生错误。
继续阅读Magento 2:向特定客户群免运费
如何在 Magento 2 中创建访问密钥
在本文中,我们将看到访问密钥的详细信息:
获取访问密钥:
在 Magento 市场上创建一个帐户并转到 https://marketplace.magento.com/customer/accessKeys/ 以获取私有和公共访问密钥
在此处创建访问密钥。如果您有访问密钥,则可以使用它们。
现在输入 Username 并 password 开始下载
- 用户名:您的公钥 2fc966a913d4e83b28041eeb3c3b72e5
- 密码:您的私钥。48e05400d17ca1bcb4e693825c45416e
在您的项目中使用您的访问密钥。
如何在静态块 Magento2 中调用时事通讯
在本文中,我们将学习如何在 Magento2 的静态块中调用时事通讯。
- 首先,您需要决定在哪个静态块中显示newsetter。
- 在那个静态块中,像下面这样调用时事通讯。将下面的代码粘贴到该块内。
您需要使用 html 代码选项将此代码放在静态块中。
3.我已经给出了在主页块上显示它的示例。
在主页静态块中,我选择了静态块,在那里我拖了html代码
4.保存并清除缓存。在前端查看您的时事通讯,如下所示:
如何在 Magento 2 中显示最新产品
Magento 2 拥有大量的产品属性,可以让我们过滤状态、新品、creat_at 等产品。但如果店主想在主页上展示数千种产品中的最新产品以增加销量,如何他们应该这样做吗?
查看以下文章,了解如何在 Magento 2 中创建最新产品。
继续阅读自定义 Magento 2 布局插图的分步教程
嗨,大家好, 今天的这篇文章将为您提供如何在实践中进行自定义布局的分步说明,特别是说明 Magento 页面标题中客户帐户链接的布局更改。
我刚刚创建了一个新主题——Bss 主题,它继承自一个空白主题,并且与下图中的风格相似:
我想将客户帐户链接移至下拉列表,如下所示:
要获得上述结果,您需要执行以下步骤:
第 1 步:定义布局块
Bss 主题应用 Luma 主题:使用描述性方法确定模板、布局和样式位置。该文件负责显示文件中指定的标题链接:<Magento_Theme_module_dir>/view/frontend/layout/default.xml:
<container name="header.panel" label="Page Header Panel" htmlTag="div" htmlClass="panel ">
...
<block class="Magento\Framework\View\Element\Html\Links" name="top.links">
<arguments>
<argument name="css_class" xsi:type="string">header links</argument>
</arguments>
</block>
</container>
其他模块使用此块使用referenceBlock将其特定链接添加到标头。
例如:亮度主题
Luma 主题中的客户模块:使用 move top.links 来阻止客户。
<Magento_luma_theme_dir>/Magento_Theme/layout/default.xml
< referenceBlock name="header.links">
<block class="Magento\Customer\Block\Account\Customer" name="customer" template="account/customer.phtml" before="-"/>
...
< /referenceBlock >
...
< move element="top.links" destination="customer"/>
...
在下拉菜单外的 Luma 主题文件中,添加了一个新块 - header.links。
<Magento_luma_theme_dir>/Magento_Theme/layout/default.xml
<referenceContainer name="header.panel">
<block class="Magento\Framework\View\Element\Html\Links" name="header.links">
<arguments>
<argument name="css_class" xsi:type="string">header links</argument>
</arguments>
</block>
</referenceContainer>
第 2 步:定义模板
与上一步一样,Bss 主题使用位于目录中的下拉菜单来识别模板:
<Magento_Customer_module_dir>/view/frontend/templates/account/customer.phtml
<?php if($block->customerLoggedIn()): ?>
<li class="customer-welcome">
<span class="customer-name"
role="link"
tabindex="0"
data-mage-init ='{"dropdown":{}}'
data-toggle="dropdown"
data-trigger-keypress-button="true"
data-bind="scope: 'customer'">
<span data-bind="text: customer().fullname"></span>
<button type="button"
class="action switch"
tabindex="-1"
data-action="customer-menu-toggle">
<span><?php /* @escapeNotVerified */ echo __('Change')?></span>
</button>
</span>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"customer": {
"component": "Magento_Customer/js/view/customer"
}
}
}
}
}
</script>
<?php if($block->getChildHtml()):?>
<div class="customer-menu" data-target="dropdown">
<?php echo $block->getChildHtml();?>
</div>
<?php endif; ?>
</li>
<?php endif; ?>
第 3 步:扩展基本布局以添加块
在 Bss 主题中创建扩展布局文件。
app/design/frontend/Bss/default/Magento_Theme/layout/default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/ page_configuration.xsd">
<body>
<referenceContainer name="header.panel">
<block class="Magento\Framework\View\Element\Html\Links" name="header.links">
<arguments>
<argument name="css_class" xsi:type="string">header links</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>
第 4 步:移动链接
要将链接移动到块 header.links,我们需要将扩展布局文件添加到主题中:
应用程序/设计/前端/Bss/default/Magento_Customer/layout/default.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="header.links">
<block class="Magento\Customer\Block\Account\Customer" name="customer" template="Magento_Customer::account/customer.phtml" before="-"/>
<block class="Magento\Customer\Block\Account\AuthorizationLink" name="authorization-link-login" template="Magento_Customer::account/link/authorization.phtml">
<arguments>
<argument name="sortOrder" xsi:type="number">10</argument>
</arguments>
</block>
</referenceBlock>
<move element="header" destination="header.links" before="-"/>
<move element="register-link" destination="header.links"/>
<move element="top.links" destination="customer"/>
<move element="authorization-link" destination="top.links" after="-"/>
</body>
</page>
接下来,清除缓存并获取结果:
第 5 步:使用 Css 设置下拉菜单样式
在Bss主题的文件夹中,创建文件:app/design/frontend/Bss/default/web/css/source/ _extend.les
//
// Common
// ______________________________________________
& when (@media-common = true) {
.header.panel .header.links {
.customer-welcome + .authorization-link {
display: none;
}
}
}
//
// Mobile
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
.customer-name,
.customer-welcome + .authorization-link {
display: none;
}
}
//
// Desktop
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
.customer-welcome {
.lib-dropdown(
@_toggle-selector: ~'.action.switch ',
@_options-selector: ~'.customer-menu .header.links',
@_dropdown-actions-padding: 0,
@_icon-font-text-hide: true,
@_icon-font-size: 22px,
@_icon -font-line-height:22px,
@_dropdown-list-min-width:160px,
@_dropdown-list-item-hover:transparent,
@_dropdown-list-pointer-position:right,
@_dropdown-list-position-right : 0
);
Li{
a{
.lib-link( @_link
-color: #333,
@_link-text-decoration: none,
@_link-color-visited: #333,
@_link-text-decoration-visited: none,
@_link-color-hover: #333,
@_link-text-decoration-hover:none,
@_link-color-active:#333,
@_link-text-decoration-active:none
);
display: block;
line-height: 1.4;
padding: 8px;
}
}
.action {
&.switch {
background: transparent;
border: none;
}
}
}
}
第 6 步:运行命令行并检查结果
运行命令:
php bin/magento s:up
php bin/magento setup:static-content:deploy -f
重新加载页面并检查结果:
如何在 Magento 2 中添加/删除 JavaScript、CSS、字体
1.在<head>中包含静态资源
在 Magento 2 中使用外部库自定义页面是很常见的,但如果您想使用外部库,则需要添加 JavaScript 和 CSS 文件。
在页面配置文件的 <head> 部分中添加了 JavaScript、CSS 和其他静态文件。<head> 页面的默认视图在 vendor /magento/module-theme/view/frontend/layout/default_head_blocks.xml 中定义。
继续阅读