[RESOLU]Difficultes a customizer les tpl

ptityop · September 10, 2022

Bonjour,

Je rencontre quelques difficultés très frustrantes en modifiant les fichiers Tpl. Nous avons un invoice modifié et bien qu'ayant reussi 90% des modifications voulues il en reste 10% qui me font galérer sérieusement et dont je ne comprennent pas la logique alors qu'il s'agit de simple html.

Par exemple, je suis en train de modifier invoice.summery-tab.Tpl, j'y ai mis 2 tables HTML et pour une raison obscure, il m'est impossible d'appliquer une marge entre les 2, j'ai beau mettre le style sur la table, ou dans le css a part, cela ne marche simplement pas,

j'ai tenté de mettre un <br> , entourer les tables d'un div , rajouter une table entre les 2 , et là c'est pire, tout disparaît .... je ne comprends pas ... le fichier invoice.tpl lui n'est quasiment pas retouché, j'ai juste change l'ordre de certaines <tr> .

Je vous joint mon code et une impression d'écran des 2 tables que je tente de séparer en espérant que kkun puisse m'éclairer sur la raison pour laquelle une simple modification de ce genre peut causer autant de pb. En vous remerciant d'avance

<table id="summary-tab" margin="1" class="white" width="100%">
	
	<tr >
        <td>{l s='Numéro de Facture: ' pdf='true'}<br /><strong>{$title|escape:'html':'UTF-8'}</strong></td>
        <td>{l s='Date de facture: ' pdf='true'}<br /><strong>{$date|escape:'html':'UTF-8'}</strong></td>
        <td>{l s='Numéro de client: ' pdf='true'}<strong>{$order->id_customer}</strong></td>
      </tr>
</table>
<table id="summary-tab" width="100%"  class="white" width="100%">
	<tr>
          <td class="border-bottom1">{l s=' Date de commande: ' pdf='true'}<strong>{dateFormat date=$order->date_add full=0}</strong></td></tr><tr>
          <td class="border-bottom1">{l s=' Référence de commande: ' pdf='true'}<strong>{$order->getUniqReference()}</strong></td></tr><tr>
          <td class="border-bottom1">{l s=' Votre référence: ' pdf='true'}</td></tr><tr>
          <td class="border-bottom1">{l s=' Notre N° de TVA: ' pdf='true'} <strong>CHE-230.482.509</strong></td>
</tr>
</table>

Edited September 11, 2022 by ptityop (see edit history)

kerlin · September 11, 2022

Bonjour, déjà faut pas 2 id identiques (table id="summer-tab"). Un id doit être unique. Ensuite si on veut ajouter du style dans le fichier tpl et pas dans le css il faut mettre style="margin: 1px;".

ptityop · September 11, 2022

Merci pour la réponse. Même en mettant des id différent et en mettant le style, cela ne marche pas, j’ai vraiment tout tenté, il y a autre chose qui bloque.

Pourquoi si je rajoute une table entre les 2, tout disparait ... c'est aussi etrange comme comportement

Edited September 11, 2022 by ptityop (see edit history)

kerlin · September 11, 2022

J'ai copié le code dans Notepad (ce qui explique que les données n'y soient pas)

et voici le code HTML (j'ai dû ajouter aussi les bordures, n'ayant pas la feuille de style)

<table id="summary-tab-1" style="border:1px solid #000000;margin: 0 auto 5px;max-width:600px;" class="white" width="100%">
	
	<tr >
        <td>{l s='Numéro de Facture: ' pdf='true'}<br /><strong>{$title|escape:'html':'UTF-8'}</strong></td>
        <td>{l s='Date de facture: ' pdf='true'}<br /><strong>{$date|escape:'html':'UTF-8'}</strong></td>
        <td>{l s='Numéro de client: ' pdf='true'}<strong>{$order->id_customer}</strong></td>
      </tr>
</table>
<table id="summary-tab-2"  style="border: 1px solid #000000;max-width:600px;margin:auto;" class="white" width="100%">
	<tr>
          <td class="border-bottom1">{l s=' Date de commande: ' pdf='true'}<strong>{dateFormat date=$order->date_add full=0}</strong></td></tr><tr>
          <td class="border-bottom1">{l s=' Référence de commande: ' pdf='true'}<strong>{$order->getUniqReference()}</strong></td></tr><tr>
          <td class="border-bottom1">{l s=' Votre référence: ' pdf='true'}</td></tr><tr>
          <td class="border-bottom1">{l s=' Notre N° de TVA: ' pdf='true'} <strong>CHE-230.482.509</strong></td>
</tr>
</table>

kerlin · September 11, 2022

quelle version de PS ? que je teste sur un vrai fichier tpl (envoyez aussi le vôtre, tiens, que je vérifie)

kerlin · September 11, 2022

peut-être aussi un lien vers le site ?

ptityop · September 11, 2022

Cest tres sympa ... Mais je crains que cela ne marche tjrs pas, le style de ces tables ne semble pas etre dans invoice.style-tab.tpl ...je joins la feuille de style , je n'y touche quasiment pas, j'ai pourtant l'habitude mais là je sèche totalement

{assign var=color_header value="#F0F0F0"}
{assign var=color_border value="#000000"}
{assign var=color_border_lighter value="#CCCCCC"}
{assign var=color_line_even value="#FFFFFF"}
{assign var=color_line_odd value="#FFFFFF"}
{assign var=font_size_text value="9pt"}
{assign var=font_size_header value="9pt"}
{assign var=font_size_product value="8pt"}
{assign var=height_header value="20px"}
{assign var=table_padding value="4px"}

<style>
	table, th, td {
		margin: 0!important;
		padding: 0!important;
		vertical-align: middle;
		font-size: {$font_size_text};
		white-space: nowrap;
	}

	table.product {
		border: 1px solid {$color_border};
		border-collapse: collapse;
	}

	table#addresses-tab tr td {
		font-size: large;
	}

	table#summary-tab {
		padding: {$table_padding};
		border: 1pt solid {$color_border};
		
	}

	table#total-tab {
		padding: {$table_padding};
		border: 1pt solid {$color_border};
	}
	table#note-tab {
		padding: {$table_padding};
		border: 1px solid {$color_border};
	}
	table#note-tab td.note{
		word-wrap: break-word;
	}
	table#tax-tab {
		padding: {$table_padding};
		border: 1pt solid {$color_border};
	}
	table#payment-tab,
	table#shipping-tab {
		padding: {$table_padding};
		border: 1px solid {$color_border};
	}

	th.product {
		border-bottom: 1px solid {$color_border};
		background-color:white;
	}

	tr.discount th.header {
		border-top: 1px solid {$color_border};
	}

	tr.product td {
		border-bottom: 1px solid {$color_border_lighter};
	}

	tr.color_line_even {
		background-color: {$color_line_even};
	}

	tr.color_line_odd {
		background-color: {$color_line_odd};
	}

	tr.customization_data td {
	}

	td.product {
		vertical-align: middle;
		font-size: {$font_size_product};
	}

	th.header {
		font-size: {$font_size_header};
		height: {$height_header};
		background-color: {$color_header};
		vertical-align: middle;
		text-align: left;
		font-weight: bold;
	}

	th.header-right {
		font-size: {$font_size_header};
		height: {$height_header};
		background-color: {$color_header};
		vertical-align: middle;
		text-align: right;
		font-weight: bold;
	}

	th.payment,
	th.shipping {
		background-color: {$color_header};
		vertical-align: middle;
		font-weight: bold;
	}

	th.tva {
		background-color: {$color_header};
		vertical-align: middle;
		font-weight: bold;
	}

	tr.separator td {
		border-top: 1px solid #000000;
	}

	.left {
		text-align: left;
	}

	.fright {
		float: right;
	}

	.right {
		text-align: right;
	}

	.center {
		text-align: center;
	}

	.bold {
		font-weight: bold;
	}

	.border {
		border: 1px solid black;
	}

	.no_top_border {
		border-top:hidden;
		border-bottom:1px solid black;
		border-left:1px solid black;
		border-right:1px solid black;
	}

	.grey {
		background-color: {$color_header};

	}

	/* This is used for the border size */
	.white {
		background-color: #FFFFFF;
	}

	.big,
	tr.big td{
		font-size: 110%;
	}
	
	.small, table.small th, table.small td {
		font-size:small;
	}
	.padding {
	padding: 5px;
	}
	.margin-bottom10 {
	margin-bottom: 10px;
	}
	.border-bottom1 {
	border-bottom: solid black 1px;
	}

</style>

ptityop · September 11, 2022

Je suis sur 1.7.8.5, je vous joint mon fichier invoice.tpl, que je n'ai pas touche pour cette section, en vous remerciant d'avance !

invoice.style-tab.tpl invoice.summary-tab.tpl invoice.tpl

kerlin · September 11, 2022

Déjà au début il y a marge:0!important pour table. Ce qui signifie qu'il ne prendra pas en compte une marge différente

kerlin · September 11, 2022

<table id="summary-tab" margin="1" class="white" width="100%"  style="margin: 1px;".>

il y a un point après " (juste pour info 🙂 )

Edited September 11, 2022 by kerlin (see edit history)

ptityop · September 11, 2022

et bien .... tjrs pas, j'enleve le margin Important, et corrige le point ... tjrs pareil, rien ne se passe

<table id="summary-tab" margin="1" class="white" width="100%"  style="margin-bottom: 10px;">
	
	<tr >
        <td>{l s='Numéro de Facture: ' pdf='true'}<br /><strong>{$title|escape:'html':'UTF-8'}</strong></td>
        <td>{l s='Date de facture: ' pdf='true'}<br /><strong>{$date|escape:'html':'UTF-8'}</strong></td>
        <td>{l s='Numéro de client: ' pdf='true'}<strong>{$order->id_customer}</strong></td>
      </tr>
</table>
<table id="summary-tab2" width="100%"  class="white" width="100%">
	<tr>
          <td class="border-bottom1">{l s=' Date de commande: ' pdf='true'}<strong>{dateFormat date=$order->date_add full=0}</strong></td></tr><tr>
          <td class="border-bottom1">{l s=' Référence de commande: ' pdf='true'}<strong>{$order->getUniqReference()}</strong></td></tr><tr>
          <td class="border-bottom1">{l s=' Votre référence: ' pdf='true'}</td></tr><tr>
          <td class="border-bottom1">{l s=' Notre N° de TVA: ' pdf='true'} <strong>CHE-230.482.509</strong></td>
</tr>
</table>

Ca me rend fou 🙂 on peut se tutoyer sans pb !

ptityop · September 11, 2022

C'est comme pourquoi tout disparaît en rajoutant une table ou un div entre les 2 tables .... bizarre ça aussi

ptityop · September 11, 2022

Je me demande si c'est pas dans HTMLTemplateInvoice.php qu'il faut chercher, mais je vois pas ou ..

kerlin · September 11, 2022

dans le php ?? je ne vois pas pourquoi. Je suis en train de bosser sur un site avec la même version. Je vais faire le test

ptityop · September 11, 2022

Je disais dans le php, car c'est là que se trouve par exemple les mesures tu tableau des produits ... Merci en tout cas de prendre le tps de tester. J'attends le retour avec impatience, si tu me dis que ca marche sur ton site alors le ca va être encore plus complique de comprendre 🙂

kerlin · September 11, 2022

j'ai ouvert le fichier original de mon thème. En fait, pourquoi créer 2 tables ? Il y a 2 <tr>. Faut essayer en rajoutant un style="margin-bottom:10px;" au premier

Edited September 11, 2022 by kerlin (see edit history)

ptityop · September 11, 2022

Même en appliquant une marge sur le <tr> rien ne se passe ... j’ai vraiment tout tenté ... ca fonctionne sur ton site ? Ou c pareil ?

kerlin · September 11, 2022

<table id="summary-tab" class="white" width="100%">
	
	<tr>
        <td>{l s='Numéro de Facture: ' pdf='true'}<br /><strong>{$title|escape:'html':'UTF-8'}</strong></td>
        <td>{l s='Date de facture: ' pdf='true'}<br /><strong>{$date|escape:'html':'UTF-8'}</strong></td>
        <td>{l s='Numéro de client: ' pdf='true'}<strong>{$order->id_customer}</strong></td>
      </tr>
</table>
<table id="summary-tab2" width="100%"  class="white">
	<tr>
          <td class="border-bottom1">{l s=' Date de commande: ' pdf='true'}<strong>{dateFormat date=$order->date_add full=0}</strong></td></tr><tr>
          <td class="border-bottom1">{l s=' Référence de commande: ' pdf='true'}<strong>{$order->getUniqReference()}</strong></td></tr><tr>
          <td class="border-bottom1">{l s=' Votre référence: ' pdf='true'}</td></tr><tr>
          <td class="border-bottom1">{l s=' Notre N° de TVA: ' pdf='true'} <strong>CHE-230.482.509</strong></td>
</tr>
</table>

Ci-dessus le code des tables

Ci-dessous le code dans invoice-style-tab.tpl

{assign var=color_header value="#F0F0F0"}
{assign var=color_border value="#000000"}
{assign var=color_border_lighter value="#CCCCCC"}
{assign var=color_line_even value="#FFFFFF"}
{assign var=color_line_odd value="#F9F9F9"}
{assign var=font_size_text value="9pt"}
{assign var=font_size_header value="9pt"}
{assign var=font_size_product value="9pt"}
{assign var=height_header value="20px"}
{assign var=table_padding value="4px"}
{assign var=table_padding_bottom value="50px"}


<style>
	table, th, td {
		margin: 0!important;
		padding: 0!important;
		vertical-align: middle;
		font-size: {$font_size_text};
		white-space: nowrap;
	}

	table.product {
		border: 1px solid {$color_border};
		border-collapse: collapse;
	}

	table#addresses-tab tr td {
		font-size: large;
	}

	table#summary-tab {
		padding: {$table_padding};
		padding-bottom: {$table_padding_bottom};
	}

Le padding fonctionne, lui. Et à tout hasard j'ai retiré la bordure sous numéro de facture

Edited September 11, 2022 by kerlin (see edit history)

ptityop · September 11, 2022

Oui mais le resultat n'est pas le même ... C’est vraiment le margin qu'il faut arriver à faire fonctionner ....sur le 1.6 ca marche tres bien ... En tt cas ca me rassure de ne pas être le seul a ne pas y arriver ... c'est dingue cette histoire !

kerlin · September 11, 2022

le premier screen, c'est le résultat recherché ?

ptityop · September 11, 2022

oui

kerlin · September 11, 2022

alors avec les div ça fonctionne. Le code (j'ai remplacé id par class pour le cas où il y aurait un css ailleurs. Et donc les 2 tables peuvent alors avoir la même class)

<div>
<table class="summary-tab"  width="100%">
	
	<tr>
        <td class="border-right1">{l s='Numéro de Facture: ' pdf='true'}<br /><strong>{$title|escape:'html':'UTF-8'}</strong></td>
        <td class="border-right1">{l s='Date de facture: ' pdf='true'}<br /><strong>{$date|escape:'html':'UTF-8'}</strong></td>
        <td>{l s='Numéro de client: ' pdf='true'}<strong>{$order->id_customer}</strong></td>
      </tr>
</table>
</div>
<div>
<table class="summary-tab" width="100%" >
	<tr>
          <td class="border-bottom1">{l s=' Date de commande: ' pdf='true'}<strong>{dateFormat date=$order->date_add full=0}</strong></td></tr><tr>
          <td class="border-bottom1">{l s=' Référence de commande: ' pdf='true'}<strong>{$order->getUniqReference()}</strong></td></tr><tr>
          <td class="border-bottom1">{l s=' Votre référence: ' pdf='true'}</td></tr><tr>
          <td>{l s=' Notre N° de TVA: ' pdf='true'} <strong>CHE-230.482.509</strong></td>
</tr>
</table>
</div>

le css dans le fichier style-css

{assign var=color_header value="#F0F0F0"}
{assign var=color_border value="#000000"}
{assign var=color_border_lighter value="#CCCCCC"}
{assign var=color_line_even value="#FFFFFF"}
{assign var=color_line_odd value="#F9F9F9"}
{assign var=font_size_text value="9pt"}
{assign var=font_size_header value="9pt"}
{assign var=font_size_product value="9pt"}
{assign var=height_header value="20px"}
{assign var=table_padding value="4px"}



<style>
div {
    padding: 0;
    margin:0;
    white-space:nowrap;
}
	table, th, td {
	   margin: 0!important;
		padding: 0!important;
		vertical-align: middle;
		font-size: {$font_size_text};
	
	}

	table.product {
		border: 1px solid {$color_border};
		border-collapse: collapse;
	}

	table#addresses-tab tr td {
		font-size: large;
	}

	table.summary-tab {
		padding: {$table_padding};
	    	border: 1px solid {$color_border};
	    	
	}
	table.summary-tab .border-bottom1 {
	    border-bottom: 1px solid grey;
	}
 
   table.summary-tab .border-right1 {
       border-right: 1px solid grey;
   }

ptityop · September 11, 2022

Bravooooo !!!! Enfin !! Bien vu ! un grand merci ... je ferai avec des div la prochaine fois alors ! Encore un grand merci !

kerlin · September 11, 2022

y a plus qu'à mettre en résolu 😉

ptityop · September 11, 2022

Je fais ca comment ?

kerlin · September 11, 2022

il faut éditer le premier post et ajouter [RESOLU] dans le titre

ptityop · September 11, 2022

c fait

[RESOLU]Difficultes a customizer les tpl

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in