JSE Donation

From Joomseller Wiki
Jump to: navigation, search

Introduction

Must have component for a charity website. Help you create a full function system of creators, donors and administrator.

  • Create/edit/manage campaign from frontend and backend.
  • Archive donation. Create notified email template for donation.
  • Secured payment for donate and withdraw.

Features

For campaign’s creators:

  • Allow create, edit campaigns/projects from frontend.
  • Receive notification email when donation is placed on their campaign.
  • Keep track of all created campaigns.
  • Request withdrawal money when a campaign is finished.

For visitors/donors:

  • View information about campaigns/projects by list or by individual page.
  • Receive notification email after placing donation.
  • View past donations.

For admin:

  • Control how campaigns will display by choosing suitable layout.
  • Control which campaigns to display.
  • Decorate site by using several additional modules.
  • Management campaign, donation, withdrawal request.
  • Allow custom fields for extra information from donors.
  • Allow creating template for donation notification email.
  • Flexible configuration for currency, withdrawal fee…
  • Strongly integrate with Joomla! 2.5 permission system.
  • Integrate with JomSocial & Community Builder.

Others:

  • Secured payment system with PayPal and other payment gateway.
  • Easy to install and configure.
  • User-friendly interface
  • Allow multiple Templates.
  • 100% Joomla! 2.5 friendly code

Screenshots

ZJ Donation Control Panel image002.png

Figure 1: Jse Donation Control Panel

Installation

Requirement

Server Requirements

Jse Donation has the following System Requirements:

You must ensure that you have MySQL-, XML- and Zlib-Support built into your PHP. PHP should be compiled with support for https (openSSL) and cURL!

PHP Safe Mode should be turned off.

Client Requirements

Jse Donation can be used with most major browsers including: Internet Explorer (version 7+), Firefox, Chrome, Opera 9+ and Safari. JavaScript should be enabled.

The client/browser needs to be capable of accepting Cookies and Cookies must be enabled.

Download

ZJ Donation Control Panel image003.png

After order our product, you’ll see the download link at Jse Donation product page:

http://joomseller.com/joomla-components/zj-donation.html


Note: If there is any problem, please contact us at: contact@joomseller.com

Installation & Upgrade

Preparing

  • Extract the downloaded package to your computer.
  • Choose exactly version match with your Joomla version (currently, we only have version for Joomla 2.5)

Install component

  • Go to your administrator site
  • Select “Extensions” => “Extension Manager” in the Top Menu
  • In "Upload Package File" block, please Upload & Install our extensions:
    • component/com_jse_donation v2.0.0 j2.5.zip: Jse Donation core component. This is required.
    • plugins/plg_jsedonation_paypal.zip: This is a payment plug-in, it allows users to donate for your campaign via PayPal. This is required.
    • Additional modules: those modules allow you to display campaigns and donors information in various styles.
    • Additional plug-ins: we provide some payment plug-ins in addition for PayPal plug-in, and plug-ins to integrate with JomSocial & Community Builder.


C:\Users\Khanh Q Nguyen\Desktop\ZJ_Donation2\ExtensionManager_Install.png

Figure 2: Joomla! 2.5 Extension Manager

Modules & Plug-ins:

mod_jse_donation_campaigns

“Jse Donation Campaigns module”

It can display campaign or list of chosen campaigns in various orders: by title, by created date.

mod_jse_donation_campaigns_slider

“Jse Donation Campaigns Slider module”

It can display campaigns like a slide of pictures. You could have the great interaction for some featured campaign.

mod_jse_donation_donors

“Jse Donation Donors module”

It can display list of donors in various styles: latest donors, highest donors or just random donors.

mod_jse_donation_thermometer

“Jse Donation Thermometer module”

It displays a “thermometer” that shows current state of a running campaign.

plug_cb_donation_history

“CB Donation History application for Community Builder”

It can show the history of your donations in CB page.

plug_js_donation_history

“JS Donation History application for JomSocial”

It can show the history of your donations in JomSocial page.

plg_jsedonation_paypal

“Jse Donation PayPal payment plug-in”

Payment plug-in for payment via PayPal.

plg_jsedonation_offline

“Jse Donation Offline payment plug-in”

Payment plug-in that let you accept offline donation.

plg_jsedonation_2checkout

“Jse Donation 2CheckOut payment plug-in”

Payment plug-in for payment via 2CheckOut.

Language Installation

Jse Donation’s Interface can be switched to various Languages. From the start, Jse Donation only comes with English language files. To make your Jse Donation run in the language of your choice you need to follow these steps:

  • Download & Install new Joomla! Language Files

To be able to use other languages, you must first find the right language File for Joomla!.

Joomla! Language Files can be downloaded from the Translation Packs for Joomla! 2.5[http://community.joomla.org/translations/joomla-16-translations.html].

  • Translate the Jse Donation Language Files

After installing your language, let say its xx-YY, you need to create the Jse Donation Language file to your language by:

Copy this file:

{site root}/language/en-GB/en-GB.com_jse_donation.ini

to

{site root}/language/xx-YY/xx-YY. com_jse_donation.ini

Then translate it to your language.

Note: sometime you need to change encoding type of language file to "UTF8 without Bom" (you can use notepad++ to change encoding type of the file).

If you want to change backend language, do the same with language in "administrator" folder.

  • Switch the global Language

For Joomla! 2.5: go to "Extensions" => "Languages Manager", select the language of your choice and make it "Default" by clicking that icon in the toolbar.

Jse Donation should now pick up the correct language from its own language folder.

User Manual

After installing Jse Donation component, you will need to create base elements and setting value on Configuration before you could actually let it operation. The correct steps would be:

  • Create base elements: base elements are Currencies, Extra fields, Recurring Type, Fees Type, Withdraw Types.
  • Configuration: setting default value for currency, email template, message, permission…
  • Operation: the main operation of this component is creating campaign ? donation ? requesting withdraws. First, you could create some campaigns of your own, or let users create and submit campaigns. After that, you will need to manage donation and respond to withdrawing request.

Those steps will be explained more detailed on remain of this chapter.

Create base elements

Setup Currencies

Currency is used in donation. You need to create at least one currency for JSE Donation. All currencies are managed on Currency Management Panel.

The Currency Management Panel can be accessed via “JSE Donation Control Panel” => “Currencies”

JseDonation Currency Management.jpg

Figure 3: Currency Management

If it’s first time you install JSE Donation, we created sample Currency data for you with US Dollar, Euro and Pound. You could setup a new currency of your own or edit our sample currencies.JseDonation Creat e crrency.jpg

Figure 4: Currency Edit

Currency’s property

Title

Currency’s title.

Code

The code of currency. USA, EUR, GBP, JPY…

Sign

The sign of currency. $, €, £, ¥…

Position

When display an amount of money, the currency’s sign should be placed to the left or the right of number. Such as: 1000$ or $1000.

Display by Sign or code will be select to display, such as 1000$ or 1000USA.

Setup Fields

Fields are used when donate to collect more information of users. For example: you need to add information about user’s gender; you need to create a field of Gender for user to select/fill in when donate. To configure Fields, go to Component => JSE Donation => Fields Management

JseDonation Fields Management.jpg

Figure 5: Field Management

If it’s first time you install JSE Donation, you can see that we created sample Fields for you. You could setup a new custom field of your own or edit our sample fields.

JseDonation edit field.jpg

Figure 6: Field Edit

Field’s property:

Name

name or key of field.

Field Type

control type of field such as Textbox, Email, Datetime, Textarea, Dropdown List, Radio List, Checkbox List, Multi-Select List.

Label

label or title of field.

Description

description of field.

Donate Form

select to show/hide field on donate Form.

Field Required

select Yes to require field.

Field Values

initiate the values of field (only apply to Dropdown List, Checkbox List, Radio List).

Default value

select the default value for field.

Field Rows

rows of control of field (only apply to Textarea).

Field Cols

columns of control of field (only apply to Textarea).

Field Size

size of field control (only apply to Textbox, Email and Datetime control).

Field Class

css for field, default is “inputbox”.

Jomsocial Field Name

the integration name of Joomsocial. If this field is matched with Joomsocial field, when you check on Donate Form or Attender Form (field also be set display on the form), the value from Joomsocial Field will be automatically loaded for user.

Community Builder Field Name

the integration name of Community Builder. If this field is matched with Community Builder field, when you check on Donate Form or Attender Form (field also be set display on the form), the value from Community Builder Field will be automatically loaded for user.

Campaigns Assignment

select All campaigns/ No event/ Only Campaigns selected / Only Campaigns except those select.

Campaigns List

the Campaigns selected that only matches with Campaign Assignment: Only Campaigns selected / Only Campaigns except those select

Display at Frontend

The fields will be displayed in Donation Information block of Donation form at Frontend.

JseDonation display fields frontend.jpg

Setup Recurring Types

One noticeable feature of Jse Donation component is the ability to allow donors to make recurring donation. The recurring could be daily, weekly, monthly, yearly… And those recurring types are managed on Recurring Type Management Panel.

The Recurring Types Management Panel can be accessed via “Jse Donation Control Panel” => “Recurring”

ZJ Donation Control Panel image010.png

Figure 7: Recurring Type Management

If it’s first time you install Jse Donation, you can see that we created sample Recurring Types for you. You could setup new recurring types of your own or edit our sample types.

ZJ Donation Control Panel image011.png

Figure 8: Recurring Type Edit

Recurring Type’s property:

Title

Recurring Type’s title. This title’s for displaying in Frontend.

Value & Type

Value and Type of time corresponding to this Recurring Type.

For example, with Value = 3 and Type = Month, this is recurring that occurs every 3 months, or quarterly.

Display at Frontend

The recurring type will be displayed as a dropdown list for recurring donation section of Donation form at Frontend.

ZJ Donation Control Panel image012.png


Backend Configuration

The Configuration Panel is the most important part of JSE Donation. It can be accessed via “JSE Donation => Options”.

Note that the Configuration Panel can be accessed by Users with Permissions "admin" only (by default).

You can access the different parts of the Configuration Panel by clicking on the Sub-menu Headings.

JseDonation configuration general.jpg

Figure 10: Configuration – General

General

Auto approve

YES: every new campaigns submitted by user will be published right after being created.

NO: you’ll need to go to Administrator site and manually publish newly created campaigns at Campaigns Manager section.

Allow email edit

For each campaign, you could create unique email templates that will send to creators and donors for notification after a Donation is placed or active.

YES: the user could edit those email templates.

NO: the user couldn’t edit them.

Note that you always could modify them on Campaigns Management at administrator site or leave them blank to use the default templates set at [ Configuration-Email] section.

Allow extra field edit

For each campaign, you could use some custom fields for gathering information from donors. If you don’t know what custom fields are, please see [ Setup Extra Field] section.

  • YES: User could manage to show/hide those custom fields.
  • NO: User couldn’t control them.

Note that you always could modify them on Campaigns Management at administrator site or leave them blank to display all the published fields set at [ Field Management Panel].

Social Sharing

On campaign detail page, we could display social sharing buttons:

Jsedonation SocialSharring.png

Setting here you will let them SHOW, HIDE.

Allow extension & Max Size

When user upload images for each campaign, they must use image file types and size limitation set here.

Default template

Choosing template for JSE Donation component. In this installation package, we only provide default template. However, you could create your own template using our [ Customization Guide].

Donation Placed

Notify when a donation is placed. An email will be sent right after donor confirm donation at your site and redirect to payment page (usually PayPal page).

Donation Activated

Notify when payment is actually activated. An email will be sent right after payment gateway, usually PayPal, confirms that payment is activated.

Email

In this section, you will setup default email templates used in this component.

JseDonation configuration email.jpg

Figure 11: Configuration-Email

Emai

Admin E-mail

email address of website’s administrator.

Admin Name

use to display in email sender.

Admin Notify E-mail

admin notification email.

Configure Email Templates

Go to “JSE Donation => Configuration => Email Templates”.

Which email templates are supported?

We provide many email templates to notify:

New donate placed:

  • New donate placed

Notify campaign’s creator.

  • New donate placed

Notify Donor.

New campaign create:

  • New campaign create

Notify creator.

  • New campaign create

Notify admin.

  • Donate activated

Notify creator.

  • Donate activated

Notify admin.

  • Donate activated Notify donor

Other:

  • Cancel Message Page.


  • Thank You Message Page.


A sample of configuration email template

Email template: New donation placed: Notify Admin.

JseDonation configuration email template.jpg

Figure 12: Configuration-new donate placed: Notify Admin

Enabled => enable/disable the email.

Subject => the subject of email.

Body => the content of email, support HTML.

Variable Pattern => each email template is supported with many items of “Variable Pattern”. You can add “Variable Pattern” to Subject and Body of email. JSE Donation will identify and replace them by the a special value.

Variable Pattern Description:

{campaign _title} Campaign Title

{campaign_creator} Campaign Creator

{status} Campaign Status

{custom_amount} Custom Amount

{campaign_recurring} Campaign Recurring

{Campaign_created_date} Campaign Created Date

{campaign_addition} Campaign Addition

{campaign_meta_keywords) Campaign Meta Keywords

(campaign_meta_description} Campaign Meta Description

{campaign_language} Language

{goal} Campaign Goal

{description} Campaign Description

{campaign_published_up} Campaign Published Up

{campaign_published_down} Campaign Published Down

{campaign_amounts} Campaign Amounts

{campaign_url} Campaign URL

{category_title} Category Title

{donation_url} Donation URL

{donation_id} Donation ID

{donation_date} Donation Date

{payment_date} Payment Date

{recurring_info} Recurring Info

{donation_amount} Donation Amount

{payment_method} Payment Method

{recurring} Recurring

{full_info} Full Info

{JSE_name} Donor Name

{JSE_email} Donor Email

{JSE_city} Donor City

{JSE_website} Donor Website

{JSE_organization} Donor Organization

{JSE_country} Donor Country

{JSE_phone} Donor Phone


Example for Subject:

New donate placed Notify Donor: {campaign_title}

<style>body,td { font-family: verdana; font-size: 11px; font-weight: normal; }

a { color: --0000ff; }

</style>

<p>Hello {JSE_name}!</p>

<br/>

<p>This is an email confirm that you have placed a donation at joomseller.com</p>

<p>This is detail information for you</p>

<p><strong>User information</strong></p>

{full_info}<br/>

------------------------------------<br/>

Amount: {donation_amount}<br/>

{recurring}<br/>

<br/>

<p>Regards,</p>

JoomSeller Solutions<br/>

<a href="http://www.joomseller.com">http://www.joomseller.com</a>

Permission

JSE Donation is fully integrated with Joomla! 2.5 & 3.0 permission. You could setup permission via Configuration-Permission section.

JseDonation configuration permission.jpg

Figure 13: Configuration-Permission

Beside the default Joomla Action like Create | Delete | Edit… We add the following actions for using donation at frontend:

Allow Donation allows you to configure which types of people allowed to donate.

Management at Backend

Manage campaign

Donation campaigns are the main part of JSE Donation. All functions of our component based on the process of create campaign → receive donation. Campaigns are managed on Campaign Management Panel at Backend.

The Campaign Management Panel can be accessed via “JSE Donation Control Panel” => “Campaigns”

JseDonation campaigns.jpg

Figure 14: Campaign Management

On the Campaign Management Panel, we setup all popular functions: Publish, Unpublished, Ordering… Besides, we add the Featured function. Campaign that was featured can receive special promotion from your site. For example, you could create a menu or a module dedicated for featured campaign only. (For more information, please see [ Creating Menu Items] section or [ Modules & Plug-ins configuration] section).

You could add new or edit campaign via Campaign Edit Page.

JseDonation campaign edit.jpg

Figure 15: Campaign Edit

Campaign’s property:

Title

Campaign’s title.

Status

Published, Unpublished or Trashed.

Alias

Campaign’s alias. Automatically generated if you leave it blank.

Featured

Campaign is featured or not.

Access

Access Level allows which level could view this campaign. It’s fully integrated with Joomla! 2.5 access level.

Language

On Multilanguage site, language to display campaign.

Ordering

Campaign Manager Order.

Recurring

Allow recurring donation or not.

Author

Campaign’s author.

Created Date

Campaign’s created date.

Goal

Donation amount that needed to be reached.

Start Date & End Date

Campaign’s start date and end date.

Default Amounts & Custom Amount

When placing a donation, donor can choose amounts from a dropdown list or enter new amount:

Jsedonation Fronend Donation Payment Amount.png

Default Amounts: data for this dropdown list.

Custom Amount: SHOW/HIDE Enter an amount input box.

Image

Campaign’s representative image.

Description & Additional Information.

Campaign’s content. Description usually used for introducing a campaign. Additional Information show more detail about that campaign.

See pictures at [ Display at Frontend] for more information.

Gallery

Campaign’s gallery.

In this section, you could add, remove, control show/hide images.

JseDonation campaigns gallery.jpg

Metadata:

Meta keyword & description

Campaign’s meta-keywords and meta-description.

JseDonation campaigns meta key desc.jpg

Manage donation

All donations made by creators are stored and managed on Donation Management.

The Donation Management Panel can be accessed via “Jse Donation Control Panel” => “Donates”

ZJ Donation Control Panel image033.png

Figure 22: Donation Management

You could create new donation or view donation detail.

JseDonation new donate.jpg

Figure 23: New Donation

Donation’s property

Donation Information block

All donors’ Basic information.

User name

Username if donor is a user.

Donation Amount

Donation’s amount.

Payment Method

Donation’s payment method.

Transaction ID

Transaction id of donation’s payment.

Public Donation

This donation is available for public view or not.

Status

Donation’s status: Published or Unpublished

Donated

Yes if payment for this donation is activated.

Created Date

Donation’s created date.

Payment Date

Donation’s payment date.

Campaigns block

Choose campaign for donating.

JseDonation detail donate.jpg

Figure 16: View Donation Detail

Create Menu Items

JSE Donation Component comes with several views that can be set to Menu Items.

JseDonation create menu items.jpg

Figure 17: JSE Donation Menu Items

Campaign Details

View detail of one campaign.

New Campaign

Create a new campaign at frontend.

Campaigns Default Layout

Default Layout for view campaigns

Campaigns Table Layout

Table Layout for view campaigns

List All Categories

View all categories

Campaigns table Layout

Table Layout for view campaigns of a category

Category Default Layout

Default Layout for view campaigns of a category

My Donations

View donors’ past donations

User’s Campaigns

View all campaigns of a user.

For the meaning of parameters for each menu item, please see at the corresponsive parts at User Cases at Frontend.

Use Case at Frontend

View Campaigns

Our component provides three layouts to view Campaigns.

Campaigns Default Layout

Campaign Default Layout displays campaigns successively.

JseDonation campaigns frontend.jpg

Figure 18: Campaigns Default Layout

Menu parameters

When create a Menu Item for Campaigns Default Layout, you must specify bellow parameters.

JseDonation campaigns menu parameters.jpg

No Campaigns Message

When there’s no campaign, display a message said “There’re no campaigns!” or leave page blank.

Running Campaigns Only

Only display campaign that has today date between its Start Date and End Date.

Featured Campaigns Only

Only display featured campaigns.

Hide Withdrawn Campaigns

Hide campaigns whose creator has withdrawn money.

Num Campaigns

Number of campaign to display in one page.

Campaigns order

Order of campaigns to display.

Date for ordering

If campaigns are ordered by date. Use Created Date, Start Date or End Date.

Pagination

Show pagination or not.

Campaigns Table Layout

Campaigns Table Layout displays campaigns as a table, with short information about those campaigns.

ZJ Donation Control Panel image042.png

Figure 29: Campaigns Table Layout

Menu parameters

Campaigns Blog Layout’s parameters are essentially similar with Campaigns Default Layout’s parameter, with some differences.

Show Description

Show Campaign’s description.

Description Characters

If show Campaign’s description. What is the maximum number of characters to display?

View Campaign Detail

Campaign Detail display content of a campaign. And you could create a Menu Item for a specific campaign.

ZJ Donation Control Panel image043.png

Figure 30: Campaign Detail 1

ZJ Donation Control Panel image044.png

Figure 31: Campaign Detail 2

ZJ Donation Control Panel image045.png

Figure 32: Campaign Detail 3

Place a donation

Visitors go to your site, view information about campaigns/projects. If they want to donate, they can go through donation form and payment process to become donors.

Donation Form

With our component, you could create flexible donation form from extremely simple to special detail.

JseDonation donate form simple frontend.jpg

Figure 22: Donation Form - Simple

JseDonation donate form detail frontend.jpg

Figure 23: Donation Form - Detailed

This could be done by setting at [ User Field Configuration] in Configuration – Integration section. And by creating new [ Custom Fields].

View My Donations

Donors can view their placed donations in a list or by detail page. You could also create a Menu Item for My Donations.

ZJ Donation Control Panel image048.png

Figure 35: My Donations

JseDonation donate details frontend.jpg

Figure 36: Detailed Donation

Submit a campaign

At frontend, users could submit their campaigns. You could create a Menu Item for New Campaign link.

Campaign Edit Form

The content of Frontend Campaign Edit Form is similar to the version in Backend. And you could see the [ Campaign’s property] section to know the meaning of each item.

Please remember that you could set that user could edit or not Extra Fields and Message at [ Configuration General]

JseDonation submit campaign frontend.jpg

Figure 26: Campaign form 1

JseDonation submit campaign 2 frontend.jpg

Figure 27: Campaign form 2

View User’s Campaigns

On User’s Campaigns page, creators can view all of their campaigns. This page helps creators keep track of their campaign information as well as numbers of donors for each campaign. From this page, they could take action like edit currently running campaigns or request withdraw with finished campaigns.

You could create Menu Item link to User’s Campaigns page.

ZJ Donation Control Panel image052.png

Figure 39: User's Campaigns

Modules configuration

We provide some modules for you to display information about campaign and donation. Those modules have numerous parameters which help you to create flexible module of your choice.

ZJ Donation Control Panel image054.png

Figure 41: All Modules

From left to right are: Campaigns Slider module, Campaigns module, Donors module and Thermometer module.

Campaigns Slider module

Campaigns Slider module displays a set of campaigns similar to an active image slider. This is the best way to introduce group of campaign that you want to promote.

Module settings

JseDonation slider modules setting.jpg

Figure 30: Configuration – Campaign Slider Module

Module Class Suffix

A suffix to be applied to the CSS class of the module.

Category

Select categories to display. If no category’s selected, display all categories.

Campaign

Select campaigns to display. If no campaign’s selected, display all campaigns.

Running Campaigns Only

Only display campaign that has today date between its Start Date and End Date.

Featured Campaigns Only

Only display featured campaigns.

Featured Campaigns Only

Only display featured campaigns.

Campaigns order

Order of campaigns to display.

Date for ordering

If campaigns are ordered by date. Use Created Date, Start Date or End Date.

Min number of Campaigns to display

Min number of campaigns to display on this module.

Max number of Campaigns to display

Maximum number of campaigns to display on this module.

Show Title, Start Date, End Date, Image…

Show/Hide Campaign’s Title, Start Date, End Date, Image

Linked Title, Image

If Show Campaign’s Title, Image link it or not with campaign detail page.

Date format

Format of date to be shown.

Width of Image & Height of Image

Width and height of the campaign’s image

Width of div & Height of div

Width and height of the content box for this module.

Auto run slide

If yes, the slide will automatically activate.

Mode

Setting the slide to run horizontally or vertically.

Direction

The direction to scroll campaigns would be to the left or right (for horizontal mode); up or down (for vertical mode).

Rolling delay time

Interval time between two consecutive scrolling.

Animation time

Time for scrolling.

Show control button

Show the <> buttons for manually scrolling.

Scroll When

The behavior of control buttons: scrolling when mouse click or mouse hover over.

Campaigns Module

This is the classic campaigns module. It helps you show information of a campaign or list of campaigns.

Module settings

Jse donation configuration mod donation campaigns.jpg

Most of parameters for Campaigns module are similar to those of Campaigns Slider module. Please look at [ Module settings] of Campaigns Slider for meaning of each parameter.

Donors Module

Donors module is a module displaying donors information.

Module settings

Jse donation configuration mod donation donors.jpg

Module Class Suffix

A suffix to be applied to the CSS class of the module.

Campaign

Select campaigns to display. If no campaign’s selected, display donors for all campaigns.

Number Donors

Maximum number of donors to display.

Display donor type

You could choose three types of donors to display: latest donors, highest donors and random donors.

Integration

The donor name could have link to user’s JomSocial page or Community Builder page. This parameter helps you set that feature.

Display username for registered user

For donors that registered on your site, you could choose to display username or full name.

Thermometer Module

Thermometer module displays an animated picture showing the progress of donation. It helps visitors have more sensitive impression about one campaign.

Module settings

Jse donation configuration mod donation thermometer.jpg

Module Class Suffix

A suffix to be applied to the CSS class of the module.

Campaign

Select campaigns to display. If no campaign’s selected, display thermometer for all campaigns.

Show campaign title

Display campaign’s title or not.

Currency

Choose currency to display. You could display US Dollar, British Pound, Japanese Yen, Euro or no currency.

Theme

In addition for thermometer picture, we have various themes: cheer, church, green.


ZJ Donation Control Panel image059.png

Plug-ins configuration

PayPal Plug-in

This is a payment plug-in, it allows users to donate for your campaign via PayPal.

Plug-in settings

ZJ Donation Control Panel image060.png

Test mode

If yes, the payment through this plug-in will go to PayPal Sandbox test instead of real payment page.

Note: the Secure mode must be Yes for Test mode to perform correctly.

Secure mode

Use PayPal secure response URL.

PayPal Account

Your PayPal’s account.

Merchant image

Your merchant image URL.

Payment logo

PayPal Logo URL to show at payment listing.

Log IPN data

Log all the payment information to folder plugins/zjdonation/paypal/paypal/ipn_log.txt

No Shipping

Choose Yes for no shipping method, use this for intangible.

Offline Payment Plug-in

Sometime, donors cannot donate through online method. This Offline Payment plug-in helps you enable this type of payment. By default, when donors choose Offline Payment, the payment will be approved automatically. You can view it later on [ Donation Management Panel] on Backend.

Plug-in settings

The only parameter for this plug-in is Transaction ID that will be displayed on donation detail page. By default, it is set to OFFLINE.

2Checkout Plug-in

This is a payment plug-in, it allows users to donate for your campaign via 2Checkout.

Plug-in settings

ZJ Donation Control Panel image061.png

Payment logo

2Checkout Logo URL to show at payment listing.

Merchant ID

Your 2Checkout merchant image URL.

Secret Word

Your 2Checkout secret word.

Routine

2Checkout routine, Single page for one step checkout, Multi page for multi page checkout.

Mode

2Checkout mode. Testing or Live.

Email Merchant

Send email to merchant when new payment is placed.

JomSocial Plug-ins

Donation History Plug-in

This plug-in displays donation history in JomSocial profile page.

ZJ Donation Control Panel image062.png

Figure 42: Donation History Plug-in for JomSocial

Plug-in settings

ZJ Donation Control Panel image063.png

Core Application

If Yes, this plug-in will appear in all users’ profile page. If No, users need to add this to their profile.

Caching

Use cache or not.

Number Intro

Maximum number of donations to be displayed.

Show Payment Method

Show/Hide Payment Method column.

Show Donated Times

Show/Hide Donated column.

Date Format

Date Format for Donation’s Date.

Community Builder Plug-ins

Donation History Plug-in

This plug-in displays donation history as a tab in Community Builder profile page.

ZJ Donation Control Panel image062.png

Figure 43: Donation History Plug-in for Community Builder

Plug-in settings

ZJ Donation Control Panel image064.png

Number Per Page

Number of donations to be displayed on a page.

Show Payment Method

Show/Hide Payment Method column.

Show Donated Times

Show/Hide Donated column.

Date Format

Date Format for Donation’s Date.

Customization

In this chapter, we will show you how to create a template for Jse Donation component.

Multiple Templates system

This component as well as all the components from Joomseller.com has multiple templates system. It means that you could create unique and differential templates and switch between them anytime you want.

So, how to create a new template, it’s very simple:

  • Go folder “components/com_jse_donation/templates/”. You could see that there’s a folder named “default”, this is our default template.
  • Duplicate folder “default” and give new folder a name call “your_template”. Make sure that all files in folder “default” are copied to folder “your_template”.
  • Now you can go to “Jse Donation Control Panel” => “Configuration” => “General”. You can see in Template block, there’re “default” and “your_template” in Default template dropdown list. If you choose “your_template” our component will use “your_template” to display.

Now, you’ve already created a new template. And the best past is you could modify it in any way you like, if anything went wrong, you could always switch back to our default template.

Please see our next part to know how to create template as you want correctly and effectively.

Modify Jse Donation template

Note before you do anything

First, please remember that you need to know about HTML & CSS before doing anything. If you don’t know, we highly recommend that you read two tutorials:

Second, please keep in mind that you must only modify “your_template”, don’t change anything in our default template.

Customize template

Tools

We highly recommend that you should use Firebug (plug-in for Firefox). It’s very useful tool. When you browsing a webpage, you could right click on any element (image, button, link…), choose “Inspect Element with Firebug”. You will see all the HTML & CSS resources, the CSS values that affect this element and where you could find those values too. Moreover, you could modify CSS values right on the browser to see how your page will be changed before actually edit it on CSS file.

How to customize correctly

We have template files and resources files. Template files have structure and resources files include style and images. You could modify resources file: edit CSS values, change image files as you want. Template files should be used only for reference about element information such as: name, type and CSS class.

Resources file

All our CSS files and images are stored in folder your_template/assets.

jse_donation.css

Common CSS file, the CSS for campaigns page and campaign detail page are all written here.

campaignform.css

Contain some CSS setting specified for Campaign Edit page.

imagehandler.css

Contain all the CSS setting for select image window.

withdrawform.css

Contain all the CSS setting for request withdraw window.

slimbox.css

Contain some CSS setting for picture viewer window.

jse_donation_modules.css

Contain common the CSS setting of modules for this component. All the CSS values for Campaigns module, Donors module, and Thermometer module are stored here.

Template files

All the templates files used for displaying at frontend are stored in folder your_template. The source codes in those files are a little bit complex, because they included PHP code. But you should easily spot the html structure there.

campaign.php

Template for Campaign Detail Page.

campaigns.php

Template for Campaigns Default Layout.

campaigns_blog.php


Template for Campaigns Blog Layout.

campaigns_table.php

Template for Campaigns Table Layout.

campaignform.php & campaignform.xxx.php

Template for Campaign Edit page.

donate.php & donate.xxx.php

Template for Donation Form page.

confirmdonation.php

Template for Confirm Donation page.

message.php

Template for Thank You page. Page that donors will be redirected to after donation.

mydonations.php

Template for My Donation page.

mydonation.php

Template for Donation Detail page.

usercampaigns.php

Template for User’s Campaigns page.

imagehandler.php & imagehandler.xxx.php

Template for Image Select window.

donors.php

Template for Donors List window.

Developers Manual

TBD