Magento 2：如何在商品详情页加入购物车按钮前添加自定义模板

我之前帮朋友处理过类似需求，核心是找到所有商品类型详情页都共用的布局位置，或者用前端方法精准定位加购按钮的前置位置，下面分两种靠谱的方案给你：

方案一：后端布局注入（推荐，适配性最强） #

这种方法适合基于模板引擎的电商系统（比如Magento、Shopware等），通过系统的布局机制，把自定义模板插入到加购按钮的统一前置节点。

步骤1：创建自定义模板文件 #

先写好你要展示的自定义内容，比如custom_pre_addtocart.phtml（以PHP模板为例）：

<div class="custom-pre-addtocart">
  <p>这里是你的自定义内容，比如优惠提示、库存提醒等</p>
  <!-- 可以根据商品类型动态调整内容，比如判断当前商品是Bundle就显示不同文案 -->
  <?php if ($product->getTypeId() == 'bundle'): ?>
    <span>* 组合商品可自由搭配哦</span>
  <?php endif; ?>
</div>

步骤2：通过布局文件注入到全局位置 #

找到系统中所有商品详情页都加载的布局文件（比如Magento的catalog_product_view.xml），在加购按钮的容器前插入你的模板：

<referenceContainer name="product.info.form.content">
  <!-- 在加购按钮容器前插入自定义模板 -->
  <block class="Magento\Framework\View\Element\Template" name="custom.pre.addtocart" template="Your_Module::custom_pre_addtocart.phtml" before="product.info.addtocart"/>
</referenceContainer>

这里的before="product.info.addtocart"是关键，它会确保你的模板在所有商品类型的加购按钮之前渲染——不管是Configurable、Bundle还是Grouped商品，只要它们的加购按钮都在product.info.form.content容器里，就能生效。

步骤3：针对特殊商品类型做兼容 #

比如Grouped商品的加购区域结构可能稍有不同，你可以单独给它添加布局调整：

<referenceContainer name="product.info.grouped">
  <block class="Magento\Framework\View\Element\Template" name="custom.pre.addtocart.grouped" template="Your_Module::custom_pre_addtocart.phtml" before="product.info.addtocart"/>
</referenceContainer>

这样就能覆盖所有特殊商品类型的布局了。

方案二：前端JS动态插入（快速实现） #

如果你不想改后端代码，也可以用前端JS来定位加购按钮，然后把自定义模板插入到它前面。

步骤1：写自定义模板的HTML #

可以直接写在页面的隐藏区域，或者通过JS创建：

<!-- 先把模板隐藏在页面里 -->
<div id="custom-pre-addtocart-template" style="display:none;">
  <div class="custom-pre-addtocart">
    <p>你的自定义内容</p>
  </div>
</div>

步骤2：用JS定位加购按钮并插入 #

因为不同商品类型的加购按钮可能有不同的class，但通常都会有一个通用的标识，比如button-addtocart或者add-to-cart，你可以用多选择器来覆盖：

document.addEventListener('DOMContentLoaded', function() {
  // 定位所有可能的加购按钮元素
  const addToCartButtons = document.querySelectorAll('.add-to-cart, .button-addtocart, #product-addtocart-button');
  
  addToCartButtons.forEach(button => {
    // 克隆自定义模板
    const template = document.getElementById('custom-pre-addtocart-template').cloneNode(true);
    template.style.display = 'block';
    // 插入到按钮前面
    button.parentNode.insertBefore(template, button);
  });
});

这种方法的好处是不用管后端布局，只要能选中加购按钮就能生效，缺点是如果页面是动态渲染的（比如Configurable商品切换属性后重新加载加购按钮），你需要监听页面变化事件，比如用MutationObserver来处理动态元素。

验证方法 #

最后记得测试所有商品类型：

• Configurable商品：切换属性后看自定义模板是否还在
• Bundle商品：查看加购按钮前的模板是否正常显示
• Grouped商品：确认模板出现在批量加购区域前
• Simple商品：验证基础场景的显示效果

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