Page Builder, parte 3: contenido del catálogo

En la barra lateral Admin, vaya a Content > Elements>Pages.

Busque la página simple que creó en el primer ejercicio y modificó en el segundo y seleccione Edit en la columna Action.

Expanda en la sección Content y haga clic en Edit with Page Builder o dentro del área de vista previa del contenido.

En el panel Page Builder bajo Layout, arrastre un(a)Row ​a la parte superior del escenario.

En el panel Page Builder, expanda Add Content y arrastre un marcador de posición Products a la nueva fila.

{width="600" modal="regular"}

Pase el ratón sobre el contenedor de productos vacío para ver la caja de herramientas y elija el icono Configuración ( {width="20"} ).

{width="600" modal="regular"}

Para Select Products By, elija Condition.

Añada una condición:

• Haga clic en el icono Agregar ( ).

• En Product Attribute, elija Category.

  {width="600" modal="regular"}

• Complete la parte de Category is… de la condición haciendo clic en el icono Más (…) y, a continuación, haga clic en el icono Selector ( ).

  {width="600" modal="regular"}

• En el árbol de categorías, explora la categoría Mujeres > Superiores y selecciona la casilla de verificación Tees.

  {width="600" modal="regular"}

• Haga clic en el icono de marca de verificación ( ).

  La ID de categoría correspondiente aparece en el campo para completar la condición.

Escriba Number of Products to Display.

De forma predeterminada, la lista muestra cinco productos.

Complete los ajustes restantes según sea necesario.

Si es necesario, use las descripciones de los campos que aparecen al final de la página Agregar contenido: productos como referencia.

Una vez finalizado, haga clic en Save para guardar la configuración y volver al área de trabajo Page Builder.

{width="600" modal="regular"}

En la esquina superior derecha del escenario, haga clic en el icono Cerrar pantalla completa ( {width="20"} ).

Al hacer clic en este icono, volverá a la sección Content ​de la página con la vista previa mostrada.

En la esquina superior derecha, haga clic en la flecha Save y elija Save & Close.

En la barra lateral Admin, vaya a Catalog > Products.

Busque un producto simple que pueda utilizar para este ejemplo y ábralo en modo de edición.

Desplácese hacia abajo y expanda en la sección Content.

Junto a Description, haga clic en Edit with Page Builder.

{width="600" modal="regular"}

Si la descripción del producto se especificó anteriormente sin Page Builder, la descripción actual aparecerá como HTML en un contenedor de código de HTML. Con la temática de Luma, la descripción del producto aparece en la pestaña Detalles.

En el panel Page Builder bajo Layout, arrastre un(a)Row ​al escenario y colóquelo debajo del contenedor de código de HTML.

Busque que aparezca la guía roja cuando la fila esté en la posición correcta.

{width="600" modal="regular"}

En el panel Page Builder, expanda Media y arrastre un marcador de posición Video a la nueva fila.

{width="600" modal="regular"}

Pase el ratón sobre el contenedor de vídeo vacío para ver la caja de herramientas y elija el icono Configuración ( {width="20"} ).

{width="500" modal="regular"}

Escriba Video URL.

El vídeo puede alojarse en YouTube o Vimeo. El vídeo de este ejemplo se puede encontrar en YouTube en la siguiente dirección URL:

https://www.youtube.com/watch?v=ZpFrNyD4100

{width="500" modal="regular"}

Escriba Maximum Width en píxeles para la pantalla de vídeo.

Si deja esta opción en blanco, el vídeo rellena el espacio disponible.

Haga clic en Save para guardar la configuración y volver al área de trabajo Page Builder.

{width="600" modal="regular"}

En la esquina superior derecha del escenario, haga clic en el icono Cerrar pantalla completa ( {width="20"} ).

Al hacer clic en este icono, volverá a la sección Content ​de la página con la vista previa mostrada.

En la esquina superior derecha, haga clic en la flecha Save y elija Save & Close.

En la barra lateral Admin, vaya a Catalog > Products.

En la esquina superior derecha, haga clic en Add Product.

Cree el producto con las siguientes propiedades:

• ​

  Conjunto de atributos: Default

• Product Name: Mi producto

• ​

  SKU: Tutorial

• ​

  Price: 75.00

• ​

  Quantity: 100

• Stock Status: en stock

• ​

  Weight: 1

• Categories: Mujeres > Tops > Camisetas

En la esquina superior derecha, haga clic en la flecha Save y elija Save & Close.

En la barra lateral Admin, vaya a Stores > Attributes>Product.

En la esquina superior derecha, haga clic en Add New Attribute.

Escriba Default Label para el atributo.

Para este ejemplo, use My Page Builder Attribute para la etiqueta.

Establezca Catalog Input Type for Store Owner en Page Builder.

Al crear un atributo personalizado, puede especificar el editor más adecuado para la aplicación como Page Builder o el WYSIWYG estándar Text Editor.

{width="600" modal="regular"}

Expanda en la sección Advanced Attribute Properties y realice la siguiente configuración:

• Attribute Code: escriba un código de atributo en minúsculas, con guiones en lugar de espacios. Para este ejemplo, use my_page_builder_attribute.

• Scope: acepte el valor predeterminado Store View.

• Default Value: escriba un valor predeterminado para el atributo.

• ​

  Unique Value: No

• ​

  Add to Column Options: No

• ​

  Use in Filter Options: Yes

En el panel Attribute Information ​de la izquierda, elija Storefront Properties ​y realice la siguiente configuración:

• ​

  Use for Promo Rule Conditions: Yes

• ​

  Visible on Catalog Pages on Storefront: Yes

• ​

  Used in Product Listing: Yes

Una vez finalizado, haga clic en Save Attribute.

Repita los pasos anteriores para crear un segundo atributo con las mismas propiedades básicas, pero con el tipo de entrada Editor de texto de la siguiente manera:

• Default Label: Atributo de mi editor de texto

• Catalog Input Type for Store Owner: Editor de texto

• ​

  Código de atributo: my_text_editor_attribute

En la barra lateral Admin, vaya a Stores > Attributes>Attribute Set.

Para este ejemplo, agrega temporalmente los nuevos atributos al conjunto de atributos default. Al final de este ejercicio, elimine los atributos del conjunto de atributos, por lo que no afectará a su catálogo.

Busque el atributo Default ​establecido en la lista y haga doble clic en él para abrirlo en modo de edición.

En la lista Atributos sin asignar, busque los nuevos atributos que creó y arrastre cada uno a la columna Groups, en Content.

La ubicación del atributo en la columna Groups determina dónde aparece en la página.

{width="600" modal="regular"}

Haga clic en Save para volver a la lista Conjuntos de atributos.

Cuando se le solicite, haga clic en el vínculo Cache Management en la parte superior de la página y actualice cualquier caché no válida.

En la barra lateral Admin, vaya a Catalog > Products.

En la cuadrícula Productos, busque Mi producto y ábralo en modo de edición.

Desplácese hacia abajo y expanda en la sección Content.

En la parte superior de la sección, hay dos atributos estándar para el contenido del producto:

• Descripción breve, que usa el editor WYSIWYG estándar.
• Descripción, que muestra la vista previa de Page Builder.

{width="600" modal="regular"}

A medida que se desplaza hasta la mitad inferior de la sección, aparecen los dos atributos que ha creado y asignado:

• Mi atributo Page Builder, que muestra la vista previa Page Builder.
• Atributo de mi editor de texto, que usa el editor WYSIWYG estándar.

{width="600" modal="regular"}

En el editor de Atributos de mi editor de texto, escriba Text Editor Attribute placeholder text.

• En la esquina superior derecha, haga clic en la flecha Save y elija Save & Close.

Para Mi atributo de Page Builder, haga clic en Edit with Page Builder y agregue el texto de descripción:

• En el panel Page Builder, expanda Elements y arrastre un(a) Text object al escenario.

• Escriba Page Builder attribute placeholder text.

• En la esquina superior derecha del escenario, haga clic en el icono Cerrar pantalla completa ( {width="20"} ).

  {width="600" modal="regular"}

Desplácese hasta Description, haga clic en Edit with Page Builder y agregue el texto que desee utilizando el mismo método que en el paso anterior.

En la esquina superior derecha de la página de producto, haga clic en la flecha Save y elija Save & Close.

Si se le solicita, haga clic en el vínculo Cache Management en el mensaje en la parte superior de la página y actualice cualquier caché no válida.

Navegue hasta la página de producto de muestra en la tienda.

En este ejemplo, el producto se puede encontrar en la barra de navegación superior debajo de Mujeres > Tops > Camisetas.

Desplácese hacia abajo hasta la información de Mi atributo de Page Builder.

La posición de los atributos en la página del producto está determinada por la temática. En la temática de Luma, los nuevos atributos se encuentran justo después de la descripción del producto.

{width="600" modal="regular"}