Code Tweaks Invoice PDF Template (Sngine Upgrade)

[a2cdx]

A modern, production-ready invoice template for Sngine marketplace (Siricy fork) with:

•• Clean UI layout
•• Siricy branding system
•• PDF optimization (A4, high quality render)
•• Seller/Buyer cards
•• Order summary table
•• Payment breakdown panel
•• Watermark system

Installation Guide:
/themes/urtheme/template/PDF

Bak the old invoice.pdf to (_invoice.pdf) create new invoice.pdf file, open it and paste all the format below into it..

<div id="invoice-wrapper-{$order['order_id']}" style="display:none;">
<div id="invoice-{$order['order_hash']}" style="font-family:Arial,Helvetica,sans-serif;background:#f6f7fb;padding:20px;color:#111;position:relative;">

<!-- WATERMARK -->
<div style="position:absolute;top:40%;left:10%;font-size:90px;font-weight:900;opacity:0.03;transform:rotate(-30deg);z-index:0;">
SIRICY
</div>

<!-- HEADER -->
<div style="background:linear-gradient(135deg,#6f42c1,#8b5cf6);padding:28px;color:#fff;border-radius:14px;">
<table width="100%">
<tr>
<td>
<div style="font-size:30px;font-weight:700;">Siricy</div>
<div style="opacity:.9;">Marketplace Invoice</div>
</td>
<td align="right">
<div style="background:rgba(255,255,255,.15);padding:10px 14px;border-radius:10px;">
#{$order['order_hash']}
</div>
</td>
</tr>
</table>
</div>

<!-- STATUS -->
<div style="padding:18px 5px;">
<table width="100%">
<tr>
<td>
<h2 style="margin:0;">{__("Invoice")}</h2>
<small>{$order['insert_time']}</small>
</td>
<td align="right">
<span style="background:#16a34a;color:#fff;padding:8px 14px;border-radius:999px;font-size:12px;">
PAID
</span>
</td>
</tr>
</table>
</div>

<!-- SELLER + BUYER -->
<table width="100%" cellspacing="0" cellpadding="10">
<tr>

<td width="50%" style="background:#fff;border:1px solid #e5e7eb;border-radius:10px;">
<strong style="color:#6f42c1;">SELLER</strong><br><br>
{$order['seller_fullname']}<br><br>
<strong>Order Date:</strong><br>
{$order['insert_time']}
</td>

<td width="50%" style="background:#fff;border:1px solid #e5e7eb;border-radius:10px;">
<strong style="color:#6f42c1;">BUYER & DELIVERY</strong><br><br>
{$order['buyer_fullname']}<br>
{$order['address_details']}<br>
{$order['address_city']}<br>
{$order['address_country']}<br>
{$order['address_zip_code']}<br>
{$order['address_phone']}
</td>

</tr>
</table>

<!-- ORDER TABLE -->
<div style="margin-top:20px;">
<h3>Order Summary</h3>

<table width="100%" style="border-collapse:collapse;">
<thead>
<tr style="background:#111827;color:#fff;">
<th style="padding:12px;text-align:left;">Item</th>
<th>Price</th>
<th>Qty</th>
<th>Total</th>
</tr>
</thead>

<tbody>
{foreach $order['items'] as $order_item}
<tr style="border-bottom:1px solid #eee;">
<td style="padding:12px;">
{$order_item['post']['product']['name']}
</td>
<td align="center">
{$order_item['post']['product']['price_formatted']}
</td>
<td align="center">
{$order_item['quantity']}
</td>
<td align="right">
{print_money($order_item['quantity'] * $order_item['post']['product']['price'])}
</td>
</tr>
{/foreach}
</tbody>
</table>
</div>

<!-- PAYMENT -->
<div style="margin-top:25px;">
<table width="100%">
<tr>
<td></td>

<td width="320">
<div style="border:1px solid #ddd;border-radius:12px;overflow:hidden;">

<div style="background:#6f42c1;color:#fff;padding:12px;font-weight:bold;">
Payment Summary
</div>

<div style="padding:14px;background:#fafafa;">
<table width="100%">

<tr>
<td>Subtotal</td>
<td align="right">{print_money($order['sub_total'])}</td>
</tr>

{if $order['seller_id'] == $user->_data['user_id']}
<tr>
<td>Commission</td>
<td align="right">-{print_money($order['total_commission'])}</td>
</tr>
{/if}

<tr>
<td colspan="2"><hr></td>
</tr>

<tr>
<td><strong>Total</strong></td>
<td align="right"><strong>{if $order['seller_id'] == $user->_data['user_id']}{print_money($order['final_price'])}{else}{print_money($order['sub_total'])}{/if}</strong></td>
</tr>

</table>
</div>

</div>
</td>
</tr>
</table>
</div>

<!-- FOOTER -->
<div style="text-align:center;margin-top:30px;color:#666;font-size:12px;">
Siricy Marketplace • Generated Invoice System
</div>

</div>

<script>
var invoice = document.querySelector('#invoice-{$order['order_hash']}');

html2pdf().from(invoice).set({
margin: 0.2,
filename: "invoice-{$order['order_hash']}.pdf",
image: { type: 'jpeg', quality: 1 },
html2canvas: { scale: 3 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
}).save();
</script>
</div>

Don't forget to change the site name to yours
Save it

 

[a2cdx]

Here