Edit History

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.

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, si tu as envie de m'envoyer un accès ftp.... 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.