为同一页面上的多个事件添加多个结帐按钮 Eventbrite

Question

如何在同一页面上为多个活动添加多个结帐按钮？

<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>
<script type="text/javascript">
var exampleCallback = function () {
console.log('Order complete!');
};

var getEventID = function(){
var value = document.getElementById('eventID').value;
return value;
};

window.EBWidgets.createWidget({
widgetType: 'checkout',
eventId: getEventID,
modal: true,
modalTriggerElementId: 'checkout_btn',
onOrderComplete: exampleCallback,
});
</script>

HTML这里

{% for event in data.events %}
<form id="form_id">
{% csrf_token%}
<div class="center">
<div class="w3-card-4" style="width:100%;">
<header class="w3-container w3-blue" >
<h1>{{event.name.text}}</h1>
</header>

<div class="w3-container" style="background-color: #ddd;">
<p>{{event.description.text}}</p>

Event ID: <input type="hidden" id="eventID" name="eventID" value="{{event.id}}"><br>
Capcity: {{event.capacity}}

<button id="checkout_btn" class="button" type="button">Buy Tickets!</button>
</div>
</div>
</form>
{% endfor %}

我在 Django 中显示多个事件并尝试在脚本代码中获取事件 ID。当我提供硬编码值时，它适用于一个事件。

任何帮助将不胜感激！

Answer 1

找到了解决方案，但不知道它是否是一个好的解决方案（但对我有用）：

{% for event in data.events %}
<form id="form_id">
    <!-- checkout widget START-->
    <script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>
    <script type="text/javascript">
        var exampleCallback = function () {
            console.log('Order complete!');
        };

        window.EBWidgets.createWidget({
            widgetType: 'checkout',
            eventId: '{{event.id}}',
            modal: true,
            modalTriggerElementId: 'checkout_btn-{{event.id}}',
            onOrderComplete: exampleCallback,
        });

    </script>
    <!-- checkout widget END -->
    {% csrf_token%}
    <div class="center">
        <header class="w3-container w3-blue">
            <h1>{{event.name.text}}</h1>
        </header>
        <p>{{event.description.text}}</p>
        Event ID: <input type="hidden" id="eventID" name="eventID" value="{{event.id}}">{{event.id}}
        <br>
        Capcity: {{event.capacity}}
        <br>
        Starting: {{event.start.local}}
        <br>
        Ending: {{event.end.local}}
    </div>

    <button id="checkout_btn-{{event.id}}" class="button" type="button">Buy Tickets!</button>
</form>
{% endfor %}

在循环中获取脚本并为按钮提供一个唯一的 ID checkout_btn-{{event.id}}。它将变为 checkout_btn-xxxxxxxxxxx121（事件 ID 从 {{event.id}} 检索）。同样在脚本中提供与 modalTriggerElementId: 'checkout_btn-{{event.id}}' 相同的按钮 ID，并提供 eventId: '{{event.id}}'，代替 eventId: getEventID。现在它可以区分每个事件了。

为同一页面上的多个事件添加多个结帐按钮 Eventbrite

Add multiple checkout buttons for multiple events on same page Eventbrite

python

django

api

eventbrite