Deutsch English Italiano

Design Connector

Inhaltsverzeichnis

Introduction

Le module “Design Connector” peut être utilisé lors de l’intégration de la boutique en ligne dans un site web existant.

Ce module est disponible pour PepperShop Professional et doit être acheté séparément.

Fichier de modèle

Le fichier de modèle est une “page vide” du site web. Il contient un “marqueur” qui définit où la boutique apparaît. Dans la configuration standard, le texte du marqueur est <!-- SHOP -->.

Le fichier de modèle doit utiliser des liens absolus pour son propre contenu et ses liens (par ex. : <img src="http://example.com/xy.jpg">).

Il est avantageux d’utiliser le framework HTML Bootstrap, car la boutique l’utilise également.

Composants de la boutique

Des “marqueurs” prédéfinis supplémentaires peuvent être utilisés dans le fichier de modèle :

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

Ces marqueurs sont remplacés dynamiquement par la boutique lors de l’appel.

Configuration du Design Connector

Le Design Connector utilise maintenant cette page vide et insère la boutique en ligne à la place du marqueur <!-- SHOP -->.

Les ajustements pour le fichier de modèle doivent être effectués dans le fichier design_integration.php.

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

Une URL doit être définie pour chaque langue.

Les autres marqueurs (panier, …) peuvent également être activés ou désactivés dans la configuration.

Activation

Pour activer le Design Connector, le paramètre doit être modifié dans l'éditeur de configuration (Paramètres → Configuration système → Configuration → “Voir et modifier les constantes de contrôle de cette boutique” → Éditeur de configuration).

avant : define('EXTERNE_DESIGN_INTEGRATION',false); après : define('EXTERNE_DESIGN_INTEGRATION',true);

Installation

Exigences système

Pour utiliser le module Design Connector, un PepperShop v.3.0 Professional est requis.

Copier et télécharger le fichier

Le module Design Connector consiste en un fichier qui doit être copié dans votre PepperShop installé. D’abord, extrayez l’archive ZIP fournie. Le fichier suivant est inclus, montré ici avec le répertoire cible : {shopdir}/shop/design_integration.php

Modèle d’exemple

Fichier d’exemple pour un modèle avec plusieurs “marqueurs” qui sont remplacés par le Design Connector avec les composants respectifs. Quels marqueurs doivent être remplacés peut être défini dans la configuration du Design Connector.

<!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="#">*Site web*</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">*Accueil*</a></li>
            <li><a href="#menu1">*Menu 1*</a></li>
            <li><a href="#menu2">*Menu 2*</a></li>
            <li><a href="#shop">*Boutique en ligne*</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>

Aide supplémentaire

Avez-vous des questions ou avez-vous besoin d’assistance ? Avez-vous des exigences particulières ou souhaitez-vous une solution individuelle pour votre système ? Notre équipe de support se fera un plaisir de vous aider. Les prestations de support sont facturées au temps passé au tarif de CHF 195.- / heure. Voici comment nous joindre :

Autres pages utiles

🌶️
🔥
🌶️