Page Builder Doorlopen, deel 3: inhoud catalogus

Voor Admin sidebar, ga Content > Elements>Pages.

Vind de Eenvoudige Pagina die u in de eerste oefening creeerde en in de tweede veranderde, en Edit in de Action ​kolom selecteert.

Breid de Content sectie uit en klik Edit with Page Builder of binnen het gebied van de inhoudsvoorproef.

Sleep in het deelvenster Page Builder onder Layout ​een Row ​naar de bovenkant van het werkgebied.

Vouw Add Content uit in het deelvenster Page Builder en sleep een tijdelijke aanduiding Products naar de nieuwe rij.

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

Beweeg over de lege productcontainer om toolbox te tonen en de pictogram van Montages te kiezen ( {width="20"}).

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

Kies Condition bij Select Products By .

Voeg een voorwaarde toe:

• Klik toevoegen ( toe) pictogram.

• Kies onder Product Attribute ​de optie Category.

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

• Voltooi Category is… deel van de voorwaarde door Meer (…) te klikken pictogram en dan de Kiezer ( ) te klikken.

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

• In de categorieboom, boor neer aan de Vrouwen > Tops categorie en selecteer Tees checkbox.

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

• Klik het Vinkje ( ) pictogram.

  De bijbehorende categorie-id wordt in het veld weergegeven om de voorwaarde te voltooien.

Voer de Number of Products to Display in.

Standaard worden in de lijst vijf producten weergegeven.

Vul de overige instellingen naar wens in.

Indien nodig, gebruik de gebiedsbeschrijvingen aan het eind van toevoegen Inhoud - Productenpagina voor verwijzing.

Klik wanneer u klaar bent op Save om de instellingen op te slaan en terug te keren naar de werkruimte van Page Builder .

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

In de hoger-juiste hoek van het stadium, klik het Dichte Volledige Scherm ( {width="20"}) pictogram.

Wanneer u op dit pictogram klikt, keert u terug naar de sectie Content ​voor de pagina waarop de voorvertoning wordt weergegeven.

Klik in de rechterbovenhoek op de pijl Save en kies Save & Close .

Voor Admin sidebar, ga Catalog > Products.

Een eenvoudig product zoeken dat u voor dit voorbeeld kunt gebruiken en openen in de bewerkingsmodus.

De rol neer en breidt uit de Content sectie.

Klik naast Description ​op Edit with Page Builder.

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

Als de productbeschrijving eerder zonder Page Builder was ingegaan, verschijnt de huidige beschrijving als HTML in een container van de Code van de HTML. Bij het thema Luma wordt de productbeschrijving weergegeven op het tabblad Details.

Sleep in het deelvenster Page Builder onder Layout ​een Row ​naar het werkgebied en plaats het onder de container met HTML-code.

De rode hulplijn wordt weergegeven wanneer de rij zich op de juiste positie bevindt.

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

Vouw Media uit in het deelvenster Page Builder en sleep een tijdelijke aanduiding Video naar de nieuwe rij.

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

Beweeg over de lege videocontainer om toolbox te tonen en de pictogram van Montages te kiezen ( {width="20"}).

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

Voer de Video URL in.

De video kan op of YouTubeof Vimeoworden ontvangen. De video in dit voorbeeld is te vinden op YouTube op de volgende URL:

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

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

Voer de Maximum Width in pixels in voor de videoweergave.

Als u deze optie leeg laat, vult de video de beschikbare ruimte.

Klik op Save om de instellingen op te slaan en terug te keren naar de werkruimte van Page Builder .

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

In de hoger-juiste hoek van het stadium, klik het Dichte Volledige Scherm ( {width="20"}) pictogram.

Wanneer u op dit pictogram klikt, keert u terug naar de sectie Content ​voor de pagina waarop de voorvertoning wordt weergegeven.

Klik in de rechterbovenhoek op de pijl Save en kies Save & Close .

Voor Admin sidebar, ga Catalog > Products.

Klik in de rechterbovenhoek op Add Product .

Maak het product met de volgende eigenschappen:

• ​

  , kenmerkset: Default

• Product Name: Mijn product

• ​

  SKU: Tutorial

• ​

  Price: 75.00

• ​

  Quantity: 100

• Stock Status: in voorraad

• ​

  Weight: 1

• Categories: Vrouwen > Tees > Tees

Klik in de rechterbovenhoek op de pijl Save en kies Save & Close .

Voor Admin sidebar, ga Stores > Attributes>Product.

Klik in de rechterbovenhoek op Add New Attribute .

Voer een Default Label in voor het kenmerk.

In dit voorbeeld gebruikt u My Page Builder Attribute voor het label.

Stel Catalog Input Type for Store Owner in op Page Builder .

Wanneer u een aangepast kenmerk maakt, kunt u de editor die het meest geschikt is voor de toepassing opgeven als Page Builder of de standaard WYSIWYG Text Editor .

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

Breid de Advanced Attribute Properties sectie uit en maak de volgende montages:

• Attribute Code: voer een kenmerkcode in kleine letters in met afbreekstreepjes in plaats van spaties. Gebruik my_page_builder_attribute voor dit voorbeeld.

• Scope: accepteer de standaardwaarde, Store View .

• Default Value: voer een standaardwaarde voor het kenmerk in.

• ​

  Unique Value: No

• ​

  Add to Column Options: No

• ​

  Use in Filter Options: Yes

Kies in het deelvenster Attribute Information ​aan de linkerkant de optie Storefront Properties ​en stel de volgende instellingen in:

• ​

  Use for Promo Rule Conditions: Yes

• ​

  Visible on Catalog Pages on Storefront: Yes

• ​

  Used in Product Listing: Yes

Klik op Save Attribute als de bewerking is voltooid.

Herhaal de vorige stappen om een tweede kenmerk te maken met dezelfde basiseigenschappen, maar met het invoertype van de Teksteditor:

• Default Label: Kenmerk van mijn teksteditor

• Catalog Input Type for Store Owner: Teksteditor

• ​

  -kenmerkcode: my_text_editor_attribute

Voor Admin sidebar, ga Stores > Attributes>Attribute Set.

In dit voorbeeld voegt u tijdelijk de nieuwe kenmerken toe aan de default -kenmerkset. Verwijder aan het einde van deze exercitie de kenmerken uit de kenmerkset, dus niet van invloed op de catalogus.

Zoek het kenmerk Default ​dat is ingesteld in de lijst en dubbelklik erop om het te openen in de bewerkingsmodus.

In de Niet toegewezen Lijst van Attributen, vind de nieuwe attributen u creeerde en sleep elk aan de Groups ​kolom, onder Content.

De locatie van het kenmerk in de kolom Groups bepaalt waar het kenmerk op de pagina wordt weergegeven.

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

Klik op Save om terug te keren naar de lijst met kenmerksets.

Klik wanneer daarom wordt gevraagd op de koppeling Cache Management boven aan de pagina en vernieuw eventuele ongeldige cache.

Voor Admin sidebar, ga Catalog > Products.

In het net van Producten, vind Mijn Product en open het op geef wijze uit.

De rol neer en breidt uit de Content sectie.

Bovenaan in de sectie staan twee standaardkenmerken voor productinhoud:

• Korte Beschrijving, die de standaardWYSIWYG redacteurgebruikt.
• Beschrijving, die Page Builder voorproef toont.

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

Als u naar de onderste helft van de sectie scrolt, zijn er twee kenmerken die u hebt gemaakt en toegewezen:

• Mijn Page Builder Attribuut, dat de Page Builder voorproef toont.
• Mijn Kenmerk van de Redacteur van de Tekst, dat de standaard redacteur WYSIWYG gebruikt.

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

In de Mijn redacteur van de Tekst van het Attribuut redacteur, ga Text Editor Attribute placeholder text in.

• Klik in de rechterbovenhoek op de pijl Save en kies Save & Close .

Voor Mijn Attribuut van de Bouwer van de Pagina, klik Edit with Page Builder en voeg de beschrijvingstekst toe:

• Vouw Elements uit in het deelvenster Page Builder en sleep een Text object naar het werkgebied.

• Voer Page Builder attribute placeholder text in.

• In de hoger-juiste hoek van het stadium, klik het Dichte Volledige Scherm ( {width="20"}) pictogram.

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

Schuif omhoog naar Description , klik op Edit with Page Builder en voeg alle tekst toe die u leuk vindt met dezelfde methode als de vorige stap.

Klik in de rechterbovenhoek van de productpagina op de pijl Save en kies Save & Close .

Als daarom wordt gevraagd, klikt u op de koppeling Cache Management in het bericht boven aan de pagina en vernieuwt u eventuele ongeldige cache.

Navigeer naar de pagina met voorbeeldproducten in de winkel.

In dit voorbeeld vindt u het product in de bovenste navigatie onder Vrouwen > Tops > Tees.

De rol neer aan Mijn attributen van de Bouwer van de Pagina informatie.

De positie van de kenmerken op de productpagina wordt bepaald door het thema. In het thema Luminantie bevinden de nieuwe kenmerken zich vlak na de beschrijving van het product.

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