2

I want to add a custom UI component template on the cart page. The data is in JSON format and wants to bind forach to display a list of data.

data like as

{'name':'5% discount','description':'5% off on purchase','coupon':'WINTEROFF5'},{'name':'15% off','description':'15% off auto-generated coupons','coupon':'WINTEROFF15'}

following error as I got

Uncaught TypeError: Unable to process binding "foreach: function(){return { data:getCouponList(),as:'coupon'} }"

1

I assume you are using a custom module name "Compnay_MyModule"

Step 1) app/code/Compnay/MyModule/view/frontend/layout/checkout_cart_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>      
        <referenceBlock name="checkout.cart.shipping">                          
            <arguments>                           
                 <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="block-summary" xsi:type="array">                                                
                            <item name="children" xsi:type="array">
                        <item name="config" xsi:type="array">                        
                                   <item name="component"  xsi:type="string">Company_MyModule/js/view/cart/myitems</item>                        
                                      <item name="sortOrder" xsi:type="string">3</item>
                                 </item>
                             </item>
                       </item> 
                    </item>
                </argument>
            </arguments>
        </referenceBlock>        
    </body>
</page>

Step 2) /app/code/Compnay/MyModule/view/frontend/web/js/view/cart/myitems.js

define([
'jquery',
'uiComponent',
'ko

'
    ], function($,Component, ko) {


        var itemList = ko.observableArray();   
        return Component.extend({   
             defaults: {
                template: 'Company_MyModule/myList'
             },
             title:'My Items List',      
             itemList:itemList,          
             initialize: function(){
                 this._super(); 
                 this.populateMyItems();             
                 return this;
             },
             populateMyItems: function(){
                 var self =  this;               
                 this.itemList([
                     {'name':'5% discount','description':'5% off on purchase','coupon':'WINTEROFF5'},
                     {'name':'15% off','description':'15% off auto-generated coupons','coupon':'WINTEROFF15'}
                 ]);            
             }       
        });

    });

Step 3) /app/code/Compnay/MyModule/view/frontend/web/template/myList.html

<h2 data-bind="text: title"></h2>
<table>
  <thead>
      <tr>
          <th>#</th>
          <th>Name</th>
          <th>Description</th>        
      </tr>
  </thead>
   <tbody data-bind="foreach: itemList">
      <tr>
          <td data-bind="text: $index"></td>
          <td data-bind="text: $data.name"></td>
          <td data-bind="text: $data.description"></td>
      </tr>             
  </tbody>
</table>

== Demo ====

enter image description here

|improve this answer|||||
0

First you should check template (html) and your component (js) Post your html bind here will be easier for know what exactly problem

The common case foreach in ko html

coupon.html

<!-- ko foreach: { data: getCouponList(), as: 'coupon' } -->
    <span class="coupon-name" data-bind="text: coupon.name"></span>
<!-- /ko -->

in your component (js) should have function getCouponList

|improve this answer|||||
  • tried this but not working – Shailesh Katarmal Dec 26 '19 at 11:08
  • post/update your snippet where you binding will be helpful for other can help you – mrtuvn Dec 26 '19 at 11:09

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.