Repeater button to dynamic page

Ask the community
,
1

Hi,

I’ve built a megasearch type page with different user input elements filtering a database. Now I would like to connect the button on the repeater to their respective item dynamic page but even if I tried different ways, I cannot get it to work. At the moment, the page gives a 404 error.

This is the code:

Thanks for the help!

import {local} from 'wix-storage';
import wixData from 'wix-data';
import wixLocation from 'wix-location';

let formacioninfo = [];

// Results re-direction
$w.onReady(function () {

 var sameWord = local.getItem("searchWord");

    $w("#searchBar").value = sameWord;
    $w("#searchBar").placeholder = sameWord;
    $w('#dataset1').onReady(function () {
        search();
    });

});

 

export function searchButton_click() {
    search();
}

 

function search() {
    wixData.query('FORMACION')
   .contains('nombreCurso', $w("#searchBar").value)
   .or(wixData.query('FORMACION').contains('especialidad', $w("#searchBar").value))
   .or(wixData.query('FORMACION').contains('empresa', $w("#searchBar").value))
      .find()
       .then(res => {
  $w('#listRepeater').data = res.items;
    });

}

// Filters
$w.onReady(function () {

//Query to get the information from the database    
      wixData.query("FORMACION")
        .find()
        .then((results) => {
            formacioninfo = results.items;
            $w(`#listRepeater`).data = formacioninfo;
        })
        .catch((err) => {
 let errorMsg = err;
        });
//Set the information to the repeater     
      $w(`#listRepeater`).onItemReady(($w, itemData, index) => {          
        $w('#title').text = itemData.nombreCurso;
        $w('#text12').text = itemData.especialidad;
        $w('#button2').label = '€' + String(itemData.precio);
        $w('#text14').text = itemData.fecha;
        $w('#button1').label = itemData.tipo;
        $w ('#text15').text = itemData.modalidad;
      });
});
 export function MoreButton_click(event) {
 
        $w("#dataset1").onReady(() => {
 
 let $item = $w.at(event.context);
 let currentItem = $item("#dataset1").getCurrentItem();
 let dynamicPageID = `${currentItem.id}`
 let collectionID =  `${currentItem.databaseName}`
            console.log('https://omniaveterinary.com/'+collectionID+'/'+dynamicPageID);
            wixLocation.to('https://omniaveterinary.com/'+collectionID+'/'+dynamicPageID);
 
        });
    }

//Filter function
function filterResults(results){
    results = [];
 const especialidad = $w('#iEspecialidad').value;
 const tipo = $w ('#iType').value;
 const modalidad = $w('#iModalidad').value;
 const maxprice = $w('#iMaxPrice').value
 const minprice = $w('#iMinPrice').value

    results = formacioninfo.slice();

 if (especialidad && especialidad !== 'Escoge especialidad') {
          results = results.filter(item => item.especialidad === especialidad);}
 
 if (tipo && tipo !== 'Escoge tipo') {
          results = results.filter(item => item.tipo === tipo);
          }

 if (modalidad && modalidad !== 'Escoge modalidad') {
          results = results.filter(item => item.modalidad === modalidad);
          }
 if (maxprice && maxprice !== 'Escoge max precio') {      
    results = results.filter(item => item.precio <= maxprice); 
        } 
 if (minprice && minprice !== 'Escoge min precio') {      
    results = results.filter(item => item.precio >= minprice); 
        } 

 return results; 
    }

//Input filter
export function iEspecialidad_change(event) {
 //filtering the results
 const filteredResults = filterResults(formacioninfo);
 //setting the data
        $w(`#listRepeater`).data = filteredResults;
        $w(`#listRepeater`).onItemReady(($w, itemData) => {
            console.log(itemData.title);
                    $w('#logo').src = itemData.logo;
                    $w('#title').text = itemData.nombreCurso;
                    $w('#text12').text = itemData.especialidad;
                    $w('#button2').label = '€' + (itemData.precio);
                    $w('#text14').text = itemData.fecha;
                    $w('#button1').label = itemData.tipo;
                    $w ('#text15').text = itemData.modalidad;
        }); 
 
}

export function iType_click(event) {
const filteredResults = filterResults(formacioninfo);
 //setting the data
        $w(`#listRepeater`).data = filteredResults;
        $w(`#listRepeater`).onItemReady(($w, itemData) => {
            console.log(itemData.title);
                    $w('#logo').src = itemData.logo;
                    $w('#title').text = itemData.nombreCurso;
                    $w('#text12').text = itemData.especialidad;
                    $w('#button2').label = '€' + (itemData.precio);
                    $w('#text14').text = itemData.fecha;
                    $w('#button1').label = itemData.tipo;
                    $w ('#text15').text = itemData.modalidad;
        }); 
 
}

export function iModalidad_click(event) {
const filteredResults = filterResults(formacioninfo);
 //setting the data
        $w(`#listRepeater`).data = filteredResults;
        $w(`#listRepeater`).onItemReady(($w, itemData) => {
            console.log(itemData.title);
                    $w('#logo').src = itemData.logo;
                    $w('#title').text = itemData.nombreCurso;
                    $w('#text12').text = itemData.especialidad;
                    $w('#button2').label = '€' + (itemData.precio);
                    $w('#text14').text = itemData.fecha;
                    $w('#button1').label = itemData.tipo;
                    $w ('#text15').text = itemData.modalidad;
        }); 
}

export function iMaxPrice_change(event) {
const filteredResults = filterResults(formacioninfo);
 //setting the data
        $w(`#listRepeater`).data = filteredResults;
        $w(`#listRepeater`).onItemReady(($w, itemData) => {
            console.log(itemData.title);
                    $w('#logo').src = itemData.logo;
                    $w('#title').text = itemData.nombreCurso;
                    $w('#text12').text = itemData.especialidad;
                    $w('#button2').label = '€' + (itemData.precio);
                    $w('#text14').text = itemData.fecha;
                    $w('#button1').label = itemData.tipo;
                    $w ('#text15').text = itemData.modalidad;
        }); 
}

export function iMinPrice_change(event) {
const filteredResults = filterResults(formacioninfo);
 //setting the data
        $w(`#listRepeater`).data = filteredResults;
        $w(`#listRepeater`).onItemReady(($w, itemData) => {
            console.log(itemData.title);
                    $w('#logo').src = itemData.logo;
                    $w('#title').text = itemData.nombreCurso;
                    $w('#text12').text = itemData.especialidad;
                    $w('#button2').label = '€' + (itemData.precio);
                    $w('#text14').text = itemData.fecha;
                    $w('#button1').label = itemData.tipo;
                    $w ('#text15').text = itemData.modalidad;
        });
}
2

Hi! Have you tried syncing it from the sandbox?

~Haiden~

3

Hey Haiden,

Thanks for replying!

Yes, all it’s synced, permissions are correct… I’ve even tried all the different codes I could find in the forum but no success…

4

Hi Sofia,

The dynamic page URL has a field inside the database for each item, you need to get its key, for example " product-page-title ", then use it to redirect customers when they click.

let link = itemData["product-page-title"];

$item('#goToProductButton').link = link;
// OR
$item('#productImage').onClick((event) => {
    wixLocation.to(link);
})

Hope that helped!
Ahmad

5

Thank you thank you very much!!

It works perfectly with the second option!

6

The first option is for buttons, the second option is for anything else.

You’re welcome, glad that I helped :wink: