Adding link from CMS to a text item in a repeater

Ask the community
, , , ,
1

Hi,

I am trying to add a different link to every text item in a repeater. I know there’s a code I can use to accomplish that. Any help on what the code should be? I tried using rich text and adding link there, but the link opens in a new tab. If there is a way to fix that, that can work too.

I found this code in wix forum but this one is not working. Any ideas on how to make it work?

import winLocation from ‘wix-location’;

$w.onReady(function () {
$w(‘#yourRepeater’).onItemReady((selector, itemData, index) => {
$w(‘#YourTextElement’).onClick(() => {
winLocation.to(itemData.url);
});
});
});

I am using Wix Studio.

Thanks for any help!

2

This should be :

import wixLocationFrontend from "wix-location-frontend";

This should be the actual ID of your repeater. So if your repeater is called repeater1 or something else, then you need to update that in the code.

Same for this one regarding your text element ID.

This should actually be $item because it is in a repeater.

And this should actually be:
wixLocationFrontend.to

Whoever wrote that code misspelled the import line and had the repeater item wrong.

3

Thanks for an indepth response! It’s still not wotking though. I replaced everything and on $item it says that it cannot locate $item. might that be an issue? Should I include something there?

4

Wouldn’t it be more simple, just to show your current code in a nice formated code block ?

Like…

import wixLocation from 'wix-location';

//------- USER-INTERFACE -------------
const repeater= 'repeater1';
const txtElement = 'text1';
//------- USER-INTERFACE -------------


$w.onReady(()=> {console.log('...page is ready...');
    $w(`#${repeater}`).onItemReady(($item, itemData, index) => {
        $item(`#${txtElement}`).onClick((e)=> {console.log(e.target.id+'-clicked');
            console.log(------------------------------);
            console.log('INDEX: ', index);
            console.log('ITEM-DATA: ', itemData);
            console.log(------------------------------);
            if (itemData.url) {
                wixLocation.to(itemData.url);            
            } 
            else {console.warn('No URL found for this item.');
            }
        });
    });
});

Having for example data like the following …

[
    { "title": "Item 1", "url": "https://example.com/item1" },
    { "title": "Item 2", "url": "https://example.com/item2" },
    { "title": "Item 3" } // No URL for this item
]

Your console log output → could look like …

txtElement2-clicked
------------------------------
INDEX:  1
ITEM-DATA:  { title: "Item 2", url: "https://example.com/item2" }
------------------------------

Your STEPS!!!

  1. Copy paste this code and replace your old setup with this one.
  2. Navigate to the USER-INTERFACE-SECTION of the provided code and do the right setup using the right IDs of your used → ELEMENTS on your page, in this case REPEATER and a TEXT-ELEMENT, which you have already added onto your page.
//------- USER-INTERFACE -------------
const repeater= '#repeater1';
const txtElement = '#text1';
//------- USER-INTERFACE -------------
  1. Once you run this code… you will get a → CONSOLE-LOG <— with every click onto a selected item of your choice, like …
console.log(------------------------------);
console.log('INDEX: ', index);
console.log('ITEM-DATA: ', itemData);
console.log(------------------------------);

This will help you to understand what’s going on behind the scenes!

Read the logs.
Understand the logs.
Expand the functionality of your code, constructing more of your wished logic.

Have fun and godd luck! :grinning:

Edit: In general, all you have to do now is to UPDATE the green marked code inside the → USER-INTERFACE → by adding your current SETUP-DATA for your used Wix-Elements on your page, without touching the → BASIC-CODE at all!

Also check this…

Improper Quotes: You’re using curly quotes (‘ and ’) instead of straight quotes (' and "). These curly quotes are not valid in JavaScript.

…after you have copy and paste the code into your CODE-SECTION of your Wix-EDITOR!
Since the PARSING OF THE COPIED CODE FROM THE VELO-FORUM IS NOT ALWAYS WORKING PROPERLY —> THE QUOTATION-MARKS INSIDE THE -->CODE-BLOCK<-- CAN CHANGE !!!

I do not know → why this ERROR is still existing, but nevermind!

You can use the following quotation marks inside your codes ---->
a) —> ‘’
b) —> “”
and c) —> ``

But sometimes you get CURLY QUOTATION MARKS → which will destroy the functionality of the COPIED CODE from the CODE-BLOCK of the FORUM!!!

Maybe also a good BUG-REPORT for the —> FORUM-ADMIN <—, who should normaly → ELEMINATE this BUG already!!!

Reading my own post i recognize again, that for —> a) <— again CURLY-QUOTES have been created … instead of … creating STRAIGHT SINGLE QHOTES !!! :space_invader:

You will find the right STRAIGHT-SINGLE-QUOTES marked green inside my provided code!