Добавьте несколько кнопок оформления заказа для нескольких мероприятий на одной странице Eventbrite

Как добавить несколько кнопок оформления заказа для нескольких событий на одной странице? 

<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 и пытаюсь получить идентификатор события в коде сценария. Это работает для одного события, когда я предоставляю жестко заданное значение.

Любая помощь будет оценена по достоинству!

Нашел решение, но не знаю, хорошее оно или нет (Но у меня работает):

{% 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-xxxxxxxxx121 (идентификатор события, полученный из {{event.id}}). Аналогично задайте тот же идентификатор кнопки в скрипте, что и modalTriggerElementId: 'checkout_btn-{{event.id}}', и предоставили eventId: '{{event.id}}', вместо eventId: getEventID. Теперь он может различать каждое событие.

Вернуться на верх