Page Builder Doorlopen, deel 3: inhoud catalogus

Deze oefening toont aan hoe gemakkelijk het is om een productlijst aan een pagina toe te voegen, productpagina's aan te passen en een douanekenmerk te creëren dat toevoegt Page Builder werkruimte naar een set productkenmerken.

Productlijst

Deze oefening veronderstelt dat u hebt voltooid Deel 1: Eenvoudige pagina en Deel 2: Blokken, inclusief de voorwaarden en gedownloade voorbeeldbestanden. Volg de drie onderdelen van deze oefening in orde.

Deel 1: Een productlijst toevoegen

Page Builder maakt het gemakkelijk om een productlijst aan het stadium toe te voegen. In dit voorbeeld wordt de productlijst rechtstreeks aan een pagina toegevoegd.

Stap 1: Een productlijst toevoegen aan het werkgebied

  1. Op de Beheerder zijbalk, ga naar Content > Elements>Pages.

  2. Zoek de Eenvoudige pagina die u in de eerste oefening creeerde en in de tweede veranderde, en uitgezocht Edit in de Action ​kolom.

  3. Uitbreiden Expansiekiezer de Content sectie en klik op Edit with Page Builder of in het voorvertoningsgebied van de inhoud.

  4. In de Page Builder paneel onder Layout, sleept u Row ​boven aan het werkgebied.

  5. In de Page Builder deelvenster, uitvouwen Add Content en sleep een Products tijdelijke aanduiding voor de nieuwe rij.

    Een tijdelijke aanduiding voor een product naar de rij slepen {width="600" modal="regular"}

Stap 2: De voorwaarde samenstellen

  1. Houd de muisaanwijzer boven de lege productcontainer om de gereedschapset weer te geven en kies de optie Instellingen ( Instellingenpictogram {width="20"} ).

    De werkset Producten {width="600" modal="regular"}

  2. Voor Select Products By, kiest u Condition.

  3. Voeg een voorwaarde toe:

    • Klik op de knop Toevoegen ( Pictogram toevoegen ).

    • Onder Product Attribute, kiest u Category.

      Het categoriekenmerk kiezen voor de voorwaarde {width="600" modal="regular"}

    • Voltooi de Category is… door op het pictogram Meer (…) te klikken en vervolgens op het pictogram Kiezer ( Pictogram Kiezer ).

      De voorwaarde definiëren {width="600" modal="regular"}

    • Blader in de categoriestructuur naar de Vrouwen > Tops en selecteert u de  Tees selectievakje.

      De categorie in de boomstructuur kiezen {width="600" modal="regular"}

    • Klik op het vinkje ( Pictogram vinkje ).

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

Stap 3: De instellingen voltooien

  1. Voer de Number of Products to Display.

    Standaard worden in de lijst vijf producten weergegeven.

  2. Vul de overige instellingen naar wens in.

    Gebruik zo nodig de veldbeschrijvingen aan het einde van de Inhoud toevoegen - Producten pagina ter referentie.

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

    Lijst met producten in het werkgebied {width="600" modal="regular"}

  4. Klik in de rechterbovenhoek van het werkgebied op de knop Volledig scherm sluiten ( Pictogram Volledig scherm sluiten {width="20"} ).

    Als u op dit pictogram klikt, keert u terug naar het dialoogvenster Content ​de pagina waarop de voorvertoning wordt weergegeven.

  5. Klik in de rechterbovenhoek op de knop Save en kiest u Save & Close.

Deel 2: De productpagina aanpassen

NOTE
Een Admin-gebruiker moet Content machtigingen voor rolbereik om te zien Edit with Page Builder knoppen gebruiken en in staat zijn om Page Builder te gebruiken.

In dit gedeelte van de oefening leert u hoe gemakkelijk het is om een productpagina aan te passen door een video onder de reeks lusjes op de productpagina te plaatsen. Het proces voor bijwerken rubriekspagina inhoud is in wezen hetzelfde .

  1. Op de Beheerder zijbalk, ga naar Catalog > Products.

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

  3. Omlaag schuiven en uitbreiden Expansiekiezer de Content sectie.

  4. Volgende tot Description, klikt u op Edit with Page Builder.

    Inhoud van productbeschrijving {width="600" modal="regular"}

    Als de productbeschrijving eerder is ingevoerd zonder Page Builder, wordt de huidige beschrijving weergegeven als HTML in een HTML-code container. Bij het thema Luma wordt de productbeschrijving weergegeven op het tabblad Details.

  5. In de Page Builder paneel onder Layout, sleept u Row ​naar het werkgebied, door het onder de container van de HTML-code te plaatsen.

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

    Een rij naar het werkgebied slepen {width="600" modal="regular"}

  6. In de Page Builder deelvenster, uitvouwen Media en sleep een Video tijdelijke aanduiding voor de nieuwe rij.

    Tijdelijke aanduiding voor video in de rij {width="600" modal="regular"}

  7. Houd de muisaanwijzer boven de lege videopcontainer om de gereedschapset weer te geven en kies de optie Instellingen ( Instellingenpictogram {width="20"} ).

    Video, werkset {width="500" modal="regular"}

  8. Voer de Video URL.

    De video kan worden gehost op YouTube of Vimeo. De video in dit voorbeeld is te vinden op YouTube op de volgende URL:

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

    De video bewerken {width="500" modal="regular"}

  9. Voer de Maximum Width in pixels voor de videoweergave.

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

  10. Klikken Save om de instellingen op te slaan en terug te keren naar de Page Builder werkruimte.

    Video in het inhoudswerkgebied {width="600" modal="regular"}

  11. Klik in de rechterbovenhoek van het werkgebied op de knop Volledig scherm sluiten ( Pictogram Volledig scherm sluiten {width="20"} ).

    Als u op dit pictogram klikt, keert u terug naar het dialoogvenster Content ​de pagina waarop de voorvertoning wordt weergegeven.

  12. Klik in de rechterbovenhoek op de knop Save en kiest u Save & Close.

In de winkel wordt de video weergegeven onder de tabs. Als u wilt zien hoe de pagina er op een mobiel apparaat uitziet, kunt u de grootte van het venster aanpassen.

Video weergegeven op de productpagina

Gefeliciteerd! U hebt het tweede gedeelte van de zelfstudie Catalogusinhoud voltooid. Behoud het werk dat u hebt gemaakt, zodat u er later naar kunt verwijzen.

Deel 3: Aangepaste kenmerken toevoegen

Gebruik de Page Builder aangepast kenmerk om een volledig functionerende Page Builder naar een productpagina, die u kunt gebruiken om aantrekkelijke inhoud te maken. In dit deel van de oefening, leert u hoe te om een douanekenmerk tot stand te brengen gebruikend Page Builder invoertype en pas het toe op productpagina's in uw catalogus. Zie voor meer informatie over deze kenmerken Productkenmerken.

Stap 1: Een product maken

Als u wijzigingen in uw live winkel wilt voorkomen, maakt u een product met de beschreven eigenschappen.

  1. Op de Beheerder zijbalk, ga naar Catalog > Products.

  2. Klik in de rechterbovenhoek op Add Product.

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

    • CategoriesBetreft: Vrouwen > Tops > Teeën

  4. Klik in de rechterbovenhoek op de knop Save en kiest u Save & Close.

Stap 2: Aangepaste kenmerken maken

In deze stap maakt u twee nieuwe aangepaste kenmerken om te tonen hoe de Page Builder en de invoertypen van de Teksteditor kunnen worden gebruikt.

  1. Op de Beheerder zijbalk, ga naar Stores > Attributes>Product.

  2. Klik in de rechterbovenhoek op Add New Attribute.

  3. Voer een Default Label voor het kenmerk.

    In dit voorbeeld kunt u My Page Builder Attribute voor het etiket.

  4. Set Catalog Input Type for Store Owner tot Page Builder.

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

    Page Builder Invoertype {width="600" modal="regular"}

  5. Uitbreiden Expansiekiezer de Advanced Attribute Properties en stel de volgende instellingen in:

    • Attribute Code: Voer een kenmerkcode in kleine letters in met afbreekstreepjes in plaats van spaties. In dit voorbeeld kunt u my_page_builder_attribute.

    • 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

  6. In de Attribute Information ​links, kiest u 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

  7. Klik op Save Attribute.

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

Stap 3: Werk de set met productkenmerken bij

  1. Op de Beheerder zijbalk, ga naar 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.

    note note
    NOTE
    Als u uw live winkel niet wilt wijzigen, kunt u de stappen volgen zonder de kenmerkset bij te werken.
  2. Zoek de Default ​in de lijst ingestelde kenmerk en dubbelklik erop om het in de bewerkingsmodus te openen.

  3. In de Niet toegewezen kenmerken lijst, zoek de nieuwe attributen u creeerde en sleep elk aan Groups ​kolom, onder Content.

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

    Nieuwe kenmerken die worden toegevoegd aan de inhoudsgroep {width="600" modal="regular"}

  4. Klikken Save om terug te keren naar de lijst met kenmerksets.

  5. Klik op de knop Cache Management bovenaan op de pagina koppelen en eventuele ongeldige cache vernieuwen.

Stap 4: Het product bijwerken

  1. Op de Beheerder zijbalk, ga naar Catalog > Products.

  2. In het raster Producten vindt u Mijn product en opent u deze in de bewerkingsmodus.

  3. Omlaag schuiven en uitbreiden Expansiekiezer de Content sectie.

    Bovenaan in de sectie staan twee standaardkenmerken voor productinhoud:

    • Korte beschrijving, die de standaard WYSIWYG gebruikt editor.
    • Beschrijving, die de Page Builder voorvertoning.

    Productinhoud {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 Kenmerk, die de Page Builder voorvertoning.
    • Kenmerk van mijn teksteditor, die de standaard redacteur WYSIWYG gebruikt.

    Inhoud van product bewerken {width="600" modal="regular"}

  4. In de Kenmerk van mijn teksteditor editor, enter Text Editor Attribute placeholder text.

    • Klik in de rechterbovenhoek op de knop Save en kiest u Save & Close.
  5. Voor Kenmerk Mijn pagina Builder, klikt u op Edit with Page Builder en voeg de beschrijvende tekst toe:

    • In de Page Builder deelvenster, uitvouwen Elements en sleep een Text object naar het werkgebied.

    • Enter Page Builder attribute placeholder text.

    • Klik in de rechterbovenhoek van het werkgebied op de knop Volledig scherm sluiten ( Pictogram Volledig scherm sluiten {width="20"} ).

      Aangepaste kenmerken met plaatsaanduidingstekst {width="600" modal="regular"}

  6. Omhoog schuiven tot Description, klikt u op Edit with Page Builder en voeg tekst toe die u leuk vindt met dezelfde methode als de vorige stap.

  7. Klik in de rechterbovenhoek van de productpagina op de knop Save en kiest u Save & Close.

  8. Klik op de knop Cache Management in het bericht boven aan de pagina en vernieuw een ongeldige cache.

Stap 5: het resultaat weergeven

  1. Navigeer naar de pagina met voorbeeldproducten in de winkel.

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

  2. Omlaag schuiven naar de Kenmerk Mijn pagina Builder 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.

    Page Builder en kenmerken van de Teksteditor in de winkel {width="600" modal="regular"}

U hebt de Page Builder Inhoudsoefening catalogus. Behoud het werk dat u hebt gemaakt, zodat u er later naar kunt verwijzen.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d