Jump to content

Recommended Posts

Bonjour,

je suis sur presta 1.7.2.4

sur mes fiches produits j'ai une ligne "code produit"  qui correspond au. champs référence dans l'onglet "essentiel" du back office.

J'ai renseigné les références pour chaque déclinaisons.

En front la référence ne change pas suivant la déclinaison.

 

Si je ne met rien en back office dans le champ référence dans l'onglet "essentiel" du back office,
cela me fait disparaitre la ligne "code produit" en front.
 

je n'arrive pas à afficher les références pour chaque  déclinaisons...

un bug de presta ou j'ai mal configurer le back  ?

Share this post


Link to post
Share on other sites

Pour info: 1.7 = max de bugs, si vous voulez vendre, c'est 1.6 maxi^^

Share this post


Link to post
Share on other sites

La solution c'est d'utiliser la dernière 1.6 sauf si vous avez décidé de perdre tout votre temps à essayer de corriger les bugs de cette 1.7.

Share this post


Link to post
Share on other sites

Bonjour Mikealkeal, avez-vous trouvé une solution ? Je cherche la même chose (et le choix de la version de PS n'étant pas de mon fait, je suis obligée de faire avec ... ceci pour Eolia ;- )

Share this post


Link to post
Share on other sites

Bonjour,

Voici une petite contribution pour faire avancer. Dans presta 1.7.5.2, on retrouve la variable de la référence produit dans le fichier /themes/MONTHEME/templates/catalog/_partials/product-details.tpl

Cette variable est {$product.reference_to_display}

Si on la laisse telle quelle dans le thème d'origine, elle se change seule lorsque l'on change de déclinaison. Problème, l'affichage est dans l'onglet "Détail produit" et il faut cliquer sur cet onglet pour voir la référence changer. Ca peut convenir à certains, mais pour ma part j'aimerais que ça soit toujours affiché, meme sans aller voir dans un onglet.

Si on copie la variable directement dans prodcut.tpl alors ça s'affiche bien, mais ça ne change pas touts seul lors du changement de déclinaison. Pour que ça change il faut rajouter le code complet suivant dans product.tpl :

            <div id="product-details">
              {block name='product_reference'}
                {if isset($product.reference_to_display)}
                  <div class="product-reference">
                    <label class="label">{l s='Reference' d='Shop.Theme.Catalog'} </label>
                    <span itemprop="sku">{$product.reference_to_display}</span>
                  </div>
                {/if}
              {/block}                
            </div>    

Avec ce code, si on change de déclinaison, alors la référence change bien. MAIS ATTENTION, en changeant de déclinaisons, ça nous rajoute aussi automatiquement au même endroit (la div product-details) les autres données spécifiques à la déclinaison (comme le fabriquant ou le code ISBN par exemple). Si on ne veut jamais ces valeurs, alors on peut toutes les supprimer de product-details.tpl. Si on veut les conserver, alors il vaut mieux carrément copier tout le contenu de product-details.tpl, dans la page product.tpl (et supprimer l'appel à cette page si on ne la veut plus dans l'onglet :                

				 {block name='product_details'}
                   {include file='catalog/_partials/product-details.tpl'}
                 {/block}

 

Si vous copiez tout le contenu,  depuis product-details.tpl, alors dans la div product-details, pensez à supprimez la classe fade qui a pour effet de masquer le contenu.

 

Share this post


Link to post
Share on other sites

David, ta méthode fonctionne !

Par contre, elle perturbe l'affichage de l'onglet Détails du produit : après mise en place de la modif, son contenu n'apparaît plus quand on clique sur son onglet (logique a priori à cause de la suppression de la classe fade

Share this post


Link to post
Share on other sites

Salut Ben,

Peux-tu me préciser ce que tu cherches à faire précisément ? Si je comprends bien, tu veux extraire la référence de l'onglet, faire en sorte qu'elle change lorsqu'on change de déclinaison, et garder le reste des champs dans l'onglet, c'est bien ça ?

 

 

Share this post


Link to post
Share on other sites

En fait, je cherche à faire en sorte que la référence, comme le prix, se mette à jour automatiquement lors de la sélection d'une déclinaison : 

1920584072_Annotation2019-06-27110740.jpg.67bc3b18584d4f5bd5b8fdfe821dc7ce.jpg

 

Ce qui fonctionne bien après la mise en place de ta modif. Mais la suppression de la classe fade dans le fichier product-details.tpl fait que le contenu de l'onglet Détails produits n'apparaît plus au clic : 

1593215098_Annotation2019-06-27111126.jpg.9ded01f41b979bcb45be3bb407d8e84d.jpg

 

Tu peux constater ce bug en live ici

Mais après avoir parcouru le forum, il semble que le pb d'affichage de cette référence de déclinaison dans product.tpl soit connu depuis la version 1.7 et toujours non résolu 😕...

Ton contournement est la méthode qui se rapproche le plus de la résolution de ce bug (après mes recherches, non exhaustives :))

Share this post


Link to post
Share on other sites

Ok. Le fonctionnement de prestashop est le suivant :

Lorsque l'on choisit une autre déclinaison, il met à jour la div qui a pour id product-details. Dans cette div, il remet tout le contenu du fichier product-details.tpl. En attendant de trouver une méthode plus "propre", ce que je propose, c'est de mettre dans le fichier product-details.tpl tout le contenu (celui que l'on veut hors de l'onglet, et celui que l'on veut à l'intérieur de l'onglet). Sauf que l'on va séparer ce contenu dans 2 div différentes.

Ainsi, que l'on soit dans le détail de la page, ou dans l'onglet tout le contenu sera chargé normalement. Mais en css, on va masquer ce qui nous intéresse pas. Lorsque l'on est dans la page, on va masquer le contenu de l'onglet. Et lorsque l'on est dans l'onglet, on va masquer le contenu de la page.

Concrètement, dans le fichier product-details.tpl on va laisser toutes les classes d'origine sur la div product-details, mais on rajoute 2 divs avec les classes respectives suivantes

product-detail-on-page et product-detail-on-tab

Ce qui donne pour tout le fichier :
 

<div class="tab-pane fade{if !$product.description} in active{/if}"
     id="product-details"
     data-product="{$product.embedded_attributes|json_encode}"
     role="tabpanel"
  >
  <!-- Dans cette partie, on conserve tous les champs que l'on veut extraire de l'onglet -->
  <div class="product-detail-on-page">
	  {block name='product_reference'}
		{if isset($product_manufacturer->id)}
		  <div class="product-manufacturer">
			{if isset($manufacturer_image_url)}
			  <a href="{$product_brand_url}">
				<img src="{$manufacturer_image_url}" class="img img-thumbnail manufacturer-logo" alt="{$product_manufacturer->name}">
			  </a>
			{else}
			  <label class="label">{l s='Brand' d='Shop.Theme.Catalog'}</label>
			  <span>
				<a href="{$product_brand_url}">{$product_manufacturer->name}</a>
			  </span>
			{/if}
		  </div>
		{/if}
		{if isset($product.reference_to_display) && $product.reference_to_display neq ''}
		  <div class="product-reference">
			<label class="label">{l s='Reference' d='Shop.Theme.Catalog'} </label>
			<span itemprop="sku">{$product.reference_to_display}</span>
		  </div>
		{/if}
	  {/block}
	  
	  <!-- Déplacer ici d'autres blocs si vous voulez extraire d'autres blocs de l'onglet -->
	  
  </div>	
  
  
  <!-- Dans cette partie, on conserve tous les champs que l'on veut afficher dans l'onglet -->
	<div class="product-detail-on-tab">
		  {block name='product_quantities'}
			{if $product.show_quantities}
			  <div class="product-quantities">
				<label class="label">{l s='In stock' d='Shop.Theme.Catalog'}</label>
				<span data-stock="{$product.quantity}" data-allow-oosp="{$product.allow_oosp}">{$product.quantity} {$product.quantity_label}</span>
			  </div>
			{/if}
		  {/block}

		  {block name='product_availability_date'}
			{if $product.availability_date}
			  <div class="product-availability-date">
				<label>{l s='Availability date:' d='Shop.Theme.Catalog'} </label>
				<span>{$product.availability_date}</span>
			  </div>
			{/if}
		  {/block}

		  {block name='product_out_of_stock'}
			<div class="product-out-of-stock">
			  {hook h='actionProductOutOfStock' product=$product}
			</div>
		  {/block}

		  {block name='product_features'}
			{if $product.grouped_features}
			  <section class="product-features">
				<p class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</p>
				<dl class="data-sheet">
				  {foreach from=$product.grouped_features item=feature}
					<dt class="name">{$feature.name}</dt>
					<dd class="value">{$feature.value|escape:'htmlall'|nl2br nofilter}</dd>
				  {/foreach}
				</dl>
			  </section>
			{/if}
		  {/block}

		  {* if product have specific references, a table will be added to product details section *}
		  {block name='product_specific_references'}
			{if !empty($product.specific_references)}
			  <section class="product-features">
				<p class="h6">{l s='Specific References' d='Shop.Theme.Catalog'}</p>
				  <dl class="data-sheet">
					{foreach from=$product.specific_references item=reference key=key}
					  <dt class="name">{$key}</dt>
					  <dd class="value">{$reference}</dd>
					{/foreach}
				  </dl>
			  </section>
			{/if}
		  {/block}

		  {block name='product_condition'}
			{if $product.condition}
			  <div class="product-condition">
				<label class="label">{l s='Condition' d='Shop.Theme.Catalog'} </label>
				<link itemprop="itemCondition" href="{$product.condition.schema_url}"/>
				<span>{$product.condition.label}</span>
			  </div>
			{/if}
		  {/block}
	</div>  
</div>

 

Ensuite dans le fichier product.tpl à l'endroit où l'on veut mettre les références on peut laisser le code que j'avais mis dans mon précédent post, mais on va rajouter une classe pour pourvoir identifier qu'il s'agit de la div qui n'est pas dans l'onglet :

 

         <div id="product-details" class="wrapper-product-on-page">
              {block name='product_reference'}
                {if isset($product.reference_to_display)}
                  <div class="product-reference">
                    <label class="label">{l s='Reference' d='Shop.Theme.Catalog'} </label>
                    <span itemprop="sku">{$product.reference_to_display}</span>
                  </div>
                {/if}
              {/block}                
            </div> 

 

Ce contenu se charge au lancement de la page, et se met ensuite à jour au changement de déclinaison

Enfin, il ne nous reste plus qu'a rajouter des lignes css pour obtenir ce que l'on veut (par exemple dans le fichier  /themes/MONTHEME/assets/css/custom.css)

On masque le contenu de l'onglet qui serait chargé dans la page :

.wrapper-product-on-page .product-detail-on-tab {display: none;}

On masque le contenu de la page qui serait dans l'onglet :

.tab-pane .product-detail-on-page {display: none;}

 

En théorie ça marche. Il faut que je fasse des test pour m'en assurer

 

Share this post


Link to post
Share on other sites

Je comprends ton idée, mais après test, ça ne fonctionne malheureusement pas (l'onglet Détails produits n'apparaît toujours pas au clic). 

Par contre, si on supprime le <div id="product-detail"> dans le fichier product.tpl, l'onglet fonctionne. Je suis loin d'être un spécialiste, mais je suppose que ça vient du doublon de l'ID product-details sur la page. Javascript (ou autre chose) doit cibler l'ID du div product-detail avec un getElementByID (ou un truc du genre, qui cible un identifiant unique), à un moment ou un autre du processus, et refuse de gérer les 2 ? 

Si c'est bien ça, je doute qu'on puisse résoudre le problème sans passer par une modif en js...

Merci en tout cas d'avoir tenté le coup 😃 !

Share this post


Link to post
Share on other sites

Ok. Désolé, comme j'ai viré les onglets de mon site, je ne peux pas tester mes idées. Mais tu as raison, le double ID pose problème en javascript. On va traiter le problème différemment en utilisant du js. 

Ce qu'on peut faire, c'est à chaque fois que l'on détecte un changement ajax (un changement de déclinaison est un changement ajax), on va aller piquer la nouvelle valeur de la référence qui a du se mettre à jour dans l'onglet, et on va la coller dans notre référence affichée en haut de la page. Pour cela, en haut de page, on ne va plus utiliser l'id product-detail, et on va mettre le code suivant (au passage j'ai changé la classe product-reference par product-reference-page pour qu'il n'y ait pas de confusion entre les 2 références) :

         <div class="wrapper-product-on-page">
              {block name='product_reference'}
                {if isset($product.reference_to_display)}
                  <div class="product-reference-page">
                    <label class="label">{l s='Reference' d='Shop.Theme.Catalog'} </label>
                    <span itemprop="sku">{$product.reference_to_display}</span>
                  </div>
                {/if}
              {/block}                
           </div> 

 

Ensuite dans le fichier /themes/MONTHEME/assets/js/custom.js on va rajouter le code suivant :

 

(function ($, window, document, undefined) { //Ne pas remettre ces lignes si c'est déjà présent deans le fichier

		function changeReference() {
			if ($('body').hasClass('page-product')) {	//Si on est sur la page produit
				var newReference = $('.product-reference span').text(); //On va chercher la valeur actulisée de la référence
				$('.wrapper-product-on-page span').text(newReference); //On la met dans le span en haut de page
			}
		}	
		
		$( document ).ready(function() { //On lance notre fonction au chargement de la page
			changeReference();
		});
		
		$(document).ajaxComplete(function () { //On relance la fonction à chaque mise à jour ajax
			changeReference();
		});


})(jQuery, this, this.document); ////Ne pas remettre ces lignes si c'est déjà présent deans le fichier

 

Si ça ne fonctionne toujours pas, je suis à peu près sûr que j'arriverai à le faire directement sur ton site.... Sinon, il faut que je ré-installe un presta tout neuf en développement et je n'ai pas trop le temps en ce moment.

 

Edited by DavidCKW (see edit history)

Share this post


Link to post
Share on other sites
4 hours ago, DavidCKW said:

Ok. Désolé, comme j'ai viré les onglets de mon site, je ne peux pas tester mes idées. Mais tu as raison, le double ID pose problème en javascript. On va traiter le problème différemment en utilisant du js. 

Ce qu'on peut faire, c'est à chaque fois que l'on détecte un changement ajax (un changement de déclinaison est un changement ajax), on va aller piquer la nouvelle valeur de la référence qui a du se mettre à jour dans l'onglet, et on va la coller dans notre référence affichée en haut de la page. Pour cela, en haut de page, on ne va plus utiliser l'id product-detail, et on va mettre le code suivant (au passage j'ai changé la classe product-reference par product-reference-page pour qu'il n'y ait pas de confusion entre les 2 références) :


         <div class="wrapper-product-on-page">
              {block name='product_reference'}
                {if isset($product.reference_to_display)}
                  <div class="product-reference-page">
                    <label class="label">{l s='Reference' d='Shop.Theme.Catalog'} </label>
                    <span itemprop="sku">{$product.reference_to_display}</span>
                  </div>
                {/if}
              {/block}                
           </div> 


 

Ensuite dans le fichier /themes/MONTHEME/assets/js/custom.js on va rajouter le code suivant :

 


(function ($, window, document, undefined) { //Ne pas remettre ces lignes si c'est déjà présent deans le fichier

        function changeReference() {
            if ($('body').hasClass('page-product')) {    //Si on est sur la page produit
                var newReference = $('.product-reference span').text(); //On va chercher la valeur actulisée de la référence
                $('.wrapper-product-on-page span').text(newReference); //On la met dans le span en haut de page
            }
        }    
        
        $( document ).ready(function() { //On lance notre fonction au chargement de la page
            changeReference();
        });
        
        $(document).ajaxComplete(function () { //On relance la fonction à chaque mise à jour ajax
            changeReference();
        });


})(jQuery, this, this.document); //Ne pas remettre ces lignes si c'est déjà présent deans le fichier


 

Si ça ne fonctionne toujours pas, je suis à peu près sûr que j'arriverai à le faire directement sur ton site.... Sinon, il faut que je ré-installe un presta tout neuf en développement et je n'ai pas trop le temps en ce moment.

 

  • Like 1

Share this post


Link to post
Share on other sites

Salut à tou(te)s, 

La manip proposée par DavidCKW, alors qu'elle fonctionnait sans problème sur la version 1.7.5, semble ne pas fonctionner sur la version 1.7.6 😕

Il s'agit aussi d'un projet différent, avec des données bien plus complexes. Peut-être que le thème interfère aussi quelque part ? 

Le span référence est bien ciblé en Ajax et est bien mis à jour lors de la sélection d'une déclinaison et au chargement de la page, mais la valeur qui le remplace semble concaténer les références de plusieurs (pas toutes) déclinaisons... Par exemple : 

124790758_Annotation2019-12-04153432.jpg.80dd8ac5448b54b9e0cca8e19d3a91d7.jpg

On peut voir que les références de 3 des 5 déclinaisons disponibles sont mises bout à bout.

Remarque : outre la version de Prestashop et le thème, 2 différences sont à noter entre ce site et le précédent : les déclinaisons sont sélectionnées par un menu déroulant et plus par les cadres "couleurs", et il semble que la page ne soit pas rechargée lors de la sélection de la déclinaison (même si l'url est mise à jour, bizarrement).

Quelqu'un a-t-il été confronté à un bug similaire ? 

 

Share this post


Link to post
Share on other sites

Salut, j'ai été confronté au même problème et voici comment je l'ai résolu : 

prestashop.on(
	'updatedProduct',
 	function (event) {
 		updateReference();
	}
);

function updateReference() {
    ref = $('#product-details').data("product").attributes;
    if(ref) {
    	for (var i in ref)
        	$('#reference_product').html(ref[i].reference);
  	}
}

 

On se sert de l'événement 'updatedProduct' qui se déclenche après la mise à jour d'une déclinaison. 

On va chercher la bonne référence dans les data de #products-details

puis mise à jour de la valeur où vous le souhaitez, dans mon cas #reference_product

Share this post


Link to post
Share on other sites

Salut Mdesign, et merci de la suggestion ! 

Je vais tester cette méthode dès que j'aurai un peu de temps et je reviendrai poster le verdict :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More