Page Builder, parte 3: contenido del catálogo

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

Para Select Products By, elija Condition.

Añada una condición:

• Haga clic en el icono Agregar ( ).

• En Product Attribute, elija Category.

  

• 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 ( ).

  

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

  

• 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.

En la esquina superior derecha del escenario, haga clic en el icono Cerrar pantalla completa ( ).

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.

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.

NOTE

Si no desea cambiar la tienda activa, puede continuar sin actualizar el conjunto de atributos.

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.

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.

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.

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 ( ).

  

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.