fiddler1

I've been trying to get my site as mobile-friendly as possible prior to going live. I had trouble with the authorizeaim module for credit card processing by Authorize.net - it would not display well in responsive themes, and didn't work at all with mobile. After some tinkering, I am happy to share a version of the primary template for this module which works great in responsive themes, and also works well with the default mobile theme. There remain a few issues that maybe someone else can fix: - Authorizeaim still does not pull up the order-confirmation page. It goes to order history or guest tracking. - I could not make the drop-down list for expiration date month to work on mobile. Jquery or something is adding leading zeros to the date. So that's why this has an entry blank for month. - Of course you need SSL working to use this module, and use my changes at your own risk. This is my rework of file authorizeaim.tpl: {* * 2007-2013 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to [email protected] so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <[email protected]> * @copyright 2007-2013 PrestaShop SA * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} <link rel="shortcut icon" type="image/x-icon" href="{$module_dir}secure.png" /> <p class="payment_module" > {if $isFailed == 1} <p style="color: red;"> {if !empty($smarty.get.message)} {l s='ERROR; there is a problem with your transaction: ' mod='authorizeaim'}{$smarty.get.message|htmlentities} {else} {l s='ERROR; your card information seems to be incorrect.' mod='authorizeaim'} {/if} </p> {/if} <form name="authorizeaim_form" id="authorizeaim_form" action="{$module_dir}validation.php" method="post" data-ajax="false"> <span style="border: 1px solid #595A5E;display: block;padding: 0.9em;text-decoration: none;margin-left: 0.7em;"> <a id="click_authorizeaim" href="#" title="{l s='Pay with credit card' mod='authorizeaim'}" style="display: block;text-decoration: none; font-weight: bold;"> {if $cards.visa == 1}<img src="{$module_dir}cards/visa.gif" alt="{l s='Visa Logo' mod='authorizeaim'}" style="vertical-align: middle;" />{/if} {if $cards.mastercard == 1}<img src="{$module_dir}cards/mastercard.gif" alt="{l s='Mastercard Logo' mod='authorizeaim'}" style="vertical-align: middle;" />{/if} {if $cards.discover == 1}<img src="{$module_dir}cards/discover.gif" alt="{l s='Discover Logo' mod='authorizeaim'}" style="vertical-align: middle;" />{/if} {if $cards.ax == 1}<img src="{$module_dir}cards/ax.jpg" alt="{l s='American Express Logo' mod='authorizeaim'}" style="vertical-align: middle;" />{/if} {l s='Credit Card' mod='authorizeaim'} <img src="{$module_dir}logoa.gif" alt="secure payment" style="vertical-align: middle; float: right"/> </a> {if $isFailed == 0} <div id="aut2"style="display:none"> {else} <div id="aut2"> {/if} <br /><br /> <input type="hidden" name="x_solution_ID" value="A1000006" /> <input type="hidden" name="x_invoice_num" value="{$x_invoice_num}" /> <label style="margin-top: 4px; margin-left: 5px;display: block;">{l s='Name on Card' mod='authorizeaim'}</label><br/> <input type="text" name="name" placeholder="Your Name" id="fullname" size="30" maxlength="25S" data-mini="false" /><img src="{$module_dir}secure.png" alt="" style="margin-left: 5px;" /><br /><br /> <label style="margin-top: 4px; margin-left: 5px; margin-bottom: 4px; display: block;float: left;">{l s='Card Type' mod='authorizeaim'}</label><br/><br/> <select id="cardType" data-mini="false"> {if $cards.ax == 1}<option value="AmEx">American Express</option>{/if} {if $cards.visa == 1}<option value="Visa">Visa</option>{/if} {if $cards.mastercard == 1}<option value="MasterCard">MasterCard</option>{/if} {if $cards.discover == 1}<option value="Discover">Discover</option>{/if} </select> <img src="{$module_dir}secure.png" alt="" style="margin-left: 5px;" /><br /><br /> <label style="margin-top: 4px; margin-left: 5px; display: block;">{l s='Card Number' mod='authorizeaim'}</label><br/> <input type="text" name="x_card_num" placeholder="Card Number" id="cardnum" size="30" maxlength="16" autocomplete="Off" data-mini="false" /><img src="{$module_dir}secure.png" alt="" style="margin-left: 5px;" /><br /><br /> <label style="margin-top: 4px; margin-left: 5px; display: block; float: left;">{l s='Expiration date MM/YYYY' mod='authorizeaim'}</label><br/><br/> <input type="text" id="x_exp_date_m" name="x_exp_date_m" placeholder="MM" data-mini="false" size="2" maxlength="2"> / <select name="x_exp_date_y" data-mini="false">{section name=date_y start=14 loop=20} <option value="{$smarty.section.date_y.index}">20{$smarty.section.date_y.index}</option>{/section} </select> <img src="{$module_dir}secure.png" alt="" style="margin-left: 5px;" /><br /><br /> <label style="margin-top: 4px; margin-left: 5px; display: block;">{l s='Card Security Code' mod='authorizeaim'}</label> <input type="text" name="x_card_code" placeholder="Code" id="x_card_code" size="4" maxlength="4" autocomplete="Off" /><img src="{$module_dir}secure.png" alt="" style="margin-left: 5px;"/> <img src="{$module_dir}help.png" id="[spam-filter]_help" title="{l s='Security code: Last 3 digits on the back of your card, or the small 4 digits on the front of your American Express card.' mod='authorizeaim'}" alt="" /><br /><br /> <img src="{$module_dir}[spam-filter].png" id="[spam-filter]_help_img" alt=""style="display: none;" /> <br /> <br /> Your card will be charged after you press the button below. Please click only once.<br /><br /> <input type="button" id="asubmit" value="{l s='Place Order' mod='authorizeaim'}" style="margin-left: 129px; padding-left: 25px; padding-right: 25px; float: left;" class="button" /> <br class="clear" /> </div> </span> </form> </p> <script type="text/javascript"> var mess_error = "{l s='There seems to be a problem with your credit card information (Credit card type, number, expiration date, or [spam-filter])' mod='authorizeaim' js=1}"; var mess_error2 = "{l s='Please enter your name as it appears on your card.' mod='authorizeaim' js=1}"; {literal} $(document).ready(function(){ $('#x_exp_date_m').children('option').each(function() { if ($(this).val() < 10) { $(this).val('0' + $(this).val()); $(this).html($(this).val()) } }); $('#click_authorizeaim').click(function(e){ e.preventDefault(); $('#click_authorizeaim').fadeOut("fast",function(){ $("#aut2").show(); $('#click_authorizeaim').fadeIn('fast'); }); $('#click_authorizeaim').unbind(); $('#click_authorizeaim').click(function(e){ e.preventDefault(); }); }); $('#[spam-filter]_help').click(function(){ $("#[spam-filter]_help_img").show(); $('#[spam-filter]_help').unbind(); }); $('#asubmit').click(function() { if ($('#fullname').val() == '') { alert(mess_error2); } else if ($('#cardnum').val(), $('#cardType').val(), $('#x_card_code').val() == '') { alert(mess_error); } else { $('#authorizeaim_form').submit(); } return false; }); }); {/literal} </script> And attached to this post are two images: an updated American Express logo, and also a smaller Authroize.net checkout logo. The larger image that comes with the module does not work well with my changes. Here is the American Express logo (note that this is jpg and not gif like the original) And here is the smaller Authnet logo Hope this helps someone else, and please post if you have further improvements. - Tim

Thanks Dh42! So maybe this will help you, Stefano: http://www.prestashop.com/forums/topic/217722-mobile-theme-do-not-display-custom-payment-modules/?do=findComment&comment=1479906 ZhenIT describes the file classes/module/Module.php and describes a fix. Prestashop is hard-coded to only display PayPal in Italy and some other European nations on the default mobile theme! So maybe it worked for me because I'm in the USA. But I think you can use the information from that discussion to get your payment modules working. If your online shop only sells to local customers in Italy, it may be that your payment module will work just by removing IT from the list in Module.php. It seems the SSL probably doesn't matter for this, but maybe it's a good idea anyway. Ciao, - Tim

So I've heard, but somehow I have it working quite well. My payment modules have always appeared in the mobile theme. I had to do a lot of work to the AuthorizeAim module to make it display correctly in mobile, but everything else has worked fine for me. So we're trying to figure out why it works for me but not for Stefano. Could the SSL be his problem? In which file do we find the code that makes this only work with Paypal?

I understand now why Stefano and I have differences in the URL for the order page. Donleyviolins.net is using search-engine-friendly URL in the back office, but andfood.it has friendly URL turned off. But I switched donleyviolins.net over to default theme, 5-step order, and not-friendly URL. This makes it as much like andfood.it as possible. So my network request for the last order page becomes: [09:55:38.850] POST https://www.donleyviolins.net/shopping/index.php?controller=order&multi-shipping= [HTTP/1.1 200 OK 2845ms] but still I get my payment modules with no problem. I have the brow.si module active, so donleyviolins makes a GET request from js.brow.si but I don't think this would matter with Stefano's problem. So here's a couple ideas for Stefano and maybe others that don't have the payment modules on mobile: Everybody says it should work with PayPal, and I have PayPal USA/Canada installed. So why not install PayPal module and see if it works? Is there a PayPal Europe module? You can always deactivate it later. Also it's possible that there is some file that requires SSL to be active for the payment module to come up on mobile. So maybe if you have SSL certificate, you can check "enable SSL" on back office Preferences > General and see if it works. Probably customers would be happy to have their address and order details handled over SSL even with no credit card. If I think of something else I will post, but not sure what the problem could be for Stefano. Anyone else have ideas? Cheers, - Tim

I don't have a solution for you, Stefano, but here are some observations, clues perhaps that might help us figure this out. Your site is not running with SSL. Could that make a difference? I also see it is functioning a little differently from mine, and I don't understand why. Here's what I mean: This is the POST request which should cause the final checkout screen with payment modules to show. On andfood.it mobile: -- [16:12:20.369] POST http://www.andfood.it/index.php?controller=order&multi-shipping= [HTTP/1.1 200 OK 912ms] And on donleyviolins.net/shopping mobile: [16:42:14.464] POST https://www.donleyviolins.net/shopping/order?multi-shipping= [HTTP/1.1 200 OK 4856ms] So my site, which is pulling up the mobile payment modules, is working differently. If anyone knows why, please tell us, and maybe it will help us figure this out! I don't know if this will help or not, but I hope so!

Well, Stefano, I don't know. I never had the trouble with the modules not appearing at all. They appeared for me but did not work. I tried switching back to the default theme and they still appeared for me. You may have already done so, but you might want to check this: - you have module templates installed in your theme directory (not needed in mobile theme directory, but I think they must be in base theme directory for mobile to work) - permissions set correctly for module files TPl files 644 and directories 755 - you have order-payment.tpl and order-opc-payment.tpl installed in /yourtheme/mobile/ These files are in the default mobile theme for 1.5.6.1 - I added order-confirmation.tpl to the mobile directory, but don't think this would fix your problem by itself. I don't mind posting particular files from my system if you think it would help. I tried to make guest checkout work, but I gave up on that. - I am using 1-step checkout (quickorder) I don't know if 5-step works with mobile or not. Is your site online where we could have a look at it, and maybe someone will have some ideas? Buona fortuna! - Tim

Stefano, what exactly is the trouble you have with the payment on mobile? Maybe we can look at your site? Is the module showing on your payment page and it doesn't work, or is there no module on the payment page? My modules always showed on payment page - no problem there, they just didn't work. I still have one problem with the modules COD and Authorize.net - they both bypass order.confirmation and go straight to history, but that happens on both mobile and regular theme. I'll start another thread about that one. Cheers, - Tim

I've been tinkering with this too. I almost have COD working on the mobile theme. But I still have a problem because you must press the "submit order" button twice before the order is sent and the page switches. I think these are the main items needed to get COD (almost) working on mobile theme: 1. copy order.confirmation.tpl into the mobile directory 2. copy history.tpl into mobile directory 3. make sure COD works with your standard theme first. If it doesn't see one possible fix here: http://www.prestashop.com/forums/topic/293437-cash-on-delivery-cod-04-not-working/ Now to figure out why we must push the button twice. Any ideas? My store is under development at http://www.donleyviolins.net/shopping.. Well, now it seems to be working with just one push of the button. Maybe it was just some junk in the cache.

The issue with SSL was fixed by adding : public $ssl=true to the file OrderConfirmationController.php as discussed here: http://www.prestashop.com/forums/topic/158889-solvedssl-problem-on-order-confirmation-page-after-paypal-redirect/ The web console still shows some 302 errors being thrown in the process, but it works and it stays on SSL for the customer data.

I posted a partial solution to this problem last night here: http://www.prestashop.com/forums/topic/293437-cash-on-delivery-cod-04-not-working/ I say "partial solution" because there remains an issue with the software working outside of SSL to finish the transaction.

It looks like the develpment team is re-working the order payment / confirmation methods, and there is a patchwork of redirects inside the php files that control order validation. But here's a fix that worked for me to get COD up and running: The file [baseurl]/modules/cashondelivery/controllers/front/validation.php is sending out the confirmation string in an order which is unacceptable to the new payment system. You can edit this file in the following manner: 1. Find and comment out this code (or I guess you could delete it): /*Tools::redirectLink(__PS_BASE_URI__.'order-confirmation.php?key='.$customer->secure_key.'&id_cart='.(int)$this->context->cart->id.'&id_module='.(int)$this->module->id.'&id_order='.(int)$this->module->currentOrder);*/ 2. Now add this code in its place (which I adapted from the cheque module): Tools::redirect('index.php?controller=order-confirmation&id_cart='.(int)($cart->id).'&id_module='.(int)$cashondelivery->id.'&id_order='.$cashondelivery->currentOrder.'&key='.$customer->secure_key); You will see that the new code presents the cart ID etc. in a different order, and it works ... So if anyone knows how to make all this work on https then this will really be solved. But it may be that we must wait until development of the new process (see the php files) is complete.

This is a problem for me as well ... any ideas on this anyone? Any hints on which files to check out? Thanks!

Karikolraj, if you can monitor with a web console while you try to upload the image and post the error returned by the server, it will help us help you. Prestashop can throw the "undefined" error for many reasons. Can you upload category images with no problem?

Thanks, zainoz.zaini! That fix to fileuploader.js worked for me also! I had not seen Roussac's post on GitHub documenting the change. That was definitely the problem for me, and now it's fixed. And I have mod_security fully enabled. So if this works for Brighteyes also, we can mark this one as "Solved" thanks to Roussac and zainoz.zaini! It's so nice to see the little green bar that tells you the image upload was a success!

Thanks for the suggestion, Centrobolsos regarding uploading FileManager.php from the Prestashop source code. I tried that but it did not help. I don't see any difference between the FileManager.php I downloaded from Prestashop, and the same file I used in the Softaculous package to update my installation. Of course there should not be any difference, but it was worth a try. The new FileManager.php does not include the edit discussed earlier in this thread, and this edit made no difference on my system. Uploading images through the Prestashop GUI returns "undefined" based on a 403-Forbidden error, but manually uploading the images using Poster works fine, regardless of the Line 166 edit on FileManager.php. I wonder if Brighteyes was having trouble with the internet connection during download. I have also noticed that a loss of internet service during image upload will cause Prestashop to throw the "undefined" error, so it's important to look at the webconsole to see what error is being returned by the server. So if anyone wants to guess what's going on here, we're still open for your ideas! Thanks!!