[Solved] Cannot get #element to link to dynamic page!

Ask the community
,
1

Okay, so I have a repeater (#postrepeater) connected to my dynamic data (#projectdata), and in each repeater container I have a hover-box element (#posthoverbox). I am trying to get the hover boxes to link to their corresponding dynamic pages with the following code.

Note that /link-projects-title/ is the field key for the dynamic pages.

import wixLocation from 'wix-location';
import wixData from 'wix-data';

$w.onReady(function () {
        $w('#postrepeater').onItemReady( ($item,dataItem,index) => {

let title = dataItem.title;
let linkToDynamicPage = '/link-projects-title/${title}';

    console.log("Title is: ", title);
    console.log("Link to page is =", linkToDynamicPage);

            $item('#posthoverbox').onClick(() => {
                wixLocation.to(linkToDynamicPage);
            });
    })  
});

I don’t get any errors, but my console reads:

Loading the code for the Student Projects page. To debug this code, open lvu2o.js in Developer Tools.
Title is:  Zero Carbon World
Link to page is = /link-projects-title/${title}
Title is:  Desert Wildlife Conservation
Link to page is = /link-projects-title/${title}
Title is:  Renewable Energy Program
Link to page is = /link-projects-title/${title}
Title is:  Rainforest Action Initiative
Link to page is = /link-projects-title/${title}

And whenever I click on any of the hover-box elements, they bring me back to the top of the current page.

Any help with this issues would be greatly appreciated!

2

You need to use the backtick ` for template literals . So…

instead of this:

let linkToDynamicPage = '/link-projects-title/${title}';

you want this:

let linkToDynamicPage = `/link-projects-title/${title}`;
3

Hi there,

To get redirected to your dynamic page, you need to use the Array method to access the link property as it contains dashes.

$item('#posthoverbox').onClick(() => {
    wixLocation.to(itemData['link-projects-title']);
})

The “link-projects-title” ID was auto-generated when you created your first dynamic page for the given collection.

Hope this helps~!
Ahmad

4

Thank you for your reply, I changed that line to use backticks, and am now receiving the following message:

Title is:  Zero Carbon World
Link to page is = /link-projects-title/Zero Carbon World
Title is:  Desert Wildlife Conservation
Link to page is = /link-projects-title/Desert Wildlife Conservation
Title is:  Renewable Energy Program
Link to page is = /link-projects-title/Renewable Energy Program
Title is:  Rainforest Action Initiative
Link to page is = /link-projects-title/Rainforest Action Initiative

I am not sure how to get it to behave like a url, as it still brings me back to the top of the current page instead of the dynamic project page.

5

Thank you for your reply. When I changed the wixLocation.to to include “itemData” I received the following message.

itemData is not defined

And I do not know what definition itemData would need to appropriately use the array method.

6

(Also, thank you for the links to the definitions of the properties, this really helps in the journey that is understanding all of this!)

7

Okay, slowly I started to understand what I was doing. The successful code was as follows:


import wixLocation from 'wix-location';
import wixData from 'wix-data';

$w.onReady(function () {
        $w('#postrepeater').onItemReady( ($item,dataItem,index) => {

let linkToDynamicPage = dataItem['link-projects-title'];

    console.log("Link to page is =", linkToDynamicPage);

            $item('#posthoverbox').onClick(() => {
                wixLocation.to(`${linkToDynamicPage}`);
            });
    })  
});

And it returns the following in the console, and successfully links to the dynamic pages.

Link to page is = /projects/zero-carbon-world

Link to page is = /projects/desert-wildlife-conservation

Link to page is = /projects/renewable-energy-program

Link to page is = /projects/rainforest-action-initiative