Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto] insertion OpenCart (eCommerce)
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto] insertion OpenCart (eCommerce)

 Répondre Répondre Page  123 13>
Auteur
Message
Hobby001 allez vers le bas
Moderator Group
Moderator Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada
Status: Inactif
Points: 3517
Options des messages Options des messages   Thanks (3) Thanks(3)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Tuto] insertion OpenCart (eCommerce)
    Envoyé : Jan 14 2016 à 2:36pm
En attendant l'intégration d'OpenCart dans OE voici comment installer et afficher le site opencart dans une page openElement.

Avant de commencer, il faut bien comprendre que opencart utilise une base de données vierge et y crée toutes les tables dont il a besoin.  

Votre site openElement ne connaît pas opencart.

Ce que je propose ici c'est de monter un site opencart au complet puis de le faire rouler dans une  page openElement.

Marche à suivre:
  1. Choisir un hébergeur supportant php et MySQL correctement
  2. Nom de domaine pour l'exercice: monsite.com
  3. Créer votre base de données vierge MySQL, notez bien ses noms et mot de passe.
  4. Créer un répertoire pour le site opencart à la racine prévue pour le site openElement pour l'exercice appelons le: boutique
  5. opencart
    1. Télécharger opencart
    2. Suivre les instructions de opencart-2.X.X.X.zip\opencart-2.X.X.X\install.txt
    3. Copier les fichiers de opencart-2.X.X.X.zip\opencart-2.X.X.X\upload\ dans le répertoire boutique
    4. Renommer les deux fichiers config-dist.php tel que prescrit
    5. Utiliser votre fureteur favori pour lancer l’installation.  L’application d’installation est la page par défaut qui s’ouvrira à l"adresse monsite.com/boutique
    6. Vous pouvez ajouter un pack de langue française.  J’ai acheté et installé ce pack
    7. Il y a aussi toutes sortes d’autre packs disponibles pour toutes sortes de besoins
    8. C'est assez simple à installer, ça se complique à la configuration de votre boutique.
      1. Que désirez-vous vendre?
      2. Regroupez les produits en catégories et sous-catégories (selon le besoin).
      3. Quel(s) pays, régions visez-vous? opencart permet la gestion des taxes par région.
      4. Quel transport utiliserez-vous? Ont-ils une API? Un pack est-il disponible? Les frais de livraison seront alors calculés par le transporteur et ajoutés par opencart, dans le cas contraire, vous pouvez y mettre un tarif fixe.
      5. Sachez-quel est votre inventaire de produits, opencart gère très bien le décompte, vous avisera et avisera le client en cas de rupture de stocks.
      6. Choisissez aussi votre mode de paiement comme PayPal
      7. Pour des tutos de configuration je suggère d'aller regarder les Screencast
  6. openElement
    1. Vous ne pourrez voir le résultat qu'une fois le site mis en ligne car la prévisualisation ne fonctionnera pas.  La boutique doit être dans le même domaine que le site openElement pour s'afficher correctement.  Il semble qu'un sous-domaine fasse aussi le travail mais je ne l'ai pas testé.
    2. Créer une page openElement pour y afficher le site opencart (j'ai choisi une page responsive en pleine largeur d'écran)
    3. Insérez un panneau d’éléments appelé "WEpanneauOC" (je l'ai mis dans la partie centrale de la page)
    4. Pour l’exercice je lui ai donné une largeur de 80% et avec centrage automatique, mode d’affichage relative.
    5. Dans ce panneau, insérer un bloc de code visuel centré avec le contenu iframe que vous trouverez plus bas.
    6. Ajouter à la page un bloc de code javascript en header avec le contenu header que vous trouverez plus bas
Contenu iframe (bloc de code visuel)
<iframe src="http://monsite.com/boutique/index.php" id="iframe1" frameborder="0" scrolling="no" onLoad="javascript:autoResize()" ></iframe>

Remplacez monsite.com/boutique par vos propres paramètres

Contenu javascript en header 
function autoResize(){
var id='iframe1';
   // Mesure de la largeur de la fenêtre pour opencart
var newwidth = $('#WEpanneauOC').width();
// forcer le redimensionnement vertical en imposant une hauteur de 100 pixels au contenu opencart
document.getElementById(id).height = (100) + "px";
// largeur imposée au contenu OpenCart
document.getElementById(id).width = (newwidth) + "px";
// imposer un délais de 300 millisecondes pour permettre le redimensionnement du contenu
// ce délais, suffisant dans mon environnement, pourrait devoir être changé dans le votre
setTimeout(suite, 300);
}

function suite(){
var id='iframe1';
var newheight;
// Mesure de la hauteur résultante de la page opencart
if(document.getElementById){
        newheight = document.getElementById(id).contentWindow.document .body.scrollHeight;
    }
// Imposer la hauteur au iframe
document.getElementById(id).height = (newheight) + "px";
// Imposer la hauteur du panneau d'éléments
$('#WEpanneauOC').css({height:newheight});
// Imposer la hauteur de la page openElement
$('.OESZ_XBodyContent').css({height:newheight});
}

// Sur redimensionnement de la page openElement, réajuster
$(window).resize(function() {
autoResize();
});


Edité par Hobby001 - Oct 30 2017 à 9:27am
Quand on veut mettre quelque chose en ligne on se fait prendre par quelque chose de gros
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 8142
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jan 14 2016 à 3:24pm
qui est chaud pour se lancer avec cette base? Intégrer OpenCart dans un site web existant...Thumbs Up
Haut de la page
Hobby001 allez vers le bas
Moderator Group
Moderator Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada
Status: Inactif
Points: 3517
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jan 17 2016 à 7:14pm
Je tripatouille avec ça par curiosité.

On peut aisément prendre un élément page externe et y ouvrir le site OC.  

On peut facilement retirer le footer d'OC en éditant le fichier footer.tpl

Mais l'élément page externe d'OE ne lui renvoie pas la taille de la page visée.  Quelqu'un sait comment saisir la taille (en hauteur) d'une page externe pour modifier celle d'un élément OE?


Quand on veut mettre quelque chose en ligne on se fait prendre par quelque chose de gros
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 13671
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jan 17 2016 à 9:01pm
Bonsoir.

Je n'ai pas compris la demande. On peut facilement controler la taille fixe de l'element Page Externe comme n'importe quel autre element OE. Par contre pour qu'il s'adapte automatiquement a l'hauteur de son contenu, c'est moins evident..
Haut de la page
Hobby001 allez vers le bas
Moderator Group
Moderator Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada
Status: Inactif
Points: 3517
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jan 17 2016 à 9:46pm
C'est bien ce dont il s'agit, que l'élément page externe réagisse à la longueur de la page en question.

Y as-t-il un moyen de capturer la taille de cette page?  Si oui, un peu de js et ça sera réglé rapidement.

Merci
Quand on veut mettre quelque chose en ligne on se fait prendre par quelque chose de gros
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 13671
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jan 18 2016 à 10:06am
Oui. Il faut pas utiliser l'element Page externe, utilisez un Bloc de Code Visuel, avec Proprietes->Redimensionnement "Auto" (pas de taille fixe), et mettez le code dedans:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

puis ajoutez un Bloc de Code Source type Javascript position Header avec le code:

function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
Il faut aussi assurer que votre page OE s'adapte, en mettant "Contenu Centrale" en relative dans le nouveau formulaire des sections de la page (voir le bouton Page->Responsive), ou en utilisant l'ancienne option d'adaptation de la hauteur (voir le meme bouton).
Haut de la page
Hobby001 allez vers le bas
Moderator Group
Moderator Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada
Status: Inactif
Points: 3517
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jan 18 2016 à 11:30am
Message posté par Dmit OE Dmit OE a écrit:

Oui. Il faut pas utiliser l'element Page externe, utilisez un Bloc de Code Visuel, avec Proprietes->Redimensionnement "Auto" (pas de taille fixe), et mettez le code dedans:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

puis ajoutez un Bloc de Code Source type Javascript position Header avec le code:

function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
Il faut aussi assurer que votre page OE s'adapte, en mettant "Contenu Centrale" en relative dans le nouveau formulaire des sections de la page (voir le bouton Page->Responsive), ou en utilisant l'ancienne option d'adaptation de la hauteur (voir le meme bouton).

Ça ne serait pas plutôt?

<iframe src="http://192.168.2.11:8084" frameborder="0" scrolling="no" onload="resizeIframe(this)" ></iframe>

Quand on veut mettre quelque chose en ligne on se fait prendre par quelque chose de gros
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 8142
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jan 18 2016 à 11:32am
T'es sur de ton IP Hobby001? Wink
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 13671
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jan 18 2016 à 11:37am
Le lien doit etre local ou en tout cas le meme domain sinon le code ne marchera pas (je pense que dans votre cas vous devez tester en ligne, en local on ne peut pas le faire marcher, a cause de "crossdomain security").
Haut de la page
Hobby001 allez vers le bas
Moderator Group
Moderator Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada
Status: Inactif
Points: 3517
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jan 18 2016 à 11:53am
Message posté par brolysan brolysan a écrit:

T'es sur de ton IP Hobby001? Wink

Je teste ça sur mon serveur maison que je me suis monté derrière mon "Firewall", j'ai changé de routeur dernièrement et je n'ai pas encore ouvert l'accès via une DMZ.

C'est un Windows 7 pro avec IIS, PHP, MySQL et certains autres gadgets.
Quand on veut mettre quelque chose en ligne on se fait prendre par quelque chose de gros
Haut de la page
 Répondre Répondre Page  123 13>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,047 secondes.
Réserver en ligne un taxi, vtc, navette