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的链接