Designconnector

Benötigte Lesezeit: 3 Minuten


Einleitung

Das Modul “Designconnector” kann eingesetzt werden, wenn in einer vorhandenen Webseite der Webshop eingebunden wird.

Dieses Modul ist für den PepperShop Professional erhältlich und ist separat zu erwerben.

Vorlagedatei

Die Vorlagedatei ist eine “leere Seite” der Webseite. Darin ist ein “Marker” definiert, an welcher Stelle der Shop erscheint. In der Standard-Konfiguration ist der Text für den Marker <!-- SHOP -->.

Die Vorlagedatei muss für die eigenen Inhalte und Links absolute Links benutzen (z.B.: <img src="http://example.com/xy.jpg"> ).

Von Vorteil ist der Einsatz des HTML-Frameworks Bootstrap, da der Shop auch dieses benutzt .

Shopkomponenten

In der Vorlagedatei können weitere, vordefinierte “Marker” benutzt werden:

  • <!-- SHOP_SEARCH -->
  • <!-- SHOP_BASKET -->
  • <!-- SHOP_ACCOUNT -->
  • <!-- SHOP_CURRENCY -->
  • <!-- SHOP_LANGUAGE -->

Diese Marker werden dynamisch beim Aufruf durch den Shop ersetzt.

Konfiguration Designconnector

Der Designconnector benutzt nun diese leere Seite und fügt anstelle des Markers <!-- SHOP --> den Webshop ein.

In der Datei design_integration.php müssen die Anpassungen für die Vorlagedatei gemacht werden.

$externe_domain = 'http://www.example.com';
$externe_seite_webpath = array('de'=>'/path/cms-seite.html');

Wobei für jede Sprache eine URL definiert werden muss.

Die anderen Marker (Warenkorb, …) können ebenfalls in der Konfiguration aktiv oder inaktiv gesetzt werden.

Aktivierung

Damit der Designconnector aktiviert ist, muss in der Konfigurationsdatei {shopdir}/shop/config.inc.php die Einstellung geändert werden.

vorher: define('EXTERNE_DESIGN_INTEGRATION',false);
nachher: define('EXTERNE_DESIGN_INTEGRATION',true);

Installation

Systemanforderungen

Um das Designconnector Modul einsetzen zu können, ist ein PepperShop v.3.0 Professional erforderlich.

Datei kopieren und hochladen

Das Designconnector Modul besteht im aus einer Datei, die man in seinen installierten PepperShop kopieren muss. Dazu entpackt man zuerst das mitgelieferte ZIP-Archiv. Es ist folgende Datei enthalten, hier mit dem Zielverzeichnis dargestellt: {shopdir}/shop/design_integration.php

Beispielvorlage

Beispieldatei für eine Vorlage mit mehreren “Markern”, welche durch den Design-Connector mit den jeweiligen Komponenten ersetzt werden. Welche Marker ersetzt werden sollen, kann in der Konfiguration des Designconnectors definiert werden.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Shop Template</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
    />
    <style>
      .navbar {
        border-radius: 0;
        border-bottom: 4px solid \#555555;
        color: #ffffff;
      }
      .navbar-header .navbar-brand {
        padding-top: 15px;
      }
      .footer {
        border-top: 1px #dddddd solid;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#navbar"
            aria-expanded="false"
            aria-controls="navbar"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">*Webseite*</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">*Home*</a></li>
            <li><a href="#menu1">*Menu 1*</a></li>
            <li><a href="#menu2">*Menu 2*</a></li>
            <li><a href="#shop">*Webshop*</a></li>
          </ul>
        </div>
        <!-- SHOP_SEARCH -->
        <!-- SHOP_BASKET -->
        <!-- SHOP_ACCOUNT -->
        <!-- SHOP_CURRENCY -->
        <!-- SHOP_LANGUAGE -->
      </div>
    </nav>
    <!-- SHOP -->
    <div class="container">
      <footer class="footer">
        <p>Footer</p>
      </footer>
    </div>
  </body>
</html>

Beispiele

🌶️
🔥
🌶️