30384464a1
## ✅ Step 1-3: Email System Core ### EmailManager.php - ✅ Disables WooCommerce emails (prevents duplicates) - ✅ Hooks into all WC order status changes - ✅ Hooks into customer, product events - ✅ Checks if events are enabled before sending - ✅ Sends via wp_mail() (SMTP plugin compatible) ### EmailRenderer.php - ✅ Renders emails with design templates - ✅ Variable replacement system - ✅ Gets recipient email (staff/customer) - ✅ Loads order/product/customer variables - ✅ Filter hook: `woonoow_email_template` - ✅ Supports HTML template designs ### Email Design Templates (3) **templates/emails/modern.html** - ✅ Clean, minimalist, Apple-inspired - ✅ Dark mode support - ✅ Mobile responsive - ✅ 2024 design trends **templates/emails/classic.html** - ✅ Professional, traditional - ✅ Gradient header - ✅ Table styling - ✅ Business-appropriate **templates/emails/minimal.html** - ✅ Ultra-clean, monospace font - ✅ Black & white aesthetic - ✅ Text-focused - ✅ Dark mode invert ### Architecture ``` Design Template (HTML) → Content Template (Text) → Final Email modern.html → order_processing → Beautiful HTML ``` --- **Next:** Rich text editor + Content templates 🎨
281 lines
7.7 KiB
HTML
281 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>{{email_heading}}</title>
|
|
<style>
|
|
/* Reset */
|
|
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
|
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
|
|
img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
|
|
|
|
/* Base */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100% !important;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
background-color: #ffffff;
|
|
color: #000000;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
/* Container */
|
|
.email-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* Header */
|
|
.email-header {
|
|
padding: 40px 40px 20px;
|
|
border-bottom: 2px solid #000000;
|
|
}
|
|
|
|
.email-logo {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #000000;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
/* Content */
|
|
.email-content {
|
|
padding: 40px;
|
|
}
|
|
|
|
.email-heading {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #000000;
|
|
margin: 0 0 30px;
|
|
line-height: 1.4;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.email-text {
|
|
font-size: 14px;
|
|
color: #000000;
|
|
margin: 0 0 20px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.email-text strong {
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Button */
|
|
.email-button {
|
|
display: inline-block;
|
|
padding: 12px 30px;
|
|
background-color: #000000;
|
|
color: #ffffff !important;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
margin: 24px 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Info Box */
|
|
.info-box {
|
|
border: 1px solid #000000;
|
|
padding: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.info-row {
|
|
padding: 8px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 12px;
|
|
color: #000000;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 14px;
|
|
color: #000000;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Table */
|
|
.email-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 30px 0;
|
|
border: 1px solid #000000;
|
|
}
|
|
|
|
.email-table th {
|
|
text-align: left;
|
|
padding: 12px;
|
|
background-color: #000000;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.email-table td {
|
|
padding: 12px;
|
|
border-bottom: 1px solid #000000;
|
|
font-size: 14px;
|
|
color: #000000;
|
|
}
|
|
|
|
.email-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Footer */
|
|
.email-footer {
|
|
padding: 20px 40px 40px;
|
|
border-top: 2px solid #000000;
|
|
text-align: left;
|
|
}
|
|
|
|
.email-footer-text {
|
|
font-size: 11px;
|
|
color: #000000;
|
|
margin: 0 0 8px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.email-footer-link {
|
|
color: #000000;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Divider */
|
|
.divider {
|
|
height: 1px;
|
|
background-color: #000000;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media only screen and (max-width: 600px) {
|
|
.email-header,
|
|
.email-content,
|
|
.email-footer {
|
|
padding: 30px 20px !important;
|
|
}
|
|
|
|
.email-heading {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
.info-box {
|
|
padding: 16px !important;
|
|
}
|
|
}
|
|
|
|
/* Dark mode - invert colors */
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background-color: #000000 !important;
|
|
}
|
|
|
|
.email-container {
|
|
background-color: #000000 !important;
|
|
}
|
|
|
|
.email-header {
|
|
border-bottom-color: #ffffff !important;
|
|
}
|
|
|
|
.email-logo,
|
|
.email-heading,
|
|
.email-text,
|
|
.email-text strong,
|
|
.info-label,
|
|
.info-value,
|
|
.email-table td,
|
|
.email-footer-text,
|
|
.email-footer-link {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.info-box,
|
|
.email-table {
|
|
border-color: #ffffff !important;
|
|
}
|
|
|
|
.email-table td {
|
|
border-bottom-color: #ffffff !important;
|
|
}
|
|
|
|
.email-button {
|
|
background-color: #ffffff !important;
|
|
color: #000000 !important;
|
|
}
|
|
|
|
.email-table th {
|
|
background-color: #ffffff !important;
|
|
color: #000000 !important;
|
|
}
|
|
|
|
.email-footer {
|
|
border-top-color: #ffffff !important;
|
|
}
|
|
|
|
.divider {
|
|
background-color: #ffffff !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
|
<tr>
|
|
<td style="padding: 0;">
|
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" class="email-container">
|
|
<!-- Header -->
|
|
<tr>
|
|
<td class="email-header">
|
|
<a href="{{store_url}}" class="email-logo">{{store_name}}</a>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Content -->
|
|
<tr>
|
|
<td class="email-content">
|
|
<h1 class="email-heading">{{email_heading}}</h1>
|
|
|
|
<!-- Dynamic content will be inserted here -->
|
|
{{email_content}}
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Footer -->
|
|
<tr>
|
|
<td class="email-footer">
|
|
<p class="email-footer-text">
|
|
© {{current_year}} {{store_name}}
|
|
</p>
|
|
<p class="email-footer-text">
|
|
<a href="{{store_url}}" class="email-footer-link">{{store_url}}</a>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>
|