I have an e-commerce web application consisting of Blazor WASM for the client side, Blazor Server for administration, and Web API for integration with the database and services. After order completion, I am sending an email to the customer.
I am using ASP.NET Core Identity IEmailSender SendEmailAsync
There is no problem sending emails but I need a more professional email body. So I decided to use a template with some changes. Here is the sample template (Email Template)
There are 2 subjects I need to accomplish. Generating a similar look with CSS and how to deal with dynamic content in this template. If there are more than 1 order I have to somehow add them to the template.
Here is how I try to generate the template with CSS (not complete just a portion for simplicity);
var bodyBuilder = new BodyBuilder
{
HtmlBody = @"
<html>
<head>
<style>
body {
min-height: 100vh;
background-size: cover;
font-family: 'Lato', sans-serif;
color: rgba(116, 116, 116, 0.667);
background: linear-gradient(140deg , #fff , 50% , #BA68C8);
}
...
</style>
</head>
<body>
<div class='container-fluid my-5 d-flex justify-content-center'> <div class='card card-1'> <div class='card-header bg-white'> <div class='media flex-sm-row flex-column-reverse justify-content-between '> <div class='col my-auto'> <h4 class='mb-0'>Thanks for your Order,<span class='change-color'>@orderHeaderDTO.Name</span> !</h4> </div> <div class='col-auto text-center my-auto pl-0 pt-sm-4'> <img class='img-fluid my-auto align-items-center mb-0 pt-3' src='https://i.imgur.com/7q7gIzR.png' width='115' height='115'> <p class='mb-4 pt-0 Glasses'>Walk In Style</p> </div> </div> </div> <div class='card-body'> <div class='row justify-content-between mb-3'>
...
// Send the email
await _emailSender.SendEmailAsync(orderHeaderDTO.Email, "Order Confirmation", bodyBuilder.HtmlBody);
After sending the mail, I checked it but it did not look like the sample template. How can I make a similar template and how can I dynamically add orders to this template?