How to customize layout for %invoice_text%?

Discussion in 'Templates customization' started by orish, May 20, 2014.

  1. orish

    orish aMember Pro Customer

    Joined:
    Mar 15, 2011
    Messages:
    47
    Hi, I noticed there was another thread related to this question, but it seemed to involve recoding a core PHP file.

    I need to send a confirmation email to my customers for their payments, but at the moment it's a real mess and looks very unprofessional.

    This is what my customers get:

    Invoice #DC6EB / 20/05/2014 ------------------------------------------------------------------- 1. Read Thai Video Workshop Package MP4 1x10000.00 7500.00 THB ------------------------------------------------------------------- Subtotal 10000.00 THB Discount 2500.00 THB Total 7500.00 THB -------------------------------------------------------------------

    I'd like to define a layout and format the purchase items.
    • There's only one item that gets purchased at a time in my case, although there may be some free add-ons.
    • Because I'm using the Thai Baht as the currency, it's messy to add the .00 at the end of each amount and I need to add in the thousands comma.
    • Also the currency symbol should be on the left hand side, not the right of the amount
    • The currency symbol should only appear on the total amount.
    • If there is no discount then there is no need for a total amount - just the price of the item (in which case it will have the currency symbol).
    • I also don't need the date (the date of payment is the date of the email) or invoice number because it's completely irrelevant.
    • Finally, the dashed lines makes the layout look amateur, especially when the email confirmation is in HTML. Either use an HTML table or leave out the lines completely.
    So the above invoice (actually it's not an invoice, it's a receipt) should look like this:

    Purchase Details
    Read Thai Video Workshop Package MP4 10,000
    Discount Coupon (student) 2,500
    Total paid THB 7,500

    How do I do this, preferably without writing a mini program to do it?
  2. caesar

    caesar aMember Pro Developer Staff Member

    Joined:
    Oct 16, 2009
    Messages:
    2,040
    First of all in case you use %invoice_text% placeholder in context of HTML you need to wrap it with <pre> tags eg.
    HTML:
    <pre>
    %invoice_text%
    </pre>
    It is not possible to customize output of this placeholder without changes in core files. Definition of this placeholder can be found in file /application/default/models/Invoice.php method render

    It is possible to define custom placeholder eg. %receipt% and format it as necessary based on invoice object.
    You can do it in site.php file (http://www.amember.com/docs/Site.php_file) so these changes will not be overwritten with upgrade in future.

    Please have a look how to define custom placeholder
    http://www.amember.com/docs/How_to_add_custom_placeholders_to_email_templates

    You need to know PHP in order to implement it.
  3. russell_stutely

    russell_stutely aMember Pro Customer

    Joined:
    Jul 25, 2007
    Messages:
    30
    I want to do exactly the same.. but do not understand one word of the answer or documentation.

    Would it not be real simple for amember just to tidy up the standard invoice / receipt layout in the next update?
  4. orish

    orish aMember Pro Customer

    Joined:
    Mar 15, 2011
    Messages:
    47
    Hello, me again! :)

    I've just updated to version 6 beta.

    The invoice.php core file that I modified to design a nice, friendly layout for %invoice_text% has disappeared.

    It's been a pain to continuously have to re-edit this file each time I updated amember, but at least it only took half an hour and I was up and running again.

    It would be useful to have this matter fixed once and for all. The standard layout for the payment receipt is really ugly and slapdash. It doesn't look professional at all.

    (I never understood Ceasar's reply about creating a custom placeholder, but I imagine that this is what needs to be done to resolve this problem. But I don't know how to go about it at all.)

    The design I created shows a nice table with the item(s) purchased, payment amounts and total. I send this to the customer whenever there is a sign-up (even for a free trial).

    Alex & co, if you haven't already implemented this as a feature for V6, please consider doing so in the next update. We should be able to design a template (and, no, I don't want to send a PDF invoice at this stage: just a receipt in the confirmation email itself).

    I'd be happy to buy a plugin that does this, with a selection of nice templates.

    In the meantime, does anyone have any suggestions how one can do this in V6 - either by modifying a core file (to avoid if possible) or by creating a custom design file somewhere?

    Thanks in advance,
    Gary

    Attached Files:

  5. orish

    orish aMember Pro Customer

    Joined:
    Mar 15, 2011
    Messages:
    47
    OK, I've revisited this issue and I'd like to follow Caesar's suggestion of creating the %receipt% custom placeholder in site.php. The instructions are very unclear, though. For instance, how does the code

    $tmpl->setPlaceholder("TEST");

    set the placeholder %placeholder% to TEST? What code do I use to create a placeholder called %receipt%? Do I use the code

    $tmpl->setReceipt (render(someparameter1, someparameter2));

    These are the changes I made to the function render() in Invoice.php. How do I call this function to assign the text string to %receipt%?

    I need very basic instructions, I'm afraid because I'm not a PHP/Zend developer, but I can tweak some existing code if I have a template to follow...

    ..............

    $out = $indent . "<b>Purchase Details</b>"."$newline"."$newline";
    $out .= '<table cellspacing="0" style="border:1px solid #000;border-collapse:collapse;">';
    $tdLeft = '<td style="border:1px solid #000;border-collapse:collapse;text-align:left;padding-left:10px;width:350px;">';
    $tfRight = '<td style="border:1px solid #000;border-collapse:collapse;text-align:right;padding-right:10px;width:150px;">';
    $num = 1;
    $tempCount = '';
    foreach ($this->getItems() as $item) {
    $tempCount = $tempCount + 1;
    }

    foreach ($this->getItems() as $item) {
    $title = explode("\n", $this->wordWrap($item->item_title, $column_title, "\n", true));
    $out .= '<tr>'.$tdLeft.$indent.' '.$title[0].'</td>'.$tfRight.number_format($item->{$prefix . '_price'}).'</td></tr>';
    for ($i=1; $i<count($title); $i++){
    if(!empty($title[$i])){
    $out .= '<tr>'.$tdLeft.$indent.' '.$title[$i].'</td>'.$tfRight.'</td></tr>';
    }
    }
    $num++;
    }
    if ($this->{$prefix . '_discount'} > 0){
    $out .= '<tr>'.$tdLeft.$indent.' '.'Shipping'.'</td>'.$tfRight.number_format($this->{$prefix . '_shipping'}).'</td></tr>';
    }
    if ($this->{$prefix . '_tax'} > 0){
    $out .= '<tr>'.$tdLeft.$indent.' '.'Tax'.'</td>'.$tfRight.number_format($this->{$prefix . '_tax'}).'</td></tr>';
    }

    $out .= '<tr>'.$tdLeft.$indent.' '.'<b>Total paid</b>'.'</td>'.$tfRight.'<b>'.$this->currency.' '.number_format($this->{$prefix . '_total'}).'</b></td></tr>';

    if ($this->rebill_times) {
    $terms = explode("\n", $this->wordWrap($this->getTerms(), $row_width, "\n", true));
    foreach ($terms as $term_part){
    $out .= '<tr>'.$tdLeft.$indent . $term_part.'</td>'.$tfRight.'</td></tr>';
    }
    }

    $out .= '</table>';
    return $out;
    }


    THANKS,
    Gary
  6. caesar

    caesar aMember Pro Developer Staff Member

    Joined:
    Oct 16, 2009
    Messages:
    2,040
    Gary, I suggest to use placeholder %invoice_html% and then modify template:
    application/default/views/mail/_invoice.phtml
    the way you need.
  7. orish

    orish aMember Pro Customer

    Joined:
    Mar 15, 2011
    Messages:
    47
    I'm afraid this problem is just not going away.

    It's NINE years already and still the invoice receipt looks like something a schoolkid would send out via the twitter account.

    I used to modify the invoice.php core file, but this gets overwritten each time I upgrade. However, in the latest upgrade, I see that the syntax has changed for many statements (getOpt instead of getItem, or new array syntax, etc.) and now I'm getting a script error when I try to edit the part of render() in invoice.php.

    When I use the placeholder %invoice_html% in the email, I get this.

    Invoice #HCE70 / 11/02/2020 ------------------------------------------------------- 1. Read Thai Video Workshop 1x10,000.00 ฿ 3,000.00 ฿ ------------------------------------------------------- Subtotal 10,000.00 ฿ Discount 7,000.00 ฿ Total 3,000.00 ฿ -------------------------------------------------------

    Please, please add some functionality in the next update to design an invoice layout (to be emailed as a confirmation receipt, not to send out as a PDF which few of my customers can read, especially if they're using a phone or tablet).

    It looks very unprofessional. In fact, I can tell instantly if I buy a product or subscription from a seller with aMember, just from the sloppy email receipt that I get to confirm payment! (The same goes for the sign up and log in pages, which really look very amateur!)

    It's surely a very simple and I would have thought obvious requirement?

    This is what I'd like it to look like:
    amember invoice layout.png
    • There should be “Purchase Details” printed above the table.
    • I’d like to have a solid line for all cells in the table.
    • The number format should be 0,000 (no decimals and no cents)
    • The currency should be preceding the amount (and the letters THB, not the currency symbol), and only in the Total row at the bottom.
    I'm afraid I don't know PHP/Zend to be able to make any real script changes.

    It seems fairly straight-forward, but I’ve tried many different approaches by editing the _invoice.phtml file but none of them work. Even just adjusting the border doesn’t seem to make any difference. There seems to be HTML tags for a table with borders, so why is the invoice just output as a single line of text with dashes instead of a proper table?

    In future, it would be useful to have an invoice design feature (or plugin) where you can lay it out (a bit like the purchase forms) with blocks and text and system/user variables.

    I'd be happy to buy a plugin if anyone can make one. But in the meantime any suggestions on how to fix (or create) the _invoice.phtml file, or what do create in a customization folder somewhere that will allow a custom design for the invoice?

    Many thanks in advance.
    Gary (again)
  8. caesar

    caesar aMember Pro Developer Staff Member

    Joined:
    Oct 16, 2009
    Messages:
    2,040
    Are you sure you use %invoice_html%?

    Your example looks like %invoice_text% and in text messages it looks this way:

    invoice_text.png

    If you want to use %invoice_text% within HTML email then you need to warp it with <pre> tags:
    Code:
    <pre>
    %invoice_text%
    </pre>
    In html emails you can use %invoice_html% and default version is:

    invoice_html.png

    You can edit output of %invoice_html% placeholder within this template:
    application/default/views/mail/_invoice.phtml

    Best Regards.
  9. orish

    orish aMember Pro Customer

    Joined:
    Mar 15, 2011
    Messages:
    47
    Thank you, Ceasar. After all this time, I never noticed that invoice_text and invoice_html were two different formats for the invoice "text" - one for emails sent as text messages and the other for emails sent as HTML messages. I did see one or two posts above where you mentioned invoice_html but it didn't register in my mind as just a different tag.

    I did figure it all out in the end, but unfortunately the documentation is still not clear and detailed enough and often it's out of date. I searched through this forum and eventually found various posts that explained how to do it.

    It's still very complicated and unintuitive and you still have to make changes to the core files (which makes it difficult to keep track of which files and what changes were made when the next update comes along).

    For the currency, I had to go find the currencyphp file and even though one post mentioned how to change the format of the price, it didn't explain what the different parameters were and I had to guess by looking at other examples in the file. I also didn't realize that you already have a parameter for number of digits after the decimal point, and even a parameter for the thousands separator. Where is any of this explained in the documentation?

    Feature request

    In general, I find aMember to be a robust and commercially-viable system, which is why I stuck with it for the last 10 years. But it requires far too much programming and configuration at the code level for any regular user to be able to manage and design the system. There are other systems that are far more intuitive and I've been tempted to switch many times.

    Nevertheless, aMember has improved hugely over the years. At least the forms builder is fairly straight-forward and the email messages can be relatively easily designed and formatted. The integrations with other ecommerce systems are fantastic, what with PayPal, WordPress/Joomla/Drupal, Woo Commerce, etc. etc.

    However, there is too much that still needs to be done "blind" - you can't see what the results will be until you run a test and create a new customer or make a new purchase.

    So here's a feature request for version 7.

    Make every single configuration option WYSIWYG and drag-and-drop and a mechanism to preview the end result.

    Nearly every modern software system of this kind uses a WYSIWYG editor (usually a standard plugin that can even be swapped out for a different one) for composing emails and email templates. Why are we still stuck with having to mess around with HTML code?

    And why should the invoice layout be hidden away in a kind of HTML-coded file (_invoice.phtml) that generates the HTML inside a kind of PHP script? I know a bit of HTML, but not much PHP - and I really don't want to have to dig around with the code and try to figure out what all those functions mean (scattered throughout the system in some different functions file). In fact, I tried to make a few small alterations to the _invoice.phtml file and ended up with a script error in one case when I tried to make a purchase and in another case my website crashed completely, just displaying an obscure message ("there is a database error, please contact the admin").

    So besides the forms (which should also be WYSIWYG and drag-and-drop), all the email templates should also have an editor (like in this forum, say) with draggable or drop-down-selectable tags from the collection of available tags. (How is anyone supposed to know that there is a tag called %invoice_html%? And how is anyone to know the exact syntax for including custom fields? I still have problems trying to remember the syntax because it's slightly different from the system fields (I think it's something like "user.field" for custom fields and just the fieldname for system fields.

    And there should be a similar invoice builder, where you can instantly configure the layout, lines, colors, fonts, etc. AND the number & currency formats for each variable.

    Similarly for the login or purchase forms, and for what the member account page should look like. I still can't find anyone who can delve into the various CSS files to match the login, sign-up and purchase forms with the design of my website. I've noticed the same problem with other sites using aMember. Whenever you log in or place an order or try to access the products you've subscribed to you end up in what looks like a completely different system (in fact, the aMember front end) and you wonder whether you are still on the same website.

    Perhaps it might be a useful exercise to create a new thread to ask users what design features should be incorporated into aMember.

    But in general, whatever can be configured or designed in the system, and whatever the customer will experience when navigating the website, receiving emails or the front end sections of aMember, there should be a kind of intuitive graphical builder to be able to design and configure it.

    I hope you will take this request seriously because there are plenty of very similar membership management systems that also integrate well with WordPress or Drupal or Woo Commerce or whatever. And they are very well-designed and competitively priced.

    I'd like to continue using and supporting aMember if possible, but I also have to think about my customers' user experience and the opportunity cost that I've wasted over the years in trying to configure and tweak this system.

    And, for the time being, I still recommend aMember as a viable choice for customer/product/subscription management to our group of online businesses. There are already perhaps 200 people in our group using aMember as a result but, frankly, we all struggle with some of these niggly issues and we still haven't found any aMember technical "specialist" who can do coding or design customizations for us. It's just too difficult, even for the many PHP and CSS developers that we've approached.

    I wish you every success - and I look forward to a newer, easier-to-configure-and-customize version of aMember in the future!

    :)
    Last edited: Feb 12, 2020
  10. caesar

    caesar aMember Pro Developer Staff Member

    Joined:
    Oct 16, 2009
    Messages:
    2,040
    Thank you for your feedback! I appreciate it.

    Here is several answers to your questions:

    1. Change Currency Format without changes in core files:
    You can use this code in site.php file:
    http://www.amember.com/docs/Site.php_file
    Code:
    Am_Currency::$currencyList['EUR']['format'] = '%s%s';
    It is spritf format:
    https://www.php.net/sprintf

    2. Change template:
    It is necessary to use themes to prevent changes in core files:
    http://www.amember.com/docs/Themes_and_Templates

    3. Branding of aMember Frontend
    I suggest to try "Solid Color Theme". You can enable it at:
    aMember CP -> Configuration -> Setup/Configuration (User Page Theme)
    and then configure it (upload logo, choose font, color etc) at:
    aMember CP -> Configuration -> Setup/Configuration -> Solid Color Theme

    4. Email placeholders:
    if you use HTML version then list of placeholders can be found here:
    email-html-placeholder.png
    if you use Text version then here:
    email-text-placeholder.png


    Best Regards.
  11. tokazama2

    tokazama2 aMember Pro Customer

    Joined:
    Feb 7, 2013
    Messages:
    54
    This has been very helpful. Thank you!
    caesar likes this.

Share This Page