Link repeater row to dynamic item - not manually

Discussion Ask a question
,
1

Hi,
For this page: https://www.idassoc.com/product-information-encyclopedia
Can someone guide me in how to code a container in a repeater row to link to a dynamic item?

  1. I know this can be accomplished with linking text, but that is performed manually and I can’t do that for all 600 entries in the dataset, it needs to be dynamic.
  2. I know this can be accomplished with a button, but the buttons don’t wrap text, which makes it difficult to use in a normal table. It looks like this now:

2296×1216 441 KB

Could someone give me guidance on how to code this or how to make a button text wrap?
Here’s my really bad code:

import wixData from “wix-data”;
import wixLocation from ‘wix-location’;
import {local} from ‘wix-storage’;

export function searchBox_keyPress(event, $w) {
console.log($w(‘#searchBox’).value);
filter($w(‘#searchBox’).value);
let debounceTimer
function update() {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#searchBox’).value);
}, 100);
}
}

function filter() {
$w(‘#dataset1’).setFilter(
wixData.filter()
.contains(‘article’, $w(‘#searchBox’).value)
.or(
wixData.filter()
.contains(‘acronym’, $w(‘#searchBox’).value)
)
).then(()=> {
if ($w(‘#dataset1’).getTotalCount()===0) {
$w(‘#noResText’).show();
} else {
$w(‘#noResText’).hide()
}

const shortTextLength = 60;
let fullText;
let shortText;
$w(“#repeater”).forEachItem(($w,item) => {
fullText = $w(‘#dataset1’).getCurrentItem().definition;
if (!fullText.length) {
$w(‘#DefinitionText’).collapse();
} else
if (fullText.length <= shortTextLength) {
$w(‘#DefinitionText’).text = fullText;

        }  **else**  { 
            shortText = fullText.substr(0, shortTextLength) + "..."; 
            $w('#DefinitionText').text = shortText; 
        } 
   } 
   ) 
} 
)

}

$w.onReady( function () {
$w(“#dataset1”).onReady( function () {
const shortTextLength = 60;
let fullText;
let shortText;
$w(“#repeater”).forEachItem(($w,item) => {
fullText = $w(‘#dataset1’).getCurrentItem().definition;
if (!fullText.length) {
$w(‘#DefinitionText’).collapse();
} else
if (fullText.length <= shortTextLength) {
$w(‘#DefinitionText’).text = fullText;

        }  **else**  { 
            shortText = fullText.substr(0, shortTextLength) + "..."; 
            $w('#DefinitionText').text = shortText; 
        } 
   } 
   ) 
} 
)

}
)

Help appreciated thx!

2

Hi @swood !

I see that you use dynamic pages & dataset in order to to link your terms to their definition pages.
Thats about how it should be done.

Can you please explain what do you mean about “doing it manually”?

Right now the first column direct me to the relevant pages.

What are you trying to achieve?

Doron.

3

I am currently performing it with a long button to cover the container in the repeater row. I have to left justify the button text. This is not ideal because as you can see in my point above in #2:

  1. I know this can be accomplished with a button, but the buttons don’t wrap text, which makes it difficult to use in a normal table. It looks like this now:

710×116 25.9 KB

See how the text in the button does not wrap?

I think I have 2 options:

  1. Figure out how to make the text in a button wrap
    or
  2. Figure out how to link the text, but do it in code so I do not have to manually set 500 links in the editor 3 times.

Can you provide some guidance? I thought I saw some people doing it with the wix location.to function, but it was not clear how to perform this.

the links would be to “/product-information-definition/{Article}” where {Article} is pulled from the dataset.

4

@doronalkalay bump

5

@swood , sorry for the late response.

I think that you can workaround this issue by putting your text component inside a container box.
On this box have an event handler that will direct you to the relevant page.
How do you do that?
Use the repeater’s method of onItemReady() & $item in order to populate the link dynamically.

Your code would look something like that:

$w('#yourRepeater').onItemReady(($item, itemData, index) => {
        $item('#itemButton').onClick(() => {
            wixLocation.to(itemData.url) //or the relevant path
        })
 })

Let me know if it worked for you.

Doron.