1

I want to pass the data from model file to knockout.js in Magento2.

My Code:

Model file:

<?php
namespace Amy\MyPackage\Model\Total\Quote;
/**
* Class Custom
* @package Mageplaza\HelloWorld\Model\Total\Quote
*/
class Package extends \Magento\Quote\Model\Quote\Address\Total\AbstractTotal
{
   /**
    * @var \Magento\Framework\Pricing\PriceCurrencyInterface
    */
   protected $_priceCurrency;
   /**
    * Custom constructor.
    * @param \Magento\Framework\Pricing\PriceCurrencyInterface $priceCurrency
    */
   public function __construct(
       \Magento\Framework\Pricing\PriceCurrencyInterface $priceCurrency
   ){
       $this->_priceCurrency = $priceCurrency;
   }
   /**
    * @param \Magento\Quote\Model\Quote $quote
    * @param \Magento\Quote\Api\Data\ShippingAssignmentInterface $shippingAssignment
    * @param \Magento\Quote\Model\Quote\Address\Total $total
    * @return $this|bool
    */
   public function collect(
       \Magento\Quote\Model\Quote $quote,
       \Magento\Quote\Api\Data\ShippingAssignmentInterface $shippingAssignment,
       \Magento\Quote\Model\Quote\Address\Total $total
   )
   {
       parent::collect($quote, $shippingAssignment, $total);

          $objectManager      = \Magento\Framework\App\ObjectManager::getInstance();        
          $customerSession    = $objectManager->get('\Magento\Customer\Model\Session');  
          $customerId         = $customerSession->getCustomer()->getId(); 
          $customerPackageId  = $customerSession->getCustomer()->getPackagePercentage(); 

          return $customerPackageId;

   }
}

js file:

define(
   [
       'jquery',
       'Magento_Checkout/js/view/summary/abstract-total'
   ],
   function ($,Component) {
       "use strict";
       return Component.extend({
           defaults: {
               template: 'Amy_MyPackage/checkout/summary/discount'
           },
           isDisplayedDiscount : function(){
               return true;
           },
           getDiscount : function(){
               return customerPackageId;
           }
       });
   }
);

HTML file:(binding the data)

<!-- ko if: isDisplayedDiscount() -->
<tr class="totals discount excl">
   <th class="mark" colspan="1" scope="row" data-bind="text: discount"></th>
   <td class="amount">
       <span class="price" data-bind="text: getDiscount(), attr: {'data-th': discount}"></span>
   </td>
</tr>
<!-- /ko -->

As I am new to knockoutjs, please help me

Any help would be appreciated.

0

Check the below code for your reference.

Pass your collection/data through the config variable and get it when your component initialize.

<?php
    $collection = 'Store collection in this variable and pass on customCollection variable';
?>

<div id="component-Id" data-bind="scope:'customComponent'">
<script type="text/x-magento-init">
    {
        "#component-Id": {
            "Magento_Ui/js/core/app": {
               "customComponent": {
                    "ko": {
                        "component": "vendor_module/js/YourJs",
                        "template" : "vendor_module/YourTemplate",
                        "customCollection": <?= /* @escapeNotVerified */ $collection ?>
                    }
                }
            }
        }
    }
    </script>
</div>

YourJs.js

define(['uiComponent', 'ko', 'jquery'], function (Component, ko, jquery) {

    return Component.extend({
        initialize: function (config) {
            var self = this;
            this._super();
            var yourCollection = config.customCollection;
            console.log(yourCollection);
        },
});

I Hope it'll help you.

2
  • Here, I don't have any phtml file to pass the collection through the config variable, So what should I need to do in this case. – Amy Feb 10 '20 at 7:06
  • If you want to pass collection then you need to call like the above example. – Mayank-Dolphin Feb 10 '20 at 7:14

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.