A+ PDP Builder · Prototyp Medien Notizen Elemente API

Bausteine

Aus diesen Elementen besteht jede Produktseite — und aus keinen anderen. Jeder ist hier einmal mit echten Bildern gerendert, damit man beim Bauen sieht, was man bekommt. Die Feldnamen stehen daneben; maschinenlesbar unter /api/block-types.

Video-Hero (Split)Karussell (3 sichtbar)3-Spalten-ReiheSplit-Band (randabfallend)Merkmal-Kreise (Icon-Grid)Markenkasten (Karte auf Foto)Fakten-Karten auf FotoUSP-Reihe (Icon + Text)Produktaufbau (Explosionszeichnung)Bild-GalerieFließtextFAQ / AkkordeonProduktvergleichCTA-Band

video_hero Video-Hero (Split)

Einstieg. Bewegtbild links, ein Satz rechts. Das erste Element einer Seite.

videovideoposterimageheadingtexttexttextareaflipbool

anlegen 
curl -X POST http://aplus.becker.im/api/pages/<SKU>/blocks \
  -H 'Content-Type: application/json' \
  -d '{"type":"video_hero","data":{ … }}'

Video-Hero

Video links, Aussage rechts. Das Video läuft stumm in Schleife; `flip` dreht die Seiten.

Karussell

Drei sichtbar, der Rest scrollt.

Eintrag 1

Eintrag 1

Beispieltext.

Eintrag 2

Eintrag 2

Beispieltext.

Eintrag 3

Eintrag 3

Beispieltext.

Eintrag 4

Eintrag 4

Beispieltext.

cols3 3-Spalten-Reihe

Drei Karten mit Bild. Für Varianten, Anwendungsfälle, Räume.

headingtextintrotextareatightboolitemslist (image, alt, title, text)

anlegen 
curl -X POST http://aplus.becker.im/api/pages/<SKU>/blocks \
  -H 'Content-Type: application/json' \
  -d '{"type":"cols3","data":{ … }}'

3-Spalten-Reihe

Drei Karten mit Bild, Titel und zwei Zeilen.

Erste Karte

Erste Karte

Bild oben, Text darunter.

Zweite Karte

Zweite Karte

Immer genau drei — sonst carousel.

Dritte Karte

Dritte Karte

Bilder werden beschnitten.

split Split-Band (randabfallend)

Ein Gedanke, ein Bild. Randabfallend, wechselseitig — das Arbeitspferd der Seite.

headingtexttexttextareaimageimagealttextflipbool

anlegen 
curl -X POST http://aplus.becker.im/api/pages/<SKU>/blocks \
  -H 'Content-Type: application/json' \
  -d '{"type":"split","data":{ … }}'

Split-Band

Bild bis an den Rand, Text daneben. Mehrere Split-Bänder hintereinander sollten abwechselnd `flip` gesetzt haben, sonst kippt die Seite zur Seite.

Beispielbild

iconspecs Merkmal-Kreise (Icon-Grid)

Merkmal-Kreise aus PIM-Werten — der Nachbau des Icon-Grids, das der Shop heute als gebackenes Bild ausliefert.

headingtextintrotextareastyleselectitemslist (icon, label, value, text)

anlegen 
curl -X POST http://aplus.becker.im/api/pages/<SKU>/blocks \
  -H 'Content-Type: application/json' \
  -d '{"type":"iconspecs","data":{ … }}'

Das steckt drin

Dieselbe Optik wie das Icon-Grid im Shop, nur aus Daten statt aus Photoshop: Werte kommen aus dem PIM und ändern sich mit ihm.

🌲
Material
Fichte

Langlebig und robust, dabei leicht und elastisch.

📐
Wandstärke
28 mm

Bestimmt Stabilität und Dämmung des Hauses.

🖌
Oberfläche
naturbelassen

Muss vor dem ersten Winter behandelt werden.

🍃
Duft
natürlich

Nadelholz gibt ätherische Öle ab — der typische Geruch.

markenkasten Markenkasten (Karte auf Foto)

Weiße Karte auf randabfallendem Foto: Marke, Headline, Absatz. Der WOODTEX-Kasten des Shops — dort ein gebackenes Bild.

brandtextshorttextlogoimageheadingtexttexttextareaimageimagealttextflipbool

anlegen 
curl -X POST http://aplus.becker.im/api/pages/<SKU>/blocks \
  -H 'Content-Type: application/json' \
  -d '{"type":"markenkasten","data":{ … }}'
Beispielfoto
WT WOODTEX

Holz ohne Kompromisse

Ein Absatz zur Marke — warum es diesen Hersteller gibt und wofür er steht. Wortmarke und Kürzel werden gesetzt, nicht als Logo-Datei geladen; `logo` überschreibt das, wenn es eine gibt.

photocards Fakten-Karten auf Foto

Zwei bis drei Fakten-Karten auf einem Foto. Für Eigenschaften, die man erklären muss (Wärmeisolierung, Dichte), nicht für Messwerte.

imageimagealttextitemslist (icon, title, text)

anlegen 
curl -X POST http://aplus.becker.im/api/pages/<SKU>/blocks \
  -H 'Content-Type: application/json' \
  -d '{"type":"photocards","data":{ … }}'
Beispielfoto
❄

Wärmeisolierung

Holz schließt in seiner Zellstruktur Luft ein — das bremst die Wärmeübertragung in beide Richtungen.

👃

Natürlicher Duft

Nadelholz gibt ätherische Öle ab. Zwei bis drei Karten, mehr wird eng.

usp USP-Reihe (Icon + Text)

Drei bis vier Merkmale nebeneinander, je Icon + Zeile. Für das, was den Artikel trägt.

headingtextitemslist (icon, title, text)

anlegen 
curl -X POST http://aplus.becker.im/api/pages/<SKU>/blocks \
  -H 'Content-Type: application/json' \
  -d '{"type":"usp","data":{ … }}'

USP-Reihe

♨

Fußbodenheizung

Wert aus dem PIM, nicht getextet.

💧

Feuchtraum

Vier Einträge sind das Maximum.

🔗

Verbindung

Icon ist ein Emoji oder eine Ziffer.

🛡

Beanspruchung

Kurz halten — eine Zeile je Eintrag.

layers Produktaufbau (Explosionszeichnung)

Produktaufbau als Explosionszeichnung. Nur mit belegten Schichtstärken benutzen.

headingtextintrotextareatotaltextitemslist (title, text, mm, image, color)

anlegen 
curl -X POST http://aplus.becker.im/api/pages/<SKU>/blocks \
  -H 'Content-Type: application/json' \
  -d '{"type":"layers","data":{ … }}'

Produktaufbau

Klickbare Explosionszeichnung. Nur benutzen, wenn die Schichtstärken belegt sind — ohne mm-Angabe bekommt eine Schicht keinen Körper.

  1. 1

    Deckschicht3 mm

    Die Schicht, auf der man läuft.

  2. 2

    Mittellage6 mm

    Trägt das Klickprofil.

  3. 3

    Gegenzug2 mm

    Hält die Diele in Form.

1
2
3
11 mm gesamt

Bild-Galerie

Bildunterschrift ist optional

richtext Fließtext

Fließtext des Herstellers aus dem PIM. Kein Ort für eigene Prosa.

headingtextbodyrichtext

anlegen 
curl -X POST http://aplus.becker.im/api/pages/<SKU>/blocks \
  -H 'Content-Type: application/json' \
  -d '{"type":"richtext","data":{ … }}'

Fließtext

Redaktioneller HTML-Text, meist der Beschreibungstext des Herstellers aus dem PIM. Überschriften, Listen und Links werden gerendert.

  • Aufzählung
  • zweiter Punkt

faq FAQ / Akkordeon

Fragen, die vor dem Kauf im Weg stehen. Nur beantworten, was Feed oder PIM hergeben.

headingtextitemslist (q, a)

anlegen 
curl -X POST http://aplus.becker.im/api/pages/<SKU>/blocks \
  -H 'Content-Type: application/json' \
  -d '{"type":"faq","data":{ … }}'

FAQ

Wie sieht eine Frage aus?
So. Die erste ist aufgeklappt, der Rest zu.
Wie viele Fragen sind sinnvoll?
Drei bis fünf. Mehr liest niemand.

compare Produktvergleich

Zwei bis vier Artikel nebeneinander stellen.

headingtextintrotextareacardslist (image, name, model, tag, highlight, cta, url, rows)

anlegen 
curl -X POST http://aplus.becker.im/api/pages/<SKU>/blocks \
  -H 'Content-Type: application/json' \
  -d '{"type":"compare","data":{ … }}'

Produktvergleich

Zwei bis vier Karten nebeneinander.

robust
Artikel A
Artikel A
Reihe A
Stärke
11 mm
Nutzschicht
3 mm
günstig
Artikel B
Artikel B
Reihe B
Stärke
6 mm
Nutzschicht
0,3 mm

cta CTA-Band

Abschluss. Ein Ziel, ein Knopf.

headingtexttexttextareactatexturlurlimageimage

anlegen 
curl -X POST http://aplus.becker.im/api/pages/<SKU>/blocks \
  -H 'Content-Type: application/json' \
  -d '{"type":"cta","data":{ … }}'

CTA-Band

Ein Ziel, ein Knopf. Steht am Ende jeder Seite.

Im Shop ansehen

Fehlt etwas? Ein neuer Baustein ist ein Eintrag in app/blocks.py, ein Template templates/blocks/<typ>.html und ein Beispiel in app/showcase.py — ohne Template rendert er stillschweigend nichts.