javascript - Magento 站点 : Tapping thumbnail photo doesn't change large photo on mobile

Question

我正在使用 Magento 网站，我是 Magento 的新手，所以请多多包涵。我本来asked this question in the Magento community ，但他们告诉我这是题外话。我希望 StackOverflow 可以提供帮助。

查看某些产品时，单击/点击缩略图不会重新加载大图。相反，当我单击/点击图像时，浏览器跳回到页面顶部，并且哈希 (#) 被附加到 URL。当然，这让我相信某处存在 JS 问题，但我在控制台中没有看到任何相关信息。

Chrome 控制台错误:

The key "target-densitydpi" is not supported.
cg-ball-cap-adjustable.html:114 

GET http://[my url]/skin/frontend/gpmd/default/js/vendor/lightbox.min.map 404 (Not Found)
cg-ball-cap-adjustable.html:1

Safari 控制台错误:

[Error] Viewport argument key "target-densitydpi" not recognized and ignored.
(result, line 106)

[Error] Failed to load resource: the server responded with a status of 404 (Not Found)
(lightbox.min.map, line 0)

这些错误看起来不像是导致我的问题的原因，但我想我对此不是 100% 确定。

其他怪异之处:

有时——不一致，但通常是在重新加载页面后——我得到这个 JS 错误:

Uncaught TypeError: Cannot read property 'config' of undefined
prototype.js:828

Chrome 将我指向原型(prototype)的错误捕获行。当我查看 Firefox 时，Firebug 为我提供了有关此错误的更多信息:

TypeError: prevConfig.config is undefined
if(prevConfig.config.allowedProducts
configurable.js (line 184)

我的 HTML:

<div id="product-media" class="product-media">
    <div id="product-main" class="product-media-large">
        <a class="product-image" data-lightbox="product-image-1" title="" href="[my url]/placeholder/default/thumbnail-large.jpg">
            <img id="product-zoom" class="image" src="[my url]/placeholder/default/thumbnail-large.jpg" width="476" height="610" alt="" data-zoom-image="[my url]/placeholder/default/thumbnail-large.jpg">
        </a>
        <div class="view-full-link">
            <a data-lightbox="product-image-2" href="[my url]/placeholder/default/thumbnail-large.jpg">View Full Size</a>
        </div>
    </div>
    <div id="product-thumbs-gallery">
        <div id="product-thumbs" class="flexslider">
            <ul class="slides carousel">
                <li>
                    <a href="#" class="carousel-link active" data-image="[my url]/thumbnail-1.jpg" data-zoom-image="[my url]/thumbnail-1.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1.jpg" width="115" height="115" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="carousel-link " data-image="[my url]/thumbnail-1_5th_copy_.jpg" data-zoom-image="[my url]/thumbnail-1_5th_copy_.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1_5th_copy_.jpg" width="115" height="115" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="carousel-link " data-image="[my url]/thumbnail-1_copy_.jpg" data-zoom-image="[my url]/thumbnail-1_copy_.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1_copy_.jpg" width="115" height="115" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

背景信息:

我没有建立这个网站。我继承了它，并试图找到解决问题的方法。因此，我不确定我是否为大家提供了足够的信息来帮助我。我可以使用任何可能有用的附加信息来编辑它。

知道出了什么问题吗？

Answer 1

好像有javascript冲突，试试在flexslider脚本中加入jquery.conflict()。您可以从 [root]/skin/frontend/[yourpackage or default]/theme/找到脚本。

您也可以尝试在页脚中添加 flexslider 脚本。您需要检查添加了此库的布局文件([root]/app/design/frontend/[yourpackage or default]/theme/layout/page.xml 或 catalog.xml 等)。