Page Builder Gå igenom del 3: kataloginnehåll

Gå till Content > Elements>Pages ​på sidofältet_ Admin _.

Hitta den enkla sidan som du skapade i den första övningen och ändrade i den andra och välj Edit i kolumnen Action.

Expandera i avsnittet Content och klicka på Edit with Page Builder eller inuti förhandsvisningsområdet för innehållet.

Dra en Row till scenens övre del på panelen Page Builder under Layout.

Expandera Add Content på panelen Page Builder och dra en Products platshållare till den nya raden.

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

Håll pekaren över den tomma produktbehållaren för att visa verktygslådan och välj ikonen Inställningar ( {width="20"} ).

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

Välj Condition för Select Products By.

Lägg till ett villkor:

• Klicka på ikonen Lägg till ( ).

• Välj Category under Product Attribute.

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

• Slutför delen Category is… av villkoret genom att klicka på ikonen Mer (…) och sedan på ikonen Väljaren ( ).

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

• Gå till kategorin Kvinnor > Tops i kategoriträdet och markera kryssrutan Tes .

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

• Klicka på bockmarkeringsikonen ( ).

  Motsvarande kategori-ID visas i fältet för att slutföra villkoret.

Ange Number of Products to Display.

Som standard visas fem produkter i listan.

Slutför de återstående inställningarna efter behov.

Om det behövs kan du använda fältbeskrivningarna i slutet av sidan Lägg till innehåll - produkter som referens.

När du är klar klickar du på Save för att spara inställningarna och återgå till arbetsytan i Page Builder.

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

Klicka på ikonen Stäng helskärm ( {width="20"} ) i scenens övre högra hörn.

Om du klickar på den här ikonen återgår du till avsnittet Content ​för sidan där förhandsvisningen visas.

Klicka på pilen Save i det övre högra hörnet och välj Save & Close.

Gå till Catalog > Products på sidofältet Admin.

Hitta en enkel produkt som du kan använda i det här exemplet och öppna den i redigeringsläge.

Bläddra nedåt och utöka i avsnittet Content.

Klicka på Edit with Page Builder bredvid Description.

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

Om produktbeskrivningen har angetts tidigare utan Page Builder visas den aktuella beskrivningen som HTML i en HTML Code -behållare. Med Luma-temat visas produktbeskrivningen på fliken Detaljer.

Dra en Row till scenen på panelen Page Builder under Layout ​och placera den nedanför kodbehållaren HTML.

Leta efter den röda stödlinjen som ska visas när raden är i rätt position.

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

Expandera Media på panelen Page Builder och dra en Video platshållare till den nya raden.

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

Håll pekaren över den tomma videobehållaren för att visa verktygslådan och välj ikonen Inställningar ( {width="20"} ).

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

Ange Video URL.

Videon kan finnas på YouTube eller Vimeo. Videon i det här exemplet finns på YouTube på följande URL:

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

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

Ange Maximum Width i pixlar för videovisningen.

Om du lämnar det här alternativet tomt fyller videon det tillgängliga utrymmet.

Klicka på Save om du vill spara inställningarna och återgå till arbetsytan i Page Builder.

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

Klicka på ikonen Stäng helskärm ( {width="20"} ) i scenens övre högra hörn.

Om du klickar på den här ikonen återgår du till avsnittet Content ​för sidan där förhandsvisningen visas.

Klicka på pilen Save i det övre högra hörnet och välj Save & Close.

Gå till Catalog > Products på sidofältet Admin.

Klicka på Add Product i det övre högra hörnet.

Skapa produkten med följande egenskaper:

• ​

  -attributuppsättning: Default

• Product Name: Min produkt

• ​

  SKU: Tutorial

• ​

  Price: 75.00

• ​

  Quantity: 100

• Stock Status: I Stock

• ​

  Weight: 1

• Categories: Kvinnor > Tops > Tees

Klicka på pilen Save i det övre högra hörnet och välj Save & Close.

Gå till Stores > Attributes>Product ​på sidofältet_ Admin _.

Klicka på Add New Attribute i det övre högra hörnet.

Ange Default Label som attribut.

Använd My Page Builder Attribute som etikett i det här exemplet.

Ange Catalog Input Type for Store Owner till Page Builder.

När du skapar ett anpassat attribut kan du ange den redigerare som är bäst lämpad för programmet som antingen Page Builder eller standard, WYSIWYG Text Editor.

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

Expandera i avsnittet Advanced Attribute Properties och gör följande inställningar:

• Attribute Code: Ange en attributkod med gemener, med bindestreck i stället för mellanslag. Använd my_page_builder_attribute i det här exemplet.

• Scope: Acceptera standardvärdet, Store View.

• Default Value: Ange ett standardvärde för attributet.

• ​

  Unique Value: No

• ​

  Add to Column Options: No

• ​

  Use in Filter Options: Yes

Välj Storefront Properties på panelen Attribute Information ​till vänster och gör följande inställningar:

• ​

  Use for Promo Rule Conditions: Yes

• ​

  Visible on Catalog Pages on Storefront: Yes

• ​

  Used in Product Listing: Yes

Klicka på Save Attribute när du är klar.

Upprepa föregående steg för att skapa ett andra attribut med samma grundläggande egenskaper, men med textredigerarens indatatyp enligt följande:

• Default Label: Mitt textredigeringsattribut

• Catalog Input Type for Store Owner: Textredigeraren

• ​

  -attributkod: my_text_editor_attribute

Gå till Stores > Attributes>Attribute Set ​på sidofältet_ Admin _.

I det här exemplet lägger du tillfälligt till de nya attributen i attributuppsättningen default. När du är klar med övningen tar du bort attributen från attributuppsättningen så att katalogen inte påverkas.

Leta reda på attributuppsättningen Default ​i listan och dubbelklicka på den för att öppna den i redigeringsläge.

I listan Ej tilldelade attribut letar du reda på de nya attributen som du skapade och drar vart och ett till kolumnen Groups, under Content.

Attributets plats i kolumnen Groups avgör var det visas på sidan.

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

Klicka på Save om du vill återgå till listan Attributuppsättningar.

När du uppmanas till det klickar du på länken Cache Management överst på sidan och uppdaterar eventuell ogiltig cache.

Gå till Catalog > Products på sidofältet Admin.

Leta reda på Min produkt i stödrastret Produkter och öppna den i redigeringsläge.

Bläddra nedåt och utöka i avsnittet Content.

Överst i avsnittet finns det två standardattribut för produktinnehåll:

• Short Description, som använder WYSIWYG editor som standard.
• Beskrivning, som visar Page Builder-förhandsvisningen.

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

När du bläddrar till den nedre halvan av avsnittet finns det två attribut som du har skapat och tilldelat:

• Mitt Page Builder attribut, som visar Page Builder-förhandsvisningen.
• Mitt textredigeringsattribut, som använder WYSIWYG-standardredigeraren.

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

Ange Text Editor Attribute placeholder text i redigeraren Mitt textredigeringsattribut.

• Klicka på pilen Save i det övre högra hörnet och välj Save & Close.

För My Page Builder-attribut klickar du på Edit with Page Builder och lägger till beskrivningstexten:

• Expandera Elements på panelen Page Builder och dra en Text object till scenen.

• Ange Page Builder attribute placeholder text.

• Klicka på ikonen Stäng helskärm ( {width="20"} ) i scenens övre högra hörn.

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

Bläddra upp till Description, klicka på Edit with Page Builder och lägg till text som du gillar med samma metod som i föregående steg.

Klicka på pilen Save i det övre högra hörnet på produktsidan och välj Save & Close.

Om du uppmanas till det klickar du på länken Cache Management i meddelandet längst upp på sidan och uppdaterar eventuell ogiltig cache.

Navigera till exempelproduktsidan i butiken.

I det här exemplet finns produkten i den övre navigeringen under Kvinnor > Tops > Tees.

Bläddra nedåt till attributinformationen för My Page Builder .

Attributens position på produktsidan bestäms av temat. I Luma-temat finns de nya attributen precis efter produktbeskrivningen.

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