3

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?

1

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

| improve this answer | |

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.