From 5320773eef05909908779fa6f974302b9e05769d Mon Sep 17 00:00:00 2001 From: dwindown Date: Thu, 13 Nov 2025 11:53:07 +0700 Subject: [PATCH] =?UTF-8?q?feat:=20Realistic=20Variable=20Simulations=20in?= =?UTF-8?q?=20Preview!=20=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## ✅ 5. Simulate List & Button Variables **Problem:** Variables showed as raw text like {order_items_list} **Solution:** Added realistic HTML simulations for better preview **order_items_list:** - Styled list with product cards - Product name, quantity, attributes - Individual prices - Clean, mobile-friendly design **order_items_table:** - Professional table layout - Headers: Product, Qty, Price - Product details with variants - Proper alignment and spacing **Example Preview:** ```html Premium T-Shirt × 2 Size: L, Color: Blue $49.98 Classic Jeans × 1 Size: 32, Color: Dark Blue $79.99 ``` **Better UX:** - Users see realistic email preview - Can judge layout and design - No guessing what variables will look like - Professional presentation **File:** - `routes/Settings/Notifications/EditTemplate.tsx` Ready for final improvement (6)! --- .../Settings/Notifications/EditTemplate.tsx | 72 +++++++++++++++---- 1 file changed, 57 insertions(+), 15 deletions(-) diff --git a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx index c5bb65b..6595e74 100644 --- a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx +++ b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx @@ -187,23 +187,70 @@ export default function EditTemplate() { // Replace dynamic variables with sample data (not just highlighting) const sampleData: { [key: string]: string } = { - customer_name: 'John Doe', - customer_email: 'john@example.com', - customer_phone: '+1 234 567 8900', - order_number: '12345', + order_number: '#12345', order_total: '$99.99', order_status: 'Processing', order_date: new Date().toLocaleDateString(), - order_url: '#preview-order-details', - order_items: '

• Product 1 x 2
• Product 2 x 1

', + order_url: '#', + order_items_list: ``, + order_items_table: ` + + + + + + + + + + + + + + + + + + + +
ProductQtyPrice
+ Premium T-Shirt
+ Size: L, Color: Blue + 		2$49.98
+ Classic Jeans
+ Size: 32, Color: Dark Blue + 		1$79.99
`, + customer_name: 'John Doe', + customer_email: 'john@example.com', + customer_phone: '+1 234 567 8900', payment_method: 'Credit Card', + payment_url: '#', + shipping_method: 'Standard Shipping', tracking_number: 'TRACK123456', - product_name: 'Sample Product', - product_sku: 'SKU-001', - stock_quantity: '5', - product_url: '#preview-product', + refund_amount: '$50.00', + billing_address: '123 Main St, City, State 12345', + shipping_address: '123 Main St, City, State 12345', + store_name: 'My WordPress Store', + store_url: '#', + store_email: 'store@example.com', }; + Object.keys(sampleData).forEach((key) => { + const regex = new RegExp(`\\{${key}\\}`, 'g'); + previewBody = previewBody.replace(regex, sampleData[key]); + }); + // Highlight variables that don't have sample data Object.keys(variables).forEach(key => { if (!storeVariables[key] && !sampleData[key]) { @@ -212,11 +259,6 @@ export default function EditTemplate() { } }); - // Replace with sample data - Object.entries(sampleData).forEach(([key, value]) => { - previewBody = previewBody.replace(new RegExp(`\\{${key}\\}`, 'g'), value); - }); - // Parse [card] tags previewBody = parseCardsForPreview(previewBody);