Jump to content

Références et déclinaisons

mikealkeal
 Share

Recommended Posts

mikealkeal Newbie

mikealkeal

Posted
Posted

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  ?

Link to comment
Share on other sites
  • 2 weeks later...
  • 3 weeks later...
  • 5 months later...
  • 9 months later...
DavidCKW Apprentice

DavidCKW

Posted
Posted

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.

 

Link to comment
Share on other sites
Ben Newbie

Ben

Posted
Posted

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. 

Link to comment
Share on other sites
DavidCKW Apprentice

DavidCKW

Posted
Posted

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 ?

 

 

Link to comment
Share on other sites
Ben Newbie

Ben

Posted
Posted

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 :))

Link to comment
Share on other sites
DavidCKW Apprentice

DavidCKW

Posted
Posted

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

 

Link to comment
Share on other sites
Ben Newbie

Ben

Posted
Posted

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 😃 !

Link to comment
Share on other sites
DavidCKW Apprentice

DavidCKW

Posted
Posted (edited)

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)
Link to comment
Share on other sites
DavidCKW Apprentice

DavidCKW

Posted
Posted
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
Link to comment
Share on other sites
  • 5 months later...
Ben Newbie

Ben

Posted
Posted

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 ? 

 

Link to comment
Share on other sites
  • 1 month later...
Mdesign49 Rookie

Mdesign49

Posted
Posted

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites
  • 2 years later...
Toulousain Enthusiast

Toulousain

Posted
Posted

Bonjour Mdesign49,

Ca commence a dater mais savez vous dans quel fichier avez vous appliqué le correctif ci-dessous que vous préconisez  ?

Custom.js, core.js ? 

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);
  	}
}

Merci d'avance

 

Link to comment
Share on other sites
Toulousain Enthusiast

Toulousain

Posted
Posted

Bonjour,

J'ai inséré le code proposé par Mdesign49 dans le custom.js pour rafraichir la référence produit quand on change la déclinaison mais j'ai l'erreur suivante : 

custom.js:195 Uncaught TypeError: Cannot read properties of undefined (reading 'attributes')

J'utilise PrestaShop 1.7.8.3 et j'imagine que la propriété attributes a évoluée depuis.

Savez comment retrouver la propriété attributes pour savoir si elle a été modifiée ?

Merci

Ci-dessous le code proposé par code proposé par Mdesign49 

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);
  	}
}

 

Link to comment
Share on other sites
  • 2 weeks later...

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