# Produktdetailseiten

# Schematischer Aufbau der Produktdetailseite:

Produktdetailseiten

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