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 🎨
239 lines
6.8 KiB
HTML
239 lines
6.8 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: Georgia, 'Times New Roman', serif;
|
|
background-color: #f4f4f4;
|
|
color: #333333;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Container */
|
|
.email-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
background-color: #ffffff;
|
|
border: 1px solid #dddddd;
|
|
}
|
|
|
|
/* Header */
|
|
.email-header {
|
|
padding: 30px 40px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
text-align: center;
|
|
}
|
|
|
|
.email-logo {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Content */
|
|
.email-content {
|
|
padding: 40px;
|
|
}
|
|
|
|
.email-heading {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
color: #333333;
|
|
margin: 0 0 20px;
|
|
line-height: 1.3;
|
|
border-bottom: 3px solid #667eea;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.email-text {
|
|
font-size: 16px;
|
|
color: #555555;
|
|
margin: 0 0 16px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.email-text strong {
|
|
color: #333333;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Button */
|
|
.email-button {
|
|
display: inline-block;
|
|
padding: 15px 35px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #ffffff !important;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin: 24px 0;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Info Box */
|
|
.info-box {
|
|
background-color: #f9f9f9;
|
|
border: 2px solid #eeeeee;
|
|
border-radius: 4px;
|
|
padding: 24px;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.info-row {
|
|
padding: 10px 0;
|
|
border-bottom: 1px dashed #dddddd;
|
|
}
|
|
|
|
.info-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 14px;
|
|
color: #777777;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 16px;
|
|
color: #333333;
|
|
font-weight: 600;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Table */
|
|
.email-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 24px 0;
|
|
border: 1px solid #dddddd;
|
|
}
|
|
|
|
.email-table th {
|
|
text-align: left;
|
|
padding: 14px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.email-table td {
|
|
padding: 14px;
|
|
border-bottom: 1px solid #eeeeee;
|
|
font-size: 15px;
|
|
color: #333333;
|
|
}
|
|
|
|
.email-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.email-table tr:nth-child(even) {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
/* Footer */
|
|
.email-footer {
|
|
padding: 30px 40px;
|
|
background-color: #333333;
|
|
text-align: center;
|
|
}
|
|
|
|
.email-footer-text {
|
|
font-size: 13px;
|
|
color: #cccccc;
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.email-footer-link {
|
|
color: #667eea;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Divider */
|
|
.divider {
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, #667eea, transparent);
|
|
margin: 30px 0;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media only screen and (max-width: 600px) {
|
|
.email-header,
|
|
.email-content,
|
|
.email-footer {
|
|
padding: 25px 20px !important;
|
|
}
|
|
|
|
.email-heading {
|
|
font-size: 22px !important;
|
|
}
|
|
|
|
.info-box {
|
|
padding: 16px !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
|
<tr>
|
|
<td style="padding: 30px 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>
|