I'm trying to send an array of data from a Knockout Js component to a JS file so I can do an ajax request there.
Here is what I'm doing:
phtml:
<div class="container">
<div class="notification">
<div id="portability-conversion" data-bind="scope:'portabilityconversion'">
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
"#portability-conversion": {
"Magento_Ui/js/core/app": {
"components": {
"portabilityconversion": {
"component": "Vendor_GetQuote/js/quote",
"quote_data": <?php /* @escapeNotVerified */ echo $data ?>,
"employee_quote": <?php /* @escapeNotVerified */ echo $employee ?>
}
}
}
}
}
</script>
</div>
</div>
<div class="buttons">
<button class="button is-link common-place-order" style="margin:auto">Add to Cart</button>
</div>
</div>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"ajaxrequest": {
"component": "Vendor_GetQuote/js/ajax-request"
}
}
}
}
}
</script>
On quote.js I work with data dinamically, so I can update and push this data to an observable array called data.
define(['jquery', 'uiComponent', 'ko'], function ($, Component, ko) {
'use strict';
return Component.extend({
defaults: {
template: 'Transom_GetQuote/portability',
template2: 'Transom_GetQuote/conversion-life',
data: ko.observableArray([]),
employee: ko.observableArray([])
},
initialize: function () {
this._super();
this.employee.push({
EMP_NOM:this.employee_quote.EMP_NOM,
EE_basic_amount_original:this.employee_quote.EE_basic_amount_original,
EE_basic_amount:this.employee_quote.EE_basic_amount,
EE_supp_amount:this.employee_quote.EE_supp_amount,
EE_supp_amount_original:this.employee_quote.EE_supp_amount_original,
})
console.log(this.quote_data);
console.log(this.employee_quote);
var coverageData = function (name, value){
this.Name = name;
this.Value = value;
};
this.coverages = ko.observableArray([
new coverageData("100%",1),
new coverageData("75%",0.75),
new coverageData("50%",0.50),
]);
this.child_basic_coverage = ko.observable();
this.child_supp_coverage = ko.observable();
this.employee_basic_coverage = ko.observable();
this.employee_supp_coverage = ko.observable();
var self = this;
self.basicChange = function() {
if (typeof this.EMP_NOM !== 'undefined') {
this.EE_basic_amount = this.EE_basic_amount_original*self.employee_basic_coverage();
self.employee([]);
self.employee(this);
}
else if(typeof this.SP_FIRST_NAME !== 'undefined'){
alert("It's an Spouse");
}
else if(typeof this.child_FIRST_NAME !== 'undefined'){
alert("It's a Children");
}
}
self.suppChange = function() {
if (typeof this.EMP_NOM !== 'undefined') {
this.EE_supp_amount = this.EE_supp_amount_original*self.employee_supp_coverage();
self.employee([]);
self.employee(this);
}
else if(typeof this.SP_FIRST_NAME !== 'undefined'){
alert("It's an Spouse SUPP");
}
else if(typeof this.child_FIRST_NAME !== 'undefined'){
alert("It's a Children SUPP");
}
}
// this.children = ko.observableArray([]);
this.displayChildrenTable = ko.observable(false);
// this.spouse = ko.observableArray([]);
this.loadChildren(this.quote_data[0].childs) == true ? this.displayChildrenTable(true) : this.displayChildrenTable(false);
},
loadChildren: function (children_data) {
if(children_data.length > 0){
for(var i = 0; i < children_data.length; i++){
this.data.push(children_data[i]);
}
return true;
}
else{
return false;
}
},
getChildren: function () {
return this.quote_data[0].childs;
},
getSpouse: function () {
return this.quote_data[0].wife;
},
getEmployee: function () {
return this.employee;
}
});
}
);
Finally on ajax-request.js I wan't to get the property data.
define( [ 'jquery', 'ko', 'uiComponent', 'Vendor_GetQuote/js/quote' ], function( $, ko, Component, portconv ) { 'use strict';
$(document).on('click', '.common-place-order', function (event) {
var data = portconv.call().data; //here quote.js component is loaded
console.log(data);
});
}
);
Result:
Error, because knockout js quote.js is trying to load everything from the beginning, all data. So logically it's null because I'm not sending that data again to that component.
I don't know how to deal with this, I'm not very skilled on Magento frontend. I was thinking in not creating a knockout js, but just functions for returning data, however it will be the same result, because data is empty.
Greetings!