Finally, after several weeks of searching, I found the instructions to display the name of the owner of the dynamic page, but now the problem is how to make a link from the page to the owner’s profile?
So now I can retrieve the information of the creator of the product from the CMS database for that dynamic page. and the dynamic page shows the owner’s nickname, but how to make it work as a link to their profile. Or if you could still make the profile picture visible and make it work as a “button” for the link.
And so I’m completely new to this coding, so my own coding is done with copy/paste style and the rest by guessing.
And below you can see the current working code with which I managed to get that owner’s information displayed. I believe that someone will recognize the code when it is copied from here.
And the brackets are missing at the end because the second code is a continuation.
$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
// This launches the hook outlined above when the dataset is ready, because the dynamicDataset is linked to the 'Characters' collection
populateCalculatedFields();
});
function populateCalculatedFields() {
// This creates the authorID field containing the dynamic item's _owner ID
const currentAsset = $w("#dynamicDataset").getCurrentItem();
const ownerID = currentAsset.authorID;
// This placed the _owner ID of the dynamic item in a hidden text box as a check
$w("#AuthorID").text = ownerID;
// This passes the ownerID variable to the backend function above
getSlug(ownerID)
// Note that the .find instruction is in the backend (where permissions are bypassed through code above) but the .then instruction is here in the frontend, so that I can access the elements of the returned item and define fields to use on the page
.then((results) => {
let item = results.items[0];
let nickname = item.nickname;
// This is a check to make sure the right item is returned
console.log(results);
// This inserts the dynamic item owner's nickname (from the Members/PrivateMembersData collection) into a text box on the dynamic page to show them as the author of the dynamic item displayed
$w('#Author').text = nickname;
})
}
Regarding your code → i would say there is missing a lot of more code, which should be on your BACKEND.
But i am almost sure, that you don’t have created this part yet.
// This passes the ownerID variable to the backend function above
getSlug(ownerID)
You get some errors in your current running code? → Check the → CONSOLE!
You are working on a dynamic dataset, which is connected to one of your DATABASES in the background.
Once your dataset is connected you can use…
const currentAsset = $w("#dynamicDataset").getCurrentItem();
const ownerID = currentAsset.authorID;
…so you will get all data out of the current selected ITEM, including all the neccessary data for the selected ITEM.
const title = currentAsset.title;
const ownerID = currentAsset.authorID;
…and so on…
Ohhh wait —>
dynamic page shows the owner’s nickname
…so it is already working and you have a backend-function already running? Then you did not show your whole setup!!!
but how to make it work as a link to their profile.
When you take a look into your database → you will surely find some kind of a special database-field → it should be GREYED-OUT <–, this should lead you to your success.
So I can see the name, but when my own skills are not enough, I have to ask for help, because I can’t find a solution just by reading random writings.
And I’ll put the backend code below:
import wixData from 'wix-data';
export function getSlug(ownerID) {
let options = {
"suppressAuth": true
}
return wixData.query('Members/PrivateMembersData')
.eq('_id', ownerID)
.find(options)
}
And datahook:
export function Properties_afterQuery(item, context) {
item.authorID = item._owner;
return item;
}
And now I should figure out how to change that name into a link from which I could go directly to the owner’s profile.
And the site will be a place where hobbyists can sell used goods to other hobbyists, so the intention is that the buyer/seller can go directly to the profile and thereby start a chat with the other
And the minimum would be to get that owner’s name changed to a link and everything that comes after that would be even better.
If you need personal help → velo-ninja@outlook.com
You can send me an invitation to your project, i can take a look onto it.
I do not want to reconstruct all the setup to show you how it would work.
I think I’m improving or there were just really good guesses.
Today I managed to put the product owner’s profile picture on the product page and make a link to it.
And believe it or not, considering my skill level, these are already huge achievements.
So, in practice, I’ve almost solved my problem, as long as I figure out how to get “slug” attached to the link in the profile picture.
And so I already have the necessary Slug visible at the moment, but I still have to figure out how to get it to the address of the link, so that by clicking on the image, the site goes to the owner’s profile.
Below is the current code with a more detailed explanation of the latest changes
$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
populateCalculatedFields();
});
function populateCalculatedFields() {
const currentAsset = $w("#dynamicDataset").getCurrentItem();
const ownerID = currentAsset.authorID;
$w("#AuthorID").text = ownerID;
getSlug(ownerID)
.then((results) => {
let item = results.items[0];
let nickname = item.nickname;
//▼▼THIS IS THE SLUG THAT SHOULD BE GETTING THERE IN THE LINK
let slug = item.slug;
//▼▼This allowed me to import a picture of the owner's information
let image = item.picture;
console.log(results);
//▼▼Below is just the rest of the address where the bold part should make the Slug appear
const link = '................/members-area/**[owner_slug]**/profile';
$w('#Author').text = nickname;
$w('#AuthorSlug').text = slug;
//▼▼And below this point are the commands with which I was able to change #image10 to show the owner's profile picture, and to act as a link button that opens the link above.
$w("#image10").src = image;
$w("#image10").link = link;
})
}
image10 currently works as expected as a link button, but the problem is that the link address is wrong because the owner’s slug is missing.
So now I’ve tried all the possible brackets and punctuation marks that I could think of, but at least I still can’t get that Slug information attached to that link.
And I know that my code is certainly not the prettiest or the best, but maybe it will get better as I learn more.
And the owner’s Slug and also the owner’s id are also currently visible on the page, just for clarification. But that Slug should get there at the url address.
Now I’ve got everything working on the product page.
That is, now the profile picture and nickname of the seller/owner will appear on the page of the announced product, and clicking on the picture will take you directly to the seller’s profile.
As such a new coder, the biggest problem was with characters, i.e. I had tried to use the ’ character in the code, but the correct one was `…
So, maybe I learned something from this again when, due to such a typing error, it took several days when it just didn’t work.
But the codes are now frontend
import { getSlug } from 'backend/secureSlug.jsw';
import wixUsers from 'wix-users';
$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
// This launches the hook outlined above when the dataset is ready, because the dynamicDataset is linked to the 'Characters' collection
populateCalculatedFields();
});
function populateCalculatedFields() {
// This creates the authorID field containing the dynamic item's _owner ID
const currentAsset = $w("#dynamicDataset").getCurrentItem();
const ownerID = currentAsset.authorID;
// This placed the _owner ID of the dynamic item in a hidden text box as a check
$w("#AuthorID").text = ownerID;
// This passes the ownerID variable to the backend function above
getSlug(ownerID)
// Note that the .find instruction is in the backend (where permissions are bypassed through code above) but the .then instruction is here in the frontend, so that I can access the elements of the returned item and define fields to use on the page
.then((results) => {
let item = results.items[0];
let nickname = item.nickname;
let slug = item.slug;
let image = item.picture;
// This is a check to make sure the right item is returned
console.log(results);
//This is the link that is activated when the profile picture is clicked
const link = (`/members-area/${slug}/profile`)
// This inserts the dynamic item owner's nickname (from the Members/PrivateMembersData collection) into a text box on the dynamic page to show them as the author of the dynamic item displayed
$w('#Author').text = nickname;
$w('#AuthorSlug').text = slug;
//With these commands, image10 changes to the owner's profile picture and becomes a link
$w("#image10").src = image;
$w("#image10").link = link;
})
}
getSlug jsw code is still the same as in the beginning
import wixData from 'wix-data';
// This makes sure the function gets the variable from the frontend as 'ownerID'
export function getSlug(ownerID) {
// This bypasses the permissions check so the query can run for any user, not just the Member who owns the asset
let options = {
"suppressAuth": true
}
// This runs the query with the above option in place and finds the Member who's ID matches the _owner ID of the Item displayed on the dynamic page
return wixData.query('Members/PrivateMembersData')
.eq('_id', ownerID)
.find(options)
}
And datahook is
export function Properties_afterQuery(item, context) {
// This creates a field named 'authorID' containing the _owner ID of any item returned whenever a query is performed on the 'Characters' collection
item.authorID = item._owner;
return item;
}
