I would like to modify the email order notification in prestashop slightly and I don't where to start. The email templates are written in HTML and whenever I modify them the email comes out blank.
Here is the code:
<tr>
<td style="border:none;padding:7px 0">
<table class="table table-recap" bgcolor="#ffffff" style="width:100%;background-color:#fff"><!-- Title -->
<thead>
<tr>
<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Reference</th>
<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Product</th>
<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Unit price</th>
<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Quantity</th>
<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Total price</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" style="color:#777;padding:10px!important;border:1px solid #DDD!important">
{items}
</td>
</tr>
<tr class="conf_body">
<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Products</strong></td>
<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_products}</td>
</tr>
<tr class="conf_body">
<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Discounts</strong></td>
<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_discounts}</td>
</tr>
<tr class="conf_body">
<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Gift-wrapping</strong></td>
<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_wrapping}</td>
</tr>
<tr class="conf_body">
<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Shipping</strong></td>
<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_shipping}</td>
</tr>
<tr class="conf_body">
<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Total Tax paid</strong></td>
<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_tax_paid}</td>
</tr>
<tr class="conf_body">
<td bgcolor="#fbfbfb" align="right" colspan="4" class="total" style="color:#555454;padding:10px!important;border:1px solid #DDD!important;font-size:18px;font-weight:500;font-family:Open-sans, sans-serif"><strong>Total paid</strong></td>
<td bgcolor="#fbfbfb" align="right" class="total_amount" style="color:#333;padding:10px!important;border:1px solid #DDD!important;font-size:21px;font-weight:500;font-family:Open-sans, sans-serif">{total_paid}</td>
</tr>
</tbody>
</table>
</td>
</tr>
I would like to remove all pricing information. Some price info is easy to identify and delete, e.g. {total_paid}, but there is also the itemized price info in the section of code below, in which all the info is just bundled together in {items}. How do I modify this?
<td colspan="5" style="color:#777;padding:10px!important;border:1px solid #DDD!important">
{items}
</td>
The file you're looking at is a simple Swiftmailer email template file, meaning it can only replace variables like {items}.
To output a dynamic list of products, you need a more powerful templating language which can loop over a list of products. That's why the HTML for the list of products is compiled at:
themes/default-bootstrap/mails/en/order_conf_product_list.tpl
Your theme and language ISO code in this path may be different.
This is wehre you actually edit the rows <tr> or products. If you remove a cell, don't forget to remove column title cell too <th>!
If your emails lose some styling when they're saved (e.g. they become 100% in width) it may be that you need to install this override:
https://gist.github.com/gskema/d3f62431965dbb5c8cdb04da97c9dc77
Related
I am creating a table for an university task. Every once in a while we have to put our code into a validator. For some reason the validator keeps showing these errors:
https://i.ibb.co/dLnzTh2/error.png
The errors are about the <th> tag inside the <thead>.
<table style="width: 700px" >
<thead>
<tr>
<th colspan="8">Market Shares of Graphics Adapters in Q4 2013
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">-</td>
<td rowspan="2">Q4 2013</td>
<td rowspan="2">Q3 2013</td>
<td colspan="4" rowspan="1" style="text-align: center">Quarter over Quarter Changes</td>
<td rowspan="2">2012</td>
</tr>
<tr>
<td colspan="2">Unit Shipments</td>
<td colspan="2">Share</td>
</tr>
<tr>
<td>AMD</td>
<td>18.30%</td>
<td>20.70%</td>
<td colspan="2">-10.40%</td>
<td colspan="2">-2.40%</td>
<td>19.70%</td>
</tr>
</tbody>
</table>
Any ideas what is causing this?
For reference this is how the whole table looks like:
https://i.ibb.co/LkMbWc9/table.png
This always means "a column without any cells" - harder to find with collspans, but possible - in the snippet Unit Shipments and Share are blue - this are doubled td, and it makes an empty column in both - since both are colspaned from the top.
Shortly - whole table is too wide of 2 not needed cells
td, th{ border: 1px solid red} /* this shows every th, td even empty */
td[colspan] { border: 1px solid blue} /* this shows colspans */
<table style="width: 700px" >
<thead>
<tr>
<th colspan="8">Market Shares of Graphics Adapters in Q4 2013
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">-</td>
<td rowspan="2">Q4 2013</td>
<td rowspan="2">Q3 2013</td>
<td colspan="4" rowspan="1" style="text-align: center">Quarter over Quarter Changes</td>
<td rowspan="2">2012</td>
</tr>
<tr>
<td colspan="2">Unit Shipments</td>
<td colspan="2">Share</td>
</tr>
<tr>
<td>AMD</td>
<td>18.30%</td>
<td>20.70%</td>
<td colspan="2">-10.40%</td>
<td colspan="2">-2.40%</td>
<td>19.70%</td>
</tr>
</tbody>
</table>
I am trying to embed the html table in to email I am sending from one the application I am building below is what I am trying
<table width="400" style="border:1px solid #333">
<tr>
<th>Isolate Lots</th>
<th>Identification</th>
</tr>
#foreach( $sample in $SAMPLES)
#if($EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification") !="Unidentified")
<tr>
<td>$LOTS[$foreach.index].name </td>
<td>$EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification")
</td>
</tr>
#end #end
</table>
The table in the email looks like this
How can I put everything in the Cell inside the table and align them.
After edit
Try to set style="vertical-align: middle" for each cell (since valign="middle" is obsolete).
<table style="border-collapse: collapse; width: 400px">
<tr>
<th style="border: 1px solid #333; vertical-align: middle">Isolate Lots</th>
<th style="border: 1px solid #333; vertical-align: middle">Identification</th>
</tr>
<tr>
<td style="border: 1px solid #333; vertical-align: middle">name</td>
<td style="border: 1px solid #333; vertical-align: middle">jax_trait_isolateIdentification</td>
</tr>
</table>
Upd: added borders
You did not specify what kind of alignment you mean, so here's my suggestion in case you want them centered, just added a 'align="center"' style to the cells.
<table width="400" style="border:1px solid #333">
<tr>
<th align="center">Isolate Lots</th>
<th align="center">Identification</th>
</tr>
#foreach( $sample in $SAMPLES)
#if($EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification") !="Unidentified")
<tr>
<td align="center">$LOTS[$foreach.index].name</td>
<td align="center">$EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification")
</td>
</tr>
#end #end
</table>
well your code is correct maybe u should try this
i just change the style of your table
hope it works. enter code here
<table width="400" border='1px' style='text-align:center'>
<tr>
<th>Isolate Lots</th>
<th>Identification</th>
</tr>
#foreach( $sample in $SAMPLES)
#if($EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification") !="Unidentified")
<tr>
<td>$LOTS[$foreach.index].name </td>
<td>$EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification")
</td>
</tr>
#end #end
</table>
So I have this code for a table in wordpress.
<table id="intCall" class="tablepress">
<thead>
<tr>
<th style="border: 1px solid;background-color: red;border-color: black;color: white">COUNTRY</th>
<th style="border: 1px solid;background-color: red;border-color: black;color: white">CODE/PREFIX</th>
<th style="border: 1px solid;background-color: red;border-color: black;color: white">RATES</th>
</tr>
</thead>
<tbody class="row-hover">
<tr class="row-1 odd">
<td class="column-1">Afghanistan</td>
<td class="column-2">93</td>
<td class="column-3">$0.4730</td>
</tr>
<tr class="row-2 even">
<td class="column-1">Afghanistan (Mobile A) Roshan</td>
<td class="column-2">9372, 9379</td>
<td class="column-3">$1.0110</td>
</tr>
.......
</tbody>
</table>
2 things are not showing up. The ID, and the thead, however the tr within the thead is showing up within tbody. Not sure whats going on.
Here is a screenshot of the DOM in developer tools.
https://gyazo.com/60bfb1616773de645ff99a53e142b9a7
Here is the site
http://t4.rd-client.com/magicjack/information/international-calling-rates/
Thanks
I found what it was. There was a theme setting to not allow certain tags. Not sure why that exists, but it was there :D
The following HTML code displays the value of Heading9 and Heading10 in a separate row instead of displaying right after Heading8 (see ActualOutput image)
Code 1:
<html><body bgcolor="#E6E6FA">
<TABLE cellpadding="5" style="border: 1px solid #000000; border-collapse: collapse;" border="2">
<TH>Heading1</TH>
<TH>Heading2</TH>
<TH>Heading3</TH>
<TH>Heading4</TH>
<TH>Heading5</TH>
<TH>Heading6</TH>
<TH>Heading7</TH>
<TH>Heading8</TH>
<TH>Heading9</TH>
<TH>Heading10</TH>
<TH colspan="20">Heading11</TH>
</TR>
<tbody>
<TR>
<TD rowspan="2">knnjkn</TD>
<TD>ceecev</TD>
<TD>lnlnlkn</TD>
<TD>lknlkn</TD>
<TD>lknkn</TD>
<TD>kjnkljnk</TD>
<TD>lknlkn</TD>
<TD>kjnlkn</TD>
<TD>kjbkn</TD>
</TR>
<TR>
<TD>jknklnk</TD>
<TD>kjnlknknm</TD>
<TD>jnkj n</TD>
<TD>lnnkkl</TD>
<TD>kjnknkj</TD>
<TD>sdwewcw</TD>
<TD>qwdcwcwc</TD>
<TD>csdcs</TD>
</TR>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</tbody>
<tbody>
<TR>
<TD rowspan="2">ddccs</TD>
<TD>csdcs</TD>
<TD>csdcs</TD>
<TD>cswewc</TD>
<TD>csdcsdc</TD>
<TD>cdwdc</TD>
<TD>cdsc</TD>
<TD>zcxascsac</TD>
<TD>csdcdc</TD>
</TR>
<TR>
<TD>dadcc</TD>
<TD>csdc</TD>
<TD>cacsc</TD>
<TD>cdwcc</TD>
<TD>csdd</TD>
<TD>csdc</TD>
<TD>sdcsdc</TD>
<TD>cdscsd</TD>
</TR>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</tbody>
</TABLE>
</html>
Actual Output:
I can get the desired output by changing the code 1 to code 2, however, my bash script gathers Heading9 and Heading10 data only after Heading8 is framed for each body, so I cannot inject Heading9 and 10 in between.
Appreciate if experts can provide a better solution to get the expected output by restructuring the code 1. Unfortunately, code 2 doesn't work in my scenario.
Code 2:
<html><body bgcolor="#E6E6FA">
<TABLE cellpadding="5" style="border: 1px solid #000000; border-collapse: collapse;" border="2">
<TH>Heading1</TH>
<TH>Heading2</TH>
<TH>Heading3</TH>
<TH>Heading4</TH>
<TH>Heading5</TH>
<TH>Heading6</TH>
<TH>Heading7</TH>
<TH>Heading8</TH>
<TH>Heading9</TH>
<TH>Heading10</TH>
<TH colspan="20">Heading11</TH>
</TR>
<tbody>
<TR>
<TD rowspan="2">knnjkn</TD>
<TD>ceecev</TD>
<TD>lnlnlkn</TD>
<TD>lknlkn</TD>
<TD>lknkn</TD>
<TD>kjnkljnk</TD>
<TD>lknlkn</TD>
<TD>kjnlkn</TD>
<TD>kjbkn</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</TR>
<TR>
<TD>jknklnk</TD>
<TD>kjnlknknm</TD>
<TD>jnkj n</TD>
<TD>lnnkkl</TD>
<TD>kjnknkj</TD>
<TD>sdwewcw</TD>
<TD>qwdcwcwc</TD>
<TD>csdcs</TD>
</TR>
</tbody>
<tbody>
<TR>
<TD rowspan="2">ddccs</TD>
<TD>csdcs</TD>
<TD>csdcs</TD>
<TD>cswewc</TD>
<TD>csdcsdc</TD>
<TD>cdwdc</TD>
<TD>cdsc</TD>
<TD>zcxascsac</TD>
<TD>csdcdc</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</TR>
<TR>
<TD>dadcc</TD>
<TD>csdc</TD>
<TD>cacsc</TD>
<TD>cdwcc</TD>
<TD>csdd</TD>
<TD>csdc</TD>
<TD>sdcsdc</TD>
<TD>cdscsd</TD>
</TR>
</tbody>
</TABLE>
</html>
Expected Output:
Add Following may this help...
<style>
table
{
border: 1px solid #000000;
border-collapse: collapse;
display:table;
position:relative;
width:100%;
}
table tr
{
display: table-row;
height: 35px;
line-height: 30px;
width: 100%;
}
table td
{
direction: ltr;
display: table-cell;
margin: 0;
padding: 5px;
table-layout: fixed;
}
</style>
This is an easy question, but I cannot seem to solve it. My html table can be seen at the following:
http://jsfiddle.net/Rochefort/kvUKG/
And also included here:
<table style="background:#fff;width:300px;margin-left:14px;" class="form">
<tbody>
<tr style="">
<td class="bosluk"></td>
<td class="alis_baslik"><strong>ALIŞ</strong></td>
<td class="satis_baslik"><strong>SATIŞ</strong></td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar">DOLAR</td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
</tbody>
</table>
I implemented CSS but the DOLLAR item has too much space. How can I remove this extra space?
You can use text-align: right with padding-right instead of padding-left.
Example: http://jsfiddle.net/BfD2v/
.ikonlar {
padding-right:5px;
font-family: Arial;
font-size:12px;
font-weigth: bold;
color: #000;
text-align: right;
}
If you want to make the whole column narrower, you can set the width od the column with this:
.bosluk, .ikonlar {
width: 10px;
}
You should also probably use <th> tags for the headers. The columns would align themselves under the <td> tags then. Like:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>