Google

Client Login.



Justin Long // ExpressionEngine Expert

Accepting Donations with Exp:resso Store

Written by: Justin Long | On: April 12, 2013

Over the last couple of weeks I have seen a few people asking about accepting donations or user defined prices while using Exp:resso Store. As of version 1.6.3 Store does not have a tag or product type that allows a user specify the price of a product on the front-end but you can easily recreate the functionality if you need to.

In this tutorial I am going to use the store_example templates that are installed by default when you install Store. If you have deleted them already you can find them in system/expressionengine/third_party/store/templates folder.

Creating the Donation Channel & Fields

While this step is not required I think it keeps the setup simpler and it allows us to use some conditionals in the cart/checkout templates for donations. If you are not going to use the same channel fields as you would for your other products you will need to create a new channel field group for donations. In the Control Panel you will want to navigate to Admin > Channel Administration > Channel Fields and create a new field group, I have called mine "Donations" to which I have added 2 custom fields cf_donation_details (Store Fieldtype) and cf_donation_desc (DevDemon Editor Fiedltype).

Now you will want to navigate to Admin > Channel Adminstration > Channel and create a new channel called "Donations" with a channel shortname of "donations" you will want to assign your newly created field group to the Doantions channel and save.

Creating you Donation Products

Now that you have created your product channel we will need to create some new products in Store. For this tutorial I am going to create a few different products for various charities that I would like to allow people to donate to. First you will want to navigate to Publish > Content > Donations to create a new entry. Fill out the Title and other fields as you would normally, when you get to the Store fieldype you will want to enter "1.00" for the Price, you will want to enter a SKU in the SKU field I used "DONATE-WATER". The final thing that you will want to do before you submit the entry is click on the Advanced arrow to open the Advanced section, since this is a donation it shoudl be tax-free so you will need to make sure that you have checked the box.

You should now have somehting along the lines of this: You will want to repeat the same process for all of the products that you want to be donations.

Add to Cart Template

While this isn't a required step it will make the process of adding donations easy for your users. The first thing that we need to do is duplicate the store_example/product template (I have renamed it to store_example/donations). The first step is to get rid of all the items that do not make sense for donations which in this case is the text "just another awesome product", the stock level fields, the price (since the user will be entering that), Quantity, and we do not need any of the content inside of the {modifers} tag pair. You should be left with something along the lines of this in your template:

{exp:store:product
    entry_id
="{entry_id}"
    
form_class="form-horizontal"
    
return="{segment_1}/{segment_2}/{segment_3}"}

<div class="control-group">
    <
label class="control-label">SKU</label>
    <
div class="controls">
        <
span class="store_product_sku"><!-- automatically set --></span>
    </
div>
</
div>

<
div class="control-group">
    <
label class="control-label" for="item_qty">Donation Amount:</label>
    <
div class="controls">
        <
input type="text" id="item_qty" name="item_qty" class="input-mini" />
    </
div>
</
div>

<
div class="form-actions">
    <
input type="submit" name="submit" value="Add to Cart" class="btn btn-primary" />
</
div>

{/exp:store:product} 

I have changed the word "Quantity" to "Donation Amount" so users understand that they should enter how much they want to donate in that field. Since the donation amount is a $1.00 if they enter 50 their cart will now have a total of $50.

The Cart & Checkout Templates

If you have been working along and already added one of your donations to the cart you might have already seen an issue that would confuse your users. As the cart & checkout templates are currently setup.

If a user entered 50 dollars they are now seeing that they have added 50 items to the cart for a $1.00 which is not the best way of presenting thier donation. This is the reason that I use a seperate channel for donations. I can now use a conditional based upon the products channel to change the appearence. Lets start with the sidebar cart template first. You will want to open up store_example/_cart. We will want to edit the content within the {items} tag pair to show a slightly different setup if the user has added an item that is in the donation channel.

The Original Template:

{items}
    
<tr>
        <
td>{item_qty} &times{title}</td>
        <
td style="text-align:right">{item_subtotal}</td>
    </
tr>
{/items} 

To this we will want to add a channel entries tag and a conditional to check the items channel.

The New Tempalte:

{items}
{exp
:channel:entries 
    entry_id
="{entry_id}" 
    
disable="pagination|categories|member_data|category_fields|custom_fields"}
    
<tr>
        
{if channel_short_name != "donations"}
        
<td>{item_qty} &times{title}</td>
        
{if:else}
        
<td>{title} Donation of
        {
/if}
        
<td style="text-align:right">{item_subtotal}</td>
    </
tr>
{/exp:channel:entries}
{
/items} 

Once you have saved the template changes you should now see that the donations show up properly in the sidebar cart.

Lets now move onto the checkout template, the process is going to be very similar as the cart template, again you will want to search for {items} tag pair.



The Original Template:

{items}
    
<tr>
        <
td>
            <
h4><a href="{path='store_example/product'}/{url_title}">{title}</a></h4>
            <
p><small>
                <
b>SKU:</b{sku}<br />
                
{modifiers}
                    
<b>{modifier_name}</b>: {modifier_value} {if price_mod_val}({price_mod}){/if}<br />
                
{/modifiers}
            
</small></p>
        </
td>
        <
td>{price}</td>
        <
td><input name="items[{key}][item_qty]" value="{item_qty}" class="input-mini" /></td>
        <
td><input type="checkbox" name="items[{key}][item_qty]" value="0" /></td>
        <
td style="text-align:right">{item_subtotal}</td>
    </
tr>
{/items} 

There are a couple ways we can achieve the checkout template, I personally start by duplicate the entire table row for each channel type oppose to having multiple channel_short_name conditionals in a single table row.

The New Template:

{items}
{exp
:channel:entries 
    entry_id
="{entry_id}" 
    
disable="pagination|categories|member_data|category_fields|custom_fields"}
    {if channel_short_name 
!= "donations"}
    
<tr>
        <
td>
            <
h4><a href="{path='store_example/product'}/{url_title}">{title}</a></h4>
            <
p><small>
                <
b>SKU:</b{sku}<br />
                
{modifiers}
                    
<b>{modifier_name}</b>: {modifier_value} {if price_mod_val}({price_mod}){/if}<br />
                
{/modifiers}
            
</small></p>
        </
td>
        <
td>{price}</td>
        <
td><input name="items[{key}][item_qty]" value="{item_qty}" class="input-mini" /></td>
        <
td><input type="checkbox" name="items[{key}][item_qty]" value="0" /></td>
        <
td style="text-align:right">{item_subtotal}</td>
    </
tr>
    
{if:else}
    
<tr>
        <
td>
            <
h4><a href="{path='store_example/donation'}/{url_title}">{title}</a></h4>
            <
p><small>
                <
b>SKU:</b{sku}<br />
            </
small></p>
        </
td>
        <
td>{!-- {price} --}<span style="position: relative; left: 13px;">$</span><input name="items[{key}][item_qty]" value="{item_subtotal_val}" class="input-mini" style="padding-left: 13px;" /></td>
        <
td>{!-- Quantity --}1</td>
        <
td><input type="checkbox" name="items[{key}][item_qty]" value="0" /></td>
        <
td style="text-align:right">{item_subtotal}</td>
    </
tr>
    
{/if}
{
/exp:channel:entries}
{
/items} 

The first part of this template is unchanged from the original other then the addition of the channel entries tag and check to see what channel the item is from. After the if:else statement there is where we made a few changes. Lets go over the changes line by line.

<td>{!-- {price} --}<span style="position: relative; left: 13px;">$</span><input name="items[{key}][item_qty]" value="{item_subtotal_val}" class="input-mini" style="padding-left: 13px;" /></td

In the price column we want the user to be able to adjust the amount of their donation. To do this we need to remove the actual price tag and replace it with the quantity text input. The price tag has a nice feature in that it automatically formats the number to whatever currency you are using, unfortunatly we can not use that in the text input or it will remove the item from the cart. As a result I am using the currency symbol inside of a span element and some css to move it into the input area, paired with using the unformatted item_subtotal price. You could of course use jQuery or similar to present the number matching your chosen currency format.

<td>{!-- Quantity --}1</td

Because the donation items do not have any variations in how I set them up everytime a user adds the same donation item to the cart Store will adjust the quantity. There for we can hardcode a value of "1" in this area.

The End Result

After you have saved the checkout template and refreshed the checkout page you should now be able to easily edit/see both regular products and donations.

Wrap Up

This is just a start to what is possible with Exp:resso Store and acceptign donations. As always if you have any comments or questions post them in the comments below or send me a message.

<<< Previous entry

Comments

<<< Go back to entry list