Wexley: Is there a clickthrough workaround?

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!

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.

Hi @ghostcat, could you explain this more? I pasted it but it doesn’t work.

can you post a link to your site?

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

Use the code, but change:

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

to

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

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

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

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!!

@ghostcat I'm getting a error with this code. Possibly syntax error.

Missing opening {

Do you know what might fix this?

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!

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!

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

Thank you!!!! @ghostcat

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!

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!

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

I just wanted to let you know that the answer for this question worked a treat, Ghostcat. You are an absolute credit to humanity. :)

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.

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?

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.

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.

Hi @ghostcat, Thanks for this code, I just tried to use it but it came back with a message that said: missing opening `{

Do I need to add a { somewhere into the code?

I wrote up a tutorial on my site, I can't believe this has not fixed. I doesn't have any negative effects on the template. Previously, I was enabling Developer Mode and fixing the template, but I figured out the issue to the "Best Answer" below.

https://www.bradgood.net/articles/enable-clickthrough-url-on-squarespace-wexley-template

Squarespace killed the Specialist directory... you can find me at https://www.bradgood.net/