By Dave Stys October 4, 2022
Enhance your electronic mail coding abilities with this step-by-step AMP for electronic mail tutorial. Create your personal electronic mail that enables readers to vary the colours of a product picture.
On this tutorial, you will discover ways to create an interactive e-commerce electronic mail message. We’ll present a product with varied colour choices. The reader will have the ability to click on on every colour and dynamically replace the product picture. That is what it seems like (see the total code instance):
Whereas it is a comparatively easy instance, you will grow to be aware of some essential parts of AMP for Electronic mail, reminiscent of:
- amp-img an AMP alternative for the html5 img tag.
- amp-selector a management to pick out a number of choices
- amp-bind responds to consumer actions reminiscent of scrolls, clicks, type submissions, and so forth.
To offer you an thought of what else may be with these parts, here is a extra refined instance from Google. This provides the additional complexity of displaying totally different merchandise (the 1-pack, 2-pack, and 3-pack) and permits individuals to see these merchandise in numerous colours, however the precept of what you will be taught subsequent is identical.
Step 1 – Fast Begin with AMP Playground
We shall be utilizing the official AMP Playground for this tutorial. I went forward and included some primary CSS to fashion our product picture and colour pickers so you may concentrate on studying how AMP parts work.
Go to this practice AMP Playground to get began rapidly.
Step 2 – Add product particulars
Code on the finish of Step 2
Let’s begin designing the message. We’ll begin with the product tile, description (solely colour on this case), and product photos. Add the next contained in the
<div class="product-wrapper">
<h1>45 Qt Laborious Cooler</h1>
<p><b>COLOR </b><span [text]=colorChoice>Amber</span></p>
</div>Notice that we’re utilizing [text]=colorChoice. It is a hook that we will use later within the tutorial to replace the product description with the chosen colour. For instance, when the consumer chooses “Blue”, the textual content will dynamically replace from “Amber COLOR” to “Blue COLOR”.
Subsequent, let’s add our first product picture. Let’s begin with our default colour, amber.
<div [hidden]="!(colorChoice == 'Amber')">
<amp-img width="600" top="440" format=responsive src="https://hostedimages-cdn.aweber-static.com/MTM0NjMxNQ==/optimized/4244bcee9ff14adcbaa0807c71f4386e.png"></amp-img>
</div>the <amp-img> is contained inside a div with a little bit of logic, [hidden]="!(colorChoice == 'Amber') which signifies that the Amber product picture will solely be seen when the consumer selects the Amber colour.
Subsequent, add the remaining product photos, one for every colour. Every of those will initially be hidden, as amber would be the default product variation.
<div hidden [hidden]="!(colorChoice == 'White')">
<amp-img width="600" top="440" format=responsive src="https://hostedimages-cdn.aweber-static.com/MTM0NjMxNQ==/optimized/d15718d91bf247db90707c06d4f2cc30.png"></amp-img>
</div>
<div hidden [hidden]="!(colorChoice == 'Blue')">
<amp-img width="600" top="440" format=responsive src="https://hostedimages-cdn.aweber-static.com/MTM0NjMxNQ==/optimized/20f3386a5df049548a23ef2651fca7ad.png"></amp-img>
</div>
<div hidden [hidden]="!(colorChoice == 'Tan')">
<amp-img width="600" top=440 format=responsive src="https://hostedimages-cdn.aweber-static.com/MTM0NjMxNQ==/optimized/1975268637ed42ea9172288f3d90b6b1.png"></amp-img>
</div>
Step 3 – Add the Colour Choices
Lastly it is time to add a selector for every of the colour choices. we’ll use <amp-selector> with the default setting of single choice to operate as a radio button. And when deciding on a colour choice, the amp-state will replace to mirror that colour selection. The change to amp-state lets the remainder of our doc know to vary the product picture and colour description. Add the next under the product particulars.
<div class="color-choices-wrapper">
<amp-selector
format="container"
title="single-color-select"
keyboard-select-mode="choose"
on="choose: AMP.setState(colorChoice: occasion.targetOption)" >
<div class="color-choice amber" chosen choice="Amber"></div>
<div class="color-choice white" choice="White"></div>
<div class="color-choice blue" choice="Blue"></div>
<div class="color-choice tan" choice="Tan"></div>
</amp-selector>
</div>The colorChoice variable. This variable is used to show the suitable product picture and to replace the colour description textual content within the product particulars.
on="choose: AMP.setState(colorChoice: occasion.targetOption)"
At this level, go forward and take a look at deciding on every colour choice. It is best to see your product particulars replace accordingly.
perceive the way it works
Here’s a abstract of the essential ideas used on this instance.
Colour pickers: the colour picker, <amp-selector>, has a “choose” occasion. When the motion happens, it updates the colorChoice variable all through the doc. (<amp-bind> is what associates an motion with a number of doc updates).
on="choose: AMP.setState(colorChoice: occasion.targetOption)"
Product Photographs: Product photos have primary logic to cover or present every picture based mostly on the worth of the colorChoice variable. Instance: hidden = True when colorChoice is just not the identical as ‘Amber’.
[hidden]="!(colorChoice == 'Amber')"Product description: The product description textual content can be up to date with the worth of the colorChoice variable.
<span [text]=colorChoice>Amber</span>Present us what you created!
Subsequent, I like to recommend that you simply ship your self a replica of the message you created from this tutorial. Use an electronic mail service supplier that helps AMP for electronic mail, reminiscent of AWeber, or use the Gmail AMP Playground.
If you happen to have been impressed by this publish, I’d like to see what you create! Share within the feedback under or electronic mail me and ask me to have a look.
– How to create interactive product images with AMP for Email
