Jump to content

[PS 1.6.x] Voir toutes les miniatures sur page produit et retirer "Afficher toutes les images"


Recommended Posts

Bonjour,

Avec la gestion des déclinaisons, j'ai choisi certaines images en fonction des couleurs ou autres caractéristiques des produits.

 

Sur le Front office, lorsque que l'on sélectionne, par exemple, une couleur, les miniatures des images associées apparaissent, les autres disparaissent, la première image associée apparaît en grand dans le <div id="image-block"> ; et apparaît également le lien "Afficher toutes les images".

 

J'aimerais trouver le moyen de modifier cela.

 

1. Solution de base

Que le carousel ne disparaisse plus, mais que la première image liée à la déclinaison soit affichée en grand dans le <div id="image-block">

 

2. Solution idéale

Que le carousel soit réorganisé de façon à ce que les images associées à la déclinaison soit triées en premier, les autres arrivant ensuite.

 

 

Je sais qu'il était possible d'atteindre ma solution de base dans Prestashop 1.5x et inférieur, mais moi je suis sous Prestashop 1.6.1.x

 

 

Il faut donc bidouiller des choses dans la fonction refreshProductImages du fichier themes/montheme/js/product.js

// Change the current product images regarding the combination selected
function refreshProductImages(id_product_attribute)
{
    id_product_attribute = parseInt(id_product_attribute);

    if (id_product_attribute > 0 && typeof(combinationImages) != 'undefined' && typeof(combinationImages[id_product_attribute]) != 'undefined')
    {
        // Destroy carousel
        $('#thumbs_list ul').data('owlCarousel').destroy();

        $('#thumbs_list_frame li').appendTo('.hidden-thumbs');

        for (var i = 0; i < combinationImages[id_product_attribute].length; i++){
            $('#thumbnail_' + parseInt(combinationImages[id_product_attribute][i])).appendTo('#thumbs_list_frame');
        }

        if (parseInt($('#thumbs_list_frame > li').length) < parseInt($('.hidden-thumbs > li').length + $('#thumbs_list_frame > li').length)){
            $('#wrapResetImages').show();
        }
        else{
            $('#wrapResetImages').hide();
        }

    }
    else
    {
        // Destroy carousel
        if ($('#thumbs_list ul').length > 0){
            $('#thumbs_list ul').data('owlCarousel').destroy();
        }

        $('.hidden-thumbs li').appendTo('#thumbs_list_frame');
        $('#wrapResetImages').hide();
    }

    if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled){
        $('#imageZoom').trigger('loadFromGallery', [ $('#views_block li:first > a > img') ]);
    }

    $('#thumbs_list ul').owlCarousel({
        itemsCustom: [ [0, 3], [320, 4], [420, 5], [480, 6], [640, 7], [768, 8], [940, 4], [1024, 4], [1135, 5], [1280, 6] ]
    });

    $('#thumbs_list_frame li a').bind('click', function(event){
        event.preventDefault();
        displayImage($(this));
    });

}

particulièrement au niveau de

        for (var i = 0; i < combinationImages[id_product_attribute].length; i++){
            $('#thumbnail_' + parseInt(combinationImages[id_product_attribute][i])).appendTo('#thumbs_list_frame');
        }

C'est par là qu'il faudrait ajouter du code pour aller chercher les autres images (celles qui ne sont pas associées à la déclinaison sélectionnée).

Malheureusement je ne suis pas compétent en JS, j'ai donc besoin de votre aide.

 

Merci par avance.

Link to comment
Share on other sites

  • 8 months 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
×
×
  • Create New...