Magento 2:如何在结账页付款方式前添加图像

1.在支付的模块中,找到支付的表单模板,类似这样

view/frontend/web/template/payment/form.html
<label class="label" data-bind="attr: {'for': getCode()}">

在它的正下方,添加代码:

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

然后您需要指定 knockoutJS 数据绑定函数,在本例中为 fpxImageSrc

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

然后在组件扩展的正下方,它应该如下所示:

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

在该文件中添加单行 fpxImageSrc 或您选择的任何名称,就像在那个特定位置的这个:

fpxImageSrc: window.populateFpx.fpxLogoImageUrl,

那么您需要创建一个 phtml 模板文件,在本例中我将其命名为 payment_image.phtml。文件应该在里面

view/frontend/templates/payment_image.phtml

之后,您添加如下代码:

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

然后你需要在布局上添加这个 phtml 模板,布局文件可以在模块内找到:

view/frontend/layout/checkout_index_index.xml

你需要添加

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

之后,在模块内创建块文件,在本例中我将其命名为 PopulateFpx.php:

Vendor\PaymentModule\Block\PopulateFpx.php

接着:

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);
}

然后将图像文件(在本例中我将其命名为 fpx_logo.png)放入:

view/frontend/web/images/fpx_logo.png

至此,在付款方式前面添加图像的功能完成!!! 这是demo的链接

相关文章

0 0 投票数
文章评分
订阅评论
提醒
0 评论
最旧
最新 最多投票
内联反馈
查看所有评论