Joomla Payment Form by Joomdonation — Plugin Edit Notes

This space is used to share personal notes for setting up and editing the PMF (Joomla Payment Form) extension by Joomdonation.

Payment Form 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.

Leave a Comment