Jump to content

- Astuce - Comment Créer Un Onglet Produit Personnalisé En Prestashop

Valérie Assetskaya
 Share

Recommended Posts

Valérie Assetskaya Newbie

Valérie Assetskaya

Posted
Posted

Pour créer un onglet produit personnalisé, nous allons utiliser les hooks suivants: displayAdminProductsExtra et actionProductUpdate.

 

- displayAdminProductsExtra est nécessaire pour afficher du contenu dans l'onglet, comme, par exemple, une forme pour charger des images ou des champs personnalisés, etc.

- actionProductUpdate est appelée lorsque le produit est modifié, alors à ce moment, nous pouvons récupérer les données à partir de notre onglet et les traiter.

 

Dans cet article, nous allons créer un module Belvg_Sample qui servira d'exemple pour savoir comment créer un onglet personnalisé et mettre son contenu sur une page produit. Vous pouvez télécharger le module prêt à l'emploi.

 

Dans notre onglet nous aurons textarea comme un seul élément, mais, en fait, rien ne nous empêche de créer des structures plus complexes;)

 

 

public function install() {
	$sql = array();

	Creating a table for data storage
	$sql[] = 'CREATE TABLE IF NOT EXISTS `'._DB_PREFIX_.'belvg_samplemodule` (
			  `id_belvg_samplemodule` int(10) unsigned NOT NULL AUTO_INCREMENT,
			  `id_product` INT( 11 ) UNSIGNED NOT NULL,
			  `textarea` TEXT NOT NULL,
			  PRIMARY KEY (`id_belvg_samplemodule`),
			  UNIQUE  `BELVG_SAMPLE_UNIQ` (  `id_product` )
			) ENGINE='._MYSQL_ENGINE_.' DEFAULT CHARSET=utf8';

	if (!parent::install() OR 
		!$this->registerHook('displayAdminProductsExtra') OR
		!$this->registerHook('actionProductUpdate') OR
		!$this->registerHook('displayFooterProduct') OR
		!Configuration::updateValue('sample_module_textarea', '') OR
		!$this->runSql($sql)
	) {
		return FALSE;
	}

	return TRUE;
}

 

 

//Preparing data for the form
public function hookDisplayAdminProductsExtra($params) {
	$id_product = Tools::getValue('id_product');
	$sampleObj = Belvg_Sample::loadByIdProduct($id_product);
	if(!empty($sampleObj) && isset($sampleObj->id)){
		$this->context->smarty->assign(array(
			'belvg_textarea' => $sampleObj->textarea,
		));
	}

	return $this->display(__FILE__, 'views/admin/sample.tpl');
}

//Saving Data
public function hookActionProductUpdate($params) {
	$id_product = Tools::getValue('id_product');
	$sampleObj = Belvg_Sample::loadByIdProduct($id_product);
	$sampleObj->textarea = Tools::getValue('belvg_sample');
	$sampleObj->id_product = $id_product;

	if(!empty($sampleObj) && isset($sampleObj->id)){
		$sampleObj->update();
	} else {
		$sampleObj->add();
	}
}

Sample.tpl
{if isset($belvg_textarea)}
<!-- Belvg_SampleModule -->
<fieldset style="border:none;">
	<textarea name="belvg_sample" rows="10" cols="45">{$belvg_textarea}</textarea>
</fieldset>
<div class="clear"> </div>
<!-- /Belvg_SampleModule -->
{/if}

 

Par défaut, le nom du nouvel onglet coïncide avec le nom du module, donc, si nous n'avions pas changé quoi que ce soit notre onglet aurait le nom Belvg_samplemodule, ce qui n'est pas terrible. Pour résoudre ce problème, nous devons créer le fichier config.xml dans le dossier racine du module où displayName noeud définit le nom affiché.



<?xml version="1.0" encoding="UTF-8" ?>
<module>
	<name>belvg_samplemodule</name>
	<displayName><![CDATA[belvg Sample]]></displayName>
	<version><![CDATA[1.0.0]]></version>
	<description><![CDATA[Works with displayAdminProductsExtra and actionProductUpdate]]></description>
	<author><![CDATA[belVG]]></author>
	<tab><![CDATA[front_office_features]]></tab>
	<is_configurable>0</is_configurable>
	<need_instance>1</need_instance>
	<limited_countries></limited_countries>
</module>

 

Comme vous le voyez, il n'y a rien de compliqué ici. Vous avez juste besoin de comprendre l'algorithme et suivre les instructions:

  1. Créez un module et l'enregistrer dans les hooks suivant: displayAdminProductsExtra et actionProductUpdate. Il s'agit d'un nombre minimal de hooks requis pour la production des données BO et la sauvegarde des données.
  2. Créez une table pour stocker des données personnelles
  3. Créez une classe pour travailler avec ce tableau
  4. Créez des fichiers tpl pour mettre l'information dans le back-office et front-end
  5. Changez le nom de l'onglet dans le fichier config.xml

 

Ici vous pouvez télécharger le module Belvg_Sample.

  • Like 2
Link to comment
Share on other sites
Prestaspirit Newbie

Prestaspirit

Posted
Posted

Salut Valérie,

 

Et moi qui me suis fait chier à tout overrider la classe adminProductController juste pour créer cet onglet lol

 

Je regarderais mieux la liste des Hooks la prochaine fois, par contre j'ai pas compris l'intérêt de créer le fichier config.xml juste pour changer le nom de l'onglet, si on définit le bon nom directement dans la propriété "displayName" de la méthode construct de notre module le nom sera correct.

 

Merci à toi de partager ton savoir ;)

Franck

Link to comment
Share on other sites
  • 3 weeks later...
celinne Newbie

celinne

Posted
Posted

Salut Valérie,

 

Est ce que ce module est compatible avec la version 1.4 ?

J'ai créé les deux hooks et j'ai ajouté le module dans le dossier Modules mais lors de l'installation du module j'ai un message d'erreur que le module n'a pas été correctement installé! Et je n'ai pas un nouveau onglet!

 

Que peut être le problème?

Merci d'avance.

Link to comment
Share on other sites
  • 1 month later...
Kaby Newbie

Kaby

Posted
Posted

Hello !

 

Est-il possible d'ajouter des onglets sur d'autres éléments (fournisseurs par exemple) en suivant ce modèle. Le Hook semble dédié donc ça sera forcément plus compliqué mais sait-on jamais...

 

J'aimerai utiliser l'override des classe et controller Supplier plutôt que de créer un module et de le lier à cette entité, d'ou ma question.

 

Merci d'avance !

Link to comment
Share on other sites
  • 2 months later...
Prestapascher Newbie

Prestapascher

Posted
Posted

Bonjour,

 

débutant dans l'intégration prestashop, j'aurais besoin de vos lumières.

 

J'ai créé un site www.viaturbo.fr

 

J'ai installé un module pour la gestion de compatibilité véhicule ce qui me permet d'avoir un onglet avec un tableau des véhicules compatibles avec tel ou tel produit.

 

J'ai installé votre module (comme il est prêt à l'emploi et je ne me sentais de rentrer plus loin dans prestashop), votre module semble super pour ce que je souhaite faire et vous remercie par avance.

 

En effet je souhaite rajouter un onglet à côté de celui compatibilité qui s'intitulerai Ref OEM/Fabricant et dans lequel je mettrais tout simplement la liste des refs OEM et babricants compatible.

 

Si une âme charitable veut bien me dire pourquoi au lieu de me mettre un onglet cela me met juste un cadre en bas de page?

 

Merci encore par avance.

Link to comment
Share on other sites
  • 2 months later...
Rdev Newbie

Rdev

Posted
Posted

Bonjour Valérie Assetskaya

 

j'ai installé ce module, mais j'ai trouvé un problème si j'ajoute, modifie ou supprime une caractéristique le contenu du module sera supprimé, chaque fois que je modifie les caractéristiques d'un produit

 

Avez vous une idée

 

et j'ai une autre question est ce que on peut faire duplication de ce module

 

et merci

Link to comment
Share on other sites
  • 3 months later...
  • 2 weeks later...
cockpitinferno Newbie

cockpitinferno

Posted
Posted

bonjour, et merci pour ce module très bien.

j'ai un petit souci, je n'arrive pas à afficher le texte sous forme d'onglet, le texte d'affiche tout en bas de ma page. pourriez vous me dire comment faire pour que ca s'affiche à coté de 'en savoir plus"

voici la page:http://www.folie-bio.com/soin-des-mains-bio/1120-creme-pour-les-mains-orange-feeling-lavera.html

 

merci d'avance.

Link to comment
Share on other sites
cockpitinferno Newbie

cockpitinferno

Posted
Posted

j'ai réussi à modifier le fichier belvg_Sample.php et j'ai changé le hook pour hookDisplayProductTabContent

mais du coup ca me mets le contenu dans tous les onglets.

 

j'ai aussi essayé d'ajouter un onglet dans product.tpl

  {if $belvg_textarea}<li><a id="more_info_tab_data_sheet" href="#idTab11">{l s='ingredients'}</a></li>{/if}

avec ce contenu:

{if isset($belvg_textarea)}
    <ul id="idTab11" class="bullet">
<!-- Belvg_SampleModule -->
    <fieldset style="border:none;">
        <textarea name="belvg_sample" rows="10" cols="45">{$belvg_textarea}</textarea>
    </fieldset>{/if}

mais du coup j'ai le texte en double.

comment faire pour soit en passant par le hook n'avoir le texte que dans un seul onglet soit faire disparaitre le texte du module de départ (fichier sample.tpl) et ne garder que mon ajout dans product.tpl

 

merci

Link to comment
Share on other sites
  • 2 weeks later...
Valérie Assetskaya Newbie

Valérie Assetskaya

Posted
  • Author
Posted

j'ai réussi à modifier le fichier belvg_Sample.php et j'ai changé le hook pour hookDisplayProductTabContent

mais du coup ca me mets le contenu dans tous les onglets.

 

j'ai aussi essayé d'ajouter un onglet dans product.tpl

  {if $belvg_textarea}<li><a id="more_info_tab_data_sheet" href="#idTab11">{l s='ingredients'}</a></li>{/if}

avec ce contenu:

{if isset($belvg_textarea)}
    <ul id="idTab11" class="bullet">
<!-- Belvg_SampleModule -->
    <fieldset style="border:none;">
        <textarea name="belvg_sample" rows="10" cols="45">{$belvg_textarea}</textarea>
    </fieldset>{/if}

mais du coup j'ai le texte en double.

comment faire pour soit en passant par le hook n'avoir le texte que dans un seul onglet soit faire disparaitre le texte du module de départ (fichier sample.tpl) et ne garder que mon ajout dans product.tpl

 

merci

Bonjour,

 

Je suis désolée mais il est difficile de dire au regard d'ou vient la faute. On peut juste garantir que les modiffications décrites fonctionnent si on fait tout correctement.

 

Cordialement.

Link to comment
Share on other sites
  • 1 month later...
Fabien_ss2i Newbie

Fabien_ss2i

Posted
Posted

Bonjour et merci, grâce à votre module j'ai pu ajouter un onglet sur ma fiche produit coté front, cependant coté admin je voudrais un textarea type "tinymce" pour pouvoir mettre en forme mon texte.

Avez-vous une idée pour ajouter ceci ?

 

cordialement

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