如何在Eventbrite嵌入式结账中用变量替代event ID

在Wix动态页面中嵌入Eventbrite结账组件，需要每个页面对应不同演出的结账元素，因此要将createWidget方法中的eventId设为变量而非固定字符串。目前通过Velo的postMessage()传递eventID，但HTML中变量赋值后组件初始化异常。

Velo代码 #

$w("#eventbriteSales").postMessage(964311781497);

嵌入的HTML代码 #

<div id="eventbrite-widget-container-964311781497"></div>

<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type="text/javascript">
  let EventbriteID = "0"
  window.onmessage = (event) => {
      if (event.data) {
         EventbriteID = event.data;
      }
  };
    var exampleCallback = function() {
        console.log('Order complete!');
    };

    window.EBWidgets.createWidget({
        // Required
        widgetType: 'checkout',
        eventId: EventbriteID,
        iframeContainerId: 'eventbrite-widget-container-964311781497',

        // Optional
        iframeContainerHeight: 425,  // Widget height in pixels. Defaults to a minimum of 425px if not provided
        onOrderComplete: exampleCallback  // Method called when an order has successfully completed
    });
</script>

核心问题是**postMessage是异步操作**，页面加载时createWidget会先执行，此时EventbriteID还是初始值"0"，并未收到Velo传递的真实ID。需要调整代码逻辑，确保收到消息后再初始化组件：

修改后的HTML代码 #

<!-- 改用通用容器ID，避免固定EventID -->
<div id="eventbrite-widget-container"></div>

<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type="text/javascript">
    var exampleCallback = function() {
        console.log('Order complete!');
    };

    window.onmessage = (event) => {
        // 可选：验证消息来源，提升安全性（替换为你的Wix站点域名）
        if (event.origin !== "https://your-wix-site-url.com") return;
        
        if (event.data) {
            // 收到EventID后再初始化组件
            window.EBWidgets.createWidget({
                widgetType: 'checkout',
                eventId: event.data,
                iframeContainerId: 'eventbrite-widget-container',
                iframeContainerHeight: 425,
                onOrderComplete: exampleCallback
            });
        }
    };
</script>

关键调整点 #

• 将createWidget调用移至onmessage回调内部，确保只有在收到Velo传递的EventID后才初始化组件。
• 容器ID改为通用名称（如eventbrite-widget-container），无需随EventID修改，适配动态页面需求。
• 新增消息来源验证（可选），防止非预期的消息触发组件初始化，提升安全性。

Velo代码无需修改 #

保持原有的postMessage调用即可，确保嵌入元素的ID（#eventbriteSales）与Wix页面中嵌入元素的ID一致。

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