Magento2 主题迷你购物车 KO 模板问题
Magento2 theme mini cart KO templating issue
我遇到了 Magento2 主题迷你购物车 KO 模板问题。
我一直在尝试在我的页眉中创建一个实时迷你购物车下拉菜单,但它的数据呈现有问题。我尝试了 KO 模板,但由于某些原因我的代码不起作用,因此我使用 PHTML 行为添加了购物车项目的数量。
但是 PHTML 行为的问题是我们无法在页面呈现时使用 Magento FPC 缓存来克服。
在启动和更换 KO 迷你手推车方面的任何帮助都非常有帮助。
我在 github 上有可公开访问的代码:https://github.com/OrviSoft-Inc/magento2-bootstrap-theme
上面提到的我的购物车模板如下所示
<?php
$helper = $this->helper('\Magento\Checkout\Helper\Cart');
?>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="right-header" data-mage-init='{"babyTalker": {}}'><a href="/" class="icon-home"><i class="fas fa-home"></i></a><span class="icon-search searchShow"></span><a href="/customer/account/" class="icon-user"></a><a href="/checkout/cart/" class="icon-basket"><span><?php echo $helper->getItemsCount(); ?></span></a></div>
<div class="mini-search-form" id="add_data" style="display:none;">
<form action="/catalogsearch/result" method="get">
<input type="text" name="q" Placeholder="Search"/>
<button class="btn btn-primary mini-search" type="submit">Search</button>
</form>
</div>
<script>
require(['jquery'], function ($) {
$(document).ready(function () {
$('.searchShow').click(function(){
$('#add_data').toggle('slow');
});
});
});
</script>
花了一些时间后,我发现 KO 模板在核心主题的帮助下使用,最终修复是使用以下代码。
<div class="block block-minicart empty"
data-role="dropdownDialog"
data-mage-init='{"dropdownDialog":{
"appendTo":"[data-block=minicart]",
"triggerTarget":".showcart",
"timeout": "2000",
"closeOnMouseLeave": false,
"closeOnEscape": true,
"triggerClass":"active",
"parentClass":"active",
"buttons":[]}}'>
<div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
<?= $block->getChildHtml('minicart.addons') ?>
</div>
注意 data-mage-init 部分。 <!-- ko template: getTemplate() --><!-- /ko -->
部分
加载相关的 js 很有帮助,如下所示。
<script type="text/x-magento-init">
{
"[data-block='minicart']": {
"Magento_Ui/js/core/app": <?= /* @escapeNotVerified */ $block->getJsLayout() ?>
},
"*": {
"Magento_Ui/js/block-loader": "<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
}
}
</script>
我遇到了 Magento2 主题迷你购物车 KO 模板问题。
我一直在尝试在我的页眉中创建一个实时迷你购物车下拉菜单,但它的数据呈现有问题。我尝试了 KO 模板,但由于某些原因我的代码不起作用,因此我使用 PHTML 行为添加了购物车项目的数量。
但是 PHTML 行为的问题是我们无法在页面呈现时使用 Magento FPC 缓存来克服。
在启动和更换 KO 迷你手推车方面的任何帮助都非常有帮助。
我在 github 上有可公开访问的代码:https://github.com/OrviSoft-Inc/magento2-bootstrap-theme
上面提到的我的购物车模板如下所示
<?php
$helper = $this->helper('\Magento\Checkout\Helper\Cart');
?>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="right-header" data-mage-init='{"babyTalker": {}}'><a href="/" class="icon-home"><i class="fas fa-home"></i></a><span class="icon-search searchShow"></span><a href="/customer/account/" class="icon-user"></a><a href="/checkout/cart/" class="icon-basket"><span><?php echo $helper->getItemsCount(); ?></span></a></div>
<div class="mini-search-form" id="add_data" style="display:none;">
<form action="/catalogsearch/result" method="get">
<input type="text" name="q" Placeholder="Search"/>
<button class="btn btn-primary mini-search" type="submit">Search</button>
</form>
</div>
<script>
require(['jquery'], function ($) {
$(document).ready(function () {
$('.searchShow').click(function(){
$('#add_data').toggle('slow');
});
});
});
</script>
花了一些时间后,我发现 KO 模板在核心主题的帮助下使用,最终修复是使用以下代码。
<div class="block block-minicart empty"
data-role="dropdownDialog"
data-mage-init='{"dropdownDialog":{
"appendTo":"[data-block=minicart]",
"triggerTarget":".showcart",
"timeout": "2000",
"closeOnMouseLeave": false,
"closeOnEscape": true,
"triggerClass":"active",
"parentClass":"active",
"buttons":[]}}'>
<div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
<?= $block->getChildHtml('minicart.addons') ?>
</div>
注意 data-mage-init 部分。 <!-- ko template: getTemplate() --><!-- /ko -->
部分
加载相关的 js 很有帮助,如下所示。
<script type="text/x-magento-init">
{
"[data-block='minicart']": {
"Magento_Ui/js/core/app": <?= /* @escapeNotVerified */ $block->getJsLayout() ?>
},
"*": {
"Magento_Ui/js/block-loader": "<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
}
}
</script>