[Resolu] Retour à la ligne et taille de police dans le nom d'un produit

[cyril_fr903]

Version prestashop: 1.7.8.8
Thème : classic

J'aurai voulu savoir si quelqu'un sait comment faire un saut de ligne dans un titre et changer la taille d'écriture?
En gros je voudrais faire un truc dans ce genre la.

Par exemple:
Nintendo Switch (taille 12px)
The Legend of Zelda : Breath of the Wild (taille 20px)


Ça donnerai un résultat de ce genre la:
https://www.faireparterie.fr/faire-part-de-mariage-portrait-romantique.html?diecut=D53


 

Edited April 17, 2023 by cyril_fr903 (see edit history)

[cyril_fr903]

Pour précision par rapport à ma question plus haut.
Afin de faire un retour à la ligne dans le nom d'un produit, j'ai ça qui fonctionne : {$product.name|replace:'/n':'<br>' nofilter}
Il suffit d'écrire le titre de votre produit et d'y ajouter "/n" à l'endroit où on veut faire le saut de ligne.


==> themes/classic/templates/catalog/product.tpl

Il suffit de remplacer cette ligne là :
<h1 class="h1">{block name='page_title'}{$product.name}{/block}</h1>

par

<h1 class="h1">{block name='page_title'}{$product.name|replace:'/n':'<br>' nofilter}{/block}</h1>

Et il faut faire pareil pour tout les {$product.name} du thème.



Bref, la question est plus de savoir, quelle méthode / astuce permettrai d'ajouter à ça des informations CSS ?
 

Edited April 14, 2023 by cyril_fr903 (see edit history)

[cyril_fr903]

Ne sachant pas si c'est techniquement possible de faire ce que j'avais prévu plus haut, je me suis tourné sur une autre approche.
Ajouter un champ perso, que je mettrai en "sous-titre" à mes pages produits




J'ai trouve ce tuto sur internet : https://www.inrage.fr/blog/comment-ajouter-nouveau-champ-produit-prestashop

Mais n'ayant jamais crée/installé de module (hors module officiel), j'ai tenté de suivre le tuto, mais sans succès.
Est ce que quelqu'un qui s'y connait un peu, pourrait m'aider, svp?


Je récapitule ci-dessous ce que j'ai fait:


Création d'un fichier: Product.tpl
qui j'ai mis dans le dossier ==> override/classes/Product.tpl
 

<?php
class Product extends ProductCore
{
  public $composition;

  public function __construct(
    $id_product = null,
    $full = false,
    $id_lang = null,
    $id_shop = null,
    Context $context = null
  ) {
    self::$definition['fields']['composition'] = array(
      'type' => self::TYPE_HTML,
      'lang' => false,
      'required' => false,
      'validate' => 'isCleanHtml'
    );

    parent::__construct($id_product, $full, $id_lang, $id_shop, $context);
  }
}

Création d'un dossier "composition" que j'ai mis dans le dossier /modules/

puis création d'un fichier composition.php
que j'ai mis dans: /modules/composition/composition.php

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

class Composition extends Module
{
  public function __construct()
  {
    $this->name = 'composition';
    $this->tab = 'others';
    $this->version = '1.0.0';
    $this->author = 'Pascal GAULT';
    $this->need_instance = 0;
    $this->ps_versions_compliancy = [
      'min' => '1.6',
      'max' => _PS_VERSION_
    ];
    $this->bootstrap = true;

    parent::__construct();

    $this->displayName = $this->l('Customize Admin Product');
    $this->description = $this->l('Allows us to add others fields to product');

    $this->confirmUninstall = $this->l('Are you sure you want to uninstall?');
  }
}

public function install() {
    if (!parent::install()
    || !$this->_installSql()
    || !$this->registerHook('displayAdminProductsMainStepLeftColumnMiddle') ) {
        return false;
    }

    return true;
}

public function uninstall() {
   return parent::uninstall() && $this->_unInstallSql();
}
protected function _installSql() {
    $sqlInstall = "ALTER TABLE " . _DB_PREFIX_ . "product ADD composition TEXT NULL";
    $returnSql = Db::getInstance()->execute($sqlInstall);
    return $returnSql;
}
protected function _unInstallSql() {
    $sqlInstall = "ALTER TABLE " . _DB_PREFIX_ . "product DROP composition";
    $returnSql = Db::getInstance()->execute($sqlInstall);

    return $returnSql;
}


public function hookDisplayAdminProductsMainStepLeftColumnMiddle($params) {
    $product = new Product($params['id_product']);

    $this->context->smarty->assign(array(
      'composition' => $product->composition,
    ));

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

Et enfin, création d'un fichier : extra_fields.tpl
que j'ai mi dans : /modules/composition/views/hook/admin/product/extra_fields.tpl

<div class="form-group">
  <h4>Composition</h4>
  <div class="translations tabbable">
    <div class="translationsFields tab-content bordered">
      <div class="tab-pane translation-label-fr active">
        <textarea class="rte autoload_rte" name="composition">
          {$composition}
        </textarea>
      </div>
    </div>
  </div>
</div>

Je ne sais pas si jusque là j'ai bien compris le tuto mais impossible de retrouver mon module dans prestashop pour l'installer.

[Ariane Web et Plus]

Bonjour

Ca ne fonctionne pas du tout comme ca.

Soit vous créez un module il sera à installer dans les modules

Soit vous modifier un fichier tpl (comme votre product.tp) et il est à mettre dans votre thème.

Les overides concernent des class qui sont en PHP

Sur l'exemple que vous montrez il y a une catégorie et un titre.

Sinon oui si vous souhaitez deux mises en page il faut faire 2 champs pour deux titres.

 

 

 

[cyril_fr903]

Une méthode ou une autre, peut m'importe.Je vous avouerai que dans le tuto que j'ai trouvé (voir lien), c'était une création de module, mais comme vous me le dites, ça ne fonctionne pas du tout comme ça.
Si vous pouviez m'expliquer un peu comment ça fonctionne, je pourrais essayé.
Après peut être que c'est plus simple d'ajouter direct dans la fiche produit une entrée avec un champ dédié en bdd ?

[Mediacom87]

Bonjour,

https://stackoverflow.com/questions/8355745/break-explode-string-in-smarty

[cyril_fr903]

Parfait, ça fonctionne.

Pour ceux qui auront besoin à l'avenir voici le morceau de code.
themes/classic/templates/catalog/product.tpl

J'ai changé ça:

        <div class="col-md-6">
          {block name='page_header_container'}
            {block name='page_header'}
              <h1 class="h1">{block name='page_title'}{$product.name}{/block}</h1>
            {/block}
          {/block}

En ça:

          {block name='page_header_container'}
            {block name='page_header'}
			{assign var=nomproduit value="|"|explode: $product.name}
              <h1 class="h1">{block name='page_title'}
				<div class="nomproduit"> 
					<div id="nomproduit0">{$nomproduit[0]}</div> 
					<div id="nomproduit1">{$nomproduit[1]}</div>
				<div>
			  {/block}</h1>
            {/block}
          {/block}
		  

Et j'ai ajouté ça à mon CSS:

/*Mise en forme du titre des produits*/
#nomproduit0{text-align:center; font-size: 12px; padding: 5px;}
#nomproduit1{text-align:center; font-size: 25px; padding: 5px;text-transform: none;}
.nomproduit {padding: 5px; font-weight: 300;}

Je ne sais pas sui le code est parfait (je ne suis pas développeur) mais je bidouille juste un peu et apprend sur le tas, mais en tout cas ça marche et j'ai le rendu final voulu.

[Mediacom87]

Bonjour,

ne mettez pas de div dans votre H1.

Encapsulez juste le second élément de la chaine obtenu par un <span>

<span>{$nomproduit[1]}</span>

Soit

<h1 class="h1">{block name='page_title'}{$nomproduit[0]}<br><span>{$nomproduit[1]}</span>{/block}</h1>

j'ai ajouté un <br> tout simple, mais vous pouvez gérer le retour à la ligne directement en css dans le span.

[prestaotop]

Bonjour @cyril_fr903, bravo pour vos efforts ! 

Pourriez-vous marquer le post comme résolu pour la communauté ?

Merci.

[Mediacom87]

[cyril_fr903]

C'est fait, j'ai mis en résolu.
Merci pour l'information concernant le div dans la balise H1.

Du coup afin de garder la mise en forme, j'ai mis:

themes/classic/templates/catalog/product.tpl

{block name='page_header_container'}
            {block name='page_header'}
			{assign var=produitnom value="|"|explode: $product.name}
              <h1 class="h1">{block name='page_title'}
				<span class="fiche-produitnom"> 
					<span id="fiche-produitnom0">{$produitnom[0]}</span> 
					<span id="fiche-produitnom1">{$produitnom[1]}</span>
				</span>
			  {/block}</h1>
            {/block}
          {/block}

Et dans le CSS:

/*Mise en forme du nom des produits dans la fiche produit*/
#fiche-produitnom0{display: block; text-align:center; font-size: 12px; padding: 5px; letter-spacing : 2px; font-weight: 300;}
#fiche-produitnom1{display: block; text-align:center; font-size: 34px; padding-top: 5px; text-transform: none; font-weight: 300; letter-spacing : 2px;}
.fiche-produitnom {display: block; padding: 30px; border-bottom: 1px solid #d5d5d5;}

J'espère que c'est bon?

[Ariane Web et Plus]

L'approche est interessante mais qu'est ce que vous mettez coté back-office ? A quoi correspond $nomproduit[0] et $nomproduit[1]

 

Edited April 18, 2023 by Ariane Web et Plus (see edit history)

[Mediacom87]

Il y a 2 heures, Ariane Web et Plus a dit :

L'approche est interessante mais qu'est ce que vous mettez coté back-office ? A quoi correspond $nomproduit[0] et $nomproduit[1]

 

Dans le titre, il met un truc du style :

La blague de Toto|Pour les nuls

 

[cyril_fr903]

Merci à tous pour votre aide.

 $nomproduit[0] et $nomproduit[1]
--> C'est le nom du produit (titre du produit) sur la fiche produit. Et j'ai fait peu ou prou le même code avec un CSS un peu différent pour la miniature/product.tpl

Ce que j'ai trouvé intéressant avec l'approche que tu m'as proposé, c'est que la méthode est vraiment facile, peut intrusive, flexible et adaptable à tous les utilisateurs.

En plus, il suffit d'ajouter un :
<span id="fiche-produitnom0">{$produitnom[0]}</span>
<span id="fiche-produitnom1">{$produitnom[1]}</span>
<span id="fiche-produitnom2">{$produitnom[2]}</span>
<span id="fiche-produitnom3">{$produitnom[3]}</span>
<span id="fiche-produitnom4">{$produitnom[4]}</span>
...etc...

Si on veut mettre sur 3 ligne ou plus avec un CSS propre à chaque ligne.
Bref, merci à vous pour l'aide , encore une fois.