Setting .link property of repeated Vector image

Ask the community
,
1

Hi Folks!

I’m trying to dynamically set links and targets of repeated vector images based on urls I have in a dataset. The goal is to end up with a set of social icons that, once clicked, open a new tab with the correct url.

In the code, I build the repeater data array ( socialsRepeaterData) by getting the needed URLs from the artistURLsDataset. Depending on the type of URL, I set a specific icon and then push the data in the socialsRepeaterData array. I do this for all URLs of the dataset.

Once I’ve got all this, I set this socialsRepeaterData array to the repeater.data property.

This fires the onItemReady events for each item of the repeater based on the content of socialsRepeaterData array. In this call back function, I set the current repeaters item’s src to the icon and the link and target properties to open the url in a new tab.

Result:

  • I get the correct number of icons

  • I get the correct icons

  • None of the images are clickable: when I move my cursor above the icon, it does not change to indicate a clickable element

  • Clicking on the icons doesn’t do anything

How come that the links do not work?

Here’s my code:

$w.onReady(function () {
 //Sets the socials repeater items based on the found urls
 $w("#socialsRepeater").onItemReady( ($item, itemData, index) => {
    $item("#socialIcon").src = itemData.image;
    $item("#socialIcon").link = itemData.link;
    $item("#socialIcon").target = "_blank";
 
    console.log("itemData:");
    console.log(itemData);
      } );
      
      ...
      
      //Get Artist URLs and set all URLs of the page
 $w("#artistURLsDataset").onReady(() => {

    let socialsRepeaterData = [];

    $w("#artistURLsDataset").getItems(0, $w("#artistURLsDataset").getTotalCount())
       .then((result) => {

          if (result.totalCount > 0) {
          for (var i = 0; i < result.totalCount; i++) {
          switch (result.items[i].type) {
 
             case TIKTOK_URL_TYPE:
                socialsRepeaterData.push(
                   {
                      "_id": i.toString(),
                      "link": result.items[i].title,
                      "image": 'wix:vector://v1/fed44f_c835011570064c418486935b62e32990.svg/icons8-tiktok.svg'
                    });
             break;

             case BANDCAMP_URL_TYPE:
                socialsRepeaterData.push(
                   {
                      "_id": i.toString(),
                      "link": result.items[i].title,
                      "image": 'wix:vector://v1/fed44f_55a524d054574fae9766ebba71ff1f82.svg/icons8-bandcamp.svg'
                   });
             break;
 
             ... //lots of other types of urls cases
 
             default: 

             break;
             }
          }
       }
 $w('#socialsRepeater').data = socialsRepeaterData;
})

Some facts/tried things:

  • console.log of the itemData (which I left in the code above to show) in onItemReady does show correct information, for example:
    itemData:
    {…}
    _id: “0”
    link: “https://soundcloud.com/appnot”
    image: “wix:vector://v1/fed44f_7cb186ae72f64a219d5c94ad046425ed.svg/icons8-soundcloud.svg”
    itemData:
    {…}
    _id: “2”
    link: “https://www.instagram.com/elisa_appnot”
    image: “wix:vector://v1/fed44f_b7231e47c3cf48df80dd303480e9f0c7.svg/icons8-instagram.svg”

  • Just to check, I tried adding a separate vector image via the GUI of the editor and just set its link and target properties with, the same, code (just hardcoded values for http://www.google.com/) in the onReady function: THAT WORKS fine → I don’t get it, it looks like it’s the same thing.

  • Before using vectors, I was using image elements, same code: that worked fine too :thinking:

If anyone has a clue for me to explore, I’d be glad to solve this mystery! :smiley:

Thanks for your help!