Connect CMS & E-Commerce

First off…I am a Webflow newbie.

I would like to create a CMS/product for paid events. I need to be able to have the client fill in event details [location, cost, etc.] and then have that info displayed on an events page [like this]. I would then like the end-user to be able to click on a registration button within the event details and be taken to a form/cart to fill out their details and pay for the event.

What would you suggest is the best way to structure the CMS/store/product?


Here is my site Read-Only: https://preview.webflow.com/preview/orthospinology?utm_medium=preview_link&utm_source=dashboard&utm_content=orthospinology&preview=d8271029ec42cd7181214717a3c1ca24&workflow=preview

Hey @jimjmn :wave:,

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 :grin:.

Done! That was easy … :sweat_smile:

* 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!

1 Like

Thank you for the feedback @Andrew_Bass.

The fact that a user could skip payment is a bit concerning. Any other ideas? I’m open to changing up the structure if a better solution is presented.

On a side note….is there a way to section out input fields on the backend? Like if I were to add all the event CMS detail fields to the product CMS, I’d like to be able to keep them separated (for the sake of my client’s confusion)?

eh honestly I think it might be best to break out of Webflow to accomplish what you want. I’d look at having a form builder (like Typeform) that accepts payment. That way you could have a button redirect to the form which would keep the payment and responses together.

@Andrew_Bass Ended up going with TicketTailor
Thanks again for your assistance and wisdom!
Cheers.

1 Like

Glad you found something that worked!

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.