Magento2 主题迷你购物车 KO 模板问题答案

【问题标题】：Magento2 theme mini cart KO templating issueMagento2 主题迷你购物车 KO 模板问题
【发布时间】：2019-03-18 04:26:38
【问题描述】：

我遇到了 Magento2 主题迷你购物车 KO 模板问题。

我一直在尝试在我的标题中创建一个实时迷你购物车下拉菜单，但它的数据呈现存在问题。我尝试了 KO 模板，但由于某些原因我的代码不起作用，因此我使用 PHTML 行为添加了购物车项目的数量。

但是 PHTML 行为的问题是我们无法在页面呈现时使用 Magento FPC 缓存来克服。

在启动和更换 KO 迷你推车方面的任何帮助都非常有帮助。

我在 github 上有可以公开访问的代码：https://github.com/OrviSoft-Inc/magento2-bootstrap-theme

我正在寻找的修复或替换在这里：https://github.com/OrviSoft-Inc/magento2-bootstrap-theme/blob/master/app/design/frontend/MyTheme/default/Magento_Theme/templates/cart.phtml

上面提到的我的购物车模板看起来像这样

<?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>

【问题讨论】：

标签： magento knockout.js requirejs magento2 minicart

【解决方案1】：

花了一些时间，我发现在核心主题的帮助下可以使用 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 部分。还有 部分

并且比加载相关的 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>

【讨论】：