THELIA Forum

Bonjour la communauté,

j'ai intégré Jquery zoom sur la page produit.
Celui-ci fonctionne sur la première photo produit page chargée.
Mais dès que je clique sur une vignette pour choisir un autre modèle.
La photo du modèle choisi ce charge bien en remplacement de la première.
Je récupère l'url de l'image large au même endroit dans un data,
mais visiblement elle n'est pas récupérée.

Le code dans thelia.js
        $(document).on('click.product-image', '#enlarger', function () {
            var imageLarge = $('.product-image > span img').data('image-large'); //récupère l'url de l'image large
            $('.product-image > span.zoom').zoom({url: imageLarge});
        });
       
        // Product details Thumbnails
        $(document).on('click.thumbnails', '#product-thumbnails .thumbnail', function () {
            if ($(this).hasClass('active')) { return false; }
           
            $('.product-image > span.zoom').trigger('zoom.destroy'); // enlève le zoom
           
            var $productGallery = $(this).closest("#product-gallery");
           
            /** Le contenu du data n'est pas récupéré ni par attr, ni par data est n'est pas envoyé*/
            //$('.product-image > span img', $productGallery).data('image-large',$(this).data('large-image'));
            $('.product-image > span img', $productGallery).attr('data-image-large',$(this).attr('data-large-image'));
           
            /** Ici le contenu de href de la vignette est bien envoyé*/
            $('.product-image > span img', $productGallery).attr('src',$(this).attr('href'));
            /** Ces deux données sont sur le même tag pourtant???*/

            $('.thumbnail', $productGallery).removeClass('active');
            $(this).addClass('active');

            return false;
        });

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

La page product.html

            <section id="product-gallery" class="col-sm-6">
                {ifloop rel="image.main"}
                <figure class="product-image">
                    <span id="enlarger" class="zoom">
                    {loop type="image" name="image.main" product={$ID} width="560" height="445" resize_mode="borders" limit="1"}
                        <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}" class="img-responsive" itemprop="image" data-image-large="{$ORIGINAL_IMAGE_URL nofilter}" data-toggle="magnify">
                    {/loop}
                    </span>
                </figure>
                {/ifloop}

                {ifloop rel="image.carousel"}
                <div id="product-thumbnails" class="carousel slide" style="position:relative;">
                    <div class="carousel-inner">
                        <div class="item active">
                            <ul class="list-inline">
                                {loop name="image.carousel" type="image" product={$ID}  width="560" height="445" resize_mode="borders" limit="5"}
                                <li>
                                    <a href="{$IMAGE_URL nofilter}" class="thumbnail {if $LOOP_COUNT == 1}active{/if}">
                                        {loop type="image" name="image.thumbs" id={$ID} product="$OBJECT_ID" width="118" height="85" resize_mode="borders"}
                                            <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}" data-large-image="{$ORIGINAL_IMAGE_URL nofilter}">
                                        {/loop}
                                    </a>
                                </li>
                                {/loop}
                            </ul>
                        </div>
                        {ifloop rel="image.carouselsup"}
                        <div class="item">
                            <ul class="list-inline">
                                {loop name="image.carouselsup" type="image" product={$ID}  width="560" height="445" resize_mode="borders" offset="5"}
                                    <li>
                                        <a href="{$IMAGE_URL nofilter}" class="thumbnail">
                                            {loop type="image" name="image.thumbssup" id={$ID} product="$OBJECT_ID" width="118" height="85" resize_mode="borders"}
                                                <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}" data-large-image="{$ORIGINAL_IMAGE_URL nofilter}">
                                            {/loop}
                                        </a>
                                    </li>
                                {/loop}
                            </ul>
                        </div>
                        {/ifloop}
                    </div>
                    {ifloop rel="image.carouselsup"}
                        <a class="left carousel-control" href="#product-thumbnails" data-slide="prev"><i class="fa fa-caret-left"></i></a>
                        <a class="right carousel-control" href="#product-thumbnails" data-slide="next"><i class="fa fa-caret-right"></i></a>
                    {/ifloop}
                </div>
                {/ifloop}
            </section>

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Le code thelia.js

Last edited by fredodefrance (10-05-2017 13:57:21)

Oui merci effectivement la méthode find va bien chercher l'élément qui est récupéré dans la variable.
Mais chose bizarre pas par le data "exotique" data-large-image  mais par l'attribut.
Visiblement on ne peut pas récupérer directement le data?
De cette façon là ça fonctionne.

$('.product-image > span img', $productGallery).attr('data-image-large',$(this).find('img[data-large-image]').attr('data-large-image'));

Là je change bien d'image mais la nouvelle reste en source.
Il ne me reste plus qu'à trouver comment remplacer la source de l'image qui est dans le zoom.

Last edited by fredodefrance (10-05-2017 13:08:57)

Ah oui comme je suis sympa voici le product quickview dans thelia.js
On appelle juste la function zoomIt().

        // Product Quick view Dialog
        // Product Quick view Dialog
        $(document).on('click.product-quickview', '.product-quickview', function () {
            if (doAjax) {
                $.get(this.href,
                    function (data) {
                        // Hide all currently active bootbox dialogs
                        bootbox.hideAll();
                        // Show dialog
                        bootbox.dialog({
                            message : $("#product",data),
                            onEscape: function() {
                                bootbox.hideAll();
                            }
                        });
                        window.pseManager.load();
                        zoomIt();
                    }
                );
                return false;
            }
        });

Last edited by fredodefrance (10-05-2017 15:03:00)