This space is used to share personal notes for setting up and editing the PMF (Joomla Payment Form) extension by Joomdonation.
Please note, that the version these edits were made for is 4.2 — this was in May, 2016. Suitability for the latest version from Joomdonation in 2024 is unknown.
These are all the edits I made at the time;
- Show All Payments in Control Panel
- Trigger Datepicker with Input Field
- Datepicker Cleanup
- Confirmation Step GoBack Anchor Link
- Change Error Bubble Location for Mobile
Show All Payments in Control Panel
This includes Pending, Review & Failed status.
/administrator/components/com_pmform/model/payments.php
change to (line 51):
//$query->where('(tbl.published=1 OR tbl.payment_method LIKE "os_offline%")');
Trigger Datepicker with Input Field
Change behavior to trigger the date selector popup by directly clicking the date input field. Copy over and override this file:
/components/com_pmform/view/form/tmpl/
copy to /templates/yourtemplate/html/com_pmform/form/default.php
Below:
$fields = $this->form->getFields();
Add:
$dateFields = array();
Below:
foreach ($fields as $field)
{
Add:
if ($field->type == 'Date')
{
$dateFields[] = $field->name;
}
Below:
$(document).ready(function(){
Add:
Note: Replace #showdate with correct name from custom fields
$('#showdate').click(function(){
<?php
foreach ($dateFields as $fieldName)
{
?>
$('#<?php echo $fieldName?>_img').click();
<?php
}
?>
})
Hide the button on the right side with CSS override:
button#showdate_img { padding: 0 !important; }
div.controls div.input-append { display: block !important; }
Datepicker Cleanup
PMF Uses the Joomla core calendar. “DHTML Date/Time Selector.”, some old documentation can be found here –> http://www.dynarch.com/jscal/. These methods are really inconvenient and I wish there would be a better calendar system.
/media/system/css/calendar-jos.css
- disable annoying effect that makes the calendar fields move on hover
.calendar thead .hilite { /* How do the buttons in header appear when hover */
background: #bbbbbb;
color: #000000;
/* border: 1px solid #cccccc; */
/* padding: 1px; */
}
- hide bottom message bar, top left about calendar and top right close buttons
.calendar .hiderow .button, .footrow { display: none; }
/media/system/js/calendar.js
- add the ‘hiderow’ class used in css, and change title length to fit the absence of week numbers. aka. fix layout position.
Find:
row = Calendar.createElement("tr", thead); (row 771)
Below:
row.className = "hiderow"; // added line
var title_length = 8; // changed from 6
/media/system/js/calendar-setup.js
- remove week numbers
param_default("weekNumbers", false);
- change date range
param_default("range", [2016, 2017]);
PS. replace with calendar-uncompressed.js and calendar-setup-uncompressed.js for easier editing. example:
mv calendar.js calendar.js.bak
mv calendar-setup.js calendar-setup.js.bak
cp calendar-uncompressed.js calendar.js
cp calendar-setup-uncompressed.js calendar-setup.js
Confirmation Step GoBack Anchor Link
By default when user chooses to go back to edit form details in the confirmation step, it just goes to the very top of the previous page. Like this we can implement anchor link positioning.
/components/com_pmform/view/confirmation/tmpl/default.php
copy to /templates/yourtemplate/html/com_pmform/confirmation/default.php
<script type="text/javascript">
function goBack()
{
var form = document.adminForm;
form.action = '<?php echo base64_decode($this->formPageUrl); ?>#pmform' ;
form.submit();
}
</script>
Added “#pmform” anchor link to script. Then add <a name=”pmform”> </a> to form position on page.
Change Error Bubble Location for Mobile
The “this field is required” speech bubble jumps out of div and breaks mobile layout. To change position more to the left for example.
/components/com_pmform/assets/js/paymentform.js
find:
$(formId).validationEngine('attach', {
below add:
promptPosition : "topRight:-130",
Files to Edit Payment Pages
These files change code layout of payment related pages. Text strings contained can be edited within the component backend itself.
- Payment confirmation page
/components/com_pmform/view/confirmation/tmpl/default.php
copy to /templates/yourtemplate/html/com_pmform/confirmation/default.php
Note: the file was copied already in anchor link edit above
- Redirecting to PayPal notice page
/components/com_pmform/payments/os_paypal.php
- Cancelled payment page
/components/com_pmform/view/cancel/tmpl/default.php
copy to /templates/yourtemplate/html/com_pmform/cancel/default.php
Test URL —> http://www.domain.com/index.php?option=com_pmform&view=cancel&id=160&Itemid=0
- Successful payment page
/components/com_pmform/view/complete/tmpl/default.php
copy to /templates/yourtemplate/html/com_pmform/complete/default.php
Fix Corner
Payment cancelation translation string is completely missing.
/language/en-GB/en-GB.com_pmform.ini
Add:
PM_CANCELLED="Payment Cancelled"
PMF is incompatible with “TheGrue Menu” module extension. Need to disable Touch Events or the form wont work properly at all.
/modules/mod_gruemenu/js/script.js
Remove this code bit:
/* Touch Events
/* ------------------------------------ */
$(window).touchwipe({
wipeLeft: function() {
// Close
$.sidr('close', 'sidr-main');
},
wipeRight: function() {
// Open
$.sidr('open', 'sidr-main');
},
preventDefaultEvents: false
});
If getting this or error message or similar:
This email address is being protected from spambots. You need JavaScript enabled to view it.” class=”inputbox validate[required,custom[email]]” size=”35″ />
—> Need to disable “Content – Email Cloaking” plugin.
Change to Simple Email Layout
Simple list of form fields and values followed by line-break.
/administrator/components/com_pmform/libraries/osf/form/field.php
find:
return '<tr>' . '<td class="title_cell">' . $this->title . '</td>' . '<td class="field_cell">' . $fieldValue . '</td>' . ‘</tr>';
change to (example plain version):
return $this->title . ': ' . $fieldValue . '</br />';
/components/com_pmform/emailtemplates/email.php
find:
<tr>
<td class="title_cell">
<?php echo JText::_('PF_TOTAL_AMOUNT'); ?>
</td>
<td>
<?php echo PMFormHelper::formatCurrency($row->total_amount, $config); ?>
</td>
</tr>
change to:
<br /><?php echo JText::_('PF_TOTAL_AMOUNT'); ?>: <?php echo PMFormHelper::formatCurrency($row->total_amount, $config); ?><br />
find:
<tr>
<td class="title_cell">
<?php echo JText::_('PF_PAYMENT_OPTION');?>
</td>
<td>
<?php echo JText::_($method->getTitle()); ?>
</td>
</tr>
change to:
<?php echo JText::_('PF_PAYMENT_OPTION');?>: <?php echo JText::_($method->getTitle()); ?><br />
find:
<tr>
<td class="title_cell">
<?php echo JText::_('PF_TRANSACTION_ID');?>
</td>
<td>
<?php echo $row->transaction_id; ?>
</td>
</tr>
change to:
<?php echo JText::_('PF_TRANSACTION_ID');?>: <?php echo $row->transaction_id; ?>
/administrator/components/com_pmform/libraries/osf/form/field/date.php
find:
return '<tr>' . '<td class="title_cell">' . $this->title . '</td>' . '<td class="field_cell">' . $fieldValue . '</td>' . '</tr>';
change to:
return $this->title . ': ' . $fieldValue . '</br />';
Also I made some edits to the style sheet file at;
/components/com_pmform/assets/css/style.css
And that’s the end of my post.
Comments welcome on Joomdonation’s Payment Form plugin.
Thanks for visit and share if possible, please.