3

I want add images to payment method list on checkout like : enter image description here

I want add image before these payment methods

  • Płatność przelewem bankowym
  • Płatność przy odbiorze

Can anyone help me how I can do it?

7

Its quite a lot of works. You need to go to that payment module, find

view/frontend/web/template/payment/form.html

find something like this:

<label class="label" data-bind="attr: {'for': getCode()}">

right below it, put something like this:

<img data-bind="attr: {src: fpxImageSrc, alt: $t('Fpx MyClear'), height: '', width: '110' }" class="payment-icon"/>

and then you need to specify the knockoutJS data-bind function, in this case fpxImageSrc'. Go to

view/frontend/web/js/view/payment/method-renderer/<name of the payment>.js

then right below Component extend, it should look like:

        return Component.extend({
        defaults: {
            template: 'Vendor_PaymentModule/payment/form'
        },
        placeOrderHandler: null,
        fpxImageSrc: window.populateFpx.fpxLogoImageUrl,

Add single line fpxImageSrc or whatever name you choose, inside that file, like this one at that particular spot:

        fpxImageSrc: window.populateFpx.fpxLogoImageUrl,

then you need to create one phtml templates file, in this case I name it payment_image.phtml. The file should be inside

view/frontend/templates/payment_image.phtml

right after that, you add something like this code:

<script>
window.populateFpx = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getFpxConfig()); ?>;
</script>

then you need to add this phtml template on layout, the layout files can be found inside the module:

view/frontend/layout/checkout_index_index.xml

there, you need to add

    <body>
    <referenceContainer name="after.body.start">
        <block class="Vendor\PaymentModule\Block\PopulateFpx" name="populate.fpx" template="Vendor_PaymentModule::payment_image.phtml"/>
    </referenceContainer>
    ...
    </body>

after that, create block file, in this case I named it PopulateFpx.php, inside the module:

Vendor\PaymentModule\Block\PopulateFpx.php

and then:

use Magento\Framework\View\Asset\Repository as AssetRepository;

....

protected $assetRepository;

public function __construct(
    AssetRepository $assetRepository
){
    $this->assetRepository = $assetRepository;
}

public function getFpxConfig() {
    $output['fpxLogoImageUrl'] = $this->getViewFileUrl('Vendor_PaymentModule::images/fpx_logo.png');

    return $output;
}

public function getViewFileUrl($fileId, array $params = [])
{
    $params = array_merge(['_secure' => $this->request->isSecure()], $params);
    return $this->assetRepository->getUrlWithParams($fileId, $params);
}

and then put the image file, in this case I named it fpx_logo.png, inside:

view/frontend/web/images/fpx_logo.png

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.