How to add a quantity field to checkout in Webflow and Tangram

‍

Summary:

The process outlines how to add a quantity input field on a class or event listing details page using Webflow and Tangram. Here’s a summary of the steps:

1. Add a form: In Webflow, drag the form element to the desired location, above the "Book Now" button.
2. Create a quantity field: Name the field "quantity" and set it as a number field. Make sure the text field is named "qQuantity."
3. Link it to Tangram: Add the attribute tg-attribute = "link" to the form element, which will pass the listing ID in the URL when the form is submitted. The form's action should be set to the custom Tangram URL (e.g., https://yourapp.tangram.co/listings/{listing_id}/new_transaction).
4. Update the button: Replace the old "Book Now" button with a submit button in the form section and copy the styles from the previous button to the new one.
5. Customize appearance: Style the quantity field as desired (e.g., adding an underline) and adjust the placeholder text (e.g., "Number of tickets").
6. Publish: Once everything is set up, publish the changes. The form will allow users to enter the number of tickets they want to buy, and the checkout flow will multiply the base price by the quantity.

This setup integrates the quantity field into the checkout flow before users finalize their purchase.

‍
Video Transcript:

" Let's say we want to pass quantity in on the details page for booking a class or a service in a class or event. It might represent the number of people or tickets that you want to buy to a class. How can you put a quantity input at this stage of the buyer's journey on the listing details page before they go through the checkout flow with Tangram and enter their credit card?

What I would do is I'd go in Webflow and I'd click the plus elements icon and go to the form section to drag in a form wherever we want it in Webflow. I want it not in the gallery grid, but in the right side in the details wrapper, maybe somewhere here midway through.

Right above our book now button, I think I want the tags above the form. I'll drag that above the form element. And on this form, I just want quantity. I'm going to remove that second field that came for free with it. I'm going to name the field quantity. Now, that's just naming the label, but we also have to name the text field itself, and this is the most important part to hook it up to Tangram.

With a lowercase q, we'll write qQuantity, so quantity, and it needs to be a number field, so we'll select number field instead of plain text. Now, the next portion, we're basically going to take all of the links that are currently on the Other Book Now button, And the attributes, so we'll need tg-attribute = "link" so that we can pass the listing ID in the URL when we submit this form.

I will select the form element and add the attribute

tg-attribute = "link" which will allow us to pass listing underscore id in the URL In the URL we want to send this form to, the action would be our custom domain which is usually something like your app. tangram. co slash and don't forget the HTTPS in front of that, it'll look something like that slash Listings slash curly brace.

We're passing that listing underscore ID slash new underscore transaction, which will take us to the checkout flow for Tangram. Now that we have TGListingValue equals link and the action in the form set, we can safely remove the old button we had on that page. because you do need a submit button. It needs to be a submit button inside of a form, not just a regular button that you would get in Webflow.

This is the regular button, the submit button would be in the form section, this form button. To keep the styles that you already have in Webflow, I'm just gonna copy the styles onto the submit button from the button that we do like, like so. Delete the old button, and add the new text to checkout or buy now, whatever you think.

In the quantity field, you could also change the styles of,

give it a custom class, like quantity field. And change the style. Maybe I just want an underline, but not any other borders. I'll set the top, the left, the right border to zero. And then we could just publish it as is, like that, if we wanted it to look like that. Or you could play around with the The fields, however you see fit before publishing, and what this does, again, is it allows you to enter the number of people, and you can add placeholder text, too, to say number of tickets, to make it even clearer, and when you hover over it, there will be arrows to toggle the, the value in Webflow on the page when you check out, and this will take the base price of whatever the listing is and multiply it by the quantity field."

‍