# Produktdetailseiten
# Schematischer Aufbau der Produktdetailseite:
Für den Inhalt einer Produktdetailseite ist die Komponente ~components/productdetail/ViewProduct.vue
zuständig.
Warum es sich bei diesem Einstiegspunkt nicht um eine Page handelt kann auf der
Seite Routing & Dataflow nachgelesen werden.
Die primären Komponenten, die ViewProduct
enthält:
Komponenten | Aufgaben |
---|---|
breadcrumbs | zeigt die aktuelle Position in der Navigationsstruktur an |
product-detail-gallery | verwendet vue-tiny-slider (opens new window) & vue-js-modal (opens new window) um Produktbilder darzustellen; bindet add-to-wishlist ein für Viewports sm & md |
product-detail-buybox | siehe untere Tabelle |
collapsible-description | nur relevant für sm Viewports: zeigt Produktbeschreibung an, wenn im ausgeklappten Zustand; für >sm wird die Produktbeschreibung ohne diese Komponente angezeigt |
product-detail-cross-selling-sw | zeigt Cross-Sellings an, falls vorhanden |
product-detail-recommendations | zeigt Produktempfehlungen mit Hilfe der product-listing Komponente an, falls vorhanden |
Die primären Komponenten, die product-detail-buybox
enthält:
Komponenten | Aufgaben |
---|---|
product-detail-manufacturer | stellt Herstellerinformationen, wie Markenname & Logo dar |
product-detail-buybox-options | wird nur eingebunden, wenn Produkttyp configurable & wenn hubble API in Verwendung (process.env.API_TYPE === 'api') |
product-detail-buybox-options-sw | wird nur eingebunden, wenn Produkttyp configurable & wenn Shopsystem Shopware (process.env.API_TYPE === 'sw') |
product-detail-delivery | zeigt Details zur Versandzeit & zu Versandkosten an |
product-detail-price | stellt Details zum Preis dar; Detaillierungsgrad hängt von dem Produkt ab (Sale Produkte, Mengenabhängige Preise) |
product-detail-add-to-cart | verantwortlich für das Hinzufügen von Produkten zum Warenkorb; verwendet Loader & material-ripple |
add-to-wishlist | wird nur eingebunden, wenn Viewport lg , ansonsten Teil der product-detail-gallery |
← Suche CMS Seiten →