Choosepizzi.net-logo

Andrea

info@choosepizzi.com

Prestashop 1.7.1 | add a message box on checkout and insert it in confirm order mail

For a customer request, i need to adds a message box in the last step of prestashop checkout.
Once the order is finished, message will be inserted in the admin order confirmation mail and in the customer order confirmation mail.

we need to hack 3 files:

  • Shipping.tpl ( checkout step in witch we want text area appears )
  • PayamentModule.php ( Class of the payment module )
  • order_conf.html ( HTML template mail for customer order confirmation )
  • order_conf.txt ( TXT template mail for customer order confirmation )

Shipping.tpl

Download PayamentModule.php that you finde on “/themes/yout_theme/templates/checkout/_partials/steps”, and on line “81” immediately before 

{/block}

Add this:

<div id="delivery row delivery-option" style="overflow:hidden;">
            <label style="margin-top: 1rem;" for="delivery_message">{l s='If you would like to add a comment about your order, please write it in the field below.' d='Shop.Theme.Checkout'}</label>
              <textarea style="max-width: 100%; margin-bottom: 2rem;" rows="2" cols="120" id="delivery_message" name="delivery_message">{$delivery_message}</textarea>
  </div>

And re upload file.

PayamentModule.php

Download PayamentModule.php that you finde on “/classes/”, re upload on “/override/classes” so you preserve original file.
Open the file that you have just uploaded end immediately before “$data = array” about line 749 past this

$customer_message = $order->getFirstMessage();

And immediately after “$data = array” about line 752 past this

'{message}' => $customer_message,

Save file and re upload it.

order_conf.txt / order_conf.html

Open the two files form “/themes/your-theme/mails/it”.

Let’s start with the .html ones:

on line “302” , paste this :

<table width="586" height="77">
<tbody>
<tr>
<td width="10" style="padding: 7px 0;">&nbsp;</td>
<td style="padding: 7px 0;">
<p data-html-only="1" style="border-bottom: 1px solid #D6D4D4; margin: 3px 0 7px; text-transform: uppercase; font-weight: 500; font-size: 18px; padding-bottom: 10px;">Messaggio del cliente:</p>
<span size="2" face="Open-sans, sans-serif" color="#555454" style="color: #555454; font-family: Open-sans, sans-serif; font-size: small;"><span style="color: #777;"> {message} </span> </span></td>
<td width="10" style="padding: 7px 0;">&nbsp;</td>
</tr>
</tbody>
<tbody></tbody>
</table>

Basically is an html snippets, that adds the message field to the html “Order confirmation email”.

Now open the .txt ones:
on line “57” paste this:

MESSAGGIO: {message}

Save and re upload files.

That’s all.