Roomle Rubens MOC SDK集成：请求产品按钮定制问题咨询

问题核心 #

• 启用MOC后，原有按钮点击逻辑失效，默认将“发送请求”替换为“加入购物车”按钮
• 需要将按钮行为改为引导用户进入配置申请表单页面，但现有实现无法覆盖MOC默认逻辑
• 未激活MOC时的原有按钮实现也无法正常工作，仍显示“加入购物车”

可行解决步骤 #

1. 关闭MOC默认按钮替换
   在MOC初始化配置中添加参数，禁用默认的按钮劫持逻辑：

   window.MOC_CONFIG = {
     enabled: true,
     overrideDefaultButton: false // 阻止MOC自动替换按钮
   };
   

2. 手动绑定自定义点击事件
   保留原有“发送请求”按钮，通过原生JS绑定跳转逻辑，同时阻止MOC的默认事件触发：

   const requestBtn = document.querySelector('.send-request-btn');
   requestBtn.addEventListener('click', function(e) {
     e.preventDefault();
     e.stopPropagation(); // 阻断MOC的默认事件流
     window.location.href = '/your-config-apply-form'; // 跳转到配置申请表单页面
   });
   

3. 确保事件绑定时机正确
   等待MOC脚本完全加载完成后再执行事件绑定，可监听MOC初始化完成事件：

   document.addEventListener('MOC_INITIALIZED', function() {
     // 在此处执行按钮事件绑定代码
   });
   

4. 强制覆盖按钮样式
   如果MOC仍修改按钮样式，添加自定义CSS强制恢复：

   .send-request-btn {
     background-color: #your-primary-color !important;
     color: #fff !important;
     /* 其他需要覆盖的样式属性 */
   }
   

额外排查点 #

• 检查MOC配置中是否存在其他强制启用购物车按钮的隐藏参数
• 测试前清除浏览器缓存，避免旧版本脚本干扰
• 可在按钮元素上添加data-moc-ignore属性，让MOC跳过对该元素的处理

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