Comment ajouter du contenu en partie centrale sur la liste des produits ?

[easy-it]

Bonjour,

J'utilise PS 1.6.14 et le thème default-bootstrap.

J'essaye d'ajouter du contenu dans la partie centrale de ma liste produits sur 3 colonnes (à gauche l'image / au centre du contenu / à droite le prix, les boutons ajout au panier, détails, wishlist, comparateur).

Le contenu que je veux ajouter sont les caractéristiques du produit.

J'ai modifié le template product-list.tpl en conséquence.

Sauf que ce contenu est bien présent dans le code source de la page HTML mais que le système Bootstrap avec le CSS dynamique (fichier product_list.scss dans le répertoire saas) semble rendre ce contenu invisible.

 

Bout de code HTML généré :

<!-- Features display -->
<p class="product-features">
<!-- Data sheet -->
<section class="page-product-box">
<table class="table-data-sheet">
<tr class="even">
<td>Couleur</td><td>Blanc</td>
</tr>
<tr class="odd">
<td>Contenance</td>
<td>0.5 l</td>
</tr>
<tr class="even">
<td>Millésime</td>
<td>2014</td>
</tr>
<tr class="odd">
<td>Appellation</td>
<td>IGP Pays d'Hérault</td>
</tr>
</table>
</section>
<!--end Data sheet -->
</p>

Dans le fichier product_list.scss

ul.product_list.list {
    > li {
.....
    .product-features {
      border:1px solid red;
    }

Résultat : rien ne s'affiche.

Une idée ?

Merci de vos retours.

 

 

 

 

[easy-it]

Autre info que j'ai oublié : le code source s'affiche quand on utilise la fonction Afficher le code source de la page. Par contre, si j'utilise Firebug, je ne retrouve pas la moindre ligne de code HTML me concernant.

Vraiment je nage complètement entre les différents interactions Bootstrap / Smarty / JQuery et autres choses appelées pour générer le HTML de la page.

[easy-it]

Same topic in English :

 

Hello,

I use PS 1.6.14 and theme - default bootstrap .

I try to add content to the central part of my list products on 3 columns (left image / center content / right price, add to cart buttons , details, wishlist , comparator) .

The content I want to add are the characteristics of the product.

I changed the template product- list.tpl accordingly.

Except that this content is present in the source code of the HTML page , but the bootstrap system with dynamic CSS ( saas product_list.scss file in the directory) seems to make this invisible content.

After generated HTML :

<!-- Features display -->
<p class="product-features">
<!-- Data sheet -->
<section class="page-product-box">
<table class="table-data-sheet">
<tr class="even">
<td>Couleur</td><td>Blanc</td>
</tr>
<tr class="odd">
<td>Contenance</td>
<td>0.5 l</td>
</tr>
<tr class="even">
<td>Millésime</td>
<td>2014</td>
</tr>
<tr class="odd">
<td>Appellation</td>
<td>IGP Pays d'Hérault</td>
</tr>
</table>
</section>
<!--end Data sheet -->
</p>

Result: nothing is displayed .

An idea?

Thank you for your feedback .

[damien3000]

hello,

 

as-tu résolu ton problème ?

 

je suis dans la même situation, avec le même problème mais en pire car le html généré (visible également uniquement dans le code source) n'est pas complet dans mes essais !

 

si c'est possible, je suis preneur du code que tu as ajouté à product-list.tpl, et de la solution pour l'affichage.

 

merci !

 

note : il y a une piste pour l'affichage par là : https://www.prestashop.com/forums/topic/436537-impossible-de-modifier-product-listtpl/ mais en l'état ça n'a rien résolu pour moi...

Edited August 21, 2015 by damien3000 (see edit history)

[damien3000]

alors j'ai trouvé comment afficher les éléments grâce à la piste du lien ci-dessus : il ajouter des lignes dans global.js pour afficher les caractéristiques.

 

évidemment pas n'importe où, mais en fonction de là où tu veux afficher ton texte : en fait les différents éléments (div, table, etc.) sont appelés et positionnés par le global.js, qui crée la mise en page (ce qui permet les varitions en fonction de la taille des écrans).

 

par ex. je voulais que le tableau apparaisse dans la troisième colonne, au dessus du prix, j'ai donc repéré via firebug la class de la div, soit <div class="right-block col-xs-4 col-xs-12 col-md-4">

 

puis trouvé cette div dans global.js, et ajouté dessous le code, ce qui donne :

html += '<div class="right-block col-xs-4 col-xs-12 col-md-4"><div class="right-block-content row">';
                
//ajout du code nécessaire, dans mon cas :
html += '<table class="table-data-sheet">'+ $(element).find('.table-data-sheet').html() + '</table>';
                    
//retour au code d'origine                
var price = $(element).find('.content_price').html();       // check : catalog mode is enabled

(et pour ce qui est de la génération du tableau, c'est moi qui avait bêtement mal copié le code...)

 

damien

Edited August 22, 2015 by damien3000 (see edit history)