API tools faq
paste
Advertisement
RiQ363

Untitled

RiQ363
Jul 30th, 2015
236
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.85 KB | None | 0 0
raw download clone embed print report
  1. <!-- Invoice styles -->
  2. <style type="text/css">
  3.     html,body {
  4.         min-height:100%;
  5.         margin:0;
  6.         padding:0;
  7.     }
  8.  
  9.     body {
  10.         background-color:#fff;
  11.         width:210mm;
  12.         -moz-box-sizing:border-box;
  13.         box-sizing:border-box;
  14.         padding:20mm 10mm 15mm;
  15.     }
  16.  
  17.     body > div {
  18.         height:100%;
  19.     }
  20.  
  21.     body p:empty {
  22.         display:none;
  23.     }
  24.  
  25.     body a {
  26.         text-decoration:none;
  27.         color:#000;
  28.     }
  29.  
  30.     body table {
  31.         border-collapse:collapse;
  32.         border-spacing:0;
  33.     }
  34.  
  35.     body .body {
  36.         height:100%;
  37.         width:170mm;
  38.         margin:0 auto;
  39.     }
  40.  
  41.     body .body td {
  42.         vertical-align:top;
  43.         height:0;
  44.         font-family:Arial, Helvetica, "Sans Serif";
  45.         font-size:8pt;
  46.         line-height:10pt;
  47.         color:#000;
  48.         padding:0;
  49.     }
  50.  
  51.     body .body td.footer {
  52.         height:100%;
  53.         text-align:center;
  54.         vertical-align:bottom;
  55.     }
  56.  
  57.     body .body td.footer div {
  58.         border-bottom:1px solid #000;
  59.         padding:10mm 0 5pt;
  60.     }
  61.  
  62.     body .body .invoice td td {
  63.         vertical-align:top;
  64.         padding:0;
  65.     }
  66.  
  67.     body .body .invoice p {
  68.         margin:2pt 0;
  69.     }
  70.  
  71.     body .body .invoice .store-info {
  72.         width:100%;
  73.         margin-bottom:16pt;
  74.     }
  75.  
  76.     body .body .invoice .store-info .invoice-logo {
  77.         max-height:25mm;
  78.         max-width:100%;
  79.         width:auto;
  80.         display:block;
  81.         margin:0 0 5mm;
  82.     }
  83.  
  84.     body .body .invoice .store-info .store-title {
  85.         font-size:10pt;
  86.         line-height:12pt;
  87.         font-weight:600;
  88.         padding:5pt 0;
  89.     }
  90.  
  91.     body .body .invoice .store-info .store-main-info {
  92.         width:180mm;
  93.         padding-right:5mm;
  94.     }
  95.  
  96.     body .body .invoice .store-info .store-main-info .title-detached {
  97.         margin-top:5pt;
  98.         margin-bottom:5pt;
  99.     }
  100.  
  101.  
  102.     body .body .invoice .store-info .store-customer-info {
  103.         vertical-align:top;
  104.     }
  105.  
  106.     body .body .invoice .store-info .store-customer-info p {
  107.         max-width:60mm;
  108.         word-wrap:break-word;
  109.     }
  110.  
  111.     body .body .invoice td.invoice-row,body .body .invoice .invoice-row > tr:first-child > td {
  112.         border-top:1px solid #000;
  113.     }
  114.  
  115.     body .body .invoice .order-comment {
  116.         padding-bottom: 12pt;
  117.     }
  118.  
  119.     body .body .invoice .order-info {
  120.         margin-bottom:11pt;
  121.         padding:0;
  122.     }
  123.  
  124.     body .body .invoice .order-items {
  125.         margin-bottom:16pt;
  126.         padding:0;
  127.     }
  128.  
  129.     body .body .invoice .order-info td,body .body .invoice .order-items td {
  130.         width:14mm;
  131.         padding-right:5mm;
  132.     }
  133.  
  134.     body .body .invoice .order-info td:last-child,body .body .invoice .order-items td:last-child {
  135.         width:auto;
  136.     }
  137.  
  138.     body .body .invoice .order-info .title,body .body .invoice .order-items .title {
  139.         font-weight:600;
  140.         padding-top:5pt;
  141.         padding-bottom:12pt;
  142.         margin:0;
  143.     }
  144.  
  145.     body .body .invoice .order-info td:last-child {
  146.         padding-right:0;
  147.     }
  148.  
  149.     body .body .invoice .order-info p {
  150.         max-width:42mm;
  151.         word-wrap:break-word;
  152.     }
  153.  
  154.     body .body .invoice .order-info .order-comment p {
  155.         max-width: 100%;
  156.         word-break: break-all;
  157.         white-space: pre-wrap;
  158.     }
  159.  
  160.     body .body .invoice .order-comment-title {
  161.         margin-bottom: 4pt;
  162.     }
  163.  
  164.     body .body .invoice .order-items table tbody tr:last-child td {
  165.         padding-bottom:3pt;
  166.     }
  167.  
  168.     body .body .invoice .order-items .title {
  169.         padding-bottom:5pt;
  170.     }
  171.  
  172.     body .body .invoice .order-items .order-item-desc {
  173.         width:150mm;
  174.     }
  175.  
  176.     body .body .invoice .order-items .order-item-count {
  177.         width:11mm;
  178.     }
  179.  
  180.     body .body .invoice .order-items .order-item-count,body .body .invoice .order-items .order-item-total {
  181.         text-align:right;
  182.         padding-right:1mm;
  183.     }
  184.  
  185.     body .body .invoice .order-items .order-item-total {
  186.         padding-right:2mm;
  187.         white-space: nowrap;
  188.     }
  189.  
  190.     body .body .invoice .order-items .order-total td {
  191.         padding-top:1pt;
  192.         padding-bottom:1pt;
  193.     }
  194.  
  195.     body .body .invoice,body .body .invoice .order-items table {
  196.         width:100%;
  197.     }
  198.  
  199.     body .body .invoice td,body .body .invoice .order-items table td {
  200.         padding:0 1mm;
  201.     }
  202.  
  203.     body .body .invoice .text-uppercase,body .body .invoice .order-info .title::first-letter,body .body .invoice .order-items .title::first-letter {
  204.         text-transform:uppercase;
  205.     }
  206.  
  207.     body .body .invoice .text-bold,body .body .invoice .order-items .order-item-title {
  208.         font-weight:600;
  209.     }
  210.  
  211.     body .body .invoice .store-info .store-main-info .url,body .body .invoice .order-info .title-detached,body .body .invoice .order-items .title-detached {
  212.         margin-bottom:5pt;
  213.     }
  214.  
  215.     body .body .invoice .store-info .store-main-info p,body .body .invoice .order-items .order-item-desc p {
  216.         max-width:87mm;
  217.         word-wrap:break-word;
  218.     }
  219.  
  220.     body .body .invoice .order-items .order-item-desc .order-discount-coupon {
  221.         max-width: 64mm;
  222.     }
  223.  
  224.     body .body .invoice .order-items table tbody tr td,body .body .invoice .order-items .order-total tr:first-child td {
  225.         padding-top:7pt;
  226.     }
  227.  
  228.     @media print{
  229.         * {
  230.             -webkit-print-color-adjust:exact;
  231.         }
  232.  
  233.         html,body {
  234.             height:100%;
  235.         }
  236.  
  237.         body {
  238.             padding:0;
  239.         }
  240.  
  241.         @page {
  242.             margin:20mm 0 15mm;
  243.         }
  244.     }
  245. </style>
  246.  
  247. <!-- Invoice body markup -->
  248. <table class="body">
  249.     <tbody>
  250.     <tr>
  251.         <td>
  252.             <table class="invoice">
  253.                
  254.                 <tbody>
  255.  
  256.                 <!-- Your company information -->
  257.                 <tr>
  258.                     <td>
  259.                         <table class="store-info">
  260.                             <thead>
  261.  
  262.                             <!-- Invoice logo -->
  263.                             <#if store.invoiceLogoUrl?has_content>
  264.                             <tr>
  265.                                 <td colspan="2">
  266.                                     <img class="invoice-logo"  src="${store.invoiceLogoUrl}" />
  267.                                 </td>
  268.                             </tr>
  269.                             </#if>
  270.  
  271.                             <tr>
  272.                                 <td colspan="2" class="store-title">
  273.                                     <!-- Store name -->
  274.                                     <span>${store.name}</span>
  275.                                 </td>
  276.                             </tr>
  277.                             </thead>
  278.                             <tbody>
  279.                             <tr>
  280.                                 <!-- Company information: store URL, tax ID, company name, address and contact information -->
  281.                                 <td class="store-main-info">
  282.                                     <p class="url"><@urlWithoutProtocol store.storeUrl/></p>
  283.                                 <#if store.businessRegistrationID.value?has_content>
  284.                                     <p class="title-detached">${store.businessRegistrationID.name}: ${store.businessRegistrationID.value}</p>
  285.                                 </#if>
  286.                                     <p>${store.companyName}</p>
  287.                                     <p>${store.officeAddress.street}</p>
  288.                                 <#if store.officeAddress.city?has_content>
  289.                                     <p>${store.officeAddress.city}, ${store.officeAddress.stateCode} ${store.officeAddress.postalCode}</p>
  290.                                 </#if>
  291.                                     <p>${store.officeAddress.country}</p>
  292.                                 </td>
  293.                                 <td class="store-customer-info">
  294.                                     <p><b>${textLabels.customerService}</b></p>
  295.                                     <p>${store.officeAddress.phone}</p>
  296.                                     <p>${store.companyEmail}</p>
  297.                                 </td>
  298.                             </tr>
  299.                             </tbody>
  300.                         </table>
  301.                     </td>
  302.                 </tr>
  303.  
  304.                 <!-- Shipping and billing information -->
  305.                 <tr>
  306.                     <td class="invoice-row">
  307.                         <table class="order-info">
  308.                             <thead>
  309.                             <tr>
  310.                                 <!-- Order date -->
  311.                                 <td colspan="2" class="title">
  312.                                     <span>${order.dateCreated}</span>
  313.                                 </td>
  314.                             </tr>
  315.                             </thead>
  316.                             <tbody>
  317.                             <tr>
  318.                                 <!-- Customer shipping address -->
  319.                             <#if order.shippingAddress?has_content && !order.isSameShippingAndBilling>
  320.                                 <td>
  321.                                     <#if order.shippingAddress?has_content && order.billingAddress?has_content && !order.isSameShippingAndBilling>
  322.                                         <p class="title-detached">${textLabels.shipTo}</p>
  323.                                     </#if>
  324.                                     <p class="text-uppercase">${order.shippingAddress.name}</p>
  325.                                     <p>${order.shippingAddress.companyName}</p>
  326.                                     <p>${order.shippingAddress.street}</p>
  327.                                     <p><#if order.shippingAddress.city?has_content>${order.shippingAddress.city}, </#if><#if order.shippingAddress.state?has_content>${order.shippingAddress.state}, </#if>${order.shippingAddress.postalCode}</p>
  328.                                     <p>${order.shippingAddress.country}</p>
  329.                                     <p>${order.shippingAddress.phone}</p>
  330.                                 </td>
  331.                             </#if>
  332.                                 <!-- Customer billing address -->
  333.                                 <td>
  334.                                 <#if order.billingAddress?has_content>
  335.                                     <#if order.shippingAddress?has_content && order.billingAddress?has_content && !order.isSameShippingAndBilling>
  336.                                         <p class="title-detached">${textLabels.buyer}</p>
  337.                                     </#if>
  338.                                     <p class="text-uppercase">${order.billingAddress.name}</p>
  339.                                     <p>${order.billingAddress.companyName}</p>
  340.                                     <p>${order.billingAddress.street}</p>
  341.                                     <p><#if order.billingAddress.city?has_content>${order.billingAddress.city}, </#if><#if order.billingAddress.state?has_content>${order.billingAddress.state}, </#if>${order.billingAddress.postalCode}</p>
  342.                                     <p>${order.billingAddress.country}</p>
  343.                                     <p>${order.billingAddress.phone}</p>
  344.                                 </#if>
  345.                                     <p>${customer.email}</p>
  346.                                 </td>
  347.                             <#if order.shippingMethod?has_content || order.paymentMethod?has_content>
  348.                                 <td>
  349.                                     <!-- Shipping option chosen to deliver the order -->
  350.                                     <#if order.shippingMethod?has_content>
  351.                                         <p>${textLabels.shippingMethod} ${order.shippingMethod.name}</p>
  352.                                     </#if>
  353.                                     <!-- Payment option that customer used to pay for the order -->
  354.                                     <#if order.paymentMethod?has_content>
  355.                                         <p>${textLabels.paymentMethod} ${order.paymentMethod.name}</p>
  356.                                     </#if>
  357.                                 </td>
  358.                             </#if>
  359.                             </tr>
  360.                             </tbody>
  361.                         </table>
  362.                     </td>
  363.                 </tr>
  364.  
  365.                 <!-- Order comments -->
  366.                 <#if order.orderComments?has_content>
  367.                 <tr>
  368.                     <td colspan="3" class="order-comment">
  369.                         <p class="order-comment-title title-detached">${textLabels.orderComments}</p>
  370.                         <p class="text-bold">${order.orderComments}</p>
  371.                     </td>
  372.                 </tr>
  373.                 </#if>
  374.  
  375.                 <!-- Order information -->
  376.                 <tr>
  377.                     <td class="order-items">
  378.                         <table>
  379.                             <tbody class="invoice-row">
  380.                             <tr>
  381.                                 <td colspan="3" class="title">
  382.                                     <!-- Order number -->
  383.                                     <span>${textLabels.order}<#if order.number?has_content> #${order.number}</#if></span>
  384.                                 </td>
  385.                               <td></td>
  386.                             </tr>
  387.  
  388.                             <!-- Ordered items list -->
  389.                             <#list order.items as orderItem>
  390.                             <tr>
  391.                                 <td class="order-item-desc">
  392.                                     <p class="order-item-title">${orderItem.name}</p>
  393.                                     <p>${textLabels.sku}: ${orderItem.sku}</p>
  394.                                   <p>${orderItem.formattedOptions}</p>
  395.                                 </td>
  396.                                 <td class="order-item-count">
  397.                                     <p>${orderItem.quantity}</p>
  398.                               </td>
  399.                                 <td class="order-item-total">
  400.                                     <p>${orderItem.price}</p>
  401.                               <td class="order-item-total">
  402.                                     <p>${orderItem.subtotal}</p>
  403.                             </tr>
  404.                             </#list>
  405.                             </tbody>
  406.  
  407.                             <!-- Order totals -->
  408.                             <tbody class="invoice-row order-total">
  409.  
  410.                             <!-- Order subtotal -->
  411.                             <tr>
  412.                                 <td></td>
  413.                                 <td colspan="2" class="order-item-count">
  414.                                     <p>${textLabels.items}</p>
  415.                                 </td>
  416.                                 <td class="order-item-total">
  417.                                     <p>${order.subtotal}</p>
  418.                                 </td>
  419.                              
  420.                             </tr>
  421.  
  422.                             <!-- Order shipping cost -->
  423.                             <#if order.shippingMethod?has_content>
  424.                                 <tr>
  425.                                     <td></td>
  426.                                     <td colspan="2" class="order-item-count">
  427.                                         <p>${textLabels.shipping}</p>
  428.                                     </td>
  429.                                     <td class="order-item-total">
  430.                                         <p>${order.shippingCost}</p>
  431.                                     </td>
  432.                                 </tr>
  433.                             </#if>
  434.                            
  435.  
  436.                             <!-- Order handling fee cost -->
  437.                             <#if order.handlingFee?has_content>
  438.                             <tr>
  439.                                 <td></td>
  440.                                 <td colspan="2" class="order-item-count">
  441.                                     <p>${order.handlingFee.name}</p>
  442.                                 </td>
  443.                                 <td class="order-item-total">
  444.                                     <p>${order.handlingFee.value}</p>
  445.                                 </td>
  446.                             </tr>
  447.                             </#if>
  448.  
  449.                             <!-- Order tax -->
  450.                             <#if order.taxes?has_content>
  451.                                 <#list order.taxes as tax>
  452.                                     <tr>
  453.                                         <td></td>
  454.                                         <td colspan="2" class="order-item-count">
  455.                                             <p>${tax.name}</p>
  456.                                         </td>
  457.                                         <td class="order-item-total">
  458.                                             <p>${tax.value}</p>
  459.                                         </td>                              
  460.                                     </tr>
  461.                                 </#list>
  462.                             </#if>
  463.  
  464.                             <!-- Order discounts total -->
  465.                             <#if order.discounts?has_content>
  466.                                 <#list order.discounts as discount>                        
  467.                                     <tr>
  468.                                         <td></td>
  469.                                         <td colspan="2" class="order-item-count">
  470.                                             <p>${discount.name}</p>
  471.                                         </td>
  472.                                         <td class="order-item-total">
  473.                                             <p>-${discount.value}</p>
  474.                                         </td>
  475.                                     </tr>
  476.                                 </#list>
  477.                             </#if>
  478.  
  479.                             <!-- Order total cost -->
  480.                             <tr>
  481.                                 <td class="order-item-desc"></td>
  482.                                 <td></td>
  483.                                 <td class="order-item-count text-bold">
  484.                                     <p>${textLabels.total}</p>
  485.                                 </td>
  486.                                 <td class="order-item-total text-bold">
  487.                                     <p>${order.total}</p>
  488.                                 </td>
  489.                             </tr>
  490.                             </tbody>
  491.                         </table>
  492.                     </td>
  493.                 </tr>
  494.                 </tbody>
  495.             </table>
  496.         </td>
  497.     </tr>
  498.     <!-- Invoice footer -->
  499.     <tr>
  500.         <td class="footer">
  501.             <div>${textLabels.footerMessage}</div>
  502.         </td>
  503.     </tr>
  504.     </tbody>
  505. </table>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!