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 de Page Builder werkruimte aan een reeks productattributen toevoegt.

lijst van het Product {width="600" modal="regular"}

Deze oefening veronderstelt dat u Deel 1 hebt voltooid: Eenvoudige Paginaen Deel 2: Blokken, met inbegrip van de eerste vereisten en gedownloade steekproefdossiers. Volg de drie onderdelen van deze oefening in orde.

Deel 1: Een productlijst toevoegen

Met Page Builder kunt u eenvoudig een productlijst aan het werkgebied toevoegen. In dit voorbeeld wordt de productlijst rechtstreeks aan een pagina toegevoegd.

Stap 1: Een productlijst toevoegen aan het werkgebied

  1. Voor Admin sidebar, ga Content > Elements>Pages.

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

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

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

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

    slepend een productplaceholder op de rij {width="600" modal="regular"}

Stap 2: De voorwaarde samenstellen

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

    toolbox van Producten {width="600" modal="regular"}

  2. Kies Condition bij Select Products By .

  3. Voeg een voorwaarde toe:

    • Klik toevoegen ( voeg pictogram toe) pictogram.

    • Kies onder Product Attribute ​de optie Category.

      het Kiezen van de categoriekenmerken voor de voorwaarde {width="600" modal="regular"}

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

      die de voorwaarde {width="600" modal="regular"} bepaalt

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

      het Kiezen van de categorie in de boom {width="600" modal="regular"}

    • Klik het Vinkje ( pictogram van het Vinkje ) pictogram.

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

    Standaard worden in de lijst vijf producten weergegeven.

  2. Vul de overige instellingen naar wens in.

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

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

    lijst van Producten in het stadium {width="600" modal="regular"}

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

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

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

Deel 2: De productpagina aanpassen

NOTE
Een gebruiker Admin moet Content toestemmingen voor hun rolwerkingsgebiedhebben om Edit with Page Builder knopen te zien en de Bouwer van de Pagina te kunnen 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 om categorie paginainhoud bij te werken is fundamenteel het zelfde.

  1. Voor Admin sidebar, ga Catalog > Products.

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

  3. De rol neer en breidt selecteur van de Uitbreiding uit de Content sectie.

  4. Klik naast Description ​op Edit with Page Builder.

    de beschrijvingsinhoud van het Product {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.

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

    slepend een rij aan het stadium {width="600" modal="regular"}

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

    Video placeholder in de rij {width="600" modal="regular"}

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

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

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

    Uitgevend de video {width="500" modal="regular"}

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

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

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

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

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

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

  12. Klik in de rechterbovenhoek op de pijl Save en kies 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 die op de productpagina {width="600" modal="regular"} wordt getoond

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

Met het aangepaste kenmerk Page Builder kunt u een volledig functionerende Page Builder -werkruimte toevoegen aan een productpagina die u kunt gebruiken om aansprekende inhoud te maken. In dit deel van de oefening, leert u hoe te om een douanekenmerk tot stand te brengen gebruikend het Page Builder inputtype en het op productpagina's in uw catalogus toe te passen. Voor meer informatie over deze attributen, zie {de Attributen van het 0} Product 🔗.

Stap 1: Een product maken

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

  1. Voor Admin sidebar, ga 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

    • Categories: Vrouwen > Tees > Tees

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

Stap 2: Aangepaste kenmerken maken

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

  1. Voor Admin sidebar, ga Stores > Attributes>Product.

  2. Klik in de rechterbovenhoek op Add New Attribute .

  3. Voer een Default Label in voor het kenmerk.

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

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

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

  5. Breid selecteur van de Uitbreiding 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

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

  7. Klik op Save Attribute als de bewerking is voltooid.

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

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

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

    Nieuwe attributen die aan de groep van de Inhoud worden toegevoegd {width="600" modal="regular"}

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

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

Stap 4: Het product bijwerken

  1. Voor Admin sidebar, ga Catalog > Products.

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

  3. De rol neer en breidt selecteur van de Uitbreiding 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.

    Inhoud van het Product {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.

    de inhoud die van het Product {width="600" modal="regular"} uitgeeft

  4. 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 .
  5. 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 ( dicht volledig het schermpictogram {width="20"}) pictogram.

      de attributen van de Douane met placeholder tekst {width="600" modal="regular"}

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

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

  8. Als daarom wordt gevraagd, klikt u op de koppeling Cache Management in het bericht boven aan de pagina en vernieuwt u eventuele 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. 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.

    Page Builder en de attributen van de Redacteur van de Tekst in storefront {width="600" modal="regular"}

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

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