custom blog page using corvid help

Ask the community
, ,
1

I followed the code almost to the dot from this example: https://www.wix.com/corvid/example/custom-post-page

& the cover image & title both load correctly in my preview, but not when the site is published. Below is my code & the release candidate of the post page. Any help would be super appreciated as this was supposed to go live tomorrow!

import wixData from 'wix-data';

let currentPost
$w.onReady(function () {

    $w("#post1").getPost().then(async post => {
        currentPost = await loadExtraPostData(post)
        assignPostDataToUIElements()
    });
})

async function loadExtraPostData(post) {

 let postDataFromCollection = await wixData.query("PostExtraData")
        .eq("post", post._id)
        .find()

    postDataFromCollection = postDataFromCollection.items[0]
 return mergePostData(post, postDataFromCollection)
}

async function mergePostData(post, extraData) {
 return Object.assign({}, post, extraData)
}

function assignPostDataToUIElements() {
    $w("#postTitle").text = currentPost.title
 //$w("#authorName").text = `Written by: ${currentPost.author}`
    $w("#columnStrip1").background.src = currentPost.coverImage
    $w("#columnStrip1").show("fade")
}

Release candidate: https://www.sabeelnetwork.com/post/arshiyakherani?siteRevision=535

2

So noticed you said it loads correctly in preview, so can’t help but ask.
have you checked the sandbox and live is the same ?

Sandbox collection → preview
Live collection → Published.

3

Yes, the PostExtraData collection is synced up. But I can’t edit the blog collection.

But along these lines, am I supposed to manually fill in anything into the postextradata collection?

4

That is the code for the post page itself, have you added the code for the data.js backend file as well?

import wixData from 'wix-data';

export async function PostReactionData_beforeInsert(item, context) {

	const { items } = await wixData.query("PostReactionData")
		.eq("userId", item.userId)
		.eq("post", item.post)
		.find()
	if (items.length) {
		return Promise.reject("Duplicated Likes Forbidden")
	}
	return item
}

Also, with this here…
But along these lines, am I supposed to manually fill in anything into the postextradata collection?

The answer is yes as this is the extra data that is added to the post page, as stated in the example itself.

For this example we used the database collections automatically added to your site if you have a blog and an additional one of our own:

  • Blog/Posts collection: Contains information about your individual blog posts

  • Blog/Categories collection: Contains information about your blog categories

  • Post Extra Data collection: Contains additional information about your blog posts with references to the original post item in the Blog/Posts collection.

We added the following code to the Post page:

  • When the Post page loads:

  • Get the current post data using the getPost() function.

  • Retrieve the extra post data using the ID of the current post.

  • Merge the post data with the extra post data using the object.assign() method.

  • Populate the merged data in the relevant page elements.

894×557 24.5 KB

1223×465 269 KB

5

Oh thank you, I didn’t notice the back-end file, is this where I would add the code?

And yes, I have added author name (which is the additional field I’m adding) and referenced ‘post’ with the blog/post collection. However, the author name is still not syncing up.

1604×670 35.7 KB

6

That is because you have not linked the extra data to a blog post through the reference field.

Post Extra Data collection:
Contains additional information about your blog posts with references to the original post item in the Blog/Posts collection.

478×510 18.1 KB

798×419 31.6 KB

7

Ok I did that, thank you! But again, it’s loading in the preview but not on the published site. Here’s what my collection & code look like now

I added title & coverimage too to see if that helps. AuthorName is now syncing up in the preview, but not when the site is live.

1918×774 58.6 KB

Code:


import wixData from 'wix-data';

let currentPost
$w.onReady(function () {

    $w("#post1").getPost().then(async post => {
        currentPost = await loadExtraPostData(post)
        assignPostDataToUIElements()
    });
})

async function loadExtraPostData(post) {

 let postDataFromCollection = await wixData.query("PostExtraData")
        .eq("post", post._id)
        .find()

    postDataFromCollection = postDataFromCollection.items[0]
 return mergePostData(post, postDataFromCollection)
}

async function mergePostData(post, extraData) {
 return Object.assign({}, post, extraData)
}

function assignPostDataToUIElements() {
    $w("#postTitle").text = currentPost.postTitle
    $w("#authorName").text = `Written by: ${currentPost.authorName}`
    $w("#columnStrip1").background.src = currentPost.coverImage
    $w("#columnStrip1").show("fade")
}

Thanks so much for your help. I feel like I’m missing something super small thats messing this up.
Is where I put the back-end code fine?

8

The backend file goes in a new js file in the backend section.

Just click on the + icon and add a new js file, change the name to data.js and simply paste the example code to that backend file.

Also note that the Cover Image and Post Title are already fields in the Wix Blog Posts collection and can’t be overwritten.
https://support.wix.com/en/corvid-by-wix/wix-blog-with-corvid
https://support.wix.com/en/article/corvid-wix-blog-posts-collection-fields#cover-image-coverimage
https://support.wix.com/en/article/corvid-wix-blog-posts-collection-fields#title-title

I have tested this example myself and have simply saved it so that I had access to all the datasets and the Blog displays properly.

Then I made sure that the extra data were all linked to the appropriatly reference blog post. As it stated broken on the dataset field, I simply linked each one to one of the current posts in the example.

Then made sure that I synced the dataset from sandbox to live and also saved and published it again and then checked the live site.

There it shows it all working fine with the written by and images by variables filled in as they should be.

873×596 35.8 KB

837×630 39.5 KB

1873×731 193 KB

9

Thank you for the detailed explanation. I followed everything, and for some reason, it’s still not displaying changes to the published site. The backend code is just as it should be, and the datasets are all synced up.

What did you mean by this?
“I have tested this example myself and have simply saved it so that I had access to all the datasets and the Blog displays properly.”

Is there any chance you could take a look at my site to see what’s up?

10

What did you mean by this?
“I have tested this example myself and have simply saved it so that I had access to all the datasets and the Blog displays properly.”

With a lot of the examples you can’t get access to the datasets, or in this case the Wix Blog post page was just displaying an error message, until you have saved the example yourself to your own account.

After you have saved the example the first time, plus I always close and re-enter my sites list, it will then show you the same example as before, howeever you will now have fulll access to datasets etc as they will now be on your control and not in Wix control like the example.

So, for the Extra Post dataset, the links were broken in the first field as I had broken the connection from Wix dataset when I saved it and they became my datasets.

Hence why I had to go back through and change all the links from broken back to the post, which you can see in this previous pic here.

As stated previously, you don’t want to be using cover photo and post title in the extra data dataset as those fields are already filled by the Wix Blog Posts collection fields themselves.
https://support.wix.com/en/corvid-by-wix/wix-blog-with-corvid
https://support.wix.com/en/article/corvid-wix-blog-posts-collection-fields#cover-image-coverimage
https://support.wix.com/en/article/corvid-wix-blog-posts-collection-fields#title-title

The Wix Blog Posts collections is read only.

Permissions
The Posts collection has the following permissions :

  • Read: Anyone

  • Create: None

  • Update: None

  • Delete: None

1080×808 68.9 KB

With yourself putting the post title and cover image fields into your extra post dataset as well, then you are trying to merge this extra data with the original Posts fields which will not work.

All you really need on your extra data dataset is the Post reference link field and the Author text field.

You would then just change the code here as such.

function assignPostDataToUIElements() {
    $w("#postTitle").text = currentPost.title
    $w("#authorName").text = `Written by: ${currentPost.author}`
    $w("#postHeaderStrip").background.src = currentPost.coverImage
    $w("#postHeaderStrip").show("fade")
}

As you are not having the Images By part you can simply delete the photographer name element on the post page itself and delete the line of code for it.

 $w("#photographerName").text = `Images by: ${currentPost.photographer}`

Just note that the example is just using the field name of Author , which will have the field key of author. Whereas you are using a field name of Author name, which will give you a field key of authorName.

The quickest option for me would be for you to simply delete that one field of Author Name and simply add the same field back in and just call it Author.

This way it will match the field key of author in the code without you having to change it.

If you want to keep the field as Author Name (authorName), then you will need to change the code on your own site to reflect that difference.

    $w("#authorName").text = `Written by: ${currentPost.authorName}`

Make sure that your extra data dataset has the same setup here.

779×669 34.8 KB

Finally, it all works for me and if you have the used the exact same tutorial and not changed any of the elements id names or code, apart from taking out the images by element and line of code.

As well as making sure that you either changed the field to Author or changed the code to authorName, then there is no reason why this should not be working for you.

11

Hi, is there a way to add Post Cover image on a strip above the post? Not as a background but just an image on the top of a strip. I get errors when trying to code. here is the printscreen (my image is name “coverImage” in the Property panel)

1511×825 93.3 KB

12

Change to :
$w(“#coverImage”).src = currentPost.coverImage