Deutsch Français Italiano

Design Connector

Inhaltsverzeichnis

Introduction

The “Design Connector” module can be used when integrating the webshop into an existing website.

This module is available for PepperShop Professional and must be purchased separately.

Template File

The template file is an “empty page” of the website. It contains a “marker” that defines where the shop appears. In the standard configuration, the text for the marker is <!-- SHOP -->.

The template file must use absolute links for its own content and links (e.g.: <img src="http://example.com/xy.jpg">).

It is advantageous to use the HTML framework Bootstrap, as the shop also uses this.

Shop Components

Additional predefined “markers” can be used in the template file:

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

These markers are dynamically replaced by the shop when called.

Design Connector Configuration

The Design Connector now uses this empty page and inserts the webshop in place of the <!-- SHOP --> marker.

The adjustments for the template file must be made in the design_integration.php file.

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

A URL must be defined for each language.

The other markers (shopping cart, …) can also be activated or deactivated in the configuration.

Activation

To activate the Design Connector, the setting must be changed in the configuration editor (Settings → System Configuration → Configuration → “View and edit control constants of this shop” → Configuration Editor).

before: define('EXTERNE_DESIGN_INTEGRATION',false); after: define('EXTERNE_DESIGN_INTEGRATION',true);

Installation

System Requirements

To use the Design Connector module, a PepperShop v.3.0 Professional is required.

Copy and Upload File

The Design Connector module consists of one file that must be copied into your installed PepperShop. First, extract the provided ZIP archive. The following file is included, shown here with the target directory: {shopdir}/shop/design_integration.php

Example Template

Example file for a template with multiple “markers” that are replaced by the Design Connector with the respective components. Which markers should be replaced can be defined in the Design Connector configuration.

<!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="#">*Website*</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>

Further Help

Do you have questions or need assistance? Do you have special requirements or desire a custom solution for your system? Our support team is happy to help. Support services are charged based on time and material at CHF 195.- / hour. Here is how to reach us:

Other Useful Pages

🌶️
🔥
🌶️