Routing to external website when certain images are clicked, all others go to a dynamic page.

Ask the community
,
1

Hello, I’m hoping you might be able to help. I have a series of dynamic galleries featuring actor headshots which link to a dynamic page when clicked. I wanted for a few of the headshots to reroute to an external URL when clicked, but not sure how to do that. Any help appreciated!

2

Simply set the wix location to be the webpage.
https://www.wix.com/corvid/reference/wix-location.html#to

3

Thanks a million! So, if it is a page entitled for example /dishes/waffles, and I want it to redirect to http://google/waffles.com, where do I place the /dishes/waffles in the code?

import wixLocation from ‘wix-location’;

// …

wixLocation.to(“http://google/waffles.com”);

4

@steve61032 if you put here more details it’d be much easier to answer this question, because it depends on questions like whether or not these external links are different per each item, whether or not you store these links in your collection etc… the more details you post, the more chances to get the optimal answer.

5

@jonatandor35 Thanks J.D. Yes, they would be different external links per each item, and I would store them in the collection. All the other items that I didn’t want to go to an external link would all link to the same dynamic page.

6

@steve61032 so you don’t have to use wixLocation only to assign the links to gallery items.
How to do it depends on how you populate you gallery. I guess you just connected it to a dataset via the editor. Am I right?

7

@jonatandor35 Yep, that’s it exactly. So I use various galleries linked to a dataset to show actor headshots according to languages spoken, and then when you click a headshot it goes to a dynamic profile page for each, and it’s just looking to see if I can reroute to external URLs when you click certain headshots.

8

@steve61032 in that case you can let’s say
you have a field key “externalLink” in your collection;
You have a dynamic page link with field key of “link-title”;
and you want to use this link only if there’s no externalLink for this item.
So you can try:

$w.onReady( function() {
 $w("#dataset1").onReady(() => {//use your dataset id
  let galleryItems = $w("#gallery1").items;//use your gallery id
  $w("#dataset1").getItems(0, 1000)
  .then( (result) => {
   let datasetItems = result.items;
   datasetItems.forEach(e  => { 
    let galleryItem = galleryItems[datasetItems.indexOf(e)];
    e.externalLink ?  galleryItem.link = e.externalLink :  galleryItem.link  = e["link-title"];
    })
   $w("#gallery1").items = galleryItems;
   });
 } );
} );
9

and of course, on the editor set the gallery to open a link when clicked.

10

@jonatandor35 Thanks a million J.D. - will try this!! Best, S.

11

@jonatandor35 Thanks J.D. I used that, and it is showing up “res is not defined” for the line " let datasetItems = res.items;"

12

@steve61032 ah, sorry. Use “result” instead of “res”.

13

@jonatandor35 So this is working perfectly J.D, insofar as when I click images that have a URL entered into the field key “externalLink” in my collection, it launches that URL as a new tab = perfect. The only thing that isn’t happening is that when a regular image which doesn’t have a URL in “externalLink” is clicked, it doesn’t open the dynamic page (maybe I haven’t set that?)

14

Actually I just entered the URL of the dynamic page into “ExternalLink” and that works perfectly! Is that the best way to do it? Thanks for all your help J.D. Much Appreciated!

15

@steve61032 it is a way, but actually you don’t need it (it stores extra data in your collection). I guess you just didn’t set the field key of the dynamic page link (which is created automatically by the system).

16

I mean, instead of e[“link-title”] in the code above, you should use e[YOUR FIELD KEY]

17

@jonatandor35 Perfect - working great! Cheers!

18

@steve61032 You’re welcome :slight_smile: