Por Dave Stys 4 de octubre de 2022
Mejore sus habilidades de codificación de correo electrónico con este tutorial de AMP de correo electrónico paso a paso. Cree su propio correo electrónico que permita a los lectores cambiar los colores de la imagen de un producto.
En este tutorial, aprenderá a crear un mensaje de correo electrónico de comercio electrónico interactivo. Mostraremos un producto con varias opciones de color. El leedor podrá tocar cada color y modernizar dinámicamente la imagen del producto. Así es como se ve (vea el código de muestra completo):
Aunque este es un ejemplo relativamente simple, se familiarizará con algunos componentes importantes de AMP para el correo electrónico, como:
- amp-img un reemplazo de AMP para la ritual html5 img.
- amp-selector un comando para preferir una o más opciones
- amp-bind rebate a las acciones del heredero, como desplazamientos, clics, envíos de formularios, etc.
Para darle una idea de qué más podrían ser estos componentes, aquí hay un ejemplo más sofisticado de Google. Esto agrega la complejidad adicional de mostrar diferentes productos (Paquete 1, Paquete 2 y Paquete 3) y permite que las personas vean estos productos en diferentes colores, pero el principio de lo que aprenderá a continuación es el mismo.
Paso 1: inicio rápido con AMP Playground
Usaremos el AMP Playground oficial para este tutorial. Seguí delante e incluí algunos CSS básicos para el diseño de la imagen de nuestro producto y los selectores de color para que pueda concentrarse en formarse cómo funcionan los componentes de AMP.
Visite este dominio de juegos AMP personalizada para comenzar rápidamente.
Paso 2: agregue los detalles del producto
Código al final del paso 2
Comencemos exponiendo el mensaje. Comenzaremos con la miniatura del producto, la descripción (solo el color en este caso) y las imágenes del producto. Agrega lo subsiguiente en el
.<div class="product-wrapper">
<h1>45 Qt Hard Cooler</h1>
<p><b>COLOR </b><span [text]=colorChoice>Amber</span></p>
</div>Nota, usamos [text]=colorChoice. Es un garfio que podemos usar más delante en el tutorial para modernizar la descripción del producto con el color escogido. Por ejemplo, cuando el heredero elige «Celeste», el texto se actualizará dinámicamente de «COLOR Amarillento» a «COLOR Celeste».
A continuación, agreguemos nuestra primera imagen de producto. Comencemos con nuestro color predeterminado, amarillento.
<div [hidden]="!(colorChoice == 'Amber')">
<amp-img width="600" height="440" layout=responsive src="https://hostedimages-cdn.aweber-static.com/MTM0NjMxNQ==/optimized/4244bcee9ff14adcbaa0807c71f4386e.png"></amp-img>
</div>los <amp-img> está contenido en un div con un poco de razonamiento, [hidden]="!(colorChoice == 'Amber') lo que significa que la imagen del producto Amarillento solo será visible cuando el heredero seleccione el color Amarillento.
A continuación, agregue las imágenes de productos restantes, una para cada color. Cada uno de estos estará inicialmente oculto, ya que el color amarillento será la variación predeterminada del producto.
<div hidden [hidden]="!(colorChoice == 'White')">
<amp-img width="600" height="440" layout=responsive src="https://hostedimages-cdn.aweber-static.com/MTM0NjMxNQ==/optimized/d15718d91bf247db90707c06d4f2cc30.png"></amp-img>
</div>
<div hidden [hidden]="!(colorChoice == 'Blue')">
<amp-img width="600" height="440" layout=responsive src="https://hostedimages-cdn.aweber-static.com/MTM0NjMxNQ==/optimized/20f3386a5df049548a23ef2651fca7ad.png"></amp-img>
</div>
<div hidden [hidden]="!(colorChoice == 'Tan')">
<amp-img width="600" height=440 layout=responsive src="https://hostedimages-cdn.aweber-static.com/MTM0NjMxNQ==/optimized/1975268637ed42ea9172288f3d90b6b1.png"></amp-img>
</div>
Paso 3: unir opciones de color
Finalmente es hora de unir un selector para cada una de las opciones de color. Usaremos <amp-selector> con la configuración predeterminada de opción única para que funcionen como un yema de opción. Y al preferir una opción de color, el amp-state se actualizará para reverberar esta disyuntiva de color. Cambiar a amp-state permite que el resto de nuestro documento cambie la imagen del producto y la descripción del color. Agregue lo subsiguiente debajo de los detalles del producto.
<div class="color-choices-wrapper">
<amp-selector
layout="container"
name="single-color-select"
keyboard-select-mode="select"
on="select: AMP.setState({colorChoice: event.targetOption})" >
<div class="color-choice amber" selected option="Amber"></div>
<div class="color-choice white" option="White"></div>
<div class="color-choice blue" option="Blue"></div>
<div class="color-choice tan" option="Tan"></div>
</amp-selector>
</div>la colorChoice variable. Esta variable se utiliza para mostrar la imagen correcta del producto y modernizar el texto de descripción del color en los detalles del producto.
on="select: AMP.setState({colorChoice: event.targetOption})"
En este punto, siga delante e intente preferir cada opción de color. Debería ver los detalles de su producto actualizados en consecuencia.
Comprender cómo funciona
Aquí hay un esquema de los conceptos básicos utilizados en este ejemplo.
Selectores de color: El selector de color, <amp-selector>, tiene un evento «preferir». Cuando ocurre la batalla, actualiza el colorChoice variable a lo dilatado del documento. (<amp-bind> es lo que asocia una batalla con una o más actualizaciones de documentos).
on="select: AMP.setState({colorChoice: event.targetOption})"
Imágenes del producto: Las imágenes de productos tienen una razonamiento básica para ocultar o mostrar cada imagen según el valía de la colorChoice variable. Ejemplo: oculto = Serio cuando colorChoice no es igual a ‘Amarillento’.
[hidden]="!(colorChoice == 'Amber')"Descripción de producto: El texto de descripción del producto además se actualiza con el valía de la colorChoice variable.
<span [text]=colorChoice>Amber</span>¡Muéstranos lo que has creado!
Entonces te recomiendo que te envíes una copia del mensaje que creaste a partir de este tutorial. Use un proveedor de servicios de correo electrónico que admita AMP para correo electrónico, como AWeber, o use Gmail AMP Playground.
Si te inspiraste en esta publicación, ¡me encantaría ver lo que creaste! Comparte en los comentarios a continuación o envíame un correo electrónico y pídeme que eche un vistazo.