@sonicswapstu unfortunately that is often the case with wix sites.
@sonicswapstu is there no way of creating a booking query that gets the data from the calendar? then using the information as needed?
I may not have explained properly.
Currently itās a built in app that does all the booking flow: choose service, select an available slot from calendar & time, then enter a few details in a firm, and book it.
I am trying to insert my payment system (a hrc20 harmony token) in between, capture the TX ID, put that into the form, which the user then submits.
At the moment users have to manually send tokens, copy the TX ID, paste into form. Make sense?
But because the booking system is inaccessible via code (one I canāt populate a form field), it feels like Iām having to rebuild the whole process! So far Iāve listed services using a repeater etc, and Iām about to query for serviceAvailability and build a calendar etcā¦ but Iām questioning my approach ā surely there should be a way for me to simply populate a form field in the booking form? Instead of reinventing this whole system?
@sonicswapstu Hi Stuart, without seeing the code and understanding what you are trying to input from other elements Iām going to struggle to provide any guidance, I would suggest looking at if you can do a ābookings queryā or an āon eventā I think it would be a simple solution, that gets the info and then populates the checkout form details as required.
The booking system is one of the built in apps, that gives no access to itās form fileds unfortunately. Itās not built with code but I am having to manually build it to achieve what I need.
I wish I could show you what I meanā¦ I guess you are very familiar with Wix though, do you know if there is any way to access form fields of the booking systems built in āappsā? This one has 4 steps: service list, booking calendar/slot chooser, booking checkout form, booking confirmation page.
See screeshot here - In the editor I canāt access any of the fields it has, can only select the whole block ā#BookingForm1ā. If i can simply populate one of these fields (we have custom fields that are not shown in editor view [i want to populate our TXID field, that the user currently has to manually paste into]), it will save such a lot of work.
@sonicswapstu Iāll have a look which built in app is it? Would the fields not be classed as children of the main form block? Can they be accessed and populated that way?
in regards to the question on the photo, of being able to write to fields via javascript the answer is you should be able to. Try using data, hooks and events. the form can be edited from main dashboard also.
The form is manageable from a edit point of view in dashboard,that you can add fields, determine the name etc but not via code.
ā¦ from a code point of view Iāve tried all sorts to access itās fields. The code editor identifies it as an iframe and seems no way to access the child elements of it. Iāve tried accessing fields like I normally would in js with every selector I can think of (data attributes, cascading through parent elementsā¦)
If it is an iFrame you need to use postMessage or onMessage I believe, as this is how you communicate with them.
https://www.wix.com/velo/reference/wix-window/postmessage
Si
Yes i looked into that possibility, and have used postMessage to communicate with my iframe for crypto payments.
However, the booking app that the client has used itās not a iframe thatās been explicitly added, itās part of the booking flow (built in)ā¦ In essence, I have no access to the inputs within that iframe. Hence my conundrum here.
Are you using metamask or ethers.js to get TX ID? if metamask are you now able to link that to your site? what youāre trying to achieve should be a simple solution but I think you have read the majority of the docs, the only other thing that I could suggest is creating a data hook or something similar on an event and then using the value to populate the field? I am more than happy to try an review any code snippets to try and understand further.
Hi Simon, yes using metamask via ethers, but I have built a separate app that I bring in through an iframe, then pass the transaction ID back to the wix site via postMessage, all working great!
The very last step is trying to populate that field in the pre-built booking form.
After a response from wix velo devs though it seems that is not possible.
The two option remain are:
Making a custom form, but doing this I canāt set that form to be the final part of the booking flow so Iāll have to build the lot, including the available slots calendar and everything.
Option two is I remove the transaction field from the form, then use the API to populate it on backend - essentially updating the data thatās stored after the user has confirmed it. I will still have to show the user some success/fail messages but that straightforward enough.
Itās a real shame we canāt simply update a field in the out-the-box booking form! As itās a round the houses it seems. But then again I am putting a crypto payment in the middle of it.
I think wix should allow us to manipulate the fields in the booking form really.
I agree. The Wix payment and booking flows could be better. It is hard to create a platform that accounts for every single use case securely and responsively. Crypto payments are still so new compared to traditional online payments.
Agreed that crypto payment is still fairly new. Thatās not the issue I have though. In fact integrating my crypto payments has been easier than developing with the booking system.
I donāt think itās too much to ask, to be able to access the booking form fields via code. It really feels like a shortcoming.
@sonicswapstu are you not able to do the second option And once value is stored present it in the form? if not your second option sounds less of work. But its down to end style and flow. Can I ask how did you manage to link metamask through ethers.js? as ethers.js I thought was separate?
I ended up capturing the booking ID via an event when it completes, putting that booking ID in a collection, querying the collection on from end to get booking id (when the site gets busy this will start failing because I query by very short time window in a settimeout :/), then update the booking via updateCustomerInfo with the TX ID I got from the successful crypto payment ā¦
Very very round the houses, not a solid and future proof solution but will work for now while I rebuild a new booking system for client, though likely not on Wix as itās proved to be quite a clunky process to customise after all, even though there are a lot of ways to code things on Wix, core things like booking are severely lacking in openness for Devs to work withā¦
@sonicswapstu Iām going to add for anyone looking for answers that the reason this was difficult in your particular use case is because you needed to be able to extend the default bookings app. The best way to have control over the workflow is to build a custom solution using the bookings APIs. So yes, extending via the default app is more difficult and something to consider when you have the control over process which I know in your case, you did not.
@sonicswapstu I thought it would end up being something long winded like that. It is often the case when something should be so simple it ends up being more difficult. One of the issues Iāve had for years with the platform is the want to create live streaming and chat via webrtc. but that is a different story.
@simonadams , I am stuck on the same issue. Is there an update on this ?
@amotor I understand all of that. The thing I am struggling with is using window.ethereum. It seems like we donāt have access to window object. Am I right there ? or it there a work around ?
Any updates ?