Designconnector

Inhaltsverzeichnis

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 im Konfigurationseditor (Einstellungen - System Konfiguration - Konfiguration - „Steuerungskonstanten dieses Shops ansehen und bearbeiten“ - Konfigurationseditor) 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>

Weitere Hilfe

Benötigen Sie weitere Unterstützung? PepperShop stellt Ihnen unterschiedliche Möglichkeiten zur Verfügung.

  • Oft hilft ein Klick in der Administration oben rechts auf das Fragezeichen Icon. Hier erhalten Sie direkt Hilfe zum betroffenen Thema.
  • Diverse Antworten finden Sie in den FAQ. Diese sind ebenfalls in der Shopadministration über Hilfe&News -> Hilfearchiv aufrufbar. Oder über unsere Homepage https://www.peppershop.com/de/services/support/faq/
  • In der PepperShop Academy https://www.peppershop.com/de/services/academy/ können Sie ganz einfach und bequem diverse kostenlose Video-Anleitungen finden.
  • Gerne stehen wir Ihnen auch per Mail oder Telefon zur Verfügung (CHF 185./h) support@glarotech.ch oder +41 71 923 08 58
🌶️
🔥
🌶️