2nd image on hover


Voici un petit tuto pour faire un roll-over (affichage de la 2ième image du produit avec le hover de la souris) sur les images dans la page qui utilise le fichier product-list.tpl (catégories, module populaires, module meilleure ventes, etc...)

Pour effectuer cette opération il vous faut :

- Un éditeur de fichier tel que Notepad++ que vous pouvez téléchargez ici https://notepad-plus-plus.org/fr/. pour modifier les fichiers

- Un logiciel FTP tel que Filezilla que vous pouvez téléchargez ici https://filezilla-project.org/. pour envoyer les fichiers modifiés dans votre boutique

La version de PS utilisée pour ce tutoriel est 1.6.0.14 avec le thème par défaut les numéros des lignes peuvent donc différer selon votre version.

Si vous utilisez un autre thème éditez les fichiers correspondant à votre thème.

 

Éditez le fichier product-list.tpl de votre thème (themes/default-bootstrap/product-list.tpl)

ligne 41 vous avez la déclaration de l'image

<img  class="img_first" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

remplacez là par

<!--1st image add class and style for roll over-->
<img  class="img_first" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
<!--2nd image for roll over-->
<img class="img_second" src="{$link->getImageLink($product.link_rewrite, $product.id_image2, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

Il faut maintenant créer un override de la classe product

dans Notepad++ sélectionnez Fichier==>Nouveau

et copiez le code suivant

<?php
/**
*
* add var image2 for roll over
*  add a fucntion getProductsImgSupp
 **/
class Product extends ProductCore {
    public static function getProductProperties($id_lang, $row, Context $context = null) {
        if (!$row['id_product'])
            return false;
        if ($context == null)
            $context = Context::getContext();
         // Product::getDefaultAttribute is only called if id_product_attribute is missing from the SQL query at the origin of it:
         // consider adding it in order to avoid unnecessary queries
        $row['allow_oosp'] = Product::isAvailableWhenOutOfStock($row['out_of_stock']);
        if (Combination::isFeatureActive() && (!isset($row['id_product_attribute']) || !$row['id_product_attribute'])
        && ((isset($row['cache_default_attribute']) && ($ipa_default = $row['cache_default_attribute']) !== null)
        || ($ipa_default = Product::getDefaultAttribute($row['id_product'], !$row['allow_oosp']))))
            $row['id_product_attribute'] = $ipa_default;
        if (!Combination::isFeatureActive() || !isset($row['id_product_attribute']))
            $row['id_product_attribute'] = 0;
        // Tax
        $usetax = Tax::excludeTaxeOption();
        $cache_key = $row['id_product'].'-'.$row['id_product_attribute'].'-'.$id_lang.'-'.(int)$usetax;
        if (isset($row['id_product_pack']))
            $cache_key .= '-pack'.$row['id_product_pack'];
        if (isset(self::$producPropertiesCache[$cache_key]))
            return array_merge($row, self::$producPropertiesCache[$cache_key]);
        // Datas
        $row['category'] = Category::getLinkRewrite((int)$row['id_category_default'], (int)$id_lang);
        $row['link'] = $context->link->getProductLink((int)$row['id_product'], $row['link_rewrite'], $row['category'], $row['ean13']);
        $row['attribute_price'] = 0;
        if (isset($row['id_product_attribute']) && $row['id_product_attribute'])
            $row['attribute_price'] = (float)Product::getProductAttributePrice($row['id_product_attribute']);
        $row['price_tax_exc'] = Product::getPriceStatic(
            (int)$row['id_product'],
            false,
            ((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),
            (self::$_taxCalculationMethod == PS_TAX_EXC ? 2 : 6)
        );
        if (self::$_taxCalculationMethod == PS_TAX_EXC) {
            $row['price_tax_exc'] = Tools::ps_round($row['price_tax_exc'], 2);
            $row['price'] = Product::getPriceStatic(
                (int)$row['id_product'],
                true,
                ((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),
                6
            );
            $row['price_without_reduction'] = Product::getPriceStatic(
                (int)$row['id_product'],
                false,
                ((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),
                2,
                null,
                false,
                false
           );
       } else {
           $row['price'] = Tools::ps_round(Product::getPriceStatic(
               (int)$row['id_product'],
               true,
               ((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),
               2
               ),
               2
          );
          $row['price_without_reduction'] = Product::getPriceStatic(
              (int)$row['id_product'],
              true,
              ((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),
              6,
              null,
              false,
              false
          );
      }
      $row['reduction'] = Product::getPriceStatic(
          (int)$row['id_product'],
          (bool)$usetax,
          (int)$row['id_product_attribute'],
          6,
          null,
          true,
          true,
          1,
          true,
          null,
          null,
          null,
          $specific_prices
      );
      $row['specific_prices'] = $specific_prices;
      $row['quantity'] = Product::getQuantity(
          (int)$row['id_product'],
          0,
          isset($row['cache_is_pack']) ? $row['cache_is_pack'] : null
      );
      $row['quantity_all_versions'] = $row['quantity'];
      if ($row['id_product_attribute'])
          $row['quantity'] = Product::getQuantity(
              (int)$row['id_product'],
              $row['id_product_attribute'],
              isset($row['cache_is_pack']) ? $row['cache_is_pack'] : null
          );
          $row['id_image'] = Product::defineProductImage($row, $id_lang);
          $row['id_image2'] = self::getProductsImgSupp((int)$row['id_product']);
          $row['features'] = Product::getFrontFeaturesStatic((int)$id_lang, $row['id_product']);
          $row['attachments'] = array();
          if (!isset($row['cache_has_attachments']) || $row['cache_has_attachments'])
              $row['attachments'] = Product::getAttachmentsStatic((int)$id_lang, $row['id_product']);
          $row['virtual'] = ((!isset($row['is_virtual']) || $row['is_virtual']) ? 1 : 0);
          // Pack management
          $row['pack'] = (!isset($row['cache_is_pack']) ? Pack::isPack($row['id_product']) : (int)$row['cache_is_pack']);
          $row['packItems'] = $row['pack'] ? Pack::getItemTable($row['id_product'], $id_lang) : array();
          $row['nopackprice'] = $row['pack'] ? Pack::noPackPrice($row['id_product']) : 0;
          if ($row['pack'] && !Pack::isInStock($row['id_product']))
              $row['quantity'] = 0;
          $row['customization_required'] = false;
          if (isset($row['customizable']) && $row['customizable'] && Customization::isFeatureActive())
              if (count(Product::getRequiredCustomizableFieldsStatic((int)$row['id_product'])))
                  $row['customization_required'] = true;
          $row = Product::getTaxesInformations($row, $context);
          self::$producPropertiesCache[$cache_key] = $row;
          return self::$producPropertiesCache[$cache_key];
      }

      public static function getProductsImgSupp($product_id) {
          $sql = '
              SELECT id_image, id_product from `'._DB_PREFIX_.'image`
              WHERE id_product="'.(int)$product_id.'"
              ORDER BY `id_image` ASC
              LIMIT 0 , 2
         ';
         $result = Db::getInstance()->ExecuteS($sql);
         $nbimage = count($result);
         if ($nbimage > 1)
             return $result[1]['id_product'].'-'.$result[1]['id_image'];
         else
             return $result[0]['id_product'].'-'.$result[0]['id_image'];

      }
}

Grâce à la fonction getProductsImgSupp($product_id) on récupère les 2 premières images avec le LIMIT 0 , 2

Puis on compte le résultat avec $nbimage = count($result);

S'il y a plus d'une image pour le produit

if ($nbimage > 1) on retourne la 2ième image sinon on retourne la 1ère

Cette fonction est appelée plus haut avec :

$row['id_image2'] = self::getProductsImgSupp((int)$row['id_product']);

Dans la 2ième déclaration de l'image de product-list.tpl   'id_image2' sera bien remplie

Enregistrez le fichier sous le nom de product.php et envoyez-le dans le dossier override/classes de votre boutique

Dans certaines version de PS il faut supprimer le fichier cache/class_index.php pour que l'override soit pris en compte

Il ne reste plus qu'à ajouter un petit bout de jquery dans le fichier global.js qui est chargé dans toutes les pages.

Éditez le fichier global.js de votre thème (themes/default-bootstrap/js/global.js)

ligne 101 avant la fin du document.ready ajouter

    // 2nd image roll-over
    $('.img_second').hide();
    $(".product_img_link").hover(
        function() {
            $(this).find('.img_first').toggle();
            $(this).find('.img_second').toggle();
        },
        function() {
            $(this).find('.img_second').toggle();
            $(this).find('.img_first').toggle();
        }
    );
 
 
Pensez à vider le cache de Prestashop et de votre navigateur pour afficher le résultat

@++

Loulou66