Hey @jimjmn ,
It’s a tricky question, however I might have found a work around. I’m going to break it down into two sections: redirecting to checkout after registering and an events page.
Redirecting to checkout after registering
I’ll list the steps below, but in general I would recommend moving all of your events from your CMS collection to your products collection. Add these events to a collective “events” category. Then move the register form to the “Products Template” page. We will use conditional visibility to make sure this form is only visible when a customer is registering for an event. Once the customer successfully fills out the form we will redirect them to the checkout page via the buy now button (this will take some minimal javascript which I’ll show below).
Here are the steps:
1 Migrate your “Events” CMS collection to the products collection
Like a CMS collection you can add additional fields to your products collection. Don’t make these required fields because your physical products won’t have these fields. (I would update the products collection and then make one event product to test).
2. Create a category for all events
This will allow us to only expose the form element for events and not physical products.
3. Copy and paste the registration form from your Registration page to your Products Template page
4. Set a conditional visibility on the form
Set the element to be visible when categories contains the events category we created earlier. Use the products dropdown in the top left of the designer to switch to a specific event to see it while designing.
5. Label your form with a custom id
Make sure to give the form not the form block element an id
6. Add a cart element and give the buy now button an id
7. Add this javascript in an embed element
This will redirect the user to the checkout page with the event added to the cart after a successful form submit. Make sure to sub out the ids you assigned to your form and buy now button.
const registerForm = document.getElementById('your-form');
registerForm.addEventListener('submit', function(e) {
e.preventDefault();
document.getElementById("buy-now-btn").click();
})
</script>
8. Hide the add to cart element.
Select the add to cart element we just added and set the display to none to hide it. This won’t affect the above javascript .
Done! That was easy …
* Something to note. An individual could potentially fill out the form and not pay. Also you will have to reconcile who paid with the registration forms that you collected.
Events page
To recreate the https://orthospinology.webflow.io/events you will have to change the collection list items in each tab to bind to the products collection, not your old “events” cms collection. Then, as you did before, use various filters to show the correct events. (I’m not going to go into excruciating detail because it looks like you know how to do this, but let me know if you want me to).
Hopefully that helps or at least gives you some ideas!