overview
so i'm trying take functionality 1 part of squarespace's galapagos commerce template , add it's proving more difficult thought.
i need image-swapping capability of "quick view" (example - mouse on image , click quick view ) replace column of full sized zoomable images in "product view" (example - see once click on product).
so found code each section:
product view
this code goes through each image in array , spits out id jsproductitemimages allows hovered , zoomed.
<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> quick view
i'm not 100% on logic here, it's grabbing first image , making hover/zoomable primary image listing entire array of images beneath thumbnails. read @ symbol equivalent of saying this in javascript, don't why it's being used spit out first image in array.
<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> associated js
first off, should noted went through , console logged every function see giving quick view it's functionality - no avail. subsequently why i'm here. it's easy see zoom function originating: product view in galapagos.productitem function on line 103 $imagecontainer = y.one('#jsproductitemimages');
but don't see out of ordinary pop when @ quick view. i've got missing something!
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 }); }); // show controls 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()"); (var = maxgridunit; > 0; i--) { orphanproductcount = productcount % i; if(productcount <= maxgridunit || > 4) { if(0 === orphanproductcount) { $productgrid.addclass('item-grid-' + i); isgridbuilt = true; break; } } else { if(0 === productcount % 9) { // if productcount multiple of 9, use 9-grid. use 9-grid multiples of 9 because 8-grid looks more interesting. $productgrid.addclass('item-grid-' + 9); } else { // otherwise, use 8-grid , put remainder 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(); (var = catnavitemcount - 1; > 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(); }); }); my attempts
my first few attempts have been dropping jsproductitemimages div product view , dumping in entire figure block quick view updating associated css. while pulls in images (i can see them in inspector , take space on page) shows being blank.
i tried using thumbnails section quick view , limiting product view show first image using {.section items.0} thumbnail clicked wouldn't swap out without writing script (obviously) didn't want write when know exists in code already!
any appreciated!
update:
after replacing product view markup quick view markup ran these errors
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 unsure why it's hitting error .all because should addressing same array of images in both situations?
there's few questions buried in post let me answer quick view question since that's you're looking "fix".
squarespace uses modular system of javascript/css add-ons called "rollups". if pull source code you'll see window object contains current configuration of given page. when visiting products page, system triggers use of quick view js , accommodating css file. you'll want looking. js you're digging not relevant quick view (i don't believe).
quick view rollup js: http://static.squarespace.com/universal/scripts-compressed/product-quick-view-6a1e5642b473ebbb5944-min.js
quick view rollup css: http://static.squarespace.com/universal/styles-compressed/product-quick-view-eb4b900ac0155bed2f175aa82e2a7c17-min.css
these rollups triggered off of javascript hooks in template files. you'll need experiment using galapagos product template word , word has same classes , data-attributes, , see if works. take far long cover of details of need without working on project. start here first , see if can setup product template triggers quick view js is, without customization.
Comments
Post a Comment