Magento2: How to pass data from model file to knockout.js?
-
08-04-2021 - |
Question
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.
No correct solution
OTHER TIPS
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.
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange