How do I get the buttons on a repeater within the wix branded app to navigate to screens? I'm using the widgets

Ask the community
, ,
1

Hi I created widgets in the branded app and used the slider repeater. Im trying to use the code assist to open up the screens that these 4 cards are supposed to open to. the id’s are correct but im not sure where im going wrong.

This is the full code im using.

import wixNavigateMobile from 'wix-navigate-mobile';

$w.onReady(() => {

  const rep = $w('#repeater1'); // your repeater id

  const pickScreen = (txt) => {
    const t = (txt || '').toLowerCase();

    if (t.includes('society')) return 'society';
    if (t.includes('tennis')) return 'tennis';
    if (t.includes('equestrian')) return 'equestrian';
    if (t.includes('motorsport')) return 'motorsport';

    return '';
  };

  rep.onItemReady(($item, itemData, index) => {
    // 1) read a visible title from this card
    let title = '';
    ['#text5', '#text7', '#text3', '#text2', '#text1'].some(sel => {
      try {
        const el = $item(sel);
        if (el && el.text) { 
          title = el.text; 
          return true; 
        }
      } catch (_) {}
      return false;
    });

    // 2) decide screen by title, fallback to position if needed
    let screen = pickScreen(title);
    if (!screen) {
      const byIndex = ['society', 'tennis', 'equestrian', 'motorsport']; // left-to-right
      screen = byIndex[index] || '';
    }
    if (!screen) return;

    // 3) wire the arrow button in THIS card
    const arrow = $item('#button2'); // your arrow id
    if (!arrow) return;

    const go = () => wixNavigateMobile.toScreen(screen)
      .catch(err => console.log('Navigation error:', err));

    if (typeof arrow.onPress === 'function') arrow.onPress(go);
    else if (typeof arrow.onTap === 'function') arrow.onTap(go);
    else if (typeof arrow.onClick === 'function') arrow.onClick(go);
  });
});

image
image1613×857 185 KB

1 Like
2

I notice you have some errors at the end of the code:

else if (typeof arrow.onTap === 'function') arrow.onTap(go);
else if (typeof arrow.onClick === 'function') arrow.onClick(go);

onTap and onClick are not applicable to the mobile button. You can see all the properties and events available here - Mobile Button Introduction | Velo

I don’t have much experience in building mobile widgets, so not sure exactly where things might be going wrong.

I would recommend adding a series of console.logs() to try and identify at what point it’s failing/what is running correctly.

1 Like