Have a button going straight to checkout, but it takes awhile - any suggestions on making it look better?

What are you trying to accomplish
I have a “buy now” button that adds an item to cart, adds a discount, and goes straight to checkout… but the process takes awhile. On twitter I have seen people do like a loading animation… or animate the button so the person knows something is happening. If I click on a button in builder, I see options to animate on hover and appearance but nothing post-click.

Here is an example of an animation that says “applying your discount” when pressing buy now (press buy now on this page):

Here is an example of the button animating when pressing buy now (press buy now on this page):

Are there any suggestions of how I can do either of those in builder? I don’t want people to think the button doesn’t work and bounce while its loading.

Builder content link

Builder public api key

Code stack you are integrating Builder with

Hi @Paulo1300!

If you want to add a loading animation like the examples above, you can add a click action to your button in the data tab in the Element events section by selecting “+ new event”, e.g. state.isLoading = true;.

Next, you can add a new binding to your button in the data tab in the Element data bindings section. You’ll want to select Get text and add state.isLoading ? 'Adding...' : 'Add to cart' as the binding.

Screen Shot 2022-02-18 at 4.12.21 PM

This will be the outcome:

Feb-18-2022 16-14-15

If you wanted to create a loading animation similar to the first example you gave, you can follow similar steps as above by giving your button a click action, e.g. state.isLoading = true;. Instead of adding a binding to change the button’s text, you can build out your “adding…” content inside of the product box (e.g. “Adding to cart…” text and a loading icon). You can give this content position absolute and a z-index in the CSS properties section of the styles tab so it sits on top of your product box content. Lastly, you can go to the data tab and add a new binding of Show if state.isLoading. This will be the outcome:

Feb-18-2022 16-25-35

Let me know if you have any additional questions!

Thank you! I havent tried this yet but I will