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