Quick Start

1. Installation der Extension

Installieren Sie die Extension via Composer oder alternativ über den Extension Manager und fügen Sie die statischen TypoScript Templates zu Ihrem Root-Template hinzu.

2. Anlegen der Seitenstruktur

Folgende Seiten-Struktur kann empfohlen werden. Die jeweiligen Seiten können über den TypoScriptKonstanten-Editor konfiguriert werden.

🌎 Website root
├─ 🗀 Data
│  └─ 🛒 Products
├─ 📄 Products list
│  ├─ 📄 Products detail
│  ├─ 📄 Basket
├─ 📄 Checkout
│  ├─ 📄 Error
│  ├─ 📄 Callback
│  ├─ 📄 Cancel
│  └─ 📄 Success
└─ 🗀 Footer Menu
   ├─ 📄 Terms
   ├─ 📄 Disclaimer
   └─ 📄 Privacy

3. TypoScript Konfiguration (minimal)

Nach dem alle Seiten angelegt sind, kann die minimale TypoScript Konfiguration hinzugefügt werden. Empfohlen wird eine einfache Textdatei in Ihrem Projekt Verzeichnis / Template Ordner oder im Dateisystem abzulegen. Die Namensgebung der Datei sollte einen Hinweis auf den Inhalt liefern. In unserem Beispiel nennen wir die Datei "shop.constants.txt" Die ID's der entsprechenden Seiten ersetzen Sie mit den ID's aus Ihrer Installation. Wenn Sie mit der Maus über das Icon der Seite im Seitenbaum gehen, wird Ihnen die ID angezeigt. Emailadressen, Shopnamen und Pfade sind ebenfalls entsprechend Ihrer Instanz anzupassen.

themes.resourcesPrivatePath = fileadmin/
module.tx_shoppro.persistence.storagePid = 88
themes.configuration.extension.shop.basket.minimumOrderValue = 100
themes.configuration.extension.shop.ups.pid = 0
themes.configuration.container.shop = 88
themes.configuration.extension.shop.basket.displayType = b2c
themes.configuration.extension.shop.detail.image.width = 450
themes.configuration.extension.shop.detail.image.height = 450
themes.configuration.extension.shop.email.to.name = Mein Shop Name
themes.configuration.extension.shop.email.from.email = shop(at)beispiel(dot)de
themes.configuration.extension.shop.email.from.name =  Mein Shop Name
themes.configuration.extension.shop.email.to.email = shop(at)beispiel(dot)de
themes.configuration.extension.shop.basket.minimumOrderValue = 100
themes.configuration.pages.shop.detail = 81
themes.configuration.extension.shop.detail.image.showFirst = 1
themes.configuration.pages.shop.checkoutCancel = 87
themes.configuration.pages.shop.notFound = 68
themes.configuration.pages.shop.basket = 82
themes.configuration.pages.shop.list = 80
themes.configuration.pages.shop.checkout = 83
themes.configuration.pages.shop.checkoutError = 84
themes.configuration.pages.shop.checkoutSuccess = 86
themes.configuration.pages.shop.checkoutCallback = 85
themes.configuration.pages.terms = 63
themes.configuration.pages.disclaimer = 63
themes.configuration.pages.shop.payPalPlusSuccessRedirectPid = 86
themes.configuration.pages.privacy = 63
themes.configuration.extension.shop.checkout.payPalPlus.webhookID = XXXX
themes.configuration.extension.shop.checkout.payPalPlus.payPalPlusSecret = XXX
themes.configuration.extension.shop.checkout.payPalPlus.payPalPlusClientId = XXX
themes.configuration.extension.shop.checkout.payPalPlus.sandbox = 1
themes.configuration.extension.shop.checkout.payPalPlus.paymentTitle = Bestellung Mein Shop

Binden Sie die Datei in Ihrem Root-Template gemäß Ihrer Projektstruktur ein.

<INCLUDE_TypoScript: source="EXT:myPageSetup/templates/ts/shop.constants.txt">

4. Plugins für Seiten anlegen

  • Data-Products Diese Seite ist eine Seite vom Typ Ordner und sollte nicht in den Suchindex/Sitemap aufgenommen werden. In den Einstellungen der Seite, stellen Sie unter "Einstellungen - Enthält Plugin" das Plugin "Produkte" ein. Nach dem Speichern wird das Icon der Seite im Seitenbaum von einem Ordner zu einem Einkaufswagen wechseln.
  • Products-List Diese Seite enthält die Liste Ihrer Produkte. Sie ist eine Seite vom Typ "Standard". Als Inhaltselement wird hier ein das Plugin Shop product list and single view angelegt.
  • Products-detail Diese Seite enthält die Detaiansicht Ihrer Produkte. Sie ist eine Seite vom Typ "Standard". Als Inhaltselement wird hier ein das Plugin Shop product list and single view angelegt.
  • Checkout-Seite Diese Seite ist im Menü unsichtbar und sollte nicht in den Suchindex/Sitemap aufgenommen werden. Auf dieser Seite muss ein Plugin vom Typ Shop checkout platziert werden, sodass hier der Bestellprozess durchgeführt werden kann.
  • Error-Seite Diese Seite ist im Menü unsichtbar und sollte nicht in den Suchindex/Sitemap aufgenommen werden. Auf dieser Seite muss ein Plugin vom Typ Shop checkout platziert werden, damit Fehler einer Bestellung entsprechend verarbeitet werden kann.
  • Callback-Seite Diese Seite ist im Menü unsichtbar und sollte nicht in den Suchindex/Sitemap aufgenommen werden. Auf dieser Seite muss ein Plugin vom Typ Shop checkout platziert werden, damit das ein Callback-Aufruf (von bspw. PayPal) einer Bestellung verarbeitet werden kann.
  • Cancel-Seite Diese Seite ist im Menü unsichtbar und sollte nicht in den Suchindex/Sitemap aufgenommen werden. Auf dieser Seite muss ein Plugin vom Typ Shop checkout platziert werden, damit das Abbrechen einer Bestellung entsprechend verarbeitet werden kann.
  • Success-Seite Diese Seite ist im Menü unsichtbar und sollte nicht in den Suchindex/Sitemap aufgenommen werden. Auf dieser Seite muss ein Plugin vom Typ Shop checkout platziert werden, damit der Abschluss einer Bestellung entsprechend verarbeitet werden kann.
  • Terms/Disclaimer/Privac-Seiten Diese Seiten sind Seiten vom Typ "Standard" und enthalten reine Textinhalte, mit den entsprechenden Passagen.

Einstellungen Plugin Product list and single view (minimal)

Im Plugin im Tab "General" wählen Sie einen der Darstellungsmodi - Columns, Group oder Deck (in der Pro Version steht noch der Modus Isotope zur Verfügung). Die Darstellungsmodi definieren das Rendering der Produkte im Frontend angelehnt an die Darstellungsmodi in Boostrap 4 / Cards. Display Mode

Weiterhin wählen Sie hier bitte die sichtbaren Elemente die ausgegeben werden sollen.

Im Kartenreiter "Sorting" muss mindestens ein Element ausgewählt sein, damit das Plugin gespeichert werden kann. Sorting

5. Produkte anlegen (minimal)

Die Produktdatensätze müssen auf der Seite Data-Products eingefügt werden. Wählen Sie die Seite im Seitenbaum aus und wechseln in das Listen-Modul. Fügen Sie einen neuen Datensatz vom Typ "Products" hinzu. Füllen Sie die mindestens die Felder Titel, Teaser, Description, Price, In Stock, In Stock Amount, Unit Factor, Unit und Images. Legen Sie mindestens 3 Produkte an.

5. Warenkorb Button hinzufügen

Es ist notwendig, einen globalen Warenkorb-Button in Ihre Seite einzubinden – anderenfalls wird es nicht möglich sein, Produkte in den Warenkorb zu legen!

Der Warenkorb-Button kann entweder als ein Content-Element oder als ein TypoScript Marker eingebunden werden.

  1. Hinzufügen des vordefinierten Warenkorb-Button Markers im Fluid-Template:
<f:cObject TypoScriptObjectPath="lib.shop.basketButton" />
  1. Hinzufügen des vordefinierten Warenkorb-Buttons im TypoScript:
page = PAGE
page {
  10 = USER
  10 < lib.shop.basketButton
  # ...
}

Alternativ können Sie den Warenkorb-Button als Plugin hinzufügen.

6. HTML Templates für weitere Bearbeitung verfügbar machen

Ihr Shop sollte nun bereits Produkte auf Ihrer Webseite anzeigen und funktional sein. Um das Aussehen Ihres Shops weiter bearbeiten zu können, können Sie die HTML Templates in Ihr Projektverzeichnis kopieren. Kopieren Sie alle Dateien aus der Extension unter Ressources/Private gemäß der unten aufgeführten Darstellung.

📄 Extensions
└─ 🗀 Shop
   ├─ 📄 Layout
   ├─ 📄 Partials
   └─ 📄 Templates

Passen Sie den Pfad zu den Dateien in den Konstanten Datei shop.constants.txt an.

themes.resourcesPrivatePath = EXT:myPageSetup/Extensions/Shop/

Fertig :-)