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 🎨
276 lines
7.6 KiB
HTML
276 lines
7.6 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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background-color: #f5f5f7;
|
|
color: #1d1d1f;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Container */
|
|
.email-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* Header */
|
|
.email-header {
|
|
padding: 40px 40px 30px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #e5e5e7;
|
|
}
|
|
|
|
.email-logo {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #1d1d1f;
|
|
text-decoration: none;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
/* Content */
|
|
.email-content {
|
|
padding: 40px;
|
|
}
|
|
|
|
.email-heading {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #1d1d1f;
|
|
margin: 0 0 20px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.email-text {
|
|
font-size: 16px;
|
|
color: #424245;
|
|
margin: 0 0 16px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.email-text strong {
|
|
color: #1d1d1f;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Button */
|
|
.email-button {
|
|
display: inline-block;
|
|
padding: 14px 32px;
|
|
background-color: #0071e3;
|
|
color: #ffffff !important;
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin: 24px 0;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.email-button:hover {
|
|
background-color: #0077ed;
|
|
}
|
|
|
|
/* Info Box */
|
|
.info-box {
|
|
background-color: #f5f5f7;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #e5e5e7;
|
|
}
|
|
|
|
.info-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 14px;
|
|
color: #6e6e73;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 14px;
|
|
color: #1d1d1f;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Table */
|
|
.email-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.email-table th {
|
|
text-align: left;
|
|
padding: 12px;
|
|
background-color: #f5f5f7;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #6e6e73;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.email-table td {
|
|
padding: 16px 12px;
|
|
border-bottom: 1px solid #e5e5e7;
|
|
font-size: 15px;
|
|
color: #1d1d1f;
|
|
}
|
|
|
|
.email-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Footer */
|
|
.email-footer {
|
|
padding: 30px 40px;
|
|
background-color: #f5f5f7;
|
|
text-align: center;
|
|
border-top: 1px solid #e5e5e7;
|
|
}
|
|
|
|
.email-footer-text {
|
|
font-size: 13px;
|
|
color: #6e6e73;
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.email-footer-link {
|
|
color: #0071e3;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media only screen and (max-width: 600px) {
|
|
.email-header,
|
|
.email-content,
|
|
.email-footer {
|
|
padding: 30px 20px !important;
|
|
}
|
|
|
|
.email-heading {
|
|
font-size: 20px !important;
|
|
}
|
|
|
|
.info-box {
|
|
padding: 16px !important;
|
|
}
|
|
}
|
|
|
|
/* Dark mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background-color: #000000 !important;
|
|
}
|
|
|
|
.email-container {
|
|
background-color: #1c1c1e !important;
|
|
}
|
|
|
|
.email-header {
|
|
border-bottom-color: #38383a !important;
|
|
}
|
|
|
|
.email-logo,
|
|
.email-heading,
|
|
.info-value,
|
|
.email-table td {
|
|
color: #f5f5f7 !important;
|
|
}
|
|
|
|
.email-text {
|
|
color: #a1a1a6 !important;
|
|
}
|
|
|
|
.email-text strong {
|
|
color: #f5f5f7 !important;
|
|
}
|
|
|
|
.info-box {
|
|
background-color: #2c2c2e !important;
|
|
}
|
|
|
|
.info-row {
|
|
border-bottom-color: #38383a !important;
|
|
}
|
|
|
|
.email-table th {
|
|
background-color: #2c2c2e !important;
|
|
}
|
|
|
|
.email-table td {
|
|
border-bottom-color: #38383a !important;
|
|
}
|
|
|
|
.email-footer {
|
|
background-color: #1c1c1e !important;
|
|
border-top-color: #38383a !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
|
<tr>
|
|
<td style="padding: 40px 20px;">
|
|
<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}}. All rights reserved.
|
|
</p>
|
|
<p class="email-footer-text">
|
|
<a href="{{store_url}}" class="email-footer-link">Visit our store</a>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>
|