Identifying the tag page of the blog feed

Ask the community
,
1

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?

2

You mean you want to show current post’s tags in text element?

3

Exactly, a headline like “Newest articles about {name of the tag}”.

4

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:

image
image675Ă—543 69.6 KB

Red lined one is the text element.
:wink:

1 Like