Ttdfjt

Is there an academic word that means "to split hairs over"?

Can only the master initiate communication in SPI whereas in I2C the slave can also initiate the communication?

How about space ziplines

Wireless headphones interfere with Wi-Fi signal on laptop

A case where Bishop for knight isn't a good trade

How to cope with regret and shame about not fully utilizing opportunities during PhD?

Why are BJTs common in output stages of power amplifiers?

Was the dragon prowess intentionally downplayed in S08E04?

complicated arrows in flowcharts

Unexpected Netflix account registered to my Gmail address - any way it could be a hack attempt?

Under what charges was this character executed in Game of Thrones, The Bells?

How to make a not so good looking person more appealing?

Formal Definition of Dot Product

Motorola 6845 and bitwise graphics

Why didn't the Avengers use this object earlier?

Smooth function that vanishes only on unit cube

Why is it harder to turn a motor/generator with shorted terminals?

How do I adjust encounters to challenge my lycanthrope players without negating their cool new abilities?

How to redirect stdout to a file, and stdout+stderr to another one?

Were any of the books mentioned in this scene from the movie Hackers real?

What is this old US Air Force plane?

Alias for root of a polynomial

Why was my Canon Speedlite 600EX triggering other flashes?

Were any toxic metals used in the International Space Station?

Magento2 custom Knockout binding

Knockout JS custom scope bindingMagento 2: Minicart Failed to load the “Magento_SalesRule/js/view/payment/discount” componentWorking of discount coupons on the checkout page in Magento 2.2.2Magento 2 Get Order Details in Block _toHTML() for redirect payment gateway?mageInit KO binding not working for a custom jQuery widgetMagento 2 How to bind knockout event on ajax html responseCan't validate Post Code on checkout pageMagento Checkout Stuck: [ERROR] Failed to load the “StoreCredit_Discount/js/view/checkout/discountform” componentMagento 2:External js at checkout loading issueMagento 2: i need update order summary when click custom option payment method checkmo

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

2

I am working on a customization of the checkout page in M2, in particular I am trying to add to the 'discount' section of the page. In this part of the page I need to call a third party javascript library once the html template has loaded.

I have looked into knockout lifecycle events, however they are unavailable, because they are 3.5.0, and KO version in M 2.3.1 is 3.4.2.

Now I am looking into adding a custom binding, and hoping to add the call to the third party lib in the init method.

My code looks roughly like this:

/app/code/Company/Module/view/frontend/web/js/view/payment/discount.js

define([
 'jquery',
 'ko',
 'uiComponent',
 'Magento_Checkout/js/model/quote',
 'Magento_SalesRule/js/action/set-coupon-code',
 'Magento_SalesRule/js/action/cancel-coupon',
 'certificateInfo',
 "setCertificateInfo",
 "cancelCertificateInfo",
 'Magento_Checkout/js/model/error-processor',
 'Magento_SalesRule/js/model/payment/discount-messages',
], function ($, ko, Component, quote, setCouponCodeAction, cancelCouponAction, certificateInfo, setCertificateInfo, cancelCertificateInfo,errorProcessor, messageContainer) 

 ko.bindingHandlers.myBinding = 
 init: function(element, valueAccessor, allBindingsAccessor, data, context) 
 // Call third party lib here
 
 
);

/app/code/Company/Module/view/frontend/web/template/payment/discount.html

<p data-bind="myBinding: blah">
 <!-- Markup that needs to have 3rd party call to work... -->
</p>

All that is happening is an error on the page

[ERROR] Failed to load the "Company_Module/js/view/payment/discount" component.

Any idea what I am doing wrong with custom binding, or a different way to achieve my goal?

magento2 knockoutjs

share|improve this question

asked May 9 at 20:56

quickshiftinquickshiftin

9831025

add a comment | 

2

I am working on a customization of the checkout page in M2, in particular I am trying to add to the 'discount' section of the page. In this part of the page I need to call a third party javascript library once the html template has loaded.

I have looked into knockout lifecycle events, however they are unavailable, because they are 3.5.0, and KO version in M 2.3.1 is 3.4.2.

Now I am looking into adding a custom binding, and hoping to add the call to the third party lib in the init method.

My code looks roughly like this:

/app/code/Company/Module/view/frontend/web/js/view/payment/discount.js

define([
 'jquery',
 'ko',
 'uiComponent',
 'Magento_Checkout/js/model/quote',
 'Magento_SalesRule/js/action/set-coupon-code',
 'Magento_SalesRule/js/action/cancel-coupon',
 'certificateInfo',
 "setCertificateInfo",
 "cancelCertificateInfo",
 'Magento_Checkout/js/model/error-processor',
 'Magento_SalesRule/js/model/payment/discount-messages',
], function ($, ko, Component, quote, setCouponCodeAction, cancelCouponAction, certificateInfo, setCertificateInfo, cancelCertificateInfo,errorProcessor, messageContainer) 

 ko.bindingHandlers.myBinding = 
 init: function(element, valueAccessor, allBindingsAccessor, data, context) 
 // Call third party lib here
 
 
);

/app/code/Company/Module/view/frontend/web/template/payment/discount.html

<p data-bind="myBinding: blah">
 <!-- Markup that needs to have 3rd party call to work... -->
</p>

All that is happening is an error on the page

[ERROR] Failed to load the "Company_Module/js/view/payment/discount" component.

Any idea what I am doing wrong with custom binding, or a different way to achieve my goal?

magento2 knockoutjs

share|improve this question

asked May 9 at 20:56

quickshiftinquickshiftin

9831025

add a comment | 

I am working on a customization of the checkout page in M2, in particular I am trying to add to the 'discount' section of the page. In this part of the page I need to call a third party javascript library once the html template has loaded.

I have looked into knockout lifecycle events, however they are unavailable, because they are 3.5.0, and KO version in M 2.3.1 is 3.4.2.

Now I am looking into adding a custom binding, and hoping to add the call to the third party lib in the init method.

My code looks roughly like this:

/app/code/Company/Module/view/frontend/web/js/view/payment/discount.js

define([
 'jquery',
 'ko',
 'uiComponent',
 'Magento_Checkout/js/model/quote',
 'Magento_SalesRule/js/action/set-coupon-code',
 'Magento_SalesRule/js/action/cancel-coupon',
 'certificateInfo',
 "setCertificateInfo",
 "cancelCertificateInfo",
 'Magento_Checkout/js/model/error-processor',
 'Magento_SalesRule/js/model/payment/discount-messages',
], function ($, ko, Component, quote, setCouponCodeAction, cancelCouponAction, certificateInfo, setCertificateInfo, cancelCertificateInfo,errorProcessor, messageContainer) 

 ko.bindingHandlers.myBinding = 
 init: function(element, valueAccessor, allBindingsAccessor, data, context) 
 // Call third party lib here
 
 
);

/app/code/Company/Module/view/frontend/web/template/payment/discount.html

<p data-bind="myBinding: blah">
 <!-- Markup that needs to have 3rd party call to work... -->
</p>

All that is happening is an error on the page

[ERROR] Failed to load the "Company_Module/js/view/payment/discount" component.

Any idea what I am doing wrong with custom binding, or a different way to achieve my goal?

magento2 knockoutjs

share|improve this question

asked May 9 at 20:56

quickshiftinquickshiftin

9831025

define([
 'jquery',
 'ko',
 'uiComponent',
 'Magento_Checkout/js/model/quote',
 'Magento_SalesRule/js/action/set-coupon-code',
 'Magento_SalesRule/js/action/cancel-coupon',
 'certificateInfo',
 "setCertificateInfo",
 "cancelCertificateInfo",
 'Magento_Checkout/js/model/error-processor',
 'Magento_SalesRule/js/model/payment/discount-messages',
], function ($, ko, Component, quote, setCouponCodeAction, cancelCouponAction, certificateInfo, setCertificateInfo, cancelCertificateInfo,errorProcessor, messageContainer) 

 ko.bindingHandlers.myBinding = 
 init: function(element, valueAccessor, allBindingsAccessor, data, context) 
 // Call third party lib here
 
 
);

<p data-bind="myBinding: blah">
 <!-- Markup that needs to have 3rd party call to work... -->
</p>

share|improve this question

asked May 9 at 20:56

quickshiftinquickshiftin

9831025

share|improve this question

asked May 9 at 20:56

quickshiftinquickshiftin

9831025

asked May 9 at 20:56

quickshiftinquickshiftin

9831025

asked May 9 at 20:56

quickshiftinquickshiftin

9831025

1 Answer
1

active

oldest

votes

1

I think custom Knockout bindings for Magento is Your answer.

Usage example:

<div afterRender="function (target, viewModel) 
 console.log('Rendered element:', target);
 console.log('Associated view model:', viewModel);
 console.log(this === viewModel);
"></div>

Source:
https://devdocs.magento.com/guides/v2.3/ui_comp_guide/concepts/knockout-bindings.html

Useful links:
https://community.magento.com/t5/Magento-2-x-PWA-Theming-Layout/How-to-call-function-after-rendering-a-knockout-js-template/m-p/58781#M925

share|improve this answer

answered May 9 at 21:16

BartZalasBartZalas

629412

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  YES!!!!! I spent over 2 hours messing with that - thank you sir!
  
  – quickshiftin
  May 10 at 1:00
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f274068%2fmagento2-custom-knockout-binding%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

I think custom Knockout bindings for Magento is Your answer.

Usage example:

<div afterRender="function (target, viewModel) 
 console.log('Rendered element:', target);
 console.log('Associated view model:', viewModel);
 console.log(this === viewModel);
"></div>

Source:
https://devdocs.magento.com/guides/v2.3/ui_comp_guide/concepts/knockout-bindings.html

Useful links:
https://community.magento.com/t5/Magento-2-x-PWA-Theming-Layout/How-to-call-function-after-rendering-a-knockout-js-template/m-p/58781#M925

share|improve this answer

answered May 9 at 21:16

BartZalasBartZalas

629412

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  YES!!!!! I spent over 2 hours messing with that - thank you sir!
  
  – quickshiftin
  May 10 at 1:00
  

  
  
  
  

add a comment | 

1

I think custom Knockout bindings for Magento is Your answer.

Usage example:

<div afterRender="function (target, viewModel) 
 console.log('Rendered element:', target);
 console.log('Associated view model:', viewModel);
 console.log(this === viewModel);
"></div>

Source:
https://devdocs.magento.com/guides/v2.3/ui_comp_guide/concepts/knockout-bindings.html

Useful links:
https://community.magento.com/t5/Magento-2-x-PWA-Theming-Layout/How-to-call-function-after-rendering-a-knockout-js-template/m-p/58781#M925

share|improve this answer

answered May 9 at 21:16

BartZalasBartZalas

629412

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  YES!!!!! I spent over 2 hours messing with that - thank you sir!
  
  – quickshiftin
  May 10 at 1:00
  

  
  
  
  

add a comment | 

I think custom Knockout bindings for Magento is Your answer.

Usage example:

<div afterRender="function (target, viewModel) 
 console.log('Rendered element:', target);
 console.log('Associated view model:', viewModel);
 console.log(this === viewModel);
"></div>

Source:
https://devdocs.magento.com/guides/v2.3/ui_comp_guide/concepts/knockout-bindings.html

Useful links:
https://community.magento.com/t5/Magento-2-x-PWA-Theming-Layout/How-to-call-function-after-rendering-a-knockout-js-template/m-p/58781#M925

share|improve this answer

answered May 9 at 21:16

BartZalasBartZalas

629412

<div afterRender="function (target, viewModel) 
 console.log('Rendered element:', target);
 console.log('Associated view model:', viewModel);
 console.log(this === viewModel);
"></div>

share|improve this answer

answered May 9 at 21:16

BartZalasBartZalas

629412

answered May 9 at 21:16

BartZalasBartZalas

629412

answered May 9 at 21:16

BartZalasBartZalas

629412