Shoporama

invoice.html – Ordrebekræftelsen

Nov 17th, 2020 (edited)
307
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 23.55 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.   <meta name="viewport" content="width=device-width"/>
  6.   <style>
  7.  
  8. #outlook a {
  9.   padding:0;
  10. }
  11.  
  12. body{
  13.   width:100% !important;
  14.   min-width: 100%;
  15.   -webkit-text-size-adjust:100%;
  16.   -ms-text-size-adjust:100%;
  17.   margin:0;
  18.   padding:0;
  19. }
  20.  
  21. .ExternalClass {
  22.   width:100%;
  23. }
  24.  
  25. .ExternalClass,
  26. .ExternalClass p,
  27. .ExternalClass span,
  28. .ExternalClass font,
  29. .ExternalClass td,
  30. .ExternalClass div {
  31.   line-height: 100%;
  32. }
  33.  
  34. #backgroundTable {
  35.   margin:0;
  36.   padding:0;
  37.   width:100% !important;
  38.   line-height: 100% !important;
  39. }
  40.  
  41. img {
  42.   outline:none;
  43.   text-decoration:none;
  44.   -ms-interpolation-mode: bicubic;
  45.   max-width: 100%;
  46. }
  47.  
  48. center {
  49.   width: 100%;
  50.   min-width: 580px;
  51.   padding: 20px 0;
  52. }
  53.  
  54. a img {
  55.   border: none;
  56. }
  57.  
  58. p {
  59.   margin: 0;
  60. }
  61.  
  62. table {
  63.   border-spacing: 0;
  64.   border-collapse: collapse;
  65. }
  66.  
  67. td {
  68.   word-break: break-word;
  69.   -webkit-hyphens: auto;
  70.   -moz-hyphens: auto;
  71.   hyphens: auto;
  72.   border-collapse: collapse !important;
  73. }
  74.  
  75. table, tr, td {
  76.   padding: 0;
  77.   vertical-align: top;
  78.   text-align: left;
  79. }
  80.  
  81. hr {
  82.   color: #d9d9d9;
  83.   background-color: #d9d9d9;
  84.   height: 1px;
  85.   border: none;
  86. }
  87.  
  88. /* Responsive Grid */
  89. body{
  90.   background-color: #eee;
  91. }
  92.  
  93. table.body {
  94.   height: 100%;
  95.   width: 100%;
  96. }
  97. table.outer td{
  98.   width: 580px;
  99.   padding:15px;
  100.   background: #fff;
  101. }
  102. table.container {
  103.   width: 580px;
  104.   margin: 0 auto;
  105.   text-align: inherit;
  106.  
  107. }
  108.  
  109. table.row {
  110.   padding: 0px;
  111.   width: 100%;
  112.   position: relative;
  113. }
  114.  
  115. table.container table.row {
  116.   display: block;
  117. }
  118.  
  119. td.wrapper {
  120.   padding: 10px 20px 0px 0px;
  121.   position: relative;
  122. }
  123.  
  124. table.columns,
  125. table.column {
  126.   margin: 0 auto;
  127. }
  128.  
  129. table.columns td,
  130. table.column td {
  131.   padding: 10px 0px 10px;
  132.   line-height: 26px;
  133. }
  134.  
  135. table.columns td.sub-columns,
  136. table.column td.sub-columns,
  137. table.columns td.sub-column,
  138. table.column td.sub-column {
  139.   padding-right: 10px;
  140. }
  141.  
  142. td.sub-column, td.sub-columns {
  143.   min-width: 0px;
  144. }
  145.  
  146. table.row td.last,
  147. table.container td.last {
  148.   padding-right: 0px;
  149. }
  150.  
  151. table.one { width: 30px; }
  152. table.two { width: 80px; }
  153. table.three { width: 130px; }
  154. table.four { width: 180px; }
  155. table.five { width: 230px; }
  156. table.six { width: 280px; }
  157. table.seven { width: 330px; }
  158. table.eight { width: 380px; }
  159. table.nine { width: 430px; }
  160. table.ten { width: 480px; }
  161. table.eleven { width: 530px; }
  162. table.twelve { width: 580px; }
  163.  
  164. table.one center { min-width: 30px; }
  165. table.two center { min-width: 80px; }
  166. table.three center { min-width: 130px; }
  167. table.four center { min-width: 180px; }
  168. table.five center { min-width: 230px; }
  169. table.six center { min-width: 280px; }
  170. table.seven center { min-width: 330px; }
  171. table.eight center { min-width: 380px; }
  172. table.nine center { min-width: 430px; }
  173. table.ten center { min-width: 480px; }
  174. table.eleven center { min-width: 530px; }
  175. table.twelve center { min-width: 580px; }
  176.  
  177. table.one .panel center { min-width: 10px; }
  178. table.two .panel center { min-width: 60px; }
  179. table.three .panel center { min-width: 110px; }
  180. table.four .panel center { min-width: 160px; }
  181. table.five .panel center { min-width: 210px; }
  182. table.six .panel center { min-width: 260px; }
  183. table.seven .panel center { min-width: 310px; }
  184. table.eight .panel center { min-width: 360px; }
  185. table.nine .panel center { min-width: 410px; }
  186. table.ten .panel center { min-width: 460px; }
  187. table.eleven .panel center { min-width: 510px; }
  188. table.twelve .panel center { min-width: 560px; }
  189.  
  190. .body .columns td.one,
  191. .body .column td.one { width: 8.333333%; }
  192. .body .columns td.two,
  193. .body .column td.two { width: 16.666666%; }
  194. .body .columns td.three,
  195. .body .column td.three { width: 25%; }
  196. .body .columns td.four,
  197. .body .column td.four { width: 33.333333%; }
  198. .body .columns td.five,
  199. .body .column td.five { width: 41.666666%; }
  200. .body .columns td.six,
  201. .body .column td.six { width: 50%; }
  202. .body .columns td.seven,
  203. .body .column td.seven { width: 58.333333%; }
  204. .body .columns td.eight,
  205. .body .column td.eight { width: 66.666666%; }
  206. .body .columns td.nine,
  207. .body .column td.nine { width: 75%; }
  208. .body .columns td.ten,
  209. .body .column td.ten { width: 83.333333%; }
  210. .body .columns td.eleven,
  211. .body .column td.eleven { width: 91.666666%; }
  212. .body .columns td.twelve,
  213. .body .column td.twelve { width: 100%; }
  214.  
  215. td.offset-by-one { padding-left: 50px; }
  216. td.offset-by-two { padding-left: 100px; }
  217. td.offset-by-three { padding-left: 150px; }
  218. td.offset-by-four { padding-left: 200px; }
  219. td.offset-by-five { padding-left: 250px; }
  220. td.offset-by-six { padding-left: 300px; }
  221. td.offset-by-seven { padding-left: 350px; }
  222. td.offset-by-eight { padding-left: 400px; }
  223. td.offset-by-nine { padding-left: 450px; }
  224. td.offset-by-ten { padding-left: 500px; }
  225. td.offset-by-eleven { padding-left: 550px; }
  226.  
  227. td.expander {
  228.   visibility: hidden;
  229.   width: 0px;
  230.   padding: 0 !important;
  231. }
  232.  
  233. table.columns .text-pad,
  234. table.column .text-pad {
  235.   padding-left: 10px;
  236.   padding-right: 10px;
  237. }
  238.  
  239. table.columns .left-text-pad,
  240. table.columns .text-pad-left,
  241. table.column .left-text-pad,
  242. table.column .text-pad-left {
  243.   padding-left: 10px;
  244. }
  245.  
  246. table.columns .right-text-pad,
  247. table.columns .text-pad-right,
  248. table.column .right-text-pad,
  249. table.column .text-pad-right {
  250.   padding-right: 10px;
  251. }
  252.  
  253. /* Block Grid */
  254.  
  255. .block-grid {
  256.   width: 100%;
  257.   max-width: 580px;
  258. }
  259.  
  260. .block-grid td {
  261.   display: inline-block;
  262.   padding:10px;
  263. }
  264.  
  265. .two-up td {
  266.   width:270px;
  267. }
  268.  
  269. .three-up td {
  270.   width:173px;
  271. }
  272.  
  273. .four-up td {
  274.   width:125px;
  275. }
  276.  
  277. .five-up td {
  278.   width:96px;
  279. }
  280.  
  281. .six-up td {
  282.   width:76px;
  283. }
  284.  
  285. .seven-up td {
  286.   width:62px;
  287. }
  288.  
  289. .eight-up td {
  290.   width:52px;
  291. }
  292.  
  293. /* Alignment & Visibility Classes */
  294.  
  295. table.center, td.center {
  296.  text-align: center;
  297. }
  298.  
  299. h1.center,
  300. h2.center,
  301. h3.center,
  302. h4.center,
  303. h5.center,
  304. h6.center {
  305.   text-align: center;
  306. }
  307.  
  308. span.center {
  309.   display: block;
  310.   width: 100%;
  311.   text-align: center;
  312. }
  313.  
  314. img.center {
  315.   margin: 0 auto;
  316.   float: none;
  317. }
  318.  
  319. .show-for-small,
  320. .hide-for-desktop {
  321.   display: none;
  322. }
  323.  
  324. /* Typography */
  325.  
  326. body, table.body, h1, h2, h3, h4, h5, h6, p, td {
  327.   color: #222222;
  328.   font-family: "Helvetica", "Arial", sans-serif;
  329.   font-weight: normal;
  330.   padding:0;
  331.   margin: 0;
  332.   /*text-align: left; */
  333.   line-height: 1.3;
  334. }
  335.  
  336. h1, h2, h3, h4, h5, h6 {
  337.   word-break: normal;
  338. }
  339.  
  340. h1 {font-size: 35px; font-weight: 700;}
  341. h2 {font-size: 28px;}
  342. h3 {font-size: 24px;}
  343. h4 {font-size: 22px;}
  344. h5 {font-size: 20px;}
  345. h6 {font-size: 16px;}
  346. body, table.body, p, td {font-size: 14px;line-height:19px;}
  347.  
  348. p.lead, p.lede, p.leed {
  349.   font-size: 18px;
  350.   line-height:21px;
  351. }
  352.  
  353. p {
  354.   /*margin-bottom: 10px;*/
  355.   line-height: 26px;
  356. }
  357.  
  358. small {
  359.   font-size: 10px;
  360. }
  361.  
  362. a {
  363.   color: #2ba6cb;
  364.   text-decoration: none;
  365. }
  366.  
  367. a:hover {
  368.   /*color: #2795b6 !important;*/
  369. }
  370.  
  371. a:active {
  372.   /*color: #2795b6 !important;*/
  373. }
  374.  
  375. a:visited {
  376.   /*color: #2ba6cb !important;*/
  377. }
  378.  
  379. h1 a,
  380. h2 a,
  381. h3 a,
  382. h4 a,
  383. h5 a,
  384. h6 a {
  385.   color: #2ba6cb;
  386. }
  387.  
  388. h1 a:active,
  389. h2 a:active,  
  390. h3 a:active,
  391. h4 a:active,
  392. h5 a:active,
  393. h6 a:active {
  394.   color: #2ba6cb !important;
  395. }
  396.  
  397. h1 a:visited,
  398. h2 a:visited,  
  399. h3 a:visited,
  400. h4 a:visited,
  401. h5 a:visited,
  402. h6 a:visited {
  403.   color: #2ba6cb !important;
  404. }
  405.  
  406. /* Panels */
  407.  
  408. .panel {
  409.   background: #f2f2f2;
  410.   border: 1px solid #d9d9d9;
  411.   padding: 10px !important;
  412. }
  413.  
  414. .sub-grid table {
  415.   width: 100%;
  416. }
  417.  
  418. .sub-grid td.sub-columns {
  419.   padding-bottom: 0;
  420. }
  421.  
  422. /* Buttons */
  423.  
  424. table.button,
  425. table.tiny-button,
  426. table.small-button,
  427. table.medium-button,
  428. table.large-button {
  429.   width: 100%;
  430.   overflow: hidden;
  431. }
  432.  
  433. table.button td,
  434. table.tiny-button td,
  435. table.small-button td,
  436. table.medium-button td,
  437. table.large-button td {
  438.   display: block;
  439.   width: auto !important;
  440.   text-align: center;
  441.   background: #2ba6cb;
  442.   border: 1px solid #2284a1;
  443.   color: #ffffff;
  444.   padding: 8px 0;
  445. }
  446.  
  447. table.tiny-button td {
  448.   padding: 5px 0 4px;
  449. }
  450.  
  451. table.small-button td {
  452.   padding: 8px 0 7px;
  453. }
  454.  
  455. table.medium-button td {
  456.   padding: 12px 0 10px;
  457. }
  458.  
  459. table.large-button td {
  460.   padding: 21px 0 18px;
  461. }
  462.  
  463. table.button td a,
  464. table.tiny-button td a,
  465. table.small-button td a,
  466. table.medium-button td a,
  467. table.large-button td a {
  468.   font-weight: bold;
  469.   text-decoration: none;
  470.   font-family: Helvetica, Arial, sans-serif;
  471.   color: #ffffff;
  472.   font-size: 16px;
  473. }
  474.  
  475. table.tiny-button td a {
  476.   font-size: 12px;
  477.   font-weight: normal;
  478. }
  479.  
  480. table.small-button td a {
  481.   font-size: 16px;
  482. }
  483.  
  484. table.medium-button td a {
  485.   font-size: 20px;
  486. }
  487.  
  488. table.large-button td a {
  489.   font-size: 24px;
  490. }
  491.  
  492. table.button:hover td,
  493. table.button:visited td,
  494. table.button:active td {
  495.   background: #2795b6 !important;
  496. }
  497.  
  498. table.button:hover td a,
  499. table.button:visited td a,
  500. table.button:active td a {
  501.   color: #fff !important;
  502. }
  503.  
  504. table.button:hover td,
  505. table.tiny-button:hover td,
  506. table.small-button:hover td,
  507. table.medium-button:hover td,
  508. table.large-button:hover td {
  509.   background: #2795b6 !important;
  510. }
  511.  
  512. table.button:hover td a,
  513. table.button:active td a,
  514. table.button td a:visited,
  515. table.tiny-button:hover td a,
  516. table.tiny-button:active td a,
  517. table.tiny-button td a:visited,
  518. table.small-button:hover td a,
  519. table.small-button:active td a,
  520. table.small-button td a:visited,
  521. table.medium-button:hover td a,
  522. table.medium-button:active td a,
  523. table.medium-button td a:visited,
  524. table.large-button:hover td a,
  525. table.large-button:active td a,
  526. table.large-button td a:visited {
  527.   color: #ffffff !important;
  528. }
  529.  
  530. table.secondary td {
  531.   background: #e9e9e9;
  532.   border-color: #d0d0d0;
  533.   color: #555;
  534. }
  535.  
  536. table.secondary td a {
  537.   color: #555;
  538. }
  539.  
  540. table.secondary:hover td {
  541.   background: #d0d0d0 !important;
  542.   color: #555;
  543. }
  544.  
  545. table.secondary:hover td a,
  546. table.secondary td a:visited,
  547. table.secondary:active td a {
  548.   color: #555 !important;
  549. }
  550.  
  551. table.success td {
  552.   background: #5da423;
  553.   border-color: #457a1a;
  554. }
  555.  
  556. table.success:hover td {
  557.   background: #457a1a !important;
  558. }
  559.  
  560. table.alert td {
  561.   background: #c60f13;
  562.   border-color: #970b0e;
  563. }
  564.  
  565. table.alert:hover td {
  566.   background: #970b0e !important;
  567. }
  568.  
  569. table.radius td {
  570.   -webkit-border-radius: 3px;
  571.   -moz-border-radius: 3px;
  572.   border-radius: 3px;
  573. }
  574.  
  575. table.round td {
  576.   -webkit-border-radius: 500px;
  577.   -moz-border-radius: 500px;
  578.   border-radius: 500px;
  579. }
  580.  
  581. .button-custom{
  582.   color: #fff;
  583.   display: block;
  584.   margin: auto;
  585.   width: auto;
  586.   max-width: 360px;
  587.   text-align: center;
  588.   border: 1px solid #507502;
  589.   border-bottom: 5px solid #3f5c02;
  590.   color: #ffffff;
  591.   padding: 8px 0;
  592.   background-color: #507502;
  593.   border-radius: 3px;
  594. }
  595. .button-custom:hover{
  596.   opacity: 0.9;
  597. }
  598.  
  599. /* Outlook First */
  600. body.outlook p {
  601.   display: inline !important;
  602. }
  603.  
  604. /*  Media Queries */
  605.  
  606. @media only screen and (max-width: 600px) {
  607.  
  608.   table[class="body"] img {
  609.     width: auto !important;
  610.     height: auto !important;
  611.   }
  612.  
  613.   table[class="body"] center {
  614.     min-width: 0 !important;
  615.   }
  616.  
  617.   table[class="body"] .container {
  618.     width: 95% !important;
  619.   }
  620.  
  621.   table[class="body"] .row {
  622.     width: 100% !important;
  623.     display: block !important;
  624.   }
  625.  
  626.   table[class="body"] .wrapper {
  627.     display: block !important;
  628.     padding-right: 0 !important;
  629.   }
  630.  
  631.   table[class="body"] .columns,
  632.   table[class="body"] .column {
  633.     table-layout: fixed !important;
  634.     float: none !important;
  635.     width: 100% !important;
  636.     padding-right: 0px !important;
  637.     padding-left: 0px !important;
  638.     display: block !important;
  639.   }
  640.  
  641.   table[class="body"] .wrapper.first .columns,
  642.   table[class="body"] .wrapper.first .column {
  643.     display: table !important;
  644.   }
  645.  
  646.   table[class="body"] table.columns td,
  647.   table[class="body"] table.column td {
  648.     width: 100% !important;
  649.   }
  650.  
  651.   table[class="body"] .columns td.one,
  652.   table[class="body"] .column td.one { width: 8.333333% !important; }
  653.   table[class="body"] .columns td.two,
  654.   table[class="body"] .column td.two { width: 16.666666% !important; }
  655.   table[class="body"] .columns td.three,
  656.   table[class="body"] .column td.three { width: 25% !important; }
  657.   table[class="body"] .columns td.four,
  658.   table[class="body"] .column td.four { width: 33.333333% !important; }
  659.   table[class="body"] .columns td.five,
  660.   table[class="body"] .column td.five { width: 41.666666% !important; }
  661.   table[class="body"] .columns td.six,
  662.   table[class="body"] .column td.six { width: 50% !important; }
  663.   table[class="body"] .columns td.seven,
  664.   table[class="body"] .column td.seven { width: 58.333333% !important; }
  665.   table[class="body"] .columns td.eight,
  666.   table[class="body"] .column td.eight { width: 66.666666% !important; }
  667.   table[class="body"] .columns td.nine,
  668.   table[class="body"] .column td.nine { width: 75% !important; }
  669.   table[class="body"] .columns td.ten,
  670.   table[class="body"] .column td.ten { width: 83.333333% !important; }
  671.   table[class="body"] .columns td.eleven,
  672.   table[class="body"] .column td.eleven { width: 91.666666% !important; }
  673.   table[class="body"] .columns td.twelve,
  674.   table[class="body"] .column td.twelve { width: 100% !important; }
  675.  
  676.   table[class="body"] td.offset-by-one,
  677.   table[class="body"] td.offset-by-two,
  678.   table[class="body"] td.offset-by-three,
  679.   table[class="body"] td.offset-by-four,
  680.   table[class="body"] td.offset-by-five,
  681.   table[class="body"] td.offset-by-six,
  682.   table[class="body"] td.offset-by-seven,
  683.   table[class="body"] td.offset-by-eight,
  684.   table[class="body"] td.offset-by-nine,
  685.   table[class="body"] td.offset-by-ten,
  686.   table[class="body"] td.offset-by-eleven {
  687.     padding-left: 0 !important;
  688.   }
  689.  
  690.   table[class="body"] table.columns td.expander {
  691.     width: 1px !important;
  692.   }
  693.  
  694.   table[class="body"] .right-text-pad,
  695.   table[class="body"] .text-pad-right {
  696.     padding-left: 10px !important;
  697.   }
  698.  
  699.   table[class="body"] .left-text-pad,
  700.   table[class="body"] .text-pad-left {
  701.     padding-right: 10px !important;
  702.   }
  703.  
  704.   table[class="body"] .hide-for-small,
  705.   table[class="body"] .show-for-desktop {
  706.     display: none !important;
  707.   }
  708.  
  709.   table[class="body"] .show-for-small,
  710.   table[class="body"] .hide-for-desktop {
  711.     display: inherit !important;
  712.   }
  713. }
  714.  
  715. </style>
  716. <style>
  717.  
  718.   table.facebook td {
  719.     background: #3b5998;
  720.     border-color: #2d4473;
  721.   }
  722.  
  723.   table.facebook:hover td {
  724.     background: #2d4473 !important;
  725.   }
  726.  
  727.   table.twitter td {
  728.     background: #00acee;
  729.     border-color: #0087bb;
  730.   }
  731.  
  732.   table.twitter:hover td {
  733.     background: #0087bb !important;
  734.   }
  735.  
  736.   table.google-plus td {
  737.     background-color: #DB4A39;
  738.     border-color: #CC0000;
  739.   }
  740.  
  741.   table.google-plus:hover td {
  742.     background: #CC0000 !important;
  743.   }
  744.  
  745.   .template-label {
  746.     color: #ffffff;
  747.     font-weight: bold;
  748.     font-size: 11px;
  749.   }
  750.  
  751.   .callout .wrapper {
  752.     padding-bottom: 20px;
  753.   }
  754.  
  755.   .callout .panel {
  756.     background: #ECF8FF;
  757.     border-color: #b9e5ff;
  758.   }
  759.  
  760.   .header {
  761.     background: #999999;
  762.   }
  763.  
  764.   .footer .wrapper {
  765.     background: #ebebeb;
  766.   }
  767.  
  768.   .footer h5 {
  769.     padding-bottom: 10px;
  770.   }
  771.  
  772.   table.columns .text-pad {
  773.     padding-left: 10px;
  774.     padding-right: 10px;
  775.   }
  776.  
  777.   table.columns .left-text-pad {
  778.     padding-left: 10px;
  779.   }
  780.  
  781.   table.columns .right-text-pad {
  782.     padding-right: 10px;
  783.   }
  784.  
  785.   @media only screen and (max-width: 600px) {
  786.  
  787.     table[class="body"] .right-text-pad {
  788.       padding-left: 10px !important;
  789.     }
  790.  
  791.     table[class="body"] .left-text-pad {
  792.       padding-right: 10px !important;
  793.     }
  794.   }
  795.  
  796.  
  797.  
  798.  
  799.   .producttable-head td{
  800.     border-top:1px solid #ccc;
  801.     padding-top:20px;
  802.     padding-bottom: 20px;
  803.     text-transform: uppercase;
  804.     color: #ccc;
  805.   }
  806.   .producttable-productline td{
  807.     padding-top:20px;
  808.     padding-bottom: 20px;
  809.     border-top:1px solid #efefef;
  810.   }
  811.   .producttable-shipping td{
  812.     padding-top:20px;
  813.     padding-bottom: 20px;
  814.     border-top:1px solid #efefef;
  815.   }
  816.   .producttable-voucher td{
  817.     padding-top:20px;
  818.     padding-bottom: 20px;
  819.     border-top:1px solid #efefef;
  820.   }
  821.   .producttable-total td{
  822.     padding-top:20px;
  823.     padding-bottom: 20px;
  824.     border-top:1px solid #efefef;
  825.     border-bottom: 1px solid #cccccc;
  826.     font-weight: bold;
  827.   }
  828.   .right{
  829.     text-align: right;
  830.   }
  831.  
  832.  
  833. </style>
  834. </head>
  835. <body>
  836.   <table class="body">
  837.     <tr>
  838.       <td class="center" align="center" valign="top">
  839.         <center>
  840.  
  841.           <table class="outer"><tr><td>
  842.  
  843.             <table class="container">
  844.               <tr>
  845.                 <td>
  846.  
  847.                   <table class="row">
  848.                     <tr>
  849.                       <td class="wrapper last">
  850.  
  851.                         <table class="twelve columns" style=" border-bottom: 1px solid #ddd;">
  852.                           <tr>
  853.                               <{if $settings.company.logo}>
  854.                             <td align="center" style="text-align:center"><img src="<{$settings.company.logo->getSrc(350, 100, 'fit')}>" style="width:280px; margin-bottom: 20px;" /></td>
  855.                             <{/if}>
  856.                           </tr>
  857.                           <tr>
  858.                             <td  style="text-align: center; padding-bottom: 20px;">
  859.  
  860.                             </style>
  861.                             <h4>Kære <{$order->getOrderFirstName()|escape}></h4>
  862.                             <h1>Mange tak for din ordre!<h1>
  863.                             </td>
  864.                           </tr>
  865.                         </table>
  866.  
  867.                       </td>
  868.                     </tr>
  869.                   </table>
  870.                   <table class="row">
  871.                     <tr>
  872.                       <td>
  873.                         <table class="twelve columns">
  874.                           <tr>
  875.                             <td class="" style=" padding: 20px 0 0;">
  876.                               <h3>Ordreoplysninger</h3>                          
  877.                             </td>
  878.                           </tr>
  879.                         </table>
  880.                         <table class="twelve columns" style="border-bottom: 1px solid #ddd;">
  881.                           <tr>
  882.                             <td class="two" >
  883.                               <p>Produkt</p>
  884.                             </td>
  885.                             <td class="eight right" style="text-align: right;">
  886.                               <p>Pris</p>
  887.                             </td>
  888.                           </tr>
  889.                         </table>
  890.                         <{assign var="products" value=$order->getProducts()}>
  891.                         <{section name="i" loop=$products}>
  892.                         <table class="twelve columns" style="border-bottom: 1px solid #ddd;">
  893.                           <tr>
  894.                             <td class="two" style="">
  895.                               <p><{$products[i]->getAmount()}> stk.</p>
  896.                             </td>
  897.                             <td class="six" style="">
  898.                              <strong><{$products[i]->getName()|escape}></strong>
  899.                            </td>
  900.                            <td class="four right" style="text-align: right;">
  901.                             <{assign var="attributes" value=$products[i]->getAttributes()}>
  902.                             <{if $attributes}>
  903.                             <{section name="j" loop=$attributes}>
  904.                             <p>DKK <{$attributes[j].name}>: <{$attributes[j].val}></p>
  905.                             <{/section}>    
  906.                             <{/if}>                
  907.                           </td>
  908.                         </tr>
  909.                       </table>  
  910.                       <{/section}>
  911.                     </td>
  912.                   </tr>
  913.                 </table>
  914.                 <table class="row">
  915.                   <tr>
  916.                     <td>
  917.                       <table class="twelve columns">
  918.                         <tr>                          
  919.                           <td class="right" style="padding:0;">
  920.                             <p>Moms udgør: <{$order->getVat()|number_format:2:",":"."}> <{$webshop->getCurrency()}></p>
  921.                           </td>
  922.                         </tr>
  923.                       </table>
  924.                       <table class="twelve columns">
  925.                         <tr>                          
  926.                           <td class="right" style="padding:0;">
  927.                             <p>Fragt: <{$order->getShippingPrice()|number_format:2:",":"."}> <{$webshop->getCurrency()}></p>
  928.                           </td>
  929.                         </tr>
  930.                       </table>
  931.                     </td>
  932.                   </tr>
  933.                 </table>
  934.                 <table class="row">
  935.                   <tr>
  936.                     <td>
  937.                       <table class="twelve columns" style="border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;">
  938.                         <tr>
  939.                           <td class="six" style="padding: 10px 0;">
  940.                             <h3>Total:</h3>
  941.                           </td>
  942.                           <td class="six right" style="padding: 10px 0;">
  943.                             <h3><{$order->getPrice()|number_format:2:",":"."}> <{$webshop->getCurrency()}></h3>
  944.                           </td>
  945.                         </tr>
  946.                       </table>
  947.                     </td>
  948.                   </tr>
  949.                 </table>
  950.                 <table class="row">
  951.                   <tr>
  952.                     <td>
  953.                       <table class="twelve columns" style="margin-top: 20px;">
  954.                         <tr>
  955.                           <td class="six" style="">
  956.                             <h3>Faktureringsadresse</h3>
  957.                             <p><{$order->getOrderName()|escape}></p>
  958.                             <p><{$order->getOrderAddress()|escape}></p>
  959.                             <p><{$order->getOrderZipcode()|escape}> <{$order->getOrderCity()|escape}></p>
  960.                             <p><{$order->getOrderCountry()|escape}></p>
  961.                             <br/>
  962.                           </td>
  963.                           <td class="six" style="">
  964.                             <h3>Leveringsadresse</h3>
  965.                             <p><{$order->getDelName()|escape}></p>
  966.                             <p><{$order->getDelAddress()|escape}></p>
  967.                             <p><{$order->getDelZipcode()|escape}> <{$order->getDelCity()|escape}></p>
  968.                             <p><{$order->getDelCountry()|escape}></p>
  969.                           </td>
  970.                         </tr>
  971.                       </table>                        
  972.                     </td>
  973.                   </tr>
  974.                 </table>
  975.  
  976.                 <table class="row callout">
  977.                   <tr>
  978.                     <td class="wrapper last">
  979.  
  980.                       <table class="twelve columns">
  981.                         <tr>
  982.                           <td class="" style="text-align:center;">
  983.                             <a class="button-custom" href="<{$order->getPublicUrl()|escape}>&utm_source=transaktionsmails&utm_medium=email&utm_campaign=basketmail">Du kan følge din ordre på dette link</a>
  984.                          </td>
  985.                        </tr>
  986.                      </table>
  987.  
  988.                    </td>
  989.                  </tr>
  990.                </table>
  991.  
  992.                <!-- container end below -->
  993.              </td>
  994.            </tr>
  995.          </table>
  996.  
  997.        </td></tr></table>
  998.      </center>
  999.    </td>
  1000.  </tr>
  1001. </table>
  1002. </body>
  1003. </html>
Add Comment
Please, Sign In to add comment