![]() Here is what we will be able to customise thanks to the components attributes: Now, we obviously want to make some of the content of this component dynamic so we can customise it when using the component. It is intentionally basic as the idea is to show you how to create your own component specific to your need. We’ll create a simple component that display a 2 column layout with an image on the left part and a text on the right part. If you don’t want to automatically watch and recompile the files, you can simply run npm run build to compile them manually whenever you want. Run npm start so that index.mjml and your custom components are recompiled at each edit you’ll make. To get the local path from your terminal, run pwd ( echo %cd% on Windows). mjmlconfig in your terminal and replace the path to /lib/MjColumnImageText.js to your local path to this file. The file will probably be hidden by default when you browse the folder. mjmlconfig file where you are registering your custom components so they can be used by the MJML engine which wouldn’t know them otherwise.įirst, it is important that you change the path to your component in. You should not edit the files in this folder. A lib folder, where custom components compiled from ES6 to ES5 with babel are located.A components folder, where your custom components written in ES6 are located. ![]() This is where your MJML lives and where we will use the custom component (uncomment it to use it!). The most important elements of this boilerplate are: While you’re installing dependencies, let’s go over what is in this folder. Then, run npm install to install the dependencies. To do so, just open your terminal (go to wherever you want your folder to be created) and run git clone & cd mjml-component-boilerplate. Don’t worry though, we got you covered with a boilerplate so all you have to do is clone the component boilerplate. Since MJML is written in ES6, it is dependant on a few things like Babel. Let’s walk you through the component creation process. Added to the standard library of components, it is possible for anyone to create their own component, leveraging MJML’s easy syntax to make it easier to reuse bits of code without having to type them over and over. MJML is built upon components, used under the form of tags in the markup language. Below is the complete code of the EmailController.Tutorial: creating your own MJML component Simply pass that HTML as your email body. After that write the Mjml syntax for your email template and call the “Render” method of the Mjml service. Inject “MjmlServices” through the constructor and create a HttpGet method by the name “Send” which returns Ok in case of successful email send. We have successfully created the Mjml service now it’s time to inject it into our controller. For this purpose, write the below code in your “ConfigureServices” method in the startup.cs class and also add namespace “using Mjml.AspNetCore”. You can use dependency injection which will make it much easier to use Mjml Services. Write MJML in the browse tab and install the latest stable version of Mjml.AspNetCore package.Īfter installing the package add the namespace of “using Mjml.AspNetCore” in EmailController. After creating the EmailController right-click on your project and click on manage NuGet packages. Name the controller as “EmailController”. ![]() Right-click on the Controller folder and add a new empty MVC Controller. There will be a few folders and files in the project already. It will take few seconds and your project will be created. Select target framework as 3.1 and click on Create. Stepsįirst of all open visual studio and click on create a new project. We will simply pass it to our email body and it will be rendered in our email. Then we will write the MJML syntax for our email template and then we will call the “Render” method of the MJML Service which returns the HTML. The only thing we do in our API is to add the NuGet package of MJML. The abstraction it offers ensures you stay up-to-date with industry practice and responsiveness. MJML is designed with responsiveness in mind. Creating a responsive email is much easier with tags like, , and. Say get rid of the endless HTML table or email client email. Make your speed and productivity enhanced with MJML semantic syntax. MJML sums up everything Mailjet has learned about HTML email creation over the past few years and includes a whole layer of complexity related to responsive email creation. People with basic knowledge of C# and ASP.Net Core Web API through the NuGet package. In this article, you will learn how to integrate Mailjet Markup Language (MJML) in your ASP.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |