Code html architecture de la page.

[amz83]

Bonjour, je suis stagiaire dans une entreprise qui utilise prestashop 1.5.3 pour son sit web de vente en ligne.

 

Une de mes missions est de faire du webdesign. Mais le webdesign sur prestashop... la galère. 

 

J'ai le css du template ça c'est bon mais je n'ai absolument pas d'html donc pour le moment je me débrouille tant bien que mal avec le css (pour vous dire pour enlever du text je met des display:none; a tous va)mais ce n'est pas une solution viable à long terme.

 

On m'a dit que c'etait dans les fichiers tpl que l'on trouvait le code. Super dans footer.tpl j'ai 3lignes a tout casser et lorsque j'en rajoute rien ne se passe. 

 

On m'a aussi dit que chaque html était associer à son module et que l'ont devait aller toucher dans chaque module. Encore une fois on trouve le css mais quasiment pas d'html. c'est vraiment handicapant, un truc que je mettrais 5minutes a coder me prend des heures en bidouillant. Comment faire?

[Matt75]

Bonjour,

 

Les fichiers CSS du thème se trouvent dans /prestashop/themes/NOM-DU-THEME/css/ mais il s'agit uniquement du CSS de l’architecture globale.

Les fichiers TPL qui contiennent le HTML du thème se trouvent dans /prestashop/themes/NOM-DU-THEME/ là encore cela ne concerne que l'architecture globale.

 

Ensuite la plupart des autres éléments sont des modules, le CSS et les fichiers TPL sont dans /prestashop/modules/NOM-DU-MODULE cependant attention ! Ne jamais modifier le CSS et les TPL directement dans le dossier module ! Vous risquerez de perdre vos modifications lors d'une mise à jour de module.

 

Pour faire proprement, vous devez copier les TPL du module à modifier dans /prestashop/themes/NOM-DU-THEME/modules/NOM-DU-MODULE

 

Pour le CSS des modules /prestashop/themes/NOM-DU-THEME/css/modules/NOM-DU-MODULE

 

Il devrait déjà y avoir quelques modules dans ces dossiers, ils vous serviront d'exemple pour ceux qui n'y sont pas et qu'il faudrait ajouter.

 

Vous ne voyez pas vos modifications ? C'est normal ! Prestashop dispose d'un système de cache, à chaque modification, vous devez vider le cache afin de mettre à jour les fichiers avec vos modifications.

Pour cela, il faut vous rendre dans l'administration de Prestashop : Paramètres avancés -> Performances -> Vider le cache (tout en haut à droite, le bouton avec la gomme.)

 

Cordialement,

[amz83]

Merci de ta réponse et en effet je ne m'était pas trompé mais par exemple si je veux rajouter un div et écrires des choses moi-même dans le footer, je vais donc modifier l’architecture du footer non? Donc 

 

/prestashop/themes/NOM-DU-THEME/footer.tpl mais voila ce que je trouve: ( je t'pargne les lignes de license).

 

{if !$content_only}

</div>

 

<!-- Right -->

<div id="right_column" class="column grid_2 omega">

{$HOOK_RIGHT_COLUMN}

</div>

</div>

 

<!-- Footer -->

<div id="footer" class="grid_9 alpha omega clearfix">

{$HOOK_FOOTER}

{if $PS_ALLOW_MOBILE_DEVICE}

<p class="center clearBoth"><a href="{$link->getPageLink('index', true)}?mobile_theme_ok">{l s='Browse the mobile site'}</a></p>

{/if}

</div>

</div>

{/if}

</body>

</html>

 

super la dedans je ne trouve pas ce que je veux (je voudrais modifier le texte a coté de chaque image dans blockreinsurance) j'ouvre donc le module, et j'ai ça:

 

<!-- MODULE Block reinsurance -->

<div id="reinsurance_block" class="clearfix">

<ul class="width{$nbblocks}">

{foreach from=$infos item=info}

<li><img src="{$module_dir}img/{$info.file_name}" alt="{$info.text|escape:html:'UTF-8'}" /> <span>{$info.text|escape:html:'UTF-8'}</span></li>

{/foreach}

</ul>

</div>

<!-- /MODULE Block reinsurance -->

{/if}

 

Mais ou sont les div? ou sont  le <span> livraison sous 48h </span> je ne demande que ça afin de rajouter un class=montexte. Bref c'est horrible.

[Matt75]

Dans footer.tpl, la partie que tu souhaites modifier va se trouver dans {$HOOK_RIGHT_COLUMN}, il s'agit d'un hook où tous les modules greffés dessus vont venir injecter leur code.

 

Dans le TPL du module blockreinsurance, le texte que tu veux modifier à côté de chaque image est dans {$info.text|escape:html:'UTF-8'}, il s'agit d'une variable dont la valeur va dépendre des traductions, de plus il s'agit d'une boucle, ce bout de code sert pour toutes les images.

Si tu veux modifier le texte, il faut modifier les traductions du modules dans l'administration de Prestashop : Localisations -> Traductions -> Type de traduction : traduction des modules installés -> Langue : fr 

 

Courage, une fois que tu auras bien compris le fonctionnement ça ira tout seul mais il faut du temps pour maîtriser la bête.

 

Cordialement

[amz83]

Dans Localisations -> Traductions je n'ai pas de "type de traduction" de plus je ne comprend pas comment modifier la langue de traduction va pouvoir me permettre de modifier du texte car a chaque image est associer un texte (par exemple a coté du smiley on trouve "satisfait ou remboursé" a coté du camion "expedition sous 48h") et ainsi de suite. Je ne voispas les types de traduction car je suis en 1.5.3.1? de plus ou trouver {$HOOK_RIGHT_COLUMN} ? 

 

Excuse moi je suis encore un néophyte pour tout ce qui est hook et prestashop :/

[Matt75]

{$HOOK_RIGHT_COLUMN} se trouve dans le TPL de footer.tpl que tu as donné dans ton message précédent Sa valeur est calculée automatiquement par Prestashop à partir des modules greffés dessus. Tu peux savoir quels modules sont greffés dessus dans l'administration de Prestashop -> Modules et services -> Positions

 

Pour le texte, je me suis trompé pardon, il faut te rendre dans la configuration du module pour modifier le texte, dans l'administration de Prestashop -> Modules et services -> Modules

Dans le champs de recherche, tape blockreinsurance puis une fois le module trouvé, tu as une option pour le configurer.

 

Par ailleurs, si tu as besoin d'ajouter un ID spécifique à chaque li du module pour pouvoir le styliser en CSS, dans le tpl du module que tu auras copier dans /prestashop/themes/NOM-DU-THEME/modules/blockreinsurance/blockreinsurance.tpl

 id="blockreinsurance_{$info.id_reinsurance}"

Ce qui devrait donc ressembler à ceci :

{if $infos|@count > 0}
<!-- MODULE Block reinsurance -->
<div id="reinsurance_block" class="clearfix">
<ul class="width{$nbblocks}"> 
{foreach from=$infos item=info}
<li id="blockreinsurance_{$info.id_reinsurance}"><img src="{$link->getMediaLink("`$module_dir`img/`$info.file_name|escape:'htmlall':'UTF-8'`")}" alt="{$info.text|escape:html:'UTF-8'}" /> <span>{$info.text|escape:html:'UTF-8'}</span></li>                        
{/foreach}
</ul>
</div>
<!-- /MODULE Block reinsurance -->
{/if}

Cordialement

Edited May 2, 2016 by Matt75 (see edit history)

[amz83]

merci beaucoup pour ton aide qui ma été très précieuse, j'ai pu faire quelques uns de mes changement.

 

En revanche j'aimerais savoir une derniere chose qui pourrait m'ouvrir beaucoup de portes. Imaginons je veux rajouter un DIV dans le footer je le rajoute comme ça a l"arrache" dans le tpl? et du coup comment le lié pour les traductions? Je pense que ce n'est pas unebonne solution du coup. Je devrais créer un module juste dans ce but? 

 

Bref si tu as une technique, j'apprécierais de la connaitre. Mais en tout cas merci ! =)

[Matt75]

Tout dépend ce que tu appelles DIV et de ce que tu veux mettre dedans...

 

Mais évidemment, le plus propre étant de créer un module ceci afin d'éviter qu'une mise à jour ne vienne écraser tes modifications, surtout que tu es en stage et donc il vaut mieux pour tes successeurs que tu fasses les choses correctement.

 

Cordialement,

[amz83]

le but serais de mettre dans un div 2/3 images de type de carte bleus et de nos partenaires, ainsi que les droits etc. ce serait donc de shref avec des <a> et des span sien de bien méchant

[Matt75]

Dans ce cas, tu peux créer un module customfooter et le greffer sur le footer ensuite dans le TPL du module, tu mets ton code.
 
Dans prestashop/modules créer un dossier customfooter puis dedans tu créé un fichier customfooter.php et tu mets le code ci-dessous dedans.
 

if (!defined('_PS_VERSION_'))
	exit;

class CustomFooter extends Module
{
	public function __construct()
	{
		$this->name = 'customfooter';
		$this->version = '1.0.0';
		$this->author = 'amz83';
		$this->tab = 'front_office_features';
		$this->need_instance = 0;

		parent::__construct();

		$this->displayName = $this->l('Custom footer');
		$this->description = $this->l('Adds a block on footer with custom html code.');
	}

	public function install()
	{
		return (parent::install() && $this->registerHook('footer'));
	}

	public function hookFooter($params)
	{
		// $this->context->controller->addCSS($this->_path.'customfooter.css', 'all');
		// $this->context->controller->addJS($this->_path.'customfooter.js');
		return $this->display(__FILE__, 'customfooter.tpl');
	}
}

Ensuite tu créé un fichier customfooter.tpl dans le meme dossier dans lequel tu mets ton code html

Si tu as besoin d'un fichier CSS, tu créé un fichier customfooter.css dans ce même dossier avec ton code CSS.
Tu enlèves ensuite les // devant $this->context->controller->addCSS($this->_path.'customfooter.css', 'all'); du fichier PHP pour l'activer

Si tu as besoin d'un fichier javascript, tu créé un fichier customfooter.js dans ce même dossier avec ton code JS.
Tu enlèves ensuite les // devant $this->context->controller->addJS($this->_path.'customfooter.js'); du fichier PHP pour l'activer

Tu peux gérer l'ordre d'affichage des modules dans le hook footer dans l'administration de Prestashop -> Modules et services -> Positions

N'oubli pas de vider le cache après chaque modification dans l'administration de Prestashop : Paramètres avancés -> Performances -> Vider le cache (tout en haut à droite, le bouton avec la gomme.)

Cordialement

Edited May 3, 2016 by Matt75 (see edit history)

[amz83]

ok beaucoup de chose. Merci beaucoup je vais tester tout ça, cela devrait être dans mes cordes, encore merci.

[amz83]

Ok tout marche c'est nikel c'est vraiment parfait. j'ai pu faire ce que je voulais ultra facilement grâce a vous mais je ne savait pas que c'était si simple de faire un module. Bref encore merci de ton aide c'était super cool=) .

[amz83]

Pardon je reviens ici pour un problème j'ai finis mon code sur mon local.  j'ai décidé de l'exporter sur mon site en ligne je fais toutes les modification et la : certaines choses changes d'autre non! même certaines images (comme la fresque en haut) n'existe même plus sur le serveur, car je l'ai aient effacer pourtant elles sont toujours la! au niveau du cache je vous joint un screen mais j'ai tester les 2 ça n'a pas marché bref, je ne sais pas quoi faire.

[Matt75]

Bonjour,

 

N'avez vous pas désactivé des modules en local et que vous auriez oublié de désactiver en ligne ?

 

Cordialement

[amz83]

Eh bien non mais par exemple le block reinsurance j'ai supprimer tous le dossier img simplement. Pourtant toutes les images restent c'est extremement enervant. je peux rien faire et je ne sais pas quoi faire

[Matt75]

Avez-vous bien transférer vos modifications ? C'est à dire les fichiers du thème modifiés et les modules à installé et à désinstaller.

Ensuite avez-vous vider le cache ?

[amz83]

j'ai tout modifier normalement et vider le cache sur presta 1.5 comment faire? car si je dois vider par filezila j'en ai pour environs 20h car il y a plus de 3g de smarty

[Matt75]

Non inutile de le vider par FTP, faites le via l'administration comme je vous l'ai déjà expliqué.

Si après le cache vidé, vous ne voyez pas vos modifications c'est qu'elles n'ont probablement pas été envoyé au bon endroit.

Vous dites avoir supprimer les images mais pourtant elles sont encore en ligne. Vous ne devez pas être au bon endroit sur votre ftp.

[amz83]

Paramètres avancés -> Performances -> Vider le cache (tout en haut à droite, le bouton avec la gomme.) Mais je n'ai absolument pas de "vider le cache" et encore moins de gomme en haut a droite 

[Matt75]

Autant pour moi j'avais zappé que sous Prestashop 1.5 la méthode pour vider le cache est différente. Quelle est précisément votre version ? Car il y a eut plusieurs changement sur cette fonctionnalité.

[amz83]

1.5.3.1 

et j'ai fais un teste j'ai enlevé tout le dossier img de prestashop et pourtant rien  n'a bougé comment est-ce possible il n'y a plus d'image sur le serveur et pourtant sur le site en ligne elles y sont toutes ça montre bien un problème non?

[amz83]

désolé de relancer mais sur google aucun moyen de trouver comment vider le cache et la ça devient vraiment bizarre dans mon css global j'ai mis "background-color:red; pour voir et RIEN ne change rien! en gros je peux plus rien faire sur le site?

[Matt75]

Cette version de Prestashop n'est pas la meilleure, je me souviens maintenant qu'à l'époque je vidais le cache en ligne de commande, le bouton pour vider le cache depuis l'administration a de mémoire été ajouté après. J'essaye de m'en installer une version en local pour voir si y avait pas un moyen depuis l'administration.

En attendant, faites un premier test en supprimant depuis le FTP les fichiers dans prestashop/cache/smarty/cache et dans prestashop/cache/smarty/compile

[amz83]

ok je fais ça mais au vu des 3go de données h'en ai pour un moment

[amz83]

alors des news: j'ai tout suppr manuellement. Dans cache y'a plus rien. Mais toujours pas de mouvement et je viens de voir que l'onglet statistique n'est plus accessible. pourtant je n'ai rien touché a part global.css et quelques modules (du css encore une fois)

[Matt75]

Pour l'onglet statistiques c'est effectivement bizzare, vraisemblablement un problème de requête SQL.

 

On va créer un petit module te permettre de vider le cache simplement.
 
Dans prestashop/modules, créer un dossier forceclearcache et créer un fichier forceclearcache.php à l'intérieur puis colle ce code à l'intérieur :

<?php
if (!defined('_PS_VERSION_'))
	exit;

class ForceClearCache extends Module
{
	public function __construct()
	{
		$this->name = 'forceclearcache';
		$this->tab = 'administration';
		$this->version = '1.0';
		$this->author = 'amz83';
		$this->need_instance = 0;
		$this->ps_versions_compliancy = array('min' => '1.5', 'max' => '1.5.5');

		parent::__construct();

		$this->displayName = $this->l('Force clear cache');
		$this->description = $this->l('Add button to clear cache');
	}

	public function getContent()
	{
		$html = '';
		if (Tools::isSubmit('clearCache')) {
			$smarty = Context::getContext()->smarty;
			$smarty->clearAllCache();
			$smarty->clearCompiledTemplate();
			$html .= $this->displayConfirmation($this->l('Cache has been cleared'));
		}
		$html .= '
		<form action="'.Tools::htmlentitiesutf8($_SERVER['REQUEST_URI']).'" method="post">
			<fieldset>			
				<div class="center">
					<input type="submit" name="clearCache" value="'.$this->l('Clear cache').'" class="button" /></center>
				</div>
			</fieldset>
		</form>';
		return $html;
	}
}

Ensuite tu n'as plus qu'à l'installer, puis sur la page de configuration du module, tu as un bouton qui permet de vider le cache.

Edited May 3, 2016 by Matt75 (see edit history)

[amz83]

ok j'ai testé tout ça et je peux t'assurer que les éléments sont au bon endroit. MAIS j'ai trouvé quelque chose de surprenant alors je vous explique:

 

Lorsque j'inspecte l'élément je vois mon css que j'ai importé mais un autre css aussi qui le chevauche et prend sa place j'ai l'impression je vous envoies des screens

 

je veux celui barrer et pas celui la pourtant dans mon global.css je ne retrouve que le bon code et dans le module reinsurance block il n'y a pas de css et encore moins ces fameuses photos

 

(les photos en grises sont sur le sites) et les photos en bleu sont dans le dossier exporté sur filezila elles ont écrasé les anciennes en s'exportant.

[Matt75]

Alors tu as aussi un cache dans ton thème : prestashop/themes/dm-rose3/cache/ regarde ce qu'il y a dedans

[amz83]

pas mal de choses avec des liens incompréhensibles

y'a des fichiers css et js

voici un screen

[Matt75]

Il s'agit des fichiers CSS et JS compilé, produit par l'option CCC (Concaténation, Compression et mise en Cache) dans la rubrique Performances de l'administration. Lorsque c'est activer, ça compile l'ensemble des fichiers CSS et JS du thème et des modules.

Supprime ces fichiers pour forcer une recompilation

[amz83]

ok ça n'a pas marché voulez vous team viewer?

[Matt75]

Ok en message privé dans ce cas

[amz83]

je vous ai répondu

[Matt75]

Impossible d'accéder a ta réponse, renvoi moi un message.

[amz83]

ok

[Matt75]

Bon pour l'erreur sur les Statistiques c'était le gentil technicien de 1&1 qui avait supprimer des tables dans la base de données.

Pour ton soucis de modifications qui ne s'appliquent pas, c'est cloudflare qu'il va falloir dompter

[amz83]

Re bonjour !hier soir j'ai tous reconfigurer pour ne plus avoir d'erreurs sur le site et je me suis un peu renseigner sur cloudflare mais impossible de voir comment ça marche ou est-ce que ça intervient, comment le virer ou même juste faire fonctionner mon css ! Auriez vous une piste, ou un topic, je ne sais pas.

 

j'ai vu que ça s'apparentait a un cdn et en même temps de faire la nouvelle base de donnée, il m'a installé un cdn donc je ne sais pas ... vu qu'il a fait de la "merde" 1fois il aurait pu continuer sur sa lancée...

 

Merci.

[Matt75]

Cloudflare rempli des fonctions classiques de CDN. C'est à dire qu'il met progressivement en cache les pages de votre site, et les rend accessibles à différents endroits de la planète. Etats Unis, Allemagne, Pays Bas, France, Japon, Thailande, Hong Kong... Vos visiteurs du monde entier accèderont alors plus rapidement à votre contenu.

 

Il y a plusieurs intérêts à passer par un CDN comme Cloudflare. Ça accélère (en général) le temps de chargement de vos pages. Ça vous fait économiser de la bande passante. Ça permet d'avoir toujours des pages accessibles même en cas d'indisponibilité de votre serveur.

 

D'après ce que j'ai trouvé sur le net, il est possible d'en purger le cache et d'utiliser un mode développement le temps de réaliser des modifications.

 

 

https://support.cloudflare.com/hc/en-us/articles/200169246-How-do-I-purge-my-cache-

https://support.cloudflare.com/hc/en-us/articles/200168246-What-does-CloudFlare-Development-mode-mean-

 

Le plus simple serait demandé au gars qui l'a mis en place comment faire.

[amz83]

Alors j'ai contacté mon supérieur qui s'occupait du site et m'a dit qu'il n'avait jamais utiliser cloudfalre, mais ça n'est pas le plus important.

En effet les clients ne peuvent plus s'inscrire sur le site. 

 

Fatal error: Uncaught Error: Access to undeclared static property: Validate::$data in /homepages/18/d320362452/htdocs/classes/ObjectModel.php:939 Stack trace: #0 /homepages/18/d320362452/htdocs/controllers/front/AuthController.php(389): ObjectModelCore->validateController() #1 /homepages/18/d320362452/htdocs/controllers/front/AuthController.php(253): AuthControllerCore->processSubmitAccount() #2 /homepages/18/d320362452/htdocs/classes/controller/Controller.php(159): AuthControllerCore->postProcess() #3 /homepages/18/d320362452/htdocs/classes/Dispatcher.php(349): ControllerCore->run() #4 /homepages/18/d320362452/htdocs/index.php(29): DispatcherCore->dispatch() #5 {main} thrown in/homepages/18/d320362452/htdocs/classes/ObjectModel.php on line 939

 

je ne comprend absolument rien, encore un problème avec la base???

[Matt75]

1&1 vous a basculé sur PHP7 alors que Prestashop n'est pas compatible, encore moins la version 1.5.3.1 que vous utilisez actuellement. Un retour sur PHP 5.6 à corrigé le problème

Edited May 4, 2016 by Matt75 (see edit history)