Jump to content

méthode de création d'un nouveau thème

desgnl
 Share

Recommended Posts

desgnl Newbie

desgnl

Posted
Posted

Bonjour à tous, 

 

je découvre Prestashop et j'essaie de créer mon premier thème: j'ai donc fait une copie du thème par défaut et j'ai commencé à bidouiller. J'ai compris le système de hooks et les templates des modules qui sont chacun associés à un fichier css et js. 

 

Maintenant je ne souhaite pas utiliser bootstrap.css, ni les javascripts du thème par défaut.

 

j'ai réussi à remplacer bootstrap.css par ma css et à customiser le html des templates, mais c'est beaucoup plus embrouillé au niveau du javascript. (pour la page product.js p.e. il y a plus de 1000 lignes de js qui sont à peine commentées. Il n'y a pas de séparation entre ce qui gère les appels ajax et le slideshow par exemple…) 

 

est ce que je dois fouiller dans ces fichiers javascript pour comprendre ce qui se passe ? 

quelle est la bonne méthodologie pour créer un thème "from scratch" ? 

 

merci pour votre aide

Link to comment
Share on other sites
desgnl Newbie

desgnl

Posted
  • Author
Posted (edited)
Bon… malgré le manque de popularité de mon post précédent, je ne désespère pas: 

 

comment puis je supprimer sur le thème les appels à ces trois fichiers : 

 

• /js/jquery/jquery-1.11.0.min.js

• js/jquery/jquery-migrate-1.2.1.min.js

• js/jquery/plugins/jquery.easing.js

 

je ne souhaite pas les utiliser dans mon thème, mais je ne vois pas de moyen de supprimer les appels ? 

 

merci 

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

desgnl

Posted
  • Author
Posted (edited)

je continue mon monologue… Pour supprimer les liens vers les fichiers sus-cités et ajouter mes fichiers, j'ai créé un module qui contient cette fonction: 

public function hookHeader()
	{
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/jquery-1.11.0.min.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/jquery-migrate-1.2.1.min.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/plugins/jquery.easing.js');
		$this->context->controller->addCSS('http://mydomain.com/my-css-framework.css', 'all');
		$this->context->controller->addJS('http://mydomain.com/my-libs.js');
		}

Ça marche bien, mais il reste un problème: le fichier `my-libs.js` est chargé à la suite des autres fichiers javascript.

 

Comment le charger avant les autres fichiers js ? merci 

Edited by desgnl (see edit history)
Link to comment
Share on other sites
Alexandre Carette Collaborator

Alexandre Carette

Posted
Posted

Salut, jette un oeil dans classes/controller/FrontController.php vers la ligne 766,

public function setMedia()
	{
		// if website is accessed by mobile device
		// @see FrontControllerCore::setMobileMedia()
		if ($this->useMobileTheme())
		{
			$this->setMobileMedia();
			return true;
		}

		$this->addCSS(_THEME_CSS_DIR_.'grid_prestashop.css', 'all');  // retro compat themes 1.5
		$this->addCSS(_THEME_CSS_DIR_.'global.css', 'all');
		$this->addjquery();
		$this->addjqueryPlugin('easing');
		$this->addJS(_PS_JS_DIR_.'tools.js');
		$this->addJS(_THEME_JS_DIR_.'global.js');

		// Automatically add js files from js/autoload directory in the template
		if (@filemtime($this->getThemeDir().'js/autoload/'))
			foreach (scandir($this->getThemeDir().'js/autoload/', 0) as $file)
				if (preg_match('/^[^.].*\.js$/', $file))
					$this->addJS($this->getThemeDir().'js/autoload/'.$file);
		// Automatically add css files from css/autoload directory in the template
		if (@filemtime($this->getThemeDir().'css/autoload/'))
			foreach (scandir($this->getThemeDir().'css/autoload', 0) as $file)
				if (preg_match('/^[^.].*\.css$/', $file))
					$this->addCSS($this->getThemeDir().'css/autoload/'.$file);

		if (Tools::isSubmit('live_edit') && Tools::getValue('ad') && Tools::getAdminToken('AdminModulesPositions'.(int)Tab::getIdFromClassName('AdminModulesPositions').(int)Tools::getValue('id_employee')))
		{
			$this->addJqueryUI('ui.sortable');
			$this->addjqueryPlugin('fancybox');
			$this->addJS(_PS_JS_DIR_.'hookLiveEdit.js');
		}

		if (Configuration::get('PS_QUICK_VIEW'))
			$this->addjqueryPlugin('fancybox');

		if (Configuration::get('PS_COMPARATOR_MAX_ITEM') > 0)
			$this->addJS(_THEME_JS_DIR_.'products-comparison.js');

		// Execute Hook FrontController SetMedia
		Hook::exec('actionFrontControllerSetMedia', array());
	}
  • Like 1
Link to comment
Share on other sites
Alexandre Carette Collaborator

Alexandre Carette

Posted
Posted

essaye ca:

 

I don know if this bug still on the 1.6, But with 1.5.X if we Adding jQuery via Google CDN and use CCC issu appear as Jquery is call after the ccc's Js File.

So I puprose the change in Classe/media function cccJS

change

array_merge(array($protocol_link.Tools::getMediaServer($url).$url), $js_external_files);

by

array_merge($js_external_files,array($protocol_link.Tools::getMediaServer($url).$url));

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

desgnl

Posted
  • Author
Posted (edited)

ok! 

 

1. En fait j'ai coché "Move JavaScript to the end", du coup l'ordre des scripts est modifié par rapport au code source… 

2. je suis en train de me renseigner sur l'override: du coup j'ai créé un fichier `Media.php` dans `mon-module/override/classes/`. est ce que tu peux me dire ce que je dois mettre dans ce fichier exactement stp ? 

 

merci beaucoup pour ton aide précieuse

Edited by desgnl (see edit history)
Link to comment
Share on other sites
Alexandre Carette Collaborator

Alexandre Carette

Posted
Posted (edited)

2. pour l'override, il faut garder la meme hiérarchie de dossier que dans le core, ensuite tu crée un fichier avec le meme nom. Donc la pour le moment tu es bon. Dans ton Media.php

<?php

class Media extends MediaCore //Je declare que cette classe est une extension de la classe MediaCore
{
/* Mon code ici */
//Debut de la fonction que j override

public static function cccJS($js_files)
{
//inits
$compressed_js_files_not_found = array();
$js_files_infos = array();
$js_files_date = 0;
$compressed_js_filename = '';
$js_external_files = array();
$protocol_link = Tools::getCurrentUrlProtocolPrefix();
$cache_path = _PS_THEME_DIR_.'cache/';
 
// get js files infos
foreach ($js_files as $filename)
{
if (Validate::isAbsoluteUrl($filename))
$js_external_files[] = $filename;
else
{
$infos = array();
$infos['uri'] = $filename;
$url_data = parse_url($filename);
$infos['path'] = _PS_ROOT_DIR_.Tools::str_replace_once(__PS_BASE_URI__, '/', $url_data['path']);
 
if (!@filemtime($infos['path']))
$infos['path'] = _PS_CORE_DIR_.Tools::str_replace_once(__PS_BASE_URI__, '/', $url_data['path']);
 
$js_files_infos[] = $infos;
 
$js_files_date = max(
file_exists($infos['path']) ? @filemtime($infos['path']) : 0,
$js_files_date
);
$compressed_js_filename .= $filename;
}
}
 
// get compressed js file infos
$compressed_js_filename = md5($compressed_js_filename);
$version = (int)Configuration::get('PS_CCCJS_VERSION');
$compressed_js_path = $cache_path.'v_'.$version.'_'.$compressed_js_filename.'.js';
$compressed_js_file_date = file_exists($compressed_js_path) ? @filemtime($compressed_js_path) : 0;
 
// aggregate and compress js files content, write new caches files
if ($js_files_date > $compressed_js_file_date)
{
if ($compressed_js_file_date)
Configuration::updateValue('PS_CCCJS_VERSION', ++$version);
 
$compressed_js_path = $cache_path.'v_'.$version.'_'.$compressed_js_filename.'.js';
$content = '';
foreach ($js_files_infos as $file_infos)
{
if (file_exists($file_infos['path']))
{
$tmp_content = file_get_contents($file_infos['path']);
if (preg_match('@\.(min|pack)\.[^/]+$@', $file_infos['path'], $matches))
$content .= preg_replace('/\/\/@\ssourceMappingURL\=[_a-zA-Z0-9-.]+\.'.$matches[1].'\.map\s+/', '', $tmp_content);
else
$content .= Media::packJS($tmp_content);
}
else
$compressed_js_files_not_found[] = $file_infos['path'];
}
 
if (!empty($compressed_js_files_not_found))
$content = '/* WARNING ! file(s) not found : "'.
implode(',', $compressed_js_files_not_found).
'" */'."\n".$content;
 
file_put_contents($compressed_js_path, $content);
chmod($compressed_js_path, 0777);
}
 
// rebuild the original js_files array
if (strpos($compressed_js_path, _PS_ROOT_DIR_) !== false)
$url = str_replace(_PS_ROOT_DIR_.'/', __PS_BASE_URI__, $compressed_js_path);
 
if (strpos($compressed_js_path, _PS_CORE_DIR_) !== false)
$url = str_replace(_PS_CORE_DIR_.'/', __PS_BASE_URI__, $compressed_js_path);
 
// Je modifie le code pour mettre les JS externes au debut
return array_merge($js_external_files, array($protocol_link.Tools::getMediaServer($url).$url));[/font]
}
// Fin de la fonction que j override 
} 
}
 
Edited by Alexandre-KM (see edit history)
Link to comment
Share on other sites

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...