Email Template Dynamic Rendering - html

Developing email templates for a react application that basically populate basic information from app such as customer name and store name, then get sent to customer to log in to complete purchase process. The company has 4 brands so I created four separate email template with the appropriate logos and images. My question is, would it be possible/better to create just one template and use JS to load the correct images and text in? Or is it better to keep the four templates separate and create logic to determine which template to send?

If you know that you will never have to customize the content of each 4 separate brands' emails, you can use one file and dynamically populate the correct branding info. This will require you to write less code, so is a plus for efficiency and cleanliness.
However, that means you can't change the layout for one brand specifically if you need to. Unless you were to create another template for the actual body of the email which differs from brand to brand, which is basically the same as having 4 separate templates initially.
I would keep them separate to allow customization if you need it.

Related

Dynamically produce html based on templates

I am trying to automate a workflow for automatically creating HTML newsletters based on information stored in a spreadsheet.
Currently, I am using a newsletter drag and drop tool, in which several pre-programmed blocks are available (e.g. full column block, 2 column block etc). When creating a newsletter, I drag and drop a block and fill in my content (e.g. uploading an image, inserting a url). This is all well and good, however, since I have to create the same newsletter in 10 different languages, this process is quiet time consuming and prone to human error. While all newsletters are the same in terms of layout, the images and urls differ.
To solve this issue, I would like to get rid of the drag and drop process, and instead automate the workflow in some other way.
One idea that I have already tried, but that doesn't seem like the perfect option to me, is to dynamically create the needed HTMLs in Excel. Basically, the idea is to take the existing block template structure, and put it into Excel with some formulas.
I could then copy and paste the links to the images (in a simple format, such as EN1.jpg, ES1.jpg, etc.), as well as to urls (url.com, url.es).
This is some example block:
<img alt="" align="center" width="700" style="max-width:700px;" class="resetWidth" border="0" src="IMAGE" />
My final expected result is something like this:
I define the layout in a very quick manner (e.g. writing fullcolumn, half column, fullcolumn). The corresponding code is taken from the template. I then provide the attributes (image url, link url) in the form of a list or so. The end result should then be 10 html files that I simply have to upload to the newsletter software.
I would appreciate it very much if anyone had any ideas on this.
Another option for translating the page is to do something like this https://www.w3schools.com/howto/howto_google_translate.asp
it adds a selection for languages to translate into.
As for automating the images, you could set up folders for each langauge and reuse the name of images based on where you want them so they would be placed in the correct location.
All you'll have to do it replace the images with the same file names and swap the default language on the Google Translator.
So something like this that the html will stay the same with regards to the image names
For the link variables you may be able to write some JS or another language to take advantage of the
<html lang="">
and based on which lang is set, insert a set of links to the file.

Squarespace Custom Product Post Type

I was thinking about creating different templates for products (not with different features but with different html organization and css) because the standard "pic on the left and data on the right" is not enough for a well-made user-centered ecommerce.
I tried the custom post types but they are blog post and can't access the product data.
in my custom product.conf i added my custom post data
"acceptTypes" : ["store_item", "custom-product-item"]
but obv. it won't work.
maybe if I could access the store_item could be easier to do this, but i can't find on the repo.
anyone has some suggestion?
Unfortunately, although it used to be possible to create custom post type products, that stopped being possible within the last year or so.
If you want to create your own template for products, you need to override the products.list and/or products.item files with your own. By placing them within your /collections folder, it will override the system default ones.
That means you have to write it entirely from scratch. Here are a couple resources that may help (despite being outdated):
http://www.bcarroll.us/developer-platform-tutorials/2014/10/20/products-pages
https://answers.squarespace.com/questions/57343/productsitem-for-adirondack-template.html
Having overridden products.item, if you want to have different templates for different products, you can do something like:
{.equal? item.urlId "myurlid1"}
{#|apply products1.block}
{.or equal? item.urlId "myurlid2"}
{#|apply products2.block}
{.or}
etc.

Orchard CMS - Custom Content Type and full layout control of each field on the front-end

I am using Orchard v.1.9.2.0. I made a custom Content Definition called Event Page. Here is a screen shot of the Fields and Parts I created for it:
My question is... I want to be able to control the "Event Detail Page" layout, so that I can place each of these fields exactly where I want to place them.
Right now, by default, Content.cshtml has #Display(Model.Content) and writes out all of these fields out to the page on its own.
I thought I can achieve this with the Layouts feature, but I don't see these newly defined fields in the layout editor. I am now thinking, can I just display each of these fields directly into content.cshtml?
For example, in my custom Content Type, I have a field called Event Logo, I tried using #Display(Model.Content.EventPage.EventLogo), however all it renders is Orchard.MediaLibrary.Fields.MediaLibraryPickerField in plain text to the browser.
It's strange, fields should be in a toolbox when you create/edit Event Page (if you create layout that fields don't be shown in the toolbox).
Using fields in layout make sence if you are using field values (or planning use it) in different places (summary view, projection). Otherwise it will be simpler to use layout elements (like html, image, paragraph, etc.)
If you have certain page structure which only that fields are used in. It probably be simpler to configurate positions through placement.info (that you will have opportunity to modify structure for all Event Page in one place and content managers will be spared of building the correct page structure).
You can include fields to any local zone through placement.info
<Match ContentType="EventPage">
<Match DisplayType="Detail">
<Place Fields_Common_Text-LatestNew="LatestNewsAndRaceResultLocalZoneName:1"
Fields_Common_Text-RaceResults="LatestNewsAndRaceResultLocalZoneName:2"
Fields_MediaLibraryPicker-EventLogo="OtherLocalZoneName:1"
/>
</Match>
</Match>
and then create alternate Content-EventPage.Detail.cshtml (by copying and renaming Content.cshtml).
Finally inside Content-EventPage.Detail.cshtml you can use
#Display(Model.LatestNewsAndRaceResultLocalZoneName)
#Display(Model.OtherLocalZoneName)

Storing html components in database

I want to store html components of my website in the database in order to let the user choose from a variety of components each time
for example :
one page styled html page with a navbar and about section that could be changed and other stuff , it's layout could contain the following :
<div id="nav-holder">
<!-- Nav html goes here -->
</div>
<div id="about-holder">
<!-- about section html goes here -->
</div>
<!-- other html stuff -->
My db now is structured to hold the template with it's possible components for each section , and is storing a 'text' in it's html column , and I am adding all my styling and scripting to one sheet and js file that is loaded for the whole layout.
Is there any best practice to store and render those components in my db ?
Edit :
My main purpose is to create a website generator with some customization , providing a set of templates that the user chooses and within one template he can customize his template by choosing different components (navs,about sections , ... )
Also I will grab the data from some place and fill it into those templates The user will not be able to modify the data here , it's ready already so there is no need to give the user the ability to modify the data that would be filled in the document
Is there any best practice to store and render those components in my
db ?
Yes, don't! For several reasons, the primary one being that you use your database to persistently store variables related to models. Not html. The place for your html is in your views, the place to make choices as to which html to show is in your controllers.
Other reasons include that reading your html from a database will slow down your apps responsiveness and Rails tends to make text from a database html safe, meaning it will not automatically behave as html. This is a security precaution as a very common attack is to insert 'bad' code into your database which then gets run when you recover it and supply it to an unsuspecting user.
Use partials. Reference section 3.4 of this Rails Guide
Save the users choices of components in the database. If he chooses navbar_23, you store that 9 character string in the database and on request, your template serves him the partial named _navbar_23.html.erb from your views folder.
For example, in your views folder, create a subfolder views/navbars, inside that place your variants of navbars. Partials start with an underscore and end with .html.erb
In your model, store the users choice of navbar in say user.navbar. Just the name, not the starting underscore or .html.erb
In your template;
render partial: "views/navbars/" + user.navbar
Rails will automagically add the underscore and .html.erb when it looks for the file.

How to best transfer a document to a SAPUI5 framwork?

I'd like to achieve the following and I'm looking for ideas. I have a document and I want to represent/transform this content in/to a nice SAPUI5 framework. My idea is the following: a split app with having the paragraph titles in the master view (plus a search function on top) and the respective content in the detail view.
I'd like to know from you if
a) you might want to share your ideas and hints on alternatives.
b) this can be achieved within one single file (i.e. all the code for the split app and document content in one html) and maybe using pure html code (xml also feasible) - against the background of easily handing a large amount of text available in html.
c) if you happen to have/know a reusable template.
Thanks in advance!
An interesting question. I went through a similar exercise once, re-presenting my site with UI5.
To your questions:
(a) I would think that the approach you suggest is a good one
(b) You can indeed include all the app in a single file, I do that often by using script templates, even with XML Views. You can see some examples in my sapui5bin repository, in particular in the SinglePageExamples folder. Have a look at this html file for example: https://github.com/qmacro/sapui5bin/blob/master/SinglePageExamples/SAP-Inside-Track-Sheffield-2014/end.html
What I would suggest is, rather than intermingle the document content and the app & view definitions, maintain the content of your document separately, for example, in XML or JSON, and use a client side model to load it in and bind the parts to the right places.