Magento中为配送方式添加自定义Logo的方法

最佳方案 #

建议采用主题重写+可选后台配置的方式，完全避开修改Magento核心代码，既能灵活实现Logo展示，也不会影响后续系统升级。

1. 准备Logo资源 #

把各个配送方式的专属Logo（比如ups-logo.png、fedex-logo.png）上传到主题的静态资源目录：

app/design/frontend/[你的厂商名]/[你的主题名]/web/images/shipping/

2. 重写结账配送方式模板 #

Magento默认的配送方式选择模板在vendor/magento/module-checkout/view/frontend/web/template/shipping-address/shipping-method-item.html，我们在主题里重写这个文件：

• 先在主题目录创建对应路径：

  app/design/frontend/[你的厂商名]/[你的主题名]/Magento_Checkout/web/template/shipping-address/shipping-method-item.html
  

• 打开重写后的模板，在配送方式名称附近添加Logo代码，比如：

  <div class="shipping-method-logo">
      <img data-bind="attr: {src: $parent.getShippingLogo(method.carrier_code + '_' + method.method_code), alt: method.method_title}" />
  </div>
  

3. 添加JS逻辑获取Logo路径 #

在主题的Checkout JS组件里新增方法返回Logo的URL：

• 主题目录下创建或修改Magento_Checkout/web/js/view/shipping.js，添加：

  getShippingLogo: function(methodCode) {
      return window.checkout.baseUrl + 'pub/static/frontend/[你的厂商名]/[你的主题名]/images/shipping/' + methodCode + '.png';
  }
  

模板里的$parent就是这个shipping.js的实例，可直接调用该方法。

4. 可选：后台配置Logo路径（更灵活） #

如果想在后台随时修改每个配送方式的Logo，无需改动代码，可以做个自定义模块：

• 在模块的etc/adminhtml/system.xml里添加配置项，比如给UPS配送方式加Logo上传功能：

  <section id="carriers" translate="label" type="text" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
      <group id="ups" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
          <field id="logo_path" translate="label" type="image" sortOrder="21" showInDefault="1" showInWebsite="1" showInStore="0">
              <label>配送方式Logo</label>
              <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
              <upload_dir config="system/filesystem/media" scope_info="1">shipping/logos</upload_dir>
          </field>
      </group>
  </section>
  

• 之后在Block或者JS里读取这个配置值，传递到前端模板即可。

5. 调整Logo样式 #

在主题的CSS文件里添加样式，控制Logo的大小和显示位置：

.shipping-method-logo img {
    width: 80px;
    height: auto;
    margin-right: 10px;
    vertical-align: middle;
}

关键修改位置汇总 #

• 模板文件：app/design/frontend/[你的厂商名]/[你的主题名]/Magento_Checkout/web/template/shipping-address/shipping-method-item.html
• JS组件：app/design/frontend/[你的厂商名]/[你的主题名]/Magento_Checkout/web/js/view/shipping.js
• 静态资源目录：app/design/frontend/[你的厂商名]/[你的主题名]/web/images/shipping/
• （可选）自定义模块配置：etc/adminhtml/system.xml

内容的提问来源于stack exchange，提问作者Roly89