Hi,
I’m trying to get a button on a dynamic product page to transfer to an item page anchor, I know I need to use wix-location and scrollTo() but must admit, I’m finding it a little tough to work out.
If the user clicks on the calendar, they will then be directed to the new page, but then it will scroll to the anchor of that dynamic page, showing the dates.
Do I need to use wix Location? or can i just link it to the dataset, then once on the new page use a scrollTo function on the new page?
Hi Stephen!
Please explain what you’re trying to achieve and share a link to your site so one of us (Wix workers) could look into your site.
It is possible to link a button to an anchor on a dynamic page but you’ll have to provide an item that the dynamic page belongs to.
You could also use a wixLocation.query to specify where you want the page to go
(including anchors by using ‘?’ in the url).
Best of luck!
Doron.
Hi Doron,
Thank you for your reply, the page is https://www.scottishrockandwater.com/courses/Scrambling
which will have the above icon, I’m looking for it to be directed to the anchor on a dynamic page such as https://www.scottishrockandwater.com/Courses/Scrambling/Skye-Classic-Scrambling
The anchor is above this picture
I am having trouble getting the link to go to a dynamic page, regardless of the scrollto function at the moment
import wixLocation from 'wix-location';
export function calendaricon_click(event, $w) {
wixLocation.to("/Courses/Courses-category/Title");
}
I know that the “/Courses/Courses-category/Title” is wrong as I can get it to work to direct to a standard page, but I’m finding the API reference a little confusing to be able to direct to an internal dynamic page.
Many thanks for your help
Stephen
Hi Stephen!
First of all I suggest you to change in your dynamic page settings the URL path from ‘/title’ to ‘/ID’ as shown here:
The ‘ID’ field is a unique field that is generated for every item thus directing you always to the dynamic page according to the ID of the item.
As for directing to the anchor, use the
wixLocation.query to determine
where in the page the user will be directed upon loading.
In the first page, in the button’s function you should assign a ‘key’ that will mark the query and be included in the sent url.
Example: ['?
a=1 '] the ‘?’ starts the query and ‘a=1’ is the mark/key.
import wixLocation from 'wix-location';
//...
//...
export function button1_click(event, $w) {
wixLocation.to(`/Courses/Courses-category/${ID}?a=1`);
}
In the onReady( ) function of the target page use a query to ‘search’ in the url for ‘special directions’ if they exist (your ‘a=1’), and then act accordingly to what you find and need.
its going to look something like that:
import wixLocation from 'wix-location';
//...
//...
$w.onReady(function () {
let query = wixLocation.query;
if(query.a == 1){
$w("#anchor1").scrollTo();
}
});
Thats pretty much it.
Hope it helps.
Best of luck!
Doron.
Hi Doron!
Thank you for the detailed response It’s much appreciated.
I have a question about the ‘ID’, if this is changed, then how will the URL display?
Also, the code (thank you for explaining, learning lots from you guys!) it has an error
I have tried playing around with the ${ID} but with no success… any ideas?
Thank you for your help
Stephen
Hi Stephen!
My bad for not explaining.
I gave an example and not a snippet. The ID field has a field key just as any other field and the correct one needs to be used.
Hope it helps!
Best of luck!
Doron.
Hi Doron,
Must admit I feel like a bit of an idiot as I should’ve known better… anyway thank you for getting back to me.
I was wondering though about how this affect the display of the URL?
Best wishes
Stephen
Ok im trying to do this on my site but it doesn’t work :S
Do you have some code that we could look at?
@stephenmccall Hi Stephen thanks for the fast reply and sure this is the complete page code im navigating away from
import wixLocation from ‘wix-location’;
import wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;
export function vectorImage20_click(event) {
let email = $w(“#companyEmail”).value;
wixLocation.to(`mailto:${email}?subject=` +
encodeURIComponent("Job Enquiry")
);
}
export function vectorImage19_click(event) {
let url = $w(“#websiteInfo”).value;
wixLocation.to(${url}
);
}
export function vectorImage21_click(event) {
let mob = $w(“#mobile”).value;
wixLocation.to(tel:+${mob}
);
}
export function iconButton1_click(event) {
let phone = $w(“#landline”).value;
wixLocation.to(tel:+${phone}
);
}
export function reviews_click(event,$w) {
wixLocation.to(/Updatedmemberprofile/${
_id}?a=1
);
}
//and this is the page its navigating to’s partial code…
import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;
import { session } from ‘wix-storage’;
import wixLocation from ‘wix-location’;
import wixUsers from ‘wix-users’;
import wixCrm from ‘wix-crm’;
$w.onReady( function () {
let query = wixLocation.query;
if (query.a == 1){
$w(“#anchor1”).scrollTo();
}
Thanks
@millwards322 Try this
wixLocation.to(/Updatedmemberprofile/) + "#youranchorIDhere";
Also if you highlight your code, right-click and click the box with the little arrow and line inside it will make the code easier to read in the grey box, like above
mport wixLocation from 'wix-location';
import wixData from 'wix-data';
import wixUsers from 'wix-users';
export function reviews_click(event,$w) { wixLocation.to(`/Updatedmemberprofile/${`_id`}?a=1`); }
import wixData from 'wix-data';
import wixWindow from 'wix-window';
import { session } from 'wix-storage';
import wixLocation from 'wix-location';
import wixUsers from 'wix-users';
import wixCrm from 'wix-crm';
let title;
$w.onReady(function () {
let query = wixLocation.query;
if(query.a == 1){
$w("#anchor1").scrollTo();
}
title = $w('#dynamicDataset').getCurrentItem();
initReviews();
});
Hi thanks for pointing this out, and the problem is its not navigating to the correct site members id, i want a non logged in member to be able to navigate to a site members profile
thanks
You any ideas @skmedia ? I’ve tried just about every field key name there is lol and I can’t still access my MembersProfile db to find out the correct field key name of the Updatedmembersprofile page, I’ve reported the issue but it’s been like it for days now :S seems strange the other db’s are working ok though, can you remember what the correct id is? Thanks