Woocommerce, Payment gateway function not running on checkout WordPress
Hi All
I hope you are all well, I have an issue i need some help with,
This is the second time i'm posting on this foruim for support with this issue, a member here helped me fix it about a month ago, although now after some extensions and updates to the website the problem has reappeared and I need a solution to fix it properly,
CONTEXT,
Recently a client asked me to convert really old website to wordpress, to make it responsive and have a basic woocommerce framework to sell some goods online
I completed this at the beginning of the year, we've been using a payment gateway company company called PayGate to do card payments and everything has been running well.
last month we needed to create new pages and some new functionality, I basically rebuilt the website upgrading wordpress and woocommerce to the latest versions but generally keeping the template and page content the same. We are now using the latest version of the payment gateway company plugin to do the payments - I have tested it on other themes and i know it works perfectly,
THIS IS THE ISSUE
I've upgraded all woocommerce template files, some basic theme changes and I've installed the new paygate payment gateway plugin. When i click checkout with paygate with MY theme activated, the plugin does NOT redirect to the paygate payment portal as its supposed to, it just literally goes straight to the payment confirmation page, and produces an error in the console,
when I check the console I get the following error with my theme, not with twenty fifteen
Uncaught TypeError: $.blockUI is not a function
That code is within the Paygate plugin,
this is the code that is not running apparently
wc_enqueue_js('
$.blockUI({
message: "<img src=\"' . $woocommerce->plugin_url() . '/assets/images/ajax-loader.gif\" alt=\"Redirecting...\" /><br>' . esc_js(__('Thank you for your order. We are now redirecting you to PayGate to make payment.', 'paygate')) . '",
baseZ: 99999,
overlayCSS:
{
background: "#fff",
opacity: 0.6
},
css: {
padding: "20px",
zindex: "9999999",
textAlign: "center",
color: "#555",
border: "3px solid #aaa",
backgroundColor:"#fff",
cursor: "wait",
lineHeight: "24px",
}
});
jQuery("#submit_paygate_payment_form").click();
');
I disabled all other scripts except jquery and it still doesn't run,
When I activate the twenty fifteen theme it DOES redirect to the paygate payment page
I have installed a fresh version of word press and installed just my theme, i've installed no other plugins beside woocommerce and the payment gateway plugin, and it still doesn't redirect it just goes straight to the payment confirmation page
This is the SECOND time I am posting this issue, a member on this website helped me fix it last time, he said he moved the code up the order in the file and it started working, however after recent updates it has stopped working again,
To see how the plugin SHOULD work, please visit
http://www.topofthemorning.co.za/test/1/
Please click on shop,
add a product to the cart,
create an account and checkout with PAYGATE,
You will see the website redirect to the payment page,
This is what is SUPPOSED to happen
To see the PROBLEM & what is currently happening with my website please go to:
http://www.topofthemorning.co.za/dev/venta/3/
please add a product to the cart and checkout with PAYGATE,
you see will that the payment process DOES NOT redirect, it just goes to a temporary confirmation page
If you need FTP access and wordpress logins please request this I will be happy to send them to you, i have made copies of the website for testing,
I'd really appreciate your assistance to figure this out, i'm not very clued up with jquery at all, i believe that if you know jquery you ill be able to fix this very quickly,
I will award the full reward to someone who can fix it & EXPLAIN TO ME PRECISELY WHAT THE PROBLEM IS..
If you just fix it I will only give you half. I need to understand why this keeps happening and how to make sure it doesn't happen again,
Thank you very much
Best Regards
Michael
[email protected]
Answers (2)
Reigel Gallarde answers:
your code should work fine...
But because your theme is loading jQuery twice, it now has a problem
this one...
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js?ver=4.4'></script>
and this one...
<script type='text/javascript' src='http://www.topofthemorning.co.za/dev/venta/3/wp-content/themes/venta/js/jquery-frameworks.js?ver=1.0.0'></script>
[[LINK href="http://www.topofthemorning.co.za/dev/venta/3/wp-content/themes/venta/js/jquery-frameworks.js?ver=1.0.0"]]jquery-frameworks.js[[/LINK]] has jQuery 1.7.2 on it.
this would not give a problem if only the blockUI (jquery.blockUI.min.js) was loaded after both jQuery was loaded.
blockUI was loaded after jquery.min.js, but before jquery-frameworks.js.
so when jquery-frameworks.js was loaded, your jQuery variable was overwritten by a new jQuery variable, thus $.blockUI is gone.
I'm not sure how to give you a proper solution because I'm not sure how your theme was coded.
You just have to make sure that jquery.blockUI.min.js should load after the last jQuery loaded.
Better yet, try that only one jQuery should load. this way there will be no other conflict in the future.