Exp:resso Store - Single Page Donate Checkout

Question

I am attempting to use Exp:resso Store to create a donation form on a single page. Ideally, the user will go to /donate and pick from a select-menu the donation cause (a custom order field), the amount they'd like to donate (which updates the quantity field on a product called "Donation" with a min price of $1), and all of the billing and credit card form fields.

Since, the {exp:store:checkout} tag is not available unless there is an item in the cart, I've setup a form button that adds the product "Donation" to the cart when clicked and has a return to /donate.

However, I can't use a form button for every link to /donate (e.g. a link added in a paragraph that's managed via a WYSIWYG editor).

Is there a better way to go about this?

Appreciate the help.

Answer 1

My solution was to add the product form button on the /donate page inside the {exp:store:checkout} {if no_items} tag, and using jQuery to submit the form when the page loads. This ensures there is always a product in the cart. Then, the user completes the single page checkout form fields with their desired donation amount (which updates the quantity of the "Donation" product), billing info, etc.

{exp:store:checkout}
{if no_items}
<!-- Form button to add product id #20 to cart -->
{exp:channel:entries entry_id="20" limit="1"}
    {exp:store:product entry_id="20" form_class="form-donate" return="donate"}
        <button type="submit" name="submit-now" id="submit-now" class="btn">{title}</button>
    {/exp:store:product}
{/exp:channel:entries}
{/if}
...
Billing, CC, etc
{/exp:store:checkout}

The jQuery:

<!-- Auto submit .form-donate to add product id #20 to cart -->
<script type="text/javascript">
$(function(){
    $('.form-donate').submit();
});
</script>

Interested in any other ideas or solutions.