Question

我遇到了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>

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

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

1 个答案: