Hi there! Is there a way to tell users that they are on the tag page of the blog feed? I understand that I can enable a category navigation above the blog feed. But how do I show the current tag?
You mean you want to show current post’s tags in text element?
Exactly, a headline like “Newest articles about {name of the tag}”.
Alright Kleh,
I’m making the similar feature for my site too. Here is my special gift I’ve been testing out.
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import wixUsers from 'wix-users';
import {local} from 'wix-storage-frontend';
let currentPostId;
$w.onReady(function () {
getAndLoadRelatedPosts();
wixLocation.onChange(() => {
if (currentPostId !== getPostIdFromUrl()) {
getAndLoadRelatedPosts(); // Reload post content when the URL changes
}
});
});
// Function to extract post ID from URL
function getPostIdFromUrl() {
const urlSegments = wixLocation.path;
return urlSegments[urlSegments.length - 1]; // Assuming the post ID is the last segment
}
async function getAndLoadRelatedPosts() {
currentPostId = getPostIdFromUrl();
const post = await $w("#post1").getPost();
console.log("Current post data:", post);
// Display current post content
$w("#currentPostImage").src = post.coverImage;
$w("#currentPostTitle").text = post.title;
// Display current post's tags
if (post.tags && post.tags.length > 0) {
queryTagNames(post.tags)
.then((tagsString) => {
$w("#currentPostTags").text = tagsString;
})
.catch((err) => {
console.error("Error fetching tags for current post:", err);
$w("#currentPostTags").text = "No tags available";
});
} else {
$w("#currentPostTags").text = "No tags available";
}
// Query the author details
wixData.query("Members/FullData")
.eq("_id", post.author)
.find()
.then((results) => {
if (results.items.length > 0) {
const author = results.items[0];
$w('#views').text = `Written By ${author.nickname}`;
$w('#profilePicture').src = author.profilePhoto;
$w('#aboutText1').text = author.aboutPlain;
} else {
console.log("Author not found in Members/FullData");
}
});
}
// Function to query tag names based on tag IDs
async function queryTagNames(tagIds) {
if (!tagIds || tagIds.length === 0) {
return "No tags available";
}
try {
// Query the Blog/Tags collection directly using the tag IDs
const results = await wixData.query("Blog/Tags")
.hasSome("_id", tagIds) // Query the tag IDs
.find();
if (results.items.length > 0) {
// Using 'label' field to display the actual tag names
const tagNames = results.items.map(tag => tag.label);
return tagNames.join(", ");
} else {
return "No tags available";
}
} catch (err) {
console.error("Error querying Blog/Tags:", err);
return "Error loading tags";
}
}
How to achieve it:
First, I tried to use the similar code from Wix Examples but it costs me another custom CMS collection so it’s not eco-friendly. That’s why I rewrote it by fetching the current post by using post_id. You can add the author name, his bio (about field from wix member area) , post cover image and for tags, It’s the reference field so we have to translate it into text format using Blog/Tags Wix Blog App Collection. I hope this will be the solution.
Here is the Example result:
Red lined one is the text element.
1 Like