Styleguide
Introduction
In order to get an better picture of how the templates on donate.wiki relate to one another review the images below. The Landing Page is chopped up into many templates so that we can change and test individual pieces of the page without changing core functional pieces of the page. This provides us with more stability for a broader range of users.
- Superficial changes to the various payment options can be done with editing the "Form-countryspecific-*" template for the country you wish to change.
- Superficial changes to the layout and the appeal are done by changing the banner.
Information flow
The flow of information from template to template is laid out in the image to the right.
Banner
Banner settings completely determine which landing page is displayed, in which language, and where the page runs. All banners call the Lp-layout-default template and pass it the names of 4 templates. The default values follow:
- Template:2011FR/Appeal-template-default
- "Appeal-default"
- Template:2011FR/Form-template-default
- Template:2011FR/Form-countryspecific-control
For specifics of the donate.wiki versions of the banner code visit Styleguide/Banner.
Appeal
The "2011FR/Appeal-default" is used by Template:2011FR/Appeal-template-default to call the following 2 templates:
Payment
The template that ties together the payment form on the right of the page is Template:2011FR/Form-template-default. The country specific details are set by the template Template:2011FR/Form-countryspecific-control.
Form-countryspecific-control example
This is example code from Template:2011FR/Form-countryspecific-control/AU. The following CSS is used to enable or disable payment methods for each country by commenting out either the "display: 'status';"(on) or the "display: none;"(off).
<html>
<style type="text/css">
#CC-donate-button{
display: </html>{{CC-status}}<html>;
/*display: none;*/
}
#Ideal-donate-button{
/*display: </html>{{RT-status}}<html>;*/
display: none;
}
#eps-donate-button{
/*display: </html>{{RT-status}}<html>;*/
display: none;
}
#sofort-donate-button{
/*display: </html>{{RT-status}}<html>;*/
display: none;
}
#DD-donate-button{
/*display: </html>{{DD-status}}<html>;*/
display: none;
}
#PP-donate-button{
display: </html>{{PP-status}}<html>;
/*display: none;*/
}
#PP-USD-donate-button{
/*display: </html>{{PP-status}}<html> !important;*/
display: none;
}
#RPP-donate-button{
/*display: </html>{{PP-status}}<html>;*/
display: none;
}
#YD-donate-button{
/*display: </html>{{YD-status}}<html>;*/
display: none;
}
#MB-donate-button{
/*display: </html>{{MB-status}}<html>;*/
display: none;
}
#BP-donate-button{
/*display: </html>{{BP-status}}<html>;*/
display: none;
}
#BT-donate-button{
display: </html>{{BT-status}}<html>;
/*display: none;*/
}
#BP-donate-button{
display: </html>{{Bpay-status}}<html>;
/*display: none;*/
}
</style>
</html>
This part of the code pulls in the payment processing JS. Most of the perimeter are used to past information around. The only one that should be changed is "GC-CC-ffname". This perimeter changes the credit cards that we accept in that country. A list of options follows:
- cc-vm - Visa, MasterCard
- cc-vma - Visa, MasterCard, AmericanExpress
- cc-vmj - Visa, MasterCard, JCB
- cc-vmaj - Visa, MasterCard, AmericanExpress, JCB
{{2011FR/Form-section-processing
| uselang = {{{uselang}}}
| country = {{{country}}}
| appeal = {{{appeal}}}
| currency = {{2011FR/core-currency-code|{{{country}}}}}
| handler = GC
| GC-CC-ffname = cc-vmaj
}}
This part of the code pulls in the display method for the donation options and sets the values to be displayed. The "donate-amount-*" perimeters set the values that will be used in the country. These values are in the currency that has been set as the local currency.
{{2011FR/Form-section-radiobuttons
| country = {{{country}}}
| uselang = {{{uselang}}}
| currency = {{2011FR/core-currency-code|{{{country}}}}}
| donate-amount-0 = 5
| donate-amount-1 = 10
| donate-amount-2 = 20
| donate-amount-3 = 25
| donate-amount-4 = 50
| donate-amount-5 = 100
| donate-amount-6 = 250
}}
Helper Templates
Currency templates
The following 2 templates contain the information needed to get currency details.
- Template:2011FR/core-currency-code - Returns the code of the official currency for each country.
- Template:2011FR/core-currency-symbol - Returns the symbol for each currency.
- Template:2011FR/core-currency-minimums - Lists the minimum donation amount for each currency to be used in a JavaScript array.
- Template:2011FR/core-currency-position
Switch templates
The following is a list of templates templates that are used to change page content based on language, country, etc.
- Template:AppealAmountSwitch
- Template:AppealAmountSwitch/en
- Template:AppealSwitch
- Template:CountrySwitch
- Template:FallbackSwitch
- Template:Ltr-direction
- Template:Translationlink
Payment method status
The following is a list of templates that can be use to turn on and off their respective payment methods by toogling the value stored inside the template between "block"(on) and "none"(off).