javascript - 如何在标准产品 View 中重新创建 Squarespace 的产品快速 View ？

Question

概述

因此，我尝试从 Squarespace 的 Galapagos 商务模板的一部分获取功能并将其添加到另一部分，但事实证明这比我想象的要困难。

我需要“快速 View ”的图像交换功能(示例 - 将鼠标悬停在任何图像上并单击“快速 View ”)来替换“产品 View ”中的全尺寸可缩放图像列(示例 - 您会看到一次您点击一个产品)。

所以我找到了每个部分的代码:

产品 View

此代码只是遍历数组中的每个图像，并使用 id jsProductItemImages 将其吐出，从而允许对其进行悬停和缩放。

<div class="productitem-images" id="jsProductItemImages">
    {.repeated section items}
        {.image?}
            <div class="productitem-image-zoom-wrapper sqs-image-zoom-area"><img data-load="false" class="productitem-image loading" {@|image-meta} /></div>
        {.end}
        {.video?}
            {@|video}
        {.end}
    {.end}
</div>

快速查看

我并不是 100% 理解这里的逻辑，但本质上它是抓取第一张图像并将其设为悬停/可缩放主图像，然后将其下方的整个图像数组作为缩略图列出。我读到 @ 符号相当于在 javascript 中说 this，但我不明白为什么它被用来只吐出数组中的第一个图像。

<figure class="ProductItem-gallery">
  {.section items}
    <div class="ProductItem-gallery-slides">
      {.repeated section @}
        {.image?}
          <div class="ProductItem-gallery-slides-item" data-slide-index="{@index}"><img class="ProductItem-gallery-slides-item-image" data-load="false" {@|image-meta} /></div>
        {.end}
        {.video?}
          {@|video}
        {.end}
      {.end}
    </div>
  {.end}
  <div class="ProductItem-gallery-thumbnails">
    {.if items.1}{.repeated section items}<div class="ProductItem-gallery-thumbnails-item"><img class="ProductItem-gallery-thumbnails-item-image" data-load="false" {@|image-meta} /></div>{.end}{.end}
  </div>
</figure>

关联JS

首先，应该指出的是，我浏览并控制台记录了每个功能，以查看是什么赋予了快速 View 其功能 - 但无济于事。这就是我来这里的原因。因此，很容易看出缩放函数的来源:第 103 行 Galapagos.ProductItem 函数中的 Product View $imageContainer = Y.one('#jsProductItemImages');

但是当我查看快速 View 时，我没有看到任何异常的弹出窗口。我一定错过了一些东西!

var Galapagos = {};

Y.use('node', function(Y) {

    Galapagos.Site = (function(){
    console.log("Galapagos.Site");

        var $productPage;

        function init() {
      console.log("Galapagos.Site init()");

            $productPage = Y.one('.collection-type-products');

            if( $productPage && $productPage.hasClass('view-list') ) Galapagos.ProductList.init();
            if( $productPage && $productPage.hasClass('view-item') ) Galapagos.ProductItem.init();

            addDesktopTouchscreenClass();
            addMediaQueryBreakpointClass();
            bindEventListeners();

        }

        function addDesktopTouchscreenClass() {
      console.log("Galapagos.Site addDesktopTouchscreenClass()");
            if (Y.one('html').hasClass('touch')) {
                var mousemoveDetection = Y.on('mousemove', function(){
                    Y.one('body').addClass('galapagos-desktop-touchscreen');
                    mousemoveDetection.detach();
                });
            }

        }

        function addMediaQueryBreakpointClass() {
      console.log("Galapagos.Site addMediaQueryBreakpointClass()");
            if( document.documentElement.clientWidth <= 724 ) {
                if (Y.one('.catnav-container')) Y.one('.nav-container').prepend(Y.one('.catnav-list'));
                Y.one('html').addClass('tablet-breakpoint-mixin');
            } else {
                if (Y.one('.catnav-container')) Y.one('.catnav-container').prepend(Y.one('.catnav-list'));
                Y.one('html').removeClass('tablet-breakpoint-mixin');
            }

        }

        function bindEventListeners() {
      console.log("Galapagos.Site bindEventListeners()");
            Y.on('resize', addMediaQueryBreakpointClass);
        }

        function getDocWidth() {
      console.log("Galapagos.Site getDocWidth()");
            return Y.one(document).get('docWidth');
        }

        function getDocHeight() {
      console.log("Galapagos.Site getDocHeight()");
            return Y.one(document).get('docHeight');
        }

        return {
            init:init,
            getDocWidth: getDocWidth,
            getDocHeight:  getDocHeight
        }

    }());


    Galapagos.TweakListener = (function(){
    console.log("Galapagos.TweakListener");
        function listen(tweakName, callBack) {

            if (Y.Global) {
                Y.Global.on('tweak:change', Y.bind(function(f){
                    if ((f.getName() == tweakName) && (typeof callBack === 'function')) {
                        callBack(f.getValue());
                    }
                }));
            }

        }

        return {
            listen:listen
        }

    }());


    Galapagos.ProductItem = (function(){
    console.log("Galapagos.ProductItem");
        var cat;
        var $imageContainer;
        var $images;
        var imageZoomInstances = [];
        function init() {
      console.log("Galapagos.ProductItem init()");

            cat = Y.QueryString.parse(location.search.substring(1)).category;
            $imageContainer = Y.one('#jsProductItemImages');
            $images = $imageContainer.all('img[data-src]');

            if ( cat ) setCatCrumb();
            loadProductDetailImages();

            bindEventListeners();
            bindTweakListeners();
            buildProductDetailImagesLightbox();

        }

        function bindEventListeners() {
      console.log("Galapagos.ProductItem bindEventListeners()");
            Y.on('resize', function(){
                loadProductDetailImages();
            });

        }

        function setCatCrumb() {
      console.log("Galapagos.ProductItem setCatCrumb()");
            var $catCrumb = Y.one('#jsCategoryCrumb');
            var $catCrumbLink = $catCrumb.one('a');
            var catCrumbHref = $catCrumbLink.getAttribute('href');

            //var $mobileCatCrumbLink = Y.one('#jsMobileCategoryCrumb');

            $catCrumbLink.set('text', cat).setAttribute('href', catCrumbHref + '?category=' + encodeURIComponent(cat));
            //$mobileCatCrumbLink.setAttribute('href', catCrumbHref + '?category=' + encodeURIComponent(cat));

            $catCrumb.removeClass('galapagos-display-none');

        }

        function loadProductDetailImages() {
      console.log("Galapagos.ProductItem loadProductDetailImages()");
            var imageZoomEnabled = Y.one('.tweak-product-item-image-zoom-enabled');

            $images.each(function(image) {

                ImageLoader.load(image.removeAttribute('data-load'), { load:true });

                if (imageZoomEnabled) {
                    image.on('load', function() {
                        instantiateImageZoom(image);
                    });
                }
            });

        }

        function instantiateImageZoom(image) {
      console.log("Galapagos.ProductItem instantiateImageZoom()");
            imageZoomInstances.push(new Y.Squarespace.ImageZoom({
                host: image.get('parentNode'),
                behavior: 'hover',
                zoom: parseFloat(Y.Squarespace.Template.getTweakValue('tweak-product-item-image-zoom-factor'))
            }));
        }

        function destroyImageZoomInstances() {
      console.log("Galapagos.ProductItem destroyImageZoomInstances()");
            if (!imageZoomInstances || imageZoomInstances.length < 1) {
              return;
            }

            Y.Array.each(imageZoomInstances, function(zoomInstance){
              zoomInstance.destroy(true);
            });
        }

        function buildProductDetailImagesLightbox() {
      console.log("Galapagos.ProductItem buildProductDetailImagesLightbox()");
            if ($images.size() >= 1 ) {

                var lightboxSet = [];

                $images.each(function(image) {
                    lightboxSet.push({
                        content: image
                    });
                });

                // Only show controls for size > 1
                var hasControls = $images.size() > 1;

                $imageContainer.delegate('click', function(e) {

                    var lightbox = new Y.Squarespace.Lightbox2({
                        controls: {
                            previous: hasControls,
                            next: hasControls
                        },
                        set: lightboxSet,
                        currentSetIndex: $images.indexOf(e.target)
                    });

                    lightbox.render();

                }, 'img', this);

            }
        }

        function bindTweakListeners() {
      console.log("Galapagos.ProductItem bindTweakListeners()");
            if (Y.Global) {
                Y.Global.on('tweak:close', function() {
                    if (Y.one('.collection-type-products.view-item')) {
                        destroyImageZoomInstances();
                        if (Y.one('.tweak-product-item-image-zoom-enabled')) {
                            $images.each(function(image){
                                instantiateImageZoom(image);
                            });
                        }
                    }
                }, this);
            }
        }

        return {
            init:init
        }

    }());


    Galapagos.ProductList = (function(){
    console.log("Galapagos.ProductList");

        var $catNav,
            $productGrid,
            $productGridOrphans,
            $productGridImages,
            $orphanProducts,
            productCount,
            maxGridUnit,
            orphanProductCount,
            isGridBuilt;


        function init() {
      console.log("Galapagos.ProductList init()");

            $catNav = Y.one('#jsCatNav');
            $productGrid = Y.one('#jsProductGrid');
            $productGridOrphans = Y.one('#jsProductGridOrphans');

            if (!Y.UA.mobile && Y.one('.show-alt-image-on-hover:not(.product-info-style-overlay)')) {
                $productGridImages = $productGrid.all('img[data-src]');
            } else {
                $productGridImages = $productGrid.all('img.productlist-image--main[data-src]');
            }

            productCount = $productGrid.all('.productlist-item').size();
            maxGridUnit = 8;
            orphanProductCount;
            isGridBuilt = false;

            bindEventListeners();
            bindTweakListeners();
            if($catNav) setActiveCategory();
            if(Y.one('body').hasClass('product-grid-style-organic')) {
                buildGrid();
            } else {
                $productGrid.removeClass('loading').removeClass('loading-height');
                loadGridImages($productGridImages);
            }

        }

        function bindEventListeners() {
      console.log("Galapagos.ProductList bindEventListeners()");
            Y.on('resize', function(){
                loadGridImages($productGridImages);
            });

        }

        function buildGrid() {
      console.log("Galapagos.ProductList buildGrid()");
            for (var i = maxGridUnit; i > 0; i--) {

                orphanProductCount = productCount % i;

                if(productCount <= maxGridUnit || i > 4) {

                    if(0 === orphanProductCount) {

                        $productGrid.addClass('item-grid-' + i);

                        isGridBuilt = true;
                        break;

                    }

                } else {

                    if(0 === productCount % 9) {  // if productCount is a multiple of 9, use the 9-grid.  we use 9-grid only for multiples of 9 because 8-grid looks more interesting.

                        $productGrid.addClass('item-grid-' + 9);

                    } else { // otherwise, use the 8-grid and put the remainder into the orphan div

                        $productGrid.addClass('item-grid-' + maxGridUnit);
                        $orphanProducts = Y.all('.productlist-item').slice((productCount % maxGridUnit) * -1);

                        $productGridOrphans
                            .append($orphanProducts)
                            .addClass('item-grid-' + productCount % maxGridUnit);
                    }

                    isGridBuilt = true;
                    break;

                }

            }

            if(isGridBuilt) {
                $productGrid.removeClass('loading').removeClass('loading-height');
                loadGridImages();
            }

        }

        function setActiveCategory() {
      console.log("Galapagos.ProductList setActiveCategory()");

            var catNavItemCount = $catNav.all('.catnav-item').size();

            for (var i = catNavItemCount - 1; i > 0; i--) {

                var $item = $catNav.all('.catnav-item').item(i);
                var $link = $item.one('.catnav-link');
                var category = Y.QueryString.parse(location.search.substring(1)).category;
                var href = Y.QueryString.parse($link.getAttribute('href').substring(2)).category;

                if(category && href && category === href) {
                    $item.addClass('active-link');
                }
                else if(!category) {
                    $catNav.one('#jsCatNavRoot').addClass('active-link');
                }

            }

        }

        function loadGridImages() {
      console.log("Galapagos.ProductList loadGridImages()");
            $productGridImages.each(function(image) {
                ImageLoader.load(image.removeAttribute('data-load'), { load: true });

                image.on('load', function(){
                    if (image.hasClass('productlist-image--main.has-alt-image')) {
                        image.siblings('.productlist-image--alt').removeClass('galapagos-hidden');
                    }
                });
            });
        }

        function bindTweakListeners() {
      console.log("Galapagos.ProductList bindTweakListeners()");
            if (Y.Global) {

                Y.Global.on(['tweak:beforeopen', 'tweak:close', 'tweak:reset'], function() {
                    setTimeout(function(){
                        Galapagos.ProductList.init();
                    }, 1000);
                });

                Y.Global.on(['tweak:beforeopen'], function() {
                    setTimeout(function(){
                        Galapagos.ProductList.init();
                        $productGrid.one('.productlist-item').addClass('is-hovered');
                    }, 1000);
                });

                Y.Global.on(['tweak:close'], function() {
                    setTimeout(function(){
                        Galapagos.ProductList.init();
                        $productGrid.one('.productlist-item').removeClass('is-hovered');
                    }, 1000);
                });

            }

            Galapagos.TweakListener.listen('product-grid-style', function(value) {

                if('Organic' === value) {
                    buildGrid();
                } else {
                    $productGrid.append($orphanProducts);
                    loadGridImages();
                }
            });

            Galapagos.TweakListener.listen('product-info-style', function(value) {

                if('Overlay' === value) {
                    $productGrid.one('.productlist-item').addClass('is-hovered');
                } else {
                    $productGrid.one('.productlist-item').removeClass('is-hovered');
                }

            });

            Galapagos.TweakListener.listen('productImageAspectRatio', function(value) {
                loadGridImages();
            });

            Galapagos.TweakListener.listen('productImageSpacing', function(value) {
                loadGridImages();
            });

        }

        return {
            init:init
        }


    }());


    Y.on('domready', function() {

        Galapagos.Site.init();

    });

});

我的尝试

我最初的几次尝试是从产品 View 中删除 jsProductItemImages div 并从快速 View 中转储到整个 figure block 中，然后更新关联的 css。当它拉入图像时(我可以在检查器中看到它们并且它们占用页面上的空间)，它显示为空白。

我还尝试仅使用快速 View 中的缩略图部分，并使用 {.section items.0} 将产品 View 限制为仅显示第一张图像，但我单击的任何缩略图都不会不编写脚本就可以交换它(显然)，但当我知道它已经存在于代码中时，我不想编写类似的东西!

任何帮助将不胜感激!

更新:

用快速 View 标记替换产品 View 标记后，我遇到了这些错误

Uncaught TypeError: Cannot read property 'all' of null    site.js:104
  init                  @ site.js:104
  init                  @ site.js:17
  (anonymous function)  @ site.js:432
  _notify                 @ common-2a739bf…-min.js:1479
  notify                  @ common-2a739bf…-min.js:1479
  _notify                 @ common-2a739bf…-min.js:1475
  _procSubs             @   common-2a739bf…-min.js:1476
  fireSimple              @ common-2a739bf…-min.js:1476
  _fire                 @   common-2a739bf…-min.js:1476
  fire                  @   common-2a739bf…-min.js:1489
  _load                 @   common-2a739bf…-min.js:1463
  f                     @   common-2a739bf…-min.js:1457

不确定为什么 .all 会出现错误，因为在这两种情况下它都应该处理相同的图像数组？

Answer 1

这篇文章中隐藏了一些问题，但让我专门回答快速查看问题，因为这就是您想要“修复”的问题。

Squarespace 使用名为“rollups”的 JavaScript/CSS 插件模块化系统。如果提取源代码，您将看到一个窗口对象，其中包含任何给定页面的当前配置。当访问产品页面时，系统会触发使用其快速查看 JS 和相应的 CSS 文件。这就是您想要寻找的地方。您正在研究的 JS 与快速查看无关(我不相信)。

快速查看汇总 JS:http://static.squarespace.com/universal/scripts-compressed/product-quick-view-6a1e5642b473ebbb5944-min.js

快速查看汇总CSS:http://static.squarespace.com/universal/styles-compressed/product-quick-view-eb4b900ac0155bed2f175aa82e2a7c17-min.css

这些汇总是由模板文件中的 JavaScript Hook 触发的。您需要做的是尝试使用加拉帕戈斯产品模板单词和单词，使其具有相同的类和数据属性，并查看是否有效。如果不实际参与该项目，那么要涵盖您需要做的所有细节将花费太长的时间。我首先从这里开始，看看您是否可以设置您的产品模板来按原样触发 Quick View JS，无需自定义。