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
89c5670ffd3b4792b9d65197ddea3436
Code stack you are integrating Builder with
Shopify
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.
This will be the outcome:
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:
