1

I'm trying to add dynamic checkout button title in minicart using knockout js. Button title will be configured in admin configs. I configured in minicart.js But I dont know how to use/call in template file. Below is my code,

Magento2\vendor\xxxx\yyyyy\view\frontend\web\js\minicart.js

 return Component.extend({
            shoppingCartUrl: window.checkout.shoppingCartUrl,
            maxItemsToDisplay: window.checkout.maxItemsToDisplay,
            checkoutNowUrl: window.checkout.shoppingCartUrl+'?checkoutnow=1',
            proceedToCheckoutUrl: window.checkout.checkoutUrl,
            checkoutNowTitle: window.checkoutConfig.payment.ccform.checkoutnowTitle,
            cart: {},

Magento2\vendor\xxxx\yyy\view\frontend\web\template\minicart\content.html

<button 
                        id="checkout-now"
                        type="button"
                        class="action primary checkout"
                        data-action="close"
                        data-bind="attr: {href: checkoutNowUrl}"
                        translate="data-bind='attr: {href: checkoutNowTitle}'"
                />

The checkoutNowUrl is rendering properly. The title is rendered from translate="data-bind='attr: {href: checkoutNowTitle}'"; I tried with all possibilities, but nothing is working. Any help will be appreciated

1

Try to use the title attribute and the text data-binding, like this:

<button 
    id="checkout-now"
    type="button"
    class="action primary checkout"
    data-action="close"
    data-bind="attr: {href: checkoutNowUrl, title: checkoutNowTitle}, text: checkoutNowTitle"
/>

Here is example from the Magento_Authorizenet module:

app/code/Magento/Authorizenet/view/frontend/web/template/payment/authorizenet-directpost.html

<button data-role="review-save"
    type="submit"
    data-bind="
    attr: {title: $t('Place Order')},
    enable: (getCode() == isChecked()),
    click: placeOrder,
    css: {disabled: !isPlaceOrderActionAllowed()}
    "
    class="action primary checkout"
    disabled>
    <span data-bind="i18n: 'Place Order'"></span>
</button>

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.