As you know we have events in some of APIs like “Wix-Stores” these events help us to handle something when something happened.
Example: When someone buys a product from your store check if there is coupon code and if coupon code is equal to one of (X,Y,Z) these coupon codes give add some money to X affiliater “product price %5” in this way you can create an affiliate in Wix with Wix Stores. (I have done this like months ago it’s working well :))
I want to create my own custom events and I have found my answer for this already but I’m still searching if there is another way to do this.
My answer to this is using data hooks. In most of the events (maybe all of them) there is a relation with a database (collection) and you can handle these events using data hooks.
We can use data hooks and we can use if else inside hooks so we can check for specific things.
Example: To create a onNewOrder() event you could just use afterInsert data hook. So when a new item added to collection it will fire the event.
You can add an if else and check for paid status so if new item paid status is “paid” you can just fire onOrderPaid() event.
This is what I understand and found so far.
I want to learn this is the best and only way to do this (in Wix with Velo) or is there other better or just other ways to do the same thing. And there is another question that I’m looking for an answer.
Using Events with Frontend (Important part)
Okay let say we have built an event and it’s checking for changes of stock data of the products. What I want to do is I want to reload the data “change stock text” in live mode (shortly without reloading the page) so user can see how many product left in stock.
And I’m still searching for an answer to this question. How can I fire a function in frontend using backend events?
Shortly how can I update the text in the product page using this event???
Ohhhh I see. Okay so I haven’t worked much with hooks yet, but whether or not you can use it on the page code will depend on the permissions of the collection. Let me see if I can find a working example around because I know those docs are a little confusing
@loeix For now, take a look at this video @anthony created. He goes through the API docs and then shows some code later.
Here is an article as well that you may have already seen…
The basic concept is that if you have FE page code that initiates a query, the hook in data.js can intercept that query, modify it and then when the results are returned on the FE you will see the result as modified by the hook.
Message me or Anthony if this still doesn’t quite make sense, I may be misunderstanding your use case a little but we are happy to help!
For your first question:
Yes you can use data hooks to listen to changes to collections but not for collections associated with Wix Stores. Why not use the events that wix-stores-backend provides?
For the second one:
With Wix Stores you’ll need to use the Wix Stores events. You cannot use data hooks on a Collection that is related to Wix Stores. You can use data hooks on any Collection that you make yourself.
Regardless of where your backend events/hooks are you can do the following to pass information back to the client without refreshing the page:
The wix-realtime-backend API to send messages and listen to those messages in the frontend with wix-realtime API.
Creating a Collection with the data you want and having the client regularly query it:
// query every second then do something
setInterval(() => {wixData.query("yourCollection").eq("someColumn", "myData").find()}, 1000).then( (results) => {//do something})
Note in both of these they aren’t true “events” in that they don’t happen exactly when the trigger happens but should generally be good enough.
I don’t use Wi Store collection for this it was just an example to explain. I’m using my collections not Wix App collection just imagine a custom store created with velo.
Interval is not a good option for me because It would check tons of things and it’s a big performance issue I guess.
Can you show me an example about wix-realtime and how to listen backend at frontend with wix-realtime?
Sure. On the backend you can use the publishexamples here . This will publish your message on the channel you specify (ex. let channel = {"name" : "outOfStock", "resourceId" : productId}) so that any user subscribed to that channel can see any message sent on this channel.
You can even make it so you publish messages only to a specific user rather than all users subscribed to a channel. This is useful if something user-specific happened. An example is in the publish docs.
On the frontend you can use subscribeexamples here . This code will “subscribe” a user to a channel that you specify.
For example your code can check for messages and update the page based on their contents:
let productId = "my-product-id-here";
const channel = {
"name" : "outOfStock",
"resourceId" : productId
}
wixRealtime.subscribe(channel, (message, channel) => {
if (message == "out of stock") {
$w("#stocknotification").text = "Out of stock!";
}
})
Every time the client sees this message it’ll execute code on the page to set an out of stock notification. You’ll likely want to use the optional resourceId when specifying channels on the backend/fronted so people are only subscribed to what’s relevant on the current page they’re on. You could define a resourceId as a productId for example; or whatever is relevant for your usecase.
