5

My site is a market place site where vendors(sellers can sell their product).

Now i want to customize the to group items in cart by each vendor like this: http://prntscr.com/hmsam6

checkout_index_index.xml

<item name="cart_groups" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-groups</item>
<item name="children" xsi:type="array">
    <item name="cart_items" xsi:type="array">
        <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart_groups/cart-items</item>
        <item name="children" xsi:type="array">
            <item name="details" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item>
                <item name="children" xsi:type="array">
                    <item name="thumbnail" xsi:type="array">
                        <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
                        <item name="displayArea" xsi:type="string">before_details</item>
                    </item>
                    <item name="subtotal" xsi:type="array">
                        <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
                        <item name="displayArea" xsi:type="string">after_details</item>
                    </item>
                </item>
            </item>
        </item>
    </item>
</item>

cart-group.js

define([
'ko',
'Magento_Checkout/js/model/totals',
'uiComponent',
'Magento_Checkout/js/model/step-navigator',
'Magento_Checkout/js/model/quote'], function (ko, totals, Component, stepNavigator, quote) {
'use strict';

return Component.extend({
    defaults: {
        template: 'Magento_Checkout/summary/cart-groups'
    },
    groups: window.checkoutConfig.quoteItemData,
    getGroups:function(){
        var tempGroups = this.groups;
        var arr = Object.keys(tempGroups).map(function (key) { return tempGroups[key]; });

        return arr;
    },
    /**
     * Returns bool value for items block state (expanded or not)
     *
     * @returns {*|Boolean}
     */
    isItemsBlockExpanded: function () {
        return quote.isVirtual() || stepNavigator.isProcessed('shipping');
    },
    /**
     * Returns cart items qty
     *
     * @returns {Number}
     */
    getItemsQty: function () {
        return parseFloat(this.totals['items_qty']);
    },

    /**
     * Returns count of cart line items
     *
     * @returns {Number}
     */
    getCartLineItemsCount: function () {
        return parseInt(totals.getItems()().length, 10);
    },
});});

cart-group.html

<div class="block items-in-cart"
 data-bind="mageInit: {'collapsible':{'openedState': 'active', 'active': isItemsBlockExpanded()}}">
<div class="title" data-role="title">
    <strong role="heading">
        <translate args="'Item in Cart'" if="getCartLineItemsCount() === 1"/>
        <translate args="'Items in Cart'" if="getCartLineItemsCount() > 1"/>
    </strong>
</div>
<div class="content minicart-items" data-role="content">
    <div class="minicart-items-wrapper overflowed">
        <each args="getGroups()">
            <p class="checkout-vendor-shop-name" data-bind="text: vendor_shop_name"></p>
            <!-- ko foreach: $parent.elems() -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- /ko -->
        </each>
    </div>
</div>

The problem is here:

            <each args="getGroups()">
            <p class="checkout-vendor-shop-name" data-bind="text: vendor_shop_name"></p>
            <!-- ko foreach: $parent.elems() -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- /ko -->
        </each>

How can i pass data to child template with each data in this loop: getGroups() array. Right now it is all the data in quote, and it is duplicated 2 times

  • Yes. Magento 2.2.x. But it is related to knockoutjs, which i am not familiar with. Can you give me some hint to go ? – Toàn Tam Dec 13 '17 at 5:59
  • have you fond solution? – Abdul Jan 25 '18 at 5:55
  • @ToànTam have you found any solution? – user00247 Dec 10 '18 at 7:33
0

https://stackoverflow.com/questions/20430976/can-i-pass-a-variable-in-a-template-binding

So something like this:

<div data-bind="foreach: getGroups">
    <p class="checkout-vendor-shop-name" data-bind="text: vendor_shop_name"></p>
    <!-- ko foreach: $parent.elems() -->
        <!-- ko template: { name: getTemplate(), templateOptions: {myvar: $data} } --><!-- /ko -->
    <!-- /ko -->
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.