Jump to content

Intégration Prestashop basique

AdriCdt
 Share

Recommended Posts

AdriCdt Newbie

AdriCdt

Posted
Posted

Hello tout le monde,

 

Bon, je refais un poste, et je commence tout bonnement à péter un câble avec notre ami Prestashop là.

 

En gros pour vous expliquer. Je dois d'abord intégrer une homepage sous Presta : http://zupimages.net/viewer.php?id=16/27/q7am.jpg

 

Je suis donc parti du thème de presta de base. J'essaye de le modifier, et j'y arrive mais que très durement, étant donné ma quantité de connaissances sur presta ( = Nulle).

 

Voici mes petits tests : http://zupimages.net/viewer.php?id=16/27/hblo.png

 

Donc, pour ne pas vous dire "Nan mais la t'as fait de la merde" (ce qui est le cas, ahha), j'ai un peu essayé les modif des modules, la dispo des blocs etc.... J'ai donc migré la barre de recherche dans le bloc du haut, et modif le slider de base pour qu'il se transforme en background en gros. ( ce que j'ai vu faire sur un thème presta : http://addons.prestashop.com/fr/23400-salamon-fashion-store.html )

 

Mes objectifs pour demain soir voir après demain :

- Mettre le background ( = slider statique) en fond comme la maquette, avec les autre blocs qui viennent par dessus

- Faire la navbar

- Faire le bloc de connexion / Langues / Recherche

 

Problèmes : 

- Background : Je n'arrive pas du tout à mettre le slider en fond sans qu'il soit mangé par tout l'espace en le mettant en absolute. Je ne sais pas comment faire.

- Navbar : Mon plus gros probleme, car je n'arrive pas du tout à modifier les tpl. En fait je les modifie, mais rien ne change, et le detourage de la navbar ne peut se faire qu'avec une petite classe autour du menu (il y a le menu avec un background blanc, et donc pour faire le detourage, j'ai donc créé une classe et l'ai stylisé de cette manière : 

.row-stylise-header {
color: white;
text-decoration: none;
border: solid #FFFFFF;
padding: 5px;
margin: 0 auto;
margin-right: 5%;
margin-left: 5%;

}

Donc voilà, je vous montre ce que j'ai modifié, et ce qui ne change pas ---> CE QUI ME RENDS DINGUE

 

Modifications tpl : http://zupimages.net/viewer.php?id=16/27/btjf.png

J'ai donc modifié le commentaire (menuu) et ajouté une div. 

 

rendu : http://zupimages.net/viewer.php?id=16/27/206m.png

Que dalle, même après un clean cookies / Cache, etc...

 

Si une âme charitable serait apte à m'aider, je lui en serais très reconnaissant car j'ai l'impression que je n'arriverai jamais à intégrer cette maquette sous prestashop... 

 

Si quelqu'un aussi à une formation intégrateur gratuite, je suis preneur, car en ayant cherché sur : Elephorm, Grafikart, Openclassroom, Codecademy, Udemy

Rien à faire, aucun tuto d'intégrateur. Pour informations, je suis premium sur Elephorm et grafikart.

 

Merci bien.

 

Link to comment
Share on other sites
poisson Newbie

poisson

Posted
Posted

Bonjour,

Il va falloir faire preuve de patience si tu ne maîtrise pas spécialement tout ça.
Déjà peut être que placer ton topic sur le forum des développeurs serait plus judicieux.

 

Après il y a tellement a savoir quand tu veux intégrer un maquette. (hook, sass/css, smarty pour les tpl, bootstrap ...)

Est que tous ces points te sont familier ? Si oui je veux bien t'aider pas à pas sinon je te conseil de suivre quelques cours sur openclassroom par exemple.

Pour ton soucis de modification de TPL as tu cocher "Forcer la compilation à chaque appel" dans le back office : param avancés / Performances.

Je te conseil de travailler sans cache pendant le développement de ton thème.

 

Link to comment
Share on other sites
ChDUP Newbie

ChDUP

Posted
Posted

C'est tendu cette intégration, sans rien connaitre de Presta.

La maquette est jolie, mais ce n'est pas de la tarte (surtout que je suppose qu'il faut que ce soit responsive)

Il n'y aurait pas comme un problème dans la gestion du projet à la base ?

 

Difficile de vous aider.
Il y a une URL où on pourrait voir les avancées ?

  • Like 1
Link to comment
Share on other sites
AdriCdt Newbie

AdriCdt

Posted
  • Author
Posted

Bonjour, et merci pour vos réponses !

 

@Poisson, 

Effectivement tous ces termes me sont très familiers, car je suis assez spécialisé et maitrise (presque) totalement le sass, HTML, CSS, Bootstrap (je m'attaque même en ce moment à sa nouvelle version Alpha (Bootstrap 4)).

Côté Hook, je commence à comprendre, mais je ne suis toujours pas à l'aise en ce qui concerne par exemple inclure des blocs bien précis dans des Catégories ( aussi appelés Hooks ?).

Idem pour smarty, je m'y habitue tout doucement.

J'ai donc fait ce que tu m'as dit -> J'ai forcé la compilation et désactivé le cache !

 

@ChDUP,

Oui, je suis d'accord avec vous ... D'où mon problème, car ma boss n'y connait pas grand chose la dedans, et me met une pression d'enfer, en me disant que je n'avance pas du tout. Voici tout d'abord le site que j'ai codé sous Wordpress -> https://mysoukinthecity.com/fr/accueil/

Concernant ma version sous Prestashop, nous avons eu une pause au travail, donc je viens seulement de reprendre. Je ne peux pas non plus vous la montrer que je ne travaille pour l'instant qu'en localhost. Par contre, je peux éventuellement l'exporter sur mon serveur mutualisé, si besoin est. 

Link to comment
Share on other sites
AdriCdt Newbie

AdriCdt

Posted
  • Author
Posted (edited)

D'accord, merci pour vos réponses.

 

Je vais passer toute ma journée à travailler ça.

 

Je fais ça de suite, et j'éditerai ce message pour vous donner les retours ! 

 

 

 

EDIT : @ChDUP Hello ! Effectivement, je n'avais pas pensé à la voie de la simplicité, voulant toujours m'adapter à 100% avec le langage, j'essayais des choses qui sont hors d'atteinte par rapport à mon niveau, alors qu'un simple ajout sur l'id Header passe nickel. J'ai également ajouté ces propriétés CSS, afin qu'il puisse s'adapter : 

#header {
  background: url("../img/img-homepage/background-4-homepage.jpg") no-repeat;
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  width: 100%;
  height: auto;
  background-size: cover;
}

ça passe bien !

 

@poisson : Salut Poisson, merci beaucoup pour le cache, tout est résolu, je peux à partir de maintenant travailler efficacement :) Et merci pour ton compliment (si s'en était un) pour le wordpress, mais j'ai l'habitude de coder en dur, et donc le php, et l'appel de fonctions wordpress me laisse un peu sur la touche encore (Je n'ai fait que des appels basiques pour les produits, les soldes, les derniers articles ajoutés, etc... avec des shortcodes / templates, et un peu d'inline PHP pour les boucles nécessaires à l'affichage de produits. 

 

J'essaye d'avancer un peu sur le header, je vous renvoie un screen de mon avancée d'ici une petite heure.

 

Si vous avez des idées, n'hesitez surtout pas à me les faire partager, je suis preneur de tous bons conseils pour accélérer mon avancée :)

 

Avancée 1 (11H40) : http://zupimages.net/viewer.php?id=16/28/4xfz.png

 

PS : J'ai également trouvé un petit thème (payant bien évidemment), mais qui ressemble quelque peu à celui que je dois ré-réaliser, mais sous Presta : http://addons.prestashop.com/demo/FO15368.html

Edited by AdriCdt (see edit history)
Link to comment
Share on other sites
AdriCdt Newbie

AdriCdt

Posted
  • Author
Posted (edited)

Oui, désolé Poisson :) Logiquement, tu devrais voir mon post édité !

 

Donc je reviens pour un petit problème que je rencontre. J'essaye donc de modifier le logo du header, à modifier plutôt ici je pense (smarty ça ?) : 

<div class="row">
	<div id="header_logo">
		<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
		     <img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
		</a>
	</div>
{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
</div>

Ceci se trouve dans le "header.tpl". Je dois donc vraisemblablement changer ce qu'il y a dans $logo_url ?

Edited by AdriCdt (see edit history)
Link to comment
Share on other sites
AdriCdt Newbie

AdriCdt

Posted
  • Author
Posted

Re !

 

Bon je reviens à nouveau vers vous. J'avance tout doucement, et je comprends de mieux en mieux, bonne nouvelle ! Je me suis totalement repéré en ce qui concerne le CSS des modules, et les tpl des modules, qui sont bien séparés, et dans notre thème personnalisé.

 

Voici un état d'avancement : http://zupimages.net/viewer.php?id=16/28/1vr1.png

 

Il me reste donc en tâche à faire, mais que je n'arrive pas : 

 

- Faire une barre de recherche comme le thème que je vous ai fait partagé (thème payant Salomon : http://addons.prestashop.com/demo/FO15368.html )

- Changer "Connexion" en haut par un petit bonhomme de glyphicon ou font awesome (dans nav.tpl je présume ?)

- Changer et insérer le cart (panier) DANS la barre de navigation, sans tout casser avec un dépliement en hover et un float right. Je vous soumet la suite des maquettes pour que vous compreniez mieux. 

- Je me suis rendu compte qu'il fallait que je fasse deux header : Un pour la homepage, un pour le reste du site. Or, en mettant un background sur le body, il ne s'enlève plus, même sur les autres pages, une idée ?? (les maquettes suivent)

 

Menu 2 + panier aperçu : http://zupimages.net/viewer.php?id=16/28/x9bb.jpg

Panier page : http://zupimages.net/viewer.php?id=16/28/zj0l.png

Homepage + Dropdown menu : http://zupimages.net/viewer.php?id=16/28/ese4.png

 

Merci d'avance !

Link to comment
Share on other sites
poisson Newbie

poisson

Posted
Posted

* Pour ton icone de recherche : utiliser du jquery pour faire afficher ton module de recherche peux être une piste ?

* Pour connexion une icone qui mène simplement vers la page de connexion.

* Pour tes header différent : mettre une class sur ton body ex: <body class="homepage"> ou <body class="page">

Link to comment
Share on other sites
ChDUP Newbie

ChDUP

Posted
Posted

pour le background uniquement en accueil, il suffit de mettre une class "conditionnée" sur le body

<body {if $page_name == 'index'} class="body_bg"{/if}>

et d'appliquer le background-img sur la class body_bg

 

de la même manière, on peut envisager de faire 2 header.tpl différents mais ça me semble compliqué pour pas grand chose.

{if $page_name == 'index'}
    {include file="$tpl_dir./header-index.tpl"}
{else}
    {include file="$tpl_dir./header-noindex.tpl"}
{/if}
Link to comment
Share on other sites
Guest

Guest

Posted
Posted

 

pour le background uniquement en accueil, il suffit de mettre une class "conditionnée" sur le body

<body {if $page_name == 'index'} class="body_bg"{/if}>

et d'appliquer le background-img sur la class body_bg

 

en fait c'est déjà en place, il suffit  d'utiliser l'id de la page index, car le nom de la page est ajouté à chaque id body par défaut sur prestashop

<body class="index hide-left-column hide-right-column lang_fr" id="index">

donc on a body#index ou #index page ou encore #index header, etc...

 

directement dispo sans modification pour les modifs css spécifiques

et dans le même genre on a #contact ou #authentication et toutes les pages.

Link to comment
Share on other sites
AdriCdt Newbie

AdriCdt

Posted
  • Author
Posted (edited)

Hello la compagnie,

 

Bon, je reviens aux news après une petite pause de ce projet (deux projets en croisement).

 

Je me suis donc débloqué grâce à vous et à mes petites recherches. J'ai enfin réussi à faire fonctionner la Searchbar, j'ai réussi à modifier le Cart tout bien pour qu'il soit avec la Navbar.

 

Voici mes petites avancées : 

http://zupimages.net/viewer.php?id=16/29/18ox.png

http://zupimages.net/viewer.php?id=16/29/2sgb.png

 

Après tous ces essais, j'ai donc bien compris la structure prestashop, le système de CSS et de TPL séparés, quoi modifier, etc ... J'ai également fait un petit peu de smarty, et je me suis aussi engouffré dans les variables prestashop.

 

Pour les variables, voici quelque chose qui m'a bien aidé (je le transmet au cas où un homme en recherche de ceci passe par là) : http://www.maximelebreton.com/labs/memo-des-variables-prestashop/

 

Pour vous expliquer brièvement ma structure envisagée pour faire la homepage, j'ai donc retiré tous les blocs du DisplayHome, j'ai ajouté un module appelé "CMS on homepage", et j'ai créé la petite page CMS relié à la homepage. J'ai également lié une nouvelle page css comme ceci dans mon header.tpl :

<link rel="stylesheet" type="text/css" href="{$css_dir}cms-1.css">

Il me reste tout de même des problèmes, la DeadLine approche à grand pas (encore 10 jours purs de travail), et je dois avoir terminé tout le site... Après la homepage de faite, le reste devrait aller assez rapidement.

 

Voici mes problèmes : 

 

1. Comment afficher le texte que je dois insérer sans les blocs sur le header ? Le faire sur un blocs en mode bourrin ? Voici un screen pour que vous puissiez cibler mon problème : 

http://www.zupimages.net/viewer.php?id=16/29/dwpq.png

 

2. Je n'arrive pas à cibler mes images, il y a un point d'interrogation. Quelle est la bonne méthode ?  :

http://zupimages.net/viewer.php?id=16/29/jtkj.png

 

Voici ce que j'ai fait pour les appeler, sachant que les images se trouvent dans : themes/msitc/img/img_homepage/ : 

 

cms-1.tpl 

 <img class="images-mymag z-index-cat"
                                 src="{$img_dir}/img_homepage/cat_1.png"/>
                            </a>

Et voici mes autres essais : 

 <img class="images-mymag z-index-cat"
                                 src="{$smarty.const._THEME_IMG_DIR_}img_homepage/cat_2.png"/></a>

<img class="images-mymag z-index-cat"
                                 src="{$smarty.const._THEME_IMG_DIR_}/img_homepage/cat_3.png"/></a>

<img class="fond-bienvenue-full-yeah"
                            src="{$img_dir}img_homepage/bienvenue.png"/>
                        <img class="fond-bienvenue-responsive-yeah"
                             src="{$img_dir}img_homepage/bienvenue-responsive.png"/>

Merci d'avance pour vos réponses qui me seront, j'en suis sûr, d'une grande aide ! 

 

PS : Je dois finir la homepage pour ce soir 18H, sinon Boss pas contente et virer moi, donc je suis un peu en stress ! Merci encore de m'accorder votre temps.

Edited by AdriCdt (see edit history)
Link to comment
Share on other sites
Guest

Guest

Posted
Posted

PS : Je dois finir la homepage pour ce soir 18H, sinon Boss pas contente et virer moi, donc je suis un peu en stress ! Merci encore de m'accorder votre temps.

 

Oui enfin là on dirait que t'as pas mal de travail à faire encore..  Est-ce qu'il est possible de voir la version en ligne pour te filer un coup de main, car avec les explications et les screen shots ça n'est pas très facile pour t'aider.

Link to comment
Share on other sites
AdriCdt Newbie

AdriCdt

Posted
  • Author
Posted

Je n'ai que ma version en local. 

 

@Tweb Ce que je vais faire, c'est essayer de l'uploader en ligne, je renvois un message une fois fait.

 

@ChDUP Voici le code source généré avec l'inspecteur : 

<img class="fond-bienvenue-full-yeah" src="%7B$img_dir%7Dimg_homepage/bienvenue.png" alt="bienvenue.png">
Link to comment
Share on other sites
AdriCdt Newbie

AdriCdt

Posted
  • Author
Posted

Je le place directement dans le module "CMS on Homepage".

 

Je vais essayer d'importer les images via ce module et de les appeller avec les shortcodes qui seront ressortis, surement une erreur de ma part de vouloir faire du smarty dans un plugin ....

Link to comment
Share on other sites
AdriCdt Newbie

AdriCdt

Posted
  • Author
Posted

En fait, ce plugin n'est pas généré par un tpl et du css. Il est en version "Dashboard"

 

Je vais vous screen la version graphique du module, pour que vous compreniez un peu. Je ne sais pas où je me suis lancé je l'avoue, mais je ne vois pas d'autres manière d'inclure une page en "dur" dans presta ....

 

http://zupimages.net/viewer.php?id=16/29/ctmw.png

 

http://zupimages.net/viewer.php?id=16/29/tkkr.png

Link to comment
Share on other sites
AdriCdt Newbie

AdriCdt

Posted
  • Author
Posted

Re ! Donc voilà, j'ai essayé, mais apparemment, ce petit plugin sympa me fout des jolis margin et des trucs vraiment sympas qui empêche mon copié collé de gitan ...

 

Me voilà donc avec ceci : 

 

http://zupimages.net/viewer.php?id=16/29/51fh.jpg

 

Je met aussi actuellement le presta en ligne pour que vous puissiez interagir dessus. Voici également mon dossier Presta (si vous voulez voir en direct le problème pour l'instant) :

 

http://www.filedropper.com/prestashop-msitc

Link to comment
Share on other sites
AdriCdt Newbie

AdriCdt

Posted
  • Author
Posted

Bon, le temps limite approche, je n'y suis pas arrivé... Rien à faire, je suis stuck au même point.

 

J'ai donc vite fait complété le header, et le footer.

 

J'ai en fait l'impression que j'ai des classes qui ne sont pas appelées... Des margins qui sautent, d'autres trucs bizarres...

 

voici mon état d'avancement : http://zupimages.net/viewer.php?id=16/29/r8a5.jpg

Link to comment
Share on other sites
AdriCdt Newbie

AdriCdt

Posted
  • Author
Posted (edited)

Oui poisson, fin j'utilise les col, les row, et toutes les petites classes utiles comme img-responsive, text-center, etc...

 

En ce qui concerne la Homepage, j'ai tout réglé, j'ai refait presque tout le CSS et me suis adapté aux "Columns" et "center_column" qui se sont incorporées automatiquement dans le code.

 

Voici le screen : http://zupimages.net/viewer.php?id=16/29/4l4z.jpg

 

Je m'attaque maintenant à la deuxième page : le catalogue produit -> http://zupimages.net/viewer.php?id=16/29/m1tn.png

 

J'essaye en parallèle d'importer les Catégories/Produits/fournisseurs/etc.... de Wordpress à Prestashop

 

Problèmes rencontrés : 

 

1. Comment changer le header, ou surtout n'afficher le Header Homepage que sur la homepage, et le header normal partout ailleurs ? J'avais déjà posé cette question, et des personnes me disaient qu'il y avait des ID spécifiques come #index #header, #categorie, etc... Je les aient bien trouvées, mais ça ne m'aide en rien, car les blocs n'ont qu'un style, et c'est le style du header homepage ... Je suis donc complètement bloqué sur ce point là.

 

2. Breadcrumb : Il faudrait que je l'inclus dans le bloc avec comme classe "sortPagiBar", mais aucune idée de comment on fait, et si même c'est un bloc ? Et donc, si c'est un bloc, couper-coller le breadcrumb directement dans le bloc ? 

 

3. Comment faire en sorte d'afficher en tout maximum 21 produits, dont 3 par ligne ?

 

En tout cas, merci pour vos réponses active, ça fait grave plaisir de voir une communauté parreille. Cela m'encourage à me spécialiser sur Prestashop, et me motive à aller plus loin ! Merci beaucoup.

 

Voici un screen de mon catalogue actuel (de base) : http://zupimages.net/viewer.php?id=16/29/m5cr.jpg

Edited by AdriCdt (see edit history)
Link to comment
Share on other sites
AdriCdt Newbie

AdriCdt

Posted
  • Author
Posted (edited)

Ah, et pour informations, si quelqu'un est en galère par exemple pour avoir un header à width 100%, un body à 80%, et un footer à 100%, voici ce que j'ai fait (j'ai peut être douillé le système, mais ça fonctionne !) : 

 

Dans presta 1.6 (je crois), des ID auto sont ajouté sur chaque page pour les regrouper, comme par exemple sur l'index : 

<body id="index"        class="index hide-left-column hide-right-column lang_fr">
<div id="page">
    <div class="header-container">
        <header id="header">

et donc, sur le catalogue (categories) : 

<body id="category"        class="category category-5 category-t-shirts hide-left-column hide-right-column lang_fr">
<div id="page">
    <div class="header-container">
        <header id="header">

Vous voyez donc un ID index, et un ID category.

 

Pour mon problème (que vous adapterez selon vos besoins), j'ai donc fait un peu de css basique et me suis amusé avec les width : 

 

global.css

#header, #page #columns {
  max-width: 100%;
}

#category #center_column {
  max-width: 80%;
  margin: auto;
}

Pour une petite explication, je me suis fait un schéma. Sachant que je veux mon footer à 100%, mais que mon footer fait parti de l'ID #page, ainsi que #columns, et également de #center_column, j'ai donc fermé la balise #center_column tout en haut de mon footer (avec un simple </div>), et j'ai tout mis à 100% de width. Mince, le body est à 100% du coup, et je ne veux pas ça. Normal, vu que j'ai fermé la balise #center_columns, je peux maintenant lui appliquer une width juste pour elle, sans toucher le footer ! Une petite margin auto pour center le tout, et voilou :)

Edited by AdriCdt (see edit history)
Link to comment
Share on other sites
poisson Newbie

poisson

Posted
Posted (edited)

 

 

1- les blocs n'ont pas qu'un style par exemple :


body {
}

body#index{
}

body#category{
}

Plein de possibilité pour avoir un header différent.

Tu peux aussi jouer avec ton tpl en n'affichant que certaines zone en page index par exemple.

Il y a plein de façon de faire.

 

2- breadcrumb.tpl appelé de base dans le header.tpl

 

3- Préférence / thème / param avancés / nb de produits par page (pour le cou une recherche google te l'aurais donné en 30s)

Pour 3 produits par ligne pareil en cherchant un peu tu trouveras ce qu'il faut modifier. Si vraiment tu coinces je t'aiderais mais il faut aussi que tu apprennes à chercher par toi même car c'est quand même uns facette importante de notre métier ;)

D'ailleurs de base c'est déjà pas 3 par ligne ? Moi je suis passé en 4 par ligne

Edited by poisson (see edit history)
Link to comment
Share on other sites
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...