More in this section
Blogs RSS feed

Sitefinity Ecommerce Donation Widget

by User Not Found

I thought it would be exciting to demonstrate how you can use the Sitefinity Ecommerce API to create a custom donation widget for accepting online donations.    Donations are usually difficult for many ecommerce systems.  Below I have listed a few reasons ecommerce applications struggle with online donations.

  • The donation amount is usually constrained to a specific dollar amount, meaning you can only have donations like $5, $10, $15 dollars shown in a drop-down.   
  • Donations are usually separate products or options for a product priced at $0.  
  • Some ecommerce systems do not allow you to have a $0 price for your product and instead show you a  popup a window stating “Price must be greater than $0”.
  • Even the popular PayPal Donation button is limited to use a fixed donation amount, OR the visitor can enter their own donation amount; but not both.

These are just a few problems you can experience in typical ecommerce systems and applications, all of which are not ideal if you want to maximize your donation potential.    

In this post, I have included the source code for this project along with a video demonstrating how to add this project into a Sitefinity 5.x solution.  The video also demonstrates how to add the donation widget into Sitefinity along with making a sample donation and checking out.   I am using the Sitefinity 5.0 Starter Kit called “Corporate Starter” as this starter kit has Sitefinity Ecommerce enabled.   Because we are using the Sitefinity Ecommerce API, you will need the Sitefinity Ecommerce Add-On enabled in Sitefinity.   To see if your web site has the Ecommerce add-on enabled, login to the Sitefinity backend and look at the top main navigation for a button labeled “Ecommerce”.    If you see this button/selection, you have the Sitefinity Ecommerce Add-on enabled.   If you do not see the button labeled “Ecommerce” in the main navigation, you will need to purchase this Sitefinity Add-on in order to use this donation widget.

Below are the steps for adding the donation widget to your solution.

  1. Unzip the donation project into a new folder
  2. Open your Sitefinity solution file in Visual Studio
  3. Add an existing project to your solution and select the project file named “Telerik.Sitefinity.Samples.Ecommerce.Donations.csproj” located in the folder you created in step 1
  4. Right click on SitefinityWebApp and select “Add Reference”,  which will add a reference to the new donation project.
  5. Copy the file donation.css from the root of the project, into the following folder:
    SitefinityWebApp > App_Data > Sitefinity > WebsiteTemplates > Quantum > App_Themes > Quantum > Global
  6. Run your Sitefinity project and login to the Sitefinity dashboard (backend)
  7. Go to the following:    Administration > Settings > Advanced Settings > Toolboxes > Toolboxes > PageControls > Sections > Ecommerce > Tools.  This is where you will add-in the donation widget into Sitefinity so that is show up as a available widget to drag and drop onto a page. 
  8. Create a new toolbox and use the following information below
    1. Control CLR Type or Virtual Path = Telerik.Sitefinity.Samples.Ecommerce.Donations.DonationsWidget, Telerik.Sitefinity.Samples.Ecommerce.Donations
    2. Name = DonationsWidget
    3. Title = Donation Widget
    4. Description =  Online donation widget
    5. Click the save button at the bottom.  You have now added the donation widget into Sitefinity.   The donation widget can now be dragged and dropped onto a page.
  9. Click on Ecommerce and follow the steps below
    1. Click on Types of products
      1. Create a new product type called Donation
      2. Finish by clicking on the Create this product type and go define its fields.
      3. You can add in some custom product fields if you want to, and use them in the donation widget. Click on Save and proceed to next step
    2. Add a new product and following using the new product type of “Donation”, and follow the steps below
      1. Call the name of the product Donation
      2. Add some text in the description
      3. Keep the price at $0 and click save.
      4. Set the sku number to Online Donation
    3. Create a new page called Donate
      1. On the new page, drag and drop the Donation Widget, found in the Ecommerce section of the widgets.
      2. Edit the properties of donation widget and search for a product called donation.
      3. Select the donation product and click save.   This is how the donation widget is linked to a product.
      4. Publish the page and test your donation widget.  Select an amount shown in the drop-down, or select “other” and enter a user specific amount, like 1.99.
      5. Click add to cart.
      6. Done

        Click HERE to download the source code for the sample donation widget.

NOTE:  this functionality was disconnected in Sitefinity 6.3 because of the multiple prices changes made in this version. 


Leave a comment
  1. Matt Dec 20, 2012
    This is a really nice feature and I'd like to make use of it, but is there any chance you could update it so that it works easily with 5.3.  A bunch of the assembly references are no longer valid.  I have added <dependentAssembly> references to the web.config with not luck.
  2. Matt Dec 20, 2012
    Forget about my last comment.  Once I updated all the Telerik references in the Donations project everything worked fine.
  3. Justin Nov 18, 2013
    I'm using sitefinity 6.2 and I'm having a bit of a problem. I updated all the references and got the widget working, but after adding an item to the cart I get this error:

    "We apologize that product TEST PRODUCT is no longer available.   Please continue shopping."

    And the item is removed from my cart.
  4. David Lamb Feb 05, 2014
    I'm trying to use this with sitefinity 6.3, and I get the same problem as Justin.
  5. David May 09, 2014
    Is there anyway to get this kind of functionality in SF 7? I fount that i could get this working in 6.3 with the OptionDetails.TotalDeltaPrice property but neither method works in SF 7.

    Leave a comment