openElement

monsite.com

   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:
Choisir un hébergeur supportant php et MySQL correctement
Nom de domaine pour l'exercice: monsite.com
Créer votre base de données vierge MySQL, notez bien ses noms et mot de passe.
Créer un répertoire pour le site opencart à la racine prévue pour le site openElement pour l'exercice appelons le: boutique
opencart
Télécharger opencart
Suivre les instructions de opencart-2.X.X.X.zip\opencart-2.X.X.X\install.txt
Copier les fichiers de opencart-2.X.X.X.zip\opencart-2.X.X.X\upload\ dans le répertoire boutique
Renommer les deux fichiers config-dist.php tel que prescrit
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
Vous pouvez ajouter un pack de langue française.  J’ai acheté et installé ce pack
Il y a aussi toutes sortes d’autre packs disponibles pour toutes sortes de besoins
C'est assez simple à installer, ça se complique à la configuration de votre boutique.
Que désirez-vous vendre?
Regroupez les produits en catégories et sous-catégories (selon le besoin).
Quel(s) pays, régions visez-vous? opencart permet la gestion des taxes par région.
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.
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.
Choisissez aussi votre mode de paiement comme PayPal
Pour des tutos de configuration je suggère d'aller regarder les Screencast
openElement
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é.
Créer une page openElement pour y afficher le site opencart (j'ai choisi une page responsive en pleine largeur d'écran)
Insérez un panneau d’éléments appelé "WEpanneauOC" (je l'ai mis dans la partie centrale de la page)
Pour l’exercice je lui ai donné une largeur de 80% et avec centrage automatique, mode d’affichage relative.
Dans ce panneau, insérer un bloc de code visuel centré avec le contenu iframe que vous trouverez plus bas.
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();
});

Note à ceux qui font l'achat du pack de langue francaise:

Pour ajouter la langue française à partir du fichier compressé que vous avez acquis vous pouvez décompresser le fichier sur votre PC et le transférer sur votre hébergement avec votre utilitaire ftp préféré.
Sur votre PC:

Extraire le dossier upload du fichier compressé
Copier les sous-dossiers admin et catalog dans le dossier de votre boutique sur votre hébergement.
Ouvrir la page d'administration de votre boutique
Menu System
Menu Item Localisation 
Menu Item Languages
Le petit carré bleu avec un symbole "+" vous permettra d'ajouter une langue
Language Name: Français
Code: fr-fr (si vous avez bien installé les fichiers au bon endroit le choix sera disponible)
Status: Enabled
Sort Order: 1
Enregistrez
Sélectionnez la langue: English
Sort order: 2 (le premier choix proposé sera le français)
Enregistrez
Menu System
Menu Item Settings
Sélectionnez votre boutique
Éditez-la
Onglet: Local
Administration Language: Français
Language: Français
Enregistrez

Voilà, toutes les étapes y sont.

Edité par Hobby001 - 25 Avr 2018 à 22:06

openElement

[Tuto] insertion OpenCart (eCommerce)