Adding information to Receipt

Hi again.

And thank you so mouch for helping with the shipping last time @fc_adam.

1)
For my Receip i need to add some info:
Busines adress: "Steinhammerveien 6C, 1177 Oslo Norway.
Org Nr: 921 268 394 MVA

This info i'd like to add right under the "Merchant" in general information of the receipt.


2)
Is there a way to make the email receipt show in the same way the web reciept does? The web receipt looks very professional and nice, so if that is a posibility for email receipt also, it would be nice.


3)
It is a posibility to print out the web receipt, but is there a way to save it as a PDF ? and / or to include it in the email receipt ?


I have tryed reading your documentations, without understanding how to.. Therfore i again searching your very profesional and good help.


Best Regards

Carl - VacuumRack
Comments
  • fc_marijafc_marija FoxyCart Team
    edited September 11
    Hello @VacuumRack -

    The email receipt defaults to a text-only version but you can change this by changing some settings in your email receipt configuration (https://admin.foxycart.com/admin.php?ThisAction=EditTemplate&template=email).
    - Select the "Send Text and HTML E-mail" option. If the customer's email client is able to display html, it'll now display the html version.

    Once you've selected that, you can make change #1 for the email (assuming you want that on the email receipt as well as the web receipt). To do that:
    - Select "Custom Text Template". A text box will appear.
    - In the "receipt text email template:" look for this line:
    {{ config.lang.checkout_merchant|pad(20)|raw }} {{ config.store_name }}
    - After that line, paste in your address, just as you've formatted it:
    Steinhammerveien 6C, 1177 Oslo Norway.
    Org Nr: 921 268 394 MVA
    - Next, under "if you like, choose a default template:", select "Custom Template".
    - Go to the "receipt html email template:" text area and look for these lines:
    <h3 style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif;color: #666666;font-weight: bold;font-size: 13px;">{{ config.lang.checkout_merchant|raw }}</h3> {{ config.store_name }}<strong></strong>
    - After that, paste the following:
    <br>Steinhammerveien 6C, 1177 Oslo Norway.
    <br>Org Nr: 921 268 394 MVA
    - After changing the templates, click "Update Template" to save and then test. You can test an existing transaction by clicking the "(email)" link next to a transaction within the "transactions" report section of your store's administration. Note that this will re-send the email to the customer of that transaction as well, so you'll want to click the email link associated with a transaction that you placed yourself.

    As for printing a PDF of the web receipt, there are different ways to do this depending on the browser. This page demonstrates how to do that for different browsers: https://www.wikihow.com/Convert-a-Webpage-to-PDF.

    There's not currently a native way to include a PDF attachment to the receipt email. If you want to elaborate on why you'd like to do this, perhaps we can think of another way to accomplish what you're looking for.
  • @fc_marija

    Thank you for helping.

    I managed to do the changes, but there are still some challanges:

    The adress and org.nr. is changed on the email receipts, but not when i open it in the browser. it need's to be the same in the browser also, so the receipt is the same, no matter where the customer sees it.

    The HTML email receipt does not look exactly the same as in the browser. The biggest problem with this is that the picture for logo and product picture is full scale pictures. This happens when i open it in outlook on pc mail app, but not in iphone mail app.

    I also have a new question: Is it posible to change the email subject based on language template? so that for english it will be: Thank you for your order.
    and Norwegian: Takk for din bestilling.
  • fc_adamfc_adam FoxyCart Team
    @VacuumRack,

    I'm glad you were able to get the changes updated!

    The web receipt is a separate template to the email receipt - so that's why you're not seeing those changes appear there. The web version you click from the email is also the same receipt that the customer sees after completing the transaction.

    We'll follow-up soon with some instructions on applying the changes to the web receipt as well, and also some details on customising the email subject based on the language of the transaction.
  • fc_marijafc_marija FoxyCart Team
    Hi @VacuumRack -

    I put together a little jQuery snippet for you to apply to your custom footer to get the address on the web receipt. To apply the snippet:

    1. Go to your Templates configuration in your FoxyCart admin. Here's a link to that area: https://admin.foxycart.com/admin.php?ThisAction=TemplateConfig
    2. Copy the code from this link onto your computer's clipboard: https://pastebin.com/raw/FEFMJDhj
    3. Switch back to your admin and scroll down until you see "custom footer: " under "Add custom header and footer code to your templates" You'll see your shipping snippet already in the text area. You can paste the code that you copied to your clipboard into the bottom of that box after everything else (take care not to remove anything that's already there).
    4. Scroll down until you see the "Update" button and click to save.

    You can view the updated receipt by going to your transactions in the FoxyCart admin and clicking "view" under the transaction number.

    Regarding the logo, although we have max-width/max-height CSS attributes we're using to set sane defaults for the images, some browsers ignore these.

    We've got a ticket to look into correcting this in our default template - but it might take us a little bit to get a good solution. Specifically the logo image may be difficult as we don't know what the image dimensions are because it's loaded remotely, to set sane values there.

    In the meantime, you modify your HTML email receipt to set your own default values to get around it to get the email displaying more consistently across email clients. To do that:

    1. Go to the "email receipts" section of the FoxyCart administration
    2. Within the textarea for the HTML template, search for this code:
    <img src="{{ config.store_logo_url }}" alt="{{ config.store_name }} Logo" style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif;max-width: 100%;vertical-align: middle; max-height:150px;">
    and update it to include your desired width like this:
    <img src="{{ config.store_logo_url }}" alt="{{ config.store_name }} Logo" style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif;max-width: 100%;vertical-align: middle; max-height:150px;" width="200">
    3. Save the configuration.

    Let us know if that doesn't resolve the issue.

    To set the subject, you'll access the template_set variable at the top of your email receipt template. Here's how to do that:

    1. Copy the following snippet to your computer's clipboard:
    {% if template_set == "NOK" %}
    {% set email_subject = "Takk for din bestilling." %}
    {% endif %}
    {{ email_subject|fc_output_data('email_subject') }}
    2. Go to the email template settings in your Foxy admin here: https://admin.foxycart.com/admin.php?ThisAction=EditTemplate&template=email
    3. Change the "receipt email subject:" to "Thank you for your order." This will be the default Subject when the template's not "NOK".
    4. In the "receipt text email template:" text area, paste the snippet you copied in Step 1 into the top of that box (before the "===========================================================" separator).
    5. Click "Update Template" to Save and then test.

    You can re-send a test email by going into the transactions report and clicking "(email)" below the "Customer Name" in the transactions list on the right. Make sure the customer is you so you can receive that copy.

    Let us know if you have any questions.
  • @fc_marija

    Adding the "width" worked for the logo, and i managed to find where to set it for the product picture also.

    But there is still two places in the email receipt where things are a bit off. i took some pics to help showing.

    1) spaceing is missing
    image



    2) things are out of line, looks messy.
    image




    3) how it should look (from the web receipt).
    image
  • fc_adamfc_adam FoxyCart Team
    @VacuumRack,

    I'm glad you were able to get the image working for you in the HTML email receipt.

    Could I confirm with you what email client you're using to view the email receipts in your screenshot?

    It's worth noting that the email receipt won't directly match the web receipt that customers see after completing the transaction, or clicking the link in the email - the styling options available in the browser are very different to what is available reliably in all email clients - and are viewed in a different way generally. The approach for the HTML email template is different to that of the web for that reason.

    For your second one for the cart - it looks like an email client may not be handling the table display as it's meant to. If you can confirm the client, we can take a closer look there.
  • @fc_adam

    I am using outlook on windows 10 mail app, and also iphone mail app.

    The pic 1 happens on both outlook and iphone client. it looks like it is only a "brake" that is needed, but i cannot find where to put the


    Pic 2 problem only happends on outlook, not on iphone.

    I also discovered that this snippet i got from @fc_marija blocks other email receipts than the NOK template
    {% if template_set == "NOK" %}
    {% set email_subject = "Takk for din bestilling." %}
    {% endif %}
    {{ email_subject|fc_output_data('email_subject') }}

    A last ting i would like to fix, is the space between kr / € / $ and the price amount. there are no space on the kr / $ (nok / usd template), but there is space on € (eur template). i would like to add the space for kr / $
  • fc_adamfc_adam FoxyCart Team
    @VacuumRack,

    Thanks for confirming the email clients.

    For the custom fields spacing - you can correct that with a small change to your HTML email receipt template. In the HTML email template, look for this line:
    {% if has_visible_custom_fields %}
    Directly after that line, include a line break like this:
    <br>
    That should separate the information there to make it cleaner.
    Pic 2 problem only happends on outlook, not on iphone.
    In terms of the cart totals appearing above the items - that is a known issue for Outlook. We have it ticketed to stop using the tfoot element because Outlook just doesn't handle it how it's meant to - and so it ends up like you're seeing.
    I also discovered that this snippet i got from @fc_marija blocks other email receipts than the NOK template
    For the email subject - sorry about that - if you update it like this, that should ensure the non-NOK emails will send again:
    {% if template_set == "NOK" %}
    {% set email_subject = "Takk for din bestilling." %}
    {{ email_subject|fc_output_data('email_subject') }}
    {% endif %}
    A last ting i would like to fix, is the space between kr / € / $ and the price amount. there are no space on the kr / $ (nok / usd template), but there is space on € (eur template). i would like to add the space for kr / $
    We'll look into the currency symbol too and follow up with details there on what's possible.
  • @fc_adam

    currancy cymbol: ok. wait for your reply.

    cart total appearing (pic 2): did'nt quite understand your answer. Does this mean that there is no solution for it, and i have to accept it as it is?

    field spacing and email subject: works perfect now, thanks!
  • fc_marijafc_marija FoxyCart Team
    Hello @VacuumRack -

    Sorry for the oversight on the the email subject. That was a result of a bad assumption on my part – glad Adam was able to get that straightened out for you.

    As for the email totals, it can be fixed by making a change to the email template to change this markup. Head to the "email" section of your store's FoxyCart administration and you'll want to edit the HTML email template. You'll basically need to look for the "tfoot" element. You can try moving the "tfoot" element below the "tbody" that is just below it, and that would correct the display in Outlook - but I'm not sure how it would affect other email clients that might follow the spec a little more closely. I tested in gmail, earthlink web mail, and another mobile client, and it all worked out well. You'll want to test in other email clients to the extent you can.
  • fc_adamfc_adam FoxyCart Team
    @VacuumRack,

    Thanks for your patience, and sorry for the delay in replying. At this stage we don't support customising the locale settings for how currencies are displayed. Currently they're formatted automatically based on the default configuration for the respective locales.
  • @fc_adam

    Ok. thanks for your very good help.
    Please let me know if you change this in the future. I think the default settings should have a space, to give a cleaner look. And a bit strange that this is inconsistent for different locales.
Sign In or Register to comment.