Page jumping when clicking on slider images on product detail

[Kevin Peters]

When you click on an image in the slider on a product detail page the page jumps because the browser reacts to the anchor link being changed, is there a way to change this behaviour?

I tried looking around for which functions I could overwrite to alter this but I couldn't find it. And if I remove the anchors from the hrefs the slider stops working.

[Aimeos]

Maybe you can overwrite this method to provide an alternative implementation:
https://github.com/aimeos/ai-client-html/blob/master/client/html/themes/aimeos-detail.js#L60

We would appreciate a PR for this :-)

[Kevin Peters]

An easy fix is the following:

setupImageSwap: function() {

    $(".catalog-detail-image").on("click", ".thumbs .item", {}, function (ev) {
        var scrollPosition = document.documentElement.scrollTop;
        $(".thumbs .item", ev.delegateTarget).removeClass("selected");
        $(this).addClass("selected");
        window.location = $(this).attr("href");
        window.scroll(0, scrollPosition);

        return false;
    });
},

Added the scrollPosition variable to save the current page scroll location before the href is changed, then changed the window.scroll to go to that height instead of the AimeosCatalogDetail.OFFSET.

Another issue I'm getting is that the Aimeos js files are missing dependencies for datepicker in aimeos.js and slick in aimeos-detail.js, is there something I forgot to add or?

[Kevin Peters]

Edit: I just noticed slick is included in aimeos-detail, strange that it still errors on it.

[Kevin Peters]

Nevermind the missing thing, we derped something on our part. I changed the setupImageSwap function as I said earlier and that fixed our issue :)