Jump to content

Wexley: Is there a clickthrough workaround?

Recommended Posts

Posted

Based on this Q&A: Why don’t clickthroughs work in Wexley? – I learned that in order to use clickthroughs, you have to create a page and then use elements that feed from a gallery, such as the Gallery Grid Block.

To maintain the nice grid/layout styling of the Wexley template, I tried the Summary Block Wall layout instead, which created a great mosaic grid with clickthroughs included.

The problem now is – it only loads 30 pieces from a gallery at a time. Does anyone have any experience loading more than 30 or of another workaround that would make all of this possible? Could it possibly be done with some kind of code injection?

Thanks in advance for your help!

  • Replies 26
  • Views 8.9k
  • Created
  • Last Reply
Posted

There is a way to do it using the default gallery. It requires doing an ajax load on the gallery json to get the clickthrough urls and then some DOM manipulation to change the thumb click event. Put the code below in your page header code injection for the page with your gallery:


<script>
 var currentPageBaseURL=window.location.href.split("?")[0];
 Y.on("domready",function(e){
   Y.io(currentPageBaseURL+"?page=1&format=json-pretty", {
       on:{success: jsonLoaded}
   });
   function jsonLoaded(err,data){
   try{
     var jsonResponse = Y.JSON.parse(data.responseText);
     var items=jsonResponse.items
     Y.all("#thumbList .thumb, #galleryWrapper .slide").each(function(e){
       var thumbId=this.getAttribute("data-slide-id");
       for(var i=0;i<items.length;i++){
         if(thumbId==items[i].id && items[i].clickthroughUrl){
           this.setAttribute("data-clickthrough-url",items[i].clickthroughUrl).on("click",function(e){
             e.preventDefault();
             e.stopPropagation();
             window.open(this.getAttribute("data-clickthrough-url"),'_blank');
           })
         }
       }
     })
     }catch(e){}
   }
 });
</script>

EDIT: updated it to work on mobile too.

  • 4 weeks later...
Posted

Hi Ghostcat,I entered your code above and seems to work but opens the linked page in a new window. Is there a way to change the code to so that it transitions in the same window? This would solve the issue for me completely. Cheers

Posted

Use the code, but change:


window.open(this.getAttribute("data-clickthrough-url"),'_blank');

to


window.open(this.getAttribute("data-clickthrough-url"),'_self');

Posted

Thank you so much! That works perfectly. Much appreciated.

  • 2 months later...
Posted

I also had a problem with Wexley's inability to use click-throughs. Another thread recommended using the Gallery Grid Block to replace the Wexley gallery on the homepage. When I did this, the click-throughs worked, but unfortunately, the new gallery images didn't flexibly realign the way the Wexley homepage did and I wanted to keep that effect. I don't have any experience with coding, so I was reluctant to make the changes in the above post.

I ended up hiring a programmer endorsed by Squarespace to make the tweaks for me. His name is Brad Good and he made the changes in half an hour tops. It was cheap too.

Now the click-throughs work perfectly with the Wexley homepage template. If you're in my position, I highly recommend seeking out his help!

Here's his info: http://specialists.squarespace.com/specialist/brad-good

  • 2 weeks later...
Posted

Thank you! Do I only have to change the "currentPageURL"?My gallery page's url-slug is /product. So would the code look like this: var /product=window.location.href.split("?")[0]; ?

Is there anything else that needs to change? Thanks!!

  • 6 months later...
Posted

Hey guys,

I tried your code @ghostcat and it works, but only on the first image of the gallery! Did anyone else have that problem and then managed to solve it?

Thanks!

Posted

Hey guys,

I tried your code @ghostcat and it works, but only on the first image of the gallery! Did anyone else have that problem and then managed to solve it?

Thanks!

  • 1 month later...
Posted

HI @ghostcat, i tried using your code it worked for the first 2 image of the gallery, but not working for the rest, any idea what went wrong? thanks

  • 1 month later...
  • 1 month later...
Posted

i have contacted the same specialist! hoping he will be able to help me out too :) do you think i could see your website to see how the clickthrough urls work? thanks!

  • 2 months later...
Posted

hi @ghostcat -- thank you for the script! I am in a similar situation as a few others here, where your script works beautifully, but only for the first image in the gallery. any idea why this might be, or if there is a quick fix to this problem? or did someone else figure out how to do this? I'd appreciate any help. thanks!

  • 3 weeks later...
Posted

@ulrikalindell Did you ever figure this problem out? The script works but only for the first image! Please help!

  • 3 months later...
Posted

I was having this same issue. Then I tried it in another browser and it was working. So, I cleared my history in Chrome (my native browser), and it started working fine again. It isn't ideal, but I suggest giving that a go.

  • 4 weeks later...
Posted

This is awesome. I have imported the code and can add an URL but from there can't see how it works? How do I direct people to an option to actually click through from the image?

  • 1 month later...
Posted

Thank you for this bit of code!! I wish I had found it sooner - it's now saving me so much time and building pages and adding individual images with click throughs!

For everyone else - while it 'appears' not to be working, you need to clear your history, then it seems to work perfectly.

Posted

YOU ARE A BEAUTIFUL PERSON. Thank you!! A wonderful piece of code.Had to clear my Chrome cache for it to work on images other than the first.

  • 7 months later...
  • 1 year later...
  • 2 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.