Vue.js项目中如何触发第三方店铺脚本事件打开购买浮层

问题原因&解决方案 #

1. 自定义属性未动态绑定 #

你当前data-fsc-item-path-value还是占位符状态，没有动态绑定商品ID，Vue中绑定动态自定义属性需要用v-bind（简写:）语法。

2. 第三方脚本加载与DOM渲染时机不匹配 #

你配置了async: true异步加载脚本，而商品列表通常是接口动态获取的，很容易出现「脚本加载完成、初始化扫描DOM时，商品列表还未渲染」的情况，第三方SDK默认只会在加载完成时扫描一次DOM绑定事件，后续新增的DOM元素不会自动绑定。

3. a标签默认跳转行为干扰 #

href="#"的默认点击行为是跳转到页首，可能会阻断第三方脚本的事件执行。

修复后代码示例 #

Template部分 #

<template>
    <div>
        <div v-for="product in products" :key="product.id">
          <h1>{{ product.title }}</h1>
          <a 
            href="#" 
            @click.prevent
            data-fsc-action="Add,Checkout" 
            :data-fsc-item-path-value="product.id"
          >
            Buy now 99$
          </a>  
        </div>
    </div>
 </template>

脚本加载与初始化部分 #

export default {
  data() {
    return {
      products: [],
      fscScriptLoaded: false
    }
  },
  async mounted() {
    // 替换为你的商品列表接口请求逻辑
    this.products = await fetch('/api/products').then(res => res.json())
    // 等DOM渲染完成后，若脚本已加载则手动触发SDK扫描
    await this.$nextTick()
    if (this.fscScriptLoaded && window.FSC) {
      // 不同SDK的扫描方法名可能有差异，可参考对应官方文档调整
      window.FSC.scan()
    }
  },
  head() {
    const self = this
    return {
      script: [
       {
         id: "fsc-api",
         src: "https://d1f8f9xcsvx3ha.cloudfront.net/...",
         type: "text/javascript",
         "data-storefront": "...",
         "data-popup-closed": "...",
         async: true,
         // 脚本加载完成回调
         callback: () => {
           self.fscScriptLoaded = true
           // 若商品数据已加载完成，直接触发扫描
           if (self.products.length) {
             self.$nextTick(() => {
               window.FSC && window.FSC.scan()
             })
           }
         }
       },
     ],
   };
 },
}

排查思路 #

1. 打开浏览器DevTools的元素面板，检查商品按钮的data-fsc-item-path-value是否已正确填充对应商品ID
2. 查看控制台是否有脚本加载失败、执行报错的相关提示
3. 商品列表渲染完成后，手动在控制台执行window.FSC.scan()（对应实际SDK暴露的扫描方法），如果此时点击按钮可以正常触发浮层，说明就是时机匹配问题，按上述方案调整即可

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