How do you link to a Dynamic Page from a repeater?

Ask the community
,
1

I am linking up a repeater on my page using code, but I don’t know how to link to the dynamic page. I would like to add a link to the #modernSquareImage so that when the user clicks on the image they are sent to the corresponding dynamic page. Below is an example of the code I am using to fill one of the repeaters on the page.

https://systemsixkitchens.editorx.io/devsite-s6k/kitchen-style/

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

let data;

$w.onReady(async function () {
  data = local.getItem("kitchenStyles");
 
 if(data) {
    data = JSON.parse(data);
  }
 else {
 let results = await wixData.query("Kitchens").find();
    data = results.items;
    local.setItem("kitchenStyles", JSON.stringify(results.items));
  }
} );

let modernKitchensInfo = [];
      $w.onReady(function () {
      //Query to get the information from the database    
      wixData.query("Kitchens")
        .eq("kitchenStyle", "Modern")
        .limit(4)
        .find()
        .then((results) => {
            modernKitchensInfo = results.items;
            $w(`#modernKitchens`).data = modernKitchensInfo;
        })
        .catch((err) => {
        let errorMsg = err;
        });
//Set the information to the repeater     
      $w(`#modernKitchens`).onItemReady(($w, itemData) => {
//add here all the relevant elements of the repeater
//In this case, I've added a text and an image to the repeater    
         $w(`#modernDoorName`).text = itemData.doorStyle;
         $w(`#modernDoorColour`).text = itemData.doorColour;
         $w(`#modernPriceIndicator`).text = itemData.priceIndicator;
         $w('#modernSquareImage').src = itemData.image;  
      });
});
2

Hey,

You can link to a dynamic page using the wix-location API. Specifically the to() function.

You can set up an onClick function on the image in the repeater to move to a new page with the to() function.

This post will be helpful for you, another user had the same question and it was answered there with coding examples.

Hope this helps!

Data | Corvid Team

3

Hi Dara,

Thanks for your message I managed to get the links working on the first repeater but when I applied the code to the subsequent repeaters it stopped working. Are you able to tell me where I am going wrong please?

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

let data;

$w.onReady(async function () {
  data = local.getItem("kitchenStyles");
 
 if(data) {
    data = JSON.parse(data);
  }
 else {
 let results = await wixData.query("Kitchens").find();
    data = results.items;
    local.setItem("kitchenStyles", JSON.stringify(results.items));
  }
} );



let modernKitchensInfo = [];
let minimalKitchensInfo = [];
let industrialKitchensInfo = [];
let eclecticKitchensInfo = [];
let traditionalKitchensInfo = [];



$w.onReady(function () {
 //Query to get the information from the database    
    wixData.query("Kitchens")
        .eq("kitchenStyle", "Modern")
        .limit(4)
        .find()
        .then((results) => {
            modernKitchensInfo = results.items;
            $w(`#modernKitchens`).data = modernKitchensInfo;
        })
        .catch((err) => {
 let errorMsg = err;
        });
 //Set the information to the repeater 
        $w(`#modernKitchens`).onItemReady(($w, itemData, index) => {
 let linkToDynamicPage = itemData["link-kitchens-1-title"];  
 //add here all the relevant elements of the repeater
 //In this case, I've added a text and an image to the repeater    
            $w(`#modernDoorName`).text = itemData.doorStyle;
            $w(`#modernDoorColour`).text = itemData.doorColour;
            $w(`#modernPriceIndicator`).text = itemData.priceIndicator;
            $w('#modernSquareImage').src = itemData.image;
            $w('#modernKitchensButton').onClick(() => {
                wixLocation.to(linkToDynamicPage);
            });
        });
 

 //Query to get the information from the database    
    wixData.query("Kitchens")
        .eq("kitchenStyle", "Minimal")
        .limit(4)
        .find()
        .then((results) => {
            minimalKitchensInfo = results.items;
            $w(`#minimalKitchens`).data = minimalKitchensInfo;
        })
        .catch((err) => {
 let errorMsg = err;
        });
 //Set the information to the repeater     
        $w(`#minimalKitchens`).onItemReady(($w, itemData, index) => {
 let linkToDynamicPage = itemData["link-kitchens-1-title"];  
 //add here all the relevant elements of the repeater
 //In this case, I've added a text and an image to the repeater    
            $w(`#minimalDoorName`).text = itemData.doorStyle;
            $w(`#minimalDoorColour`).text = itemData.doorColour;
            $w(`#minimalPriceIndicator`).text = itemData.priceIndicator;
            $w('#minimalSquareImage').src = itemData.image;
            $w('#minimalKitchensButton').onClick(() => {
                wixLocation.to(linkToDynamicPage);
            }); 
        });
 
 //Query to get the information from the database    
    wixData.query("Kitchens")
        .eq("kitchenStyle", "Industrial")
        .limit(4)
        .find()
        .then((results) => {
            industrialKitchensInfo = results.items;
            $w(`#industrialKitchens`).data = industrialKitchensInfo;
        })
        .catch((err) => {
 let errorMsg = err;
        });
 //Set the information to the repeater     
        $w(`#industrialKitchens`).onItemReady(($w, itemData, index) => {
 let linkToDynamicPage = itemData["link-kitchens-1-title"]; 
 //add here all the relevant elements of the repeater
 //In this case, I've added a text and an image to the repeater    
            $w(`#industrialDoorName`).text = itemData.doorStyle;
            $w(`#industrialDoorColour`).text = itemData.doorColour;
            $w(`#industrialPriceIndicator`).text = itemData.priceIndicator;
            $w('#industrialSquareImage').src = itemData.image;
            $w('#industrialKitchensButton').onClick(() => {
                wixLocation.to(linkToDynamicPage);
            });  
        });

 //Query to get the information from the database    
     wixData.query("Kitchens")
        .eq("kitchenStyle", "Eclectic")
        .limit(4)
        .find()
        .then((results) => {
            eclecticKitchensInfo = results.items;
            $w(`#eclecticKitchens`).data = eclecticKitchensInfo;
        })
        .catch((err) => {
 let errorMsg = err;
        });
 //Set the information to the repeater     
        $w(`#eclecticKitchens`).onItemReady(($w, itemData, index) => {
 let linkToDynamicPage = itemData["link-kitchens-1-title"]; 
 //add here all the relevant elements of the repeater
 //In this case, I've added a text and an image to the repeater    
            $w(`#eclecticDoorName`).text = itemData.doorStyle;
            $w(`#eclecticDoorColour`).text = itemData.doorColour;
            $w(`#eclecticPriceIndicator`).text = itemData.priceIndicator;
            $w('#eclecticSquareImage').src = itemData.image;
            $w('#eclecticKitchensButton').onClick(() => {
                wixLocation.to(linkToDynamicPage);
            });  
        });

 //Query to get the information from the database    
    wixData.query("Kitchens")
        .eq("kitchenStyle", "Traditional")
        .limit(4)
        .find()
        .then((results) => {
            traditionalKitchensInfo = results.items;
            $w(`#traditionalKitchens`).data = traditionalKitchensInfo;
        })
        .catch((err) => {
 let errorMsg = err;
        });
 //Set the information to the repeater     
        $w(`#traditionalKitchens`).onItemReady(($w, itemData, index) => {
 let linkToDynamicPage = itemData["link-kitchens-1-title"]; 
 //add here all the relevant elements of the repeater
 //In this case, I've added a text and an image to the repeater    
            $w(`#traditionalDoorName`).text = itemData.doorStyle;
            $w(`#traditionalDoorColour`).text = itemData.doorColour;
            $w(`#traditionalPriceIndicator`).text = itemData.priceIndicator;
            $w('#traditionalSquareImage').src = itemData.image;
            $w('#traditionalKitchensButton').onClick(() => {
                wixLocation.to(linkToDynamicPage);
            });   
        });
});