résolu [PrestaShop 8.2] Hook lors du changement de déclinaison en FO

Lenoiry · January 31

Bonjour à tous,

Je développe un module personnalisé sur PrestaShop 8.2 et je cherche à exécuter du code lorsqu’un utilisateur change de déclinaison sur la page produit en Front-Office.

J’ai essayé le hook actionProductAttributeUpdate, mais il ne semble pas être déclenché lors du changement de déclinaison.

Je préférerais éviter d'ajouter une requête Ajax spécifique si un hook natif existe déjà pour cela. Je suis convaincu que PrestaShop a prévu un mécanisme pour gérer cette action.

Ma question :

Existe-t-il un hook natif permettant d’intercepter le changement de déclinaison en Front-Office ?

Merci d’avance pour votre aide ! 😊

coeos.pro · January 31

à ma connaissance il n'y a pas de hook pour détecter le changement de déclinaisons, mais quand tu changes de déclinaisons certains hooks sont appelés (displayProductPriceBlock, displayProductAdditionalInfo) :

Prestashop Addict · February 2

Exact vous devez le faire en js et ajax

coeos.pro · February 2

tout dépend de ce qu'il veut faire, il peux très bien lancer l'exécution d'une fonction js depuis displayProductPriceBlock ou displayProductAdditionalInfo

Lenoiry · February 3

Bonjour,

Tout d'abord, merci pour vos réponses.

J'ai effectivement testé l'intégration de mon module sur les hooks qui sont actualisés lors d’un changement de déclinaison, comme displayProductPriceBlock et displayProductAdditionalInfo, mais cela n’a pas agit comme je le souhaitais.

Comme le suggère Prestashop Addict, je pense qu’il ne me reste pas d’autre choix que d’opter pour une solution en JavaScript avec un appel Ajax. Je vais ajouter un écouteur d’événements sur les inputs concernés pour déclencher la mise à jour de mon code. Il y a peut-être même des événements JavaScript proposés par PrestaShop pour gérer le changement de déclinaison, je vais creuser de ce côté.

Je reste tout de même surpris qu’il n’existe pas de hook action pour ce type de besoin.

Merci encore pour vos retours ! 😊

coeos.pro · February 3

on ne pourra pas t'aider plus que ça si on ne sait pas ce que tu veux faire

Lenoiry · February 3

Merci pour votre retour.

C’est un peu complexe à expliquer, mais pour vous donner plus de détails : j’ai développé un calculateur de m² qui peut être activé ou non en fonction de la déclinaison sélectionnée. Ce calculateur s’appuie sur des données que je récupère depuis des tables personnalisées en base de données et s’affiche via un fichier .tpl.

Pour chaque déclinaison, j’ai ajouté un input dans le back-office qui permet d’activer ou non ce calculateur. Le problème que je rencontre est le suivant :

Lorsque j’arrive sur la page produit, si la déclinaison par défaut a le calculateur activé, il s’affiche correctement.
Mais si je change de déclinaison vers une qui n’a pas le calculateur activé, celui-ci reste affiché, alors qu’il devrait disparaître.
En revanche, si j’actualise la page, l’affichage est correct (le calculateur disparaît si la déclinaison ne l’a pas activé).

Le souci vient du fait que mon hook n’est tout simplement pas appelé lors d’un changement de déclinaison. J'ai tenté d’intégrer mon .tpl via des hooks qui sont censés réagir à ce changement, comme displayProductPriceBlock et displayProductAdditionalInfo, mais même si le prix se met bien à jour, mon calculateur ne l’est pas.

Je vous joins mon module tel qu'il est actuellement, ca sera peut être plus simple pour vous de comprendre ma problématique (Prestashop8.2)

Merci encore pour votre aide ! 😊

linovcalculateur.zip

DCharles · February 3

Bonjour,

Je t'invite à regarder du côté de la doc, tu y trouveras un event j'avascript qui est appelé lors du changement d'une déclinaison sur le front office.

Quote

updatedProductOn the product page, selecting a new combination will reload the DOM via ajax calls. After the update, this event is fired.

https://devdocs.prestashop-project.org/8/themes/reference/javascript-events/#events

coeos.pro · February 3

le hook displayLinovCalculateur tu l'as rajouté dans le thème ?

Lenoiry · February 3

Merci pour vos retours !

Effectivement, DCharles, si je n’ai pas d’autre choix, je passerai par l’événement JavaScript updatedProduct avec une requête Ajax. Merci pour le lien vers la documentation.

Et oui, coeos.pro, j’ai bien appelé mon hook personnalisé displayLinovCalculateur dans le fichier product.tpl de mon thème.

coeos.pro · February 3

dans ce cas essaye de changer la ligne 171

public function hookDisplayLinovCalculateur(array $params)

par

public function hookdisplayProductAdditionalInfo(array $params)

et greffe le module sur le hook displayProductAdditionalInfo ainsi ce sera affiché à l'arrivée sur la page et rafraichit à chaque changement de d'attributs

coeos.pro · February 3

Pour info pour le hook displayProductAdditionalInfo($params)

tu peux récupérer les données qui t'intéressent avec $params['product']['id_product'] et $params['product']['id_product_attribute']

Pour afficher les prix tu peux utiliser Tools::displayPrice ça évite les number_format($displayPrice, 2, ',', ' ') . '€'

Lenoiry · February 3

Merci beaucoup pour le temps que tu prends pour m’aider ! 🙏
J’essaierai ça en fin d’après-midi ou au plus tard demain, et je vous tiendrai au courant des résultats.

Encore merci pour ton aide

Lenoiry · February 4

Bonjour,

Je viens de remplacer mon hook personnalisé par displayProductAdditionalInfo, mais malheureusement, j’ai exactement le même résultat. Cela ne règle pas mon problème d’actualisation lors du changement de déclinaison.

Il semble que je n’aie pas d’autre choix que de passer par du JavaScript et une requête Ajax pour résoudre ce problème.

Merci tout de même pour le temps que vous avez pris pour répondre à mes questions !

coeos.pro · February 4

ça m'étonnes, si tu utilises

    public function hookdisplayProductAdditionalInfo($params)
    {
        dump($params['product']['id_product']);
        dump($params['product']['id_product_attribute']);
    }

sans oublier de greffer le module sur displayProductAdditionalInfo

tu as quoi ?

Lenoiry · February 4

Effectivement, moi aussi ça m’étonne, mais lorsque je fais cela, j’ai beau changer de déclinaison, les deux IDs affichés restent les mêmes. Ils ne sont pas actualisés lors du changement de déclinaison.

coeos.pro · February 4

j'ai testé sur 8.0.0 et ça fonctionne, soit tu as un problème de cache soit il y a un problème avec le hook displayProductAdditionalInfo

Lenoiry · February 4

C’est fou que ça fonctionne sur la 8.0.0 et pas sur la 8.2.0...

Du coup, ça semble être un problème propre à la 8.2.0. Je suis en mode développement avec le cache désactivé, donc ça ne devrait pas venir de là.

Franchement, ça me paraît bizarre aussi, je suis d’accord avec toi, ça devrait s’actualiser. Ça commence à être frustrant... 😅

Lenoiry · February 4

Oh, attends ! J’ai désactivé mon thème enfant pour tester, et ça fonctionne parfaitement avec le thème Classic ! 🎯
C’est donc un souci lié à mon thème.

Il va falloir que je creuse pour trouver d’où ça vient. En attendant, je suis désolé de t’avoir fait tourner autant en rond et je te remercie sincèrement pour ton aide et ta patience ! 🙏

coeos.pro · February 4

pas de soucis

DCharles · February 4

Ah ah tu as testé plus rapidement que moi, j'allais te dire qu'avec le thème classic que tout fonctionnait correctement.

Pour info j'ai utilisé ton hook : displayLinovCalculateur que j'ai rajouté au sein du thème classic dans le fichier : product-variants.tpl et cela fonctionne très bien.

{**
 * Copyright since 2007 PrestaShop SA and Contributors
 * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://devdocs.prestashop.com/ for more information.
 *
 * @author    PrestaShop SA and Contributors <contact@prestashop.com>
 * @copyright Since 2007 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 *}
<div class="product-variants js-product-variants">

  {hook h='displayLinovCalculateur' product=$product}
  {foreach from=$groups key=id_attribute_group item=group}
    {if !empty($group.attributes)}
    <div class="clearfix product-variants-item">
      <span class="control-label">{$group.name}{l s=': ' d='Shop.Theme.Catalog'}
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            {if $group_attribute.selected}{$group_attribute.name}{/if}
          {/foreach}
      </span>
      {if $group.group_type == 'select'}
        <select
          class="form-control form-control-select"
          id="group_{$id_attribute_group}"
          aria-label="{$group.name}"
          data-product-attribute="{$id_attribute_group}"
          name="group[{$id_attribute_group}]">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
          {/foreach}
        </select>
      {elseif $group.group_type == 'color'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="float-xs-left input-container">
              <label aria-label="{$group_attribute.name}">
                <input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
                <span
                  {if $group_attribute.texture}
                    class="color texture" style="background-image: url({$group_attribute.texture})"
                  {elseif $group_attribute.html_color_code}
                    class="color" style="background-color: {$group_attribute.html_color_code}"
                  {/if}
                ><span class="attribute-name sr-only">{$group_attribute.name}</span></span>
              </label>
            </li>
          {/foreach}
        </ul>
      {elseif $group.group_type == 'radio'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="input-container float-xs-left">
              <label>
                <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
                <span class="radio-label">{$group_attribute.name}</span>
              </label>
            </li>
          {/foreach}
        </ul>
      {/if}
    </div>
    {/if}
  {/foreach}
</div>

Et j'ai légèrement modifié le code de ton hook :

public function hookDisplayLinovCalculateur(array $params)
	{
		$idProduct = $params['product']->id ?? null;
    	$idProductAttribute = $params['product']->id_product_attribute ?? null;
		$ratio = null;
		$perte = 0;
		$displayPrice = null;
        
        if (null === $idProduct) {
            return;
        }
		
		if ($idProductAttribute >= 1) {
			// Produit avec déclinaisons : chercher dans linovcalculateur_attribute
			$sql = 'SELECT ratio, perte, active FROM ' . _DB_PREFIX_ . 'linovcalculateur_attribute WHERE id_product_attribute = ' . (int) $idProductAttribute;
			$result = Db::getInstance()->getRow($sql);
		} else {
			// Produit sans déclinaisons : chercher dans linovcalculateur_product
			$sql = 'SELECT ratio, perte, active FROM ' . _DB_PREFIX_ . 'linovcalculateur_product WHERE id_product = ' . (int) $idProduct;
			$result = Db::getInstance()->getRow($sql);
		}

		if ($result && (int) $result['active'] === 1) {
			$ratio = (int) $result['ratio'];
			$perte = (int) $result['perte'];
			if ($ratio !== null && $ratio > 0) {
				$priceTTC = Product::getPriceStatic($idProduct, true, $idProductAttribute, 6, null, false, true, 1, false, null, null, true);
				$displayPrice = $priceTTC / $ratio;
			}
			
			$this->context->smarty->assign([
				'ratio' => $ratio,
				'price' => $priceTTC,
				'perte' => $perte,
				'display_price' => $displayPrice !== null ? number_format($displayPrice, 2, ',', ' ') . '€' : null,
			]);

			return $this->display($this->_path, 'views/templates/front/calculator_product.tpl');
		}else{
			return $this->display($this->_path, 'views/templates/front/cart_product_basic.tpl');
		}

Edited February 4 by DCharles (see edit history)

Lenoiry · February 4

Ah oui, effectivement ! Merci beaucoup pour le test. 🙏

Après réflexion, je pense que c’est une classe js-xxxx-xxx qui fait que tout ce qui se trouve à l’intérieur est automatiquement mis à jour lors du changement de déclinaison.

Du coup, je me demande : PrestaShop, est-ce qu’un hook d’action dédié pour ce type de mise à jour ne serait pas utile ? Cela pourrait éviter d’avoir à s’appuyer uniquement sur des solutions liées au front.

Merci encore pour vos retours et votre aide précieuse ! 😊

coeos.pro · February 4

dans le thème enfant il y a hookdisplayProductAdditionalInfo ?

coeos.pro · February 4

si je reprend un exemple concret ( https://www.ps17.democoeos.ovh/fr/hommes/1-8-hummingbird-printed-t-shirt-9116430059772.html#/4-taille-xl/11-couleur-noir ) le module qui affiche le code barre est greffé sur hookdisplayProductAdditionalInfo et quand on change un attribut ce hook est appelé qui au final envoi une image à afficher (codebarre correspondant à l'EAN de la déclinaison), à chaque fois que tu changes un attribut (donc de déclinaisons) le code barre change

résolu [PrestaShop 8.2] Hook lors du changement de déclinaison en FO

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in