Script js qui ne fonctionne pas dans l'aperçu rapide

[Pauline]

Bonjour, 

J'ai ajouté une fonctionnalité sur le prestashop d'un client, un module de calcul pour le paiement en plusieurs fois. 
Mon script fonctionne sans soucis dans la page produit, mais ne s'affiche pas dans l'aperçu rapide. Je ne comprends pas pourquoi. 

J'ai une erreur dans la console, mais je ne sais pas si cela influe sur mon problème. Aussi je ne comprends pas pourquoi j'ai cette erreur. 

Voici le site : https://music-action.com/

Et voici mon script : 

// Get the product price
var originalPrice = document.getElementsByClassName("current-price")[0].textContent;
  // transform this price in number
var numberPrice = parseFloat(originalPrice).toFixed(2);

<script>
var newDiv = document.querySelector(".divided-price");

// Divided the price by 3

function division (a) {
  var dividedPrice = a / 3;
  return (dividedPrice.toFixed(2));
}

// Display the new price in a div

var newPrice = document.createElement("div");
newPrice.innerHTML = "soit 3 x " + division(numberPrice) + " €";
newDiv.appendChild(newPrice);

newPrice.className = "calculate";

Je l'ai inséré dans la partie custom js de mon template. 

Si quelqu'un pouvait me donner un coup de main la-dessus, ça serait top

Merci

 

[Pauline]

Bonjour, 

Personne sur cette question ? 
Je n'ai pas trouvé d'ou vient le bug. Autre bug, sur certaines marques, par exemple Kemper (https://music-action.com/guitare-virtuelle/3156-kemper-profiler-amplifier-wh.html) ma fonctionnalité ne s'affiche pas du tout, alors que je suis sur la même structure de page que sur les autres produit. Je ne comprends pas d'où ça vient. 

Est-ce que quelqu'un qui a déjà développer un prestashop from scratch pourrait m'éclairer la dessus, je ne comprends pas.

Merci

[Mediacom87]

Sur cette page vous avez une erreur javascript donc cela doit certainement venir de là.

 

[YopixelAE]

Bonjour,
 

Quote

 

J'ai ajouté une fonctionnalité sur le prestashop d'un client, un module de calcul pour le paiement en plusieurs fois. 
Mon script fonctionne sans soucis dans la page produit, mais ne s'affiche pas dans l'aperçu rapide. Je ne comprends pas pourquoi. 

J'ai une erreur dans la console, mais je ne sais pas si cela influe sur mon problème. Aussi je ne comprends pas pourquoi j'ai cette erreur. 

 

L'erreur dans la console est générée par une ligne de votre code.  Ceci bloque l'exécution complète de votre script.
Ceci est lié au fait vous essayez de récupérer au chargement une valeur du DOM avant que celui-ci n'existe (existe dans le popup aperçu rapide).
var originalPrice = document.getElementsByClassName("current-price")[0][...]; --> undefined

Passez tout votre code dans une fonction (n'utilisez pas de variables globales) et appelez cette fonction en fin d’événement de l'ouverture du popup.

Pour appeler votre nouvelle fonction, éditez la function quick_view du global.js (ou bien ajoutez votre propre écouteur d’événement).
Exemple d'édition :
function quick_view()
{
    $(document).on('click', '.quick-view:visible', function(e)
    {
        e.preventDefault();
        var url = this.rel;
      [...]

        if (!!$.prototype.fancybox)
            $.fancybox({
              [...]
            });
           // Ici votre appel de fonction   
    });
}

[Pauline]

Merci pour ta réponse YopixelAE !

En effet j'ai un problème de DOM, mais je ne comprenais pas comment y remédier. 
Du coup j'ai placé directement mon script dans ma page .tpl, parce que dans le theme.js sincèrement ça me semblait compliqué. 
Ça fonctionne bien, autant dans les pages produits que dans le quick view. 

Par contre je ne comprends pas pourquoi ça ne fonctionne pas sur les produits de certaines marques : https://music-action.com/guitare-virtuelle/5583-kemper-profiler-powerrack-kemper-remote.html. J'ai une erreur dans ma console, toujours à cause du DOM, mais je ne sais pas comment y remédier. Je ne comprends pas pourquoi ces produits ne chargent pas de la même manière que les autres... Après je ne suis clairement pas une pro de prestashop...

Merci 

[YopixelAE]

Quote

Par contre je ne comprends pas pourquoi ça ne fonctionne pas sur les produits de certaines marques :

Dans votre fichier.tpl product.tpl (ou bien dans le module qui s’exécute dans le hook concerné) vérifiez la présence d'une condition d'affichage autour de l'élément HTML suivant :

<div class="divided-wrapper">[...]</div>

Cet élément n'apparait pas sur certaines pages. Votre script ne retrouve donc pas sa cible : var newDiv = document.querySelector(".divided-price");

[Pauline]

J'ai bien ajouté une condition à l'affichage de cette div, et quand je l'enlève ma fonctionnalité s'affiche. Sauf que le prix divisé par 3 qui s'affiche ne correspond pas au prix du produit. 
Je suis en train de fouiller, mais apparemment, après avoir récupéré le contenu de ma div "current-price", j'ai un problème lorsque je veux transformer cette valeur en nombre, sur cette page ça ne fonctionne pas, ça m'affiche 1... 

[YopixelAE]

Votre parseFloat truncate les prix à 4 chiffres car il y a un espace après le premier chiffre.

- Utilisez directement la variable prix en JS sans venir la chercher dans le DOM. Cette variable étant connue de Smarty, transférez-la à l'environnement JS via le fichier.tpl. Exemple :

<script type="text/javascript">var originalPrice  = {$product_price};</script>

- Ou bien modifiez un peu votre fonction. Par exemple supprimez les espaces dans le prix avant de convertir la chaîne en nombre.

[Pauline]

Super ! Merci beaucoup. J'ai ajouté un ".replace(/\s+/g, '')" à mon code et ça fonctionne ! 
Merci pour le coup de main, comme vous l'avez vu je débute en javascript, merci de m'avoir aiguillée.