Magento – How to add an IMG in knockout html template

knockoutjslayoutmagento2template

I am trying to show an image in the knockout template but I could not. This is what I have:

    <img data-bind="attr: {'src': getImage()}, src: getImage()" />
    <p data-bind="html: getInstructions()"></p>

getInstructions do show the instructions but image is not shown. Both variables are correctly configured in backend.

This is configuration provider:

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Desytec\Transbank\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\Escaper;
use Magento\Payment\Helper\Data as PaymentHelper;

class WebpayConfigProvider implements ConfigProviderInterface
{
    /**
     * @var string[]
     */
    protected $methodCode = Webpay::CODE;

    /**
     * @var Webpay
     */
    protected $method;

    /**
     * @var Escaper
     */
    protected $escaper;

    /**
     * @param PaymentHelper $paymentHelper
     * @param Escaper $escaper
     */
    public function __construct(
        PaymentHelper $paymentHelper,
        Escaper $escaper
    ) {
        $this->escaper = $escaper;
        $this->method = $paymentHelper->getMethodInstance($this->methodCode);
    }

    /**
     * {@inheritdoc}
     */
    public function getConfig()
    {
        $config = [];
        if ($this->method->isAvailable()) {
            $config['payment']['instructions'][$this->methodCode] = $this->getInstructions();
            $config['payment']['image'][$this->methodCode] = $this->getImage();
        }
        return $config;
    }

    /**
     * Get image from config
     *
     * @return string
     */
    protected function getImage()
    {
        return $this->method->getImage();
    }

    /**
     * Get instructions from config
     *
     * @return string
     */
    protected function getInstructions()
    {
        return nl2br($this->escaper->escapeHtml($this->method->getInstructions()));
    }
}

and this is corresponding js code:

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
/*browser:true*/
/*global define*/
define(
        [
            'jquery',
            'Magento_Checkout/js/view/payment/default',
            'Magento_Checkout/js/action/place-order',
            'Magento_Checkout/js/action/select-payment-method',
            'Magento_Customer/js/model/customer',
            'Magento_Checkout/js/checkout-data',
            'Magento_Checkout/js/model/payment/additional-validators',
            'mage/url'
        ],
        function ($,
                Component,
                placeOrderAction,
                selectPaymentMethodAction,
                customer,
                checkoutData,
                additionalValidators,
                url) {
            'use strict';
            return Component.extend({
                defaults: {
                    template: 'Desytec_Transbank/payment/webpay'
                },
                placeOrder: function (data, event) {
                    if (event) {
                        event.preventDefault();
                    }
                    var self = this,
                            placeOrder,
                            emailValidationResult = customer.isLoggedIn(),
                            loginFormSelector = 'form[data-role=email-with-possible-login]';
                    if (!customer.isLoggedIn()) {
                        $(loginFormSelector).validation();
                        emailValidationResult = Boolean($(loginFormSelector + ' input[name=username]').valid());
                    }
                    if (emailValidationResult && this.validate() && additionalValidators.validate()) {
                        this.isPlaceOrderActionAllowed(false);
                        placeOrder = placeOrderAction(this.getData(), false, this.messageContainer);
                        $.when(placeOrder).fail(function () {
                            self.isPlaceOrderActionAllowed(true);
                        }).done(this.afterPlaceOrder.bind(this));
                        return true;
                    }
                    return false;
                },
                selectPaymentMethod: function () {
                    selectPaymentMethodAction(this.getData());
                    checkoutData.setSelectedPaymentMethod(this.item.method);
                    return true;
                },
                afterPlaceOrder: function () {
                    window.location.replace(url.build('mymodule/standard/redirect/'));
                },
                /**
                 * Get value of instruction field.
                 * @returns {String}
                 */
                getInstructions: function () {
                    return window.checkoutConfig.payment.instructions[this.item.method];
                },
                /**
                 * Get value of image field.
                 * @returns {String}
                 */
                getImage: function () {
                    return window.checkoutConfig.payment.image[this.item.method];;
                }
            });
        }
);

Any help please?

Best Answer

Problem that I was not adding the parameter to etc/config.xml file

Related Topic