By Dave Stys October 4, 2022

Enhance your e-mail coding expertise with this step-by-step AMP for e-mail tutorial. Create your personal e-mail that permits readers to vary the colours of a product picture.

On this tutorial, you will discover ways to create an interactive e-commerce e-mail message. We’ll present a product with numerous shade choices. The reader will be capable of click on on every shade and dynamically replace the product picture. That is what it seems like (see the complete code pattern):

Whereas it is a comparatively easy instance, you will develop into acquainted with some necessary elements of AMP for Electronic mail, akin to:

• amp-img an AMP substitute for the html5 img tag.
• amp-selector a management to pick a number of choices
• amp-bind responds to person actions akin to scrolls, clicks, kind submissions, and so forth.

To offer you an concept of ​​what else could be with these elements, this is a extra subtle instance from Google. This provides the additional complexity of displaying completely different merchandise (the 1-pack, 2-pack, and 3-pack) and permits folks to see these merchandise in several colours, however the precept of what you will be taught subsequent is similar.

Step 1 – Fast Begin with AMP Playground

We shall be utilizing the official AMP Playground for this tutorial. I went forward and included some fundamental CSS to model our product picture and shade pickers so you possibly can deal with studying how AMP elements work.

Go to this tradition 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 shade on this case), and product pictures. Add the next contained in the .

<div class="product-wrapper">
    <h1>45 Qt Arduous Cooler</h1>
    <p><b>COLOR </b><span [text]=colorChoice>Amber</span></p>
</div>

Be aware that we’re utilizing [text]=colorChoice. It is a hook that we are able to use later within the tutorial to replace the product description with the chosen shade. For instance, when the person 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 shade, amber.

<div [hidden]="!(colorChoice == 'Amber')">
      <amp-img width="600" peak="440" structure=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 implies that the Amber product picture will solely be seen when the person selects the Amber shade.

Subsequent, add the remaining product pictures, one for every shade. Every of those will initially be hidden, as amber would be the default product variation.

<div hidden [hidden]="!(colorChoice == 'White')">
      <amp-img width="600" peak="440" structure=responsive src="https://hostedimages-cdn.aweber-static.com/MTM0NjMxNQ==/optimized/d15718d91bf247db90707c06d4f2cc30.png"></amp-img>
</div>
    
<div hidden [hidden]="!(colorChoice == 'Blue')">
      <amp-img width="600" peak="440" structure=responsive src="https://hostedimages-cdn.aweber-static.com/MTM0NjMxNQ==/optimized/20f3386a5df049548a23ef2651fca7ad.png"></amp-img>
</div>
    
<div hidden [hidden]="!(colorChoice == 'Tan')">
      <amp-img width="600" peak=440 structure=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 perform as a radio button. And when choosing a shade choice, the amp-state will replace to mirror that shade alternative. The change to amp-state lets the remainder of our doc know to vary the product picture and shade description. Add the next under the product particulars.

<div class="color-choices-wrapper">

    <amp-selector
        structure="container"
        identify="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 has an occasion set off. When chosen, updates the colorChoice variable. This variable is used to show the correct 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 choosing every shade 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 Pictures: Product pictures have fundamental logic to cover or present every picture primarily based on the worth of the colorChoice variable. Instance: hidden = True when colorChoice just isn’t the identical as ‘Amber’.

[hidden]="!(colorChoice == 'Amber')"

Product description: The product description textual content can also 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 e-mail service supplier that helps AMP for e-mail, akin to AWeber, or use the Gmail AMP Playground.

In case you had been impressed by this put up, I’d like to see what you create! Share within the feedback under or e-mail me and ask me to have a look.