A beginner needs help creating a dynamic page owner profile link

Ask the community
, , ,
6

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;
}