It’s been almost 6 months since I last used playcanvas. But it’s great to be back to work on a new project with new set of challenges. Although before jumping deep into the project we are working on, I would like to get some suggestions from the experts here on the approach that I should be taking to develop this project.
Alright, without any further delays. Here is my query:-
On this project the main goal is to build a configurator where the user can drag and drop a component from a grid of thumbnails (existing template from Shopify for example) into the playcanvas app. To achieve this communication I believe I have two options:-
- Use “postMessage” API to send messages between the playcanvas iframe and the parent/client page, then take actions based on the message details. The parent page and the client page will be on different domains so cross domain secure communication would be important. I have managed to test a few communications following this documentation already, but it still gives problems when I try to shift focus to the iframe while the mouse enters the iframe while dragging the thumbnail. For some reasons it only start detecting mouse within the iframe when I release the left mouse button.
- Embed the Thumbnail grid (and n number of UI elements in the future) into the Playcanvas app itself, so it’s native to the app and no hassle of communication across domain. But to be honest I have been told it’s not easy to do and I don’t know how to embed a section of the Shopify template into my playcanvas app, inside of an HTML container. I will research on it a bit more in the upcoming weeks, sorry didn’t do that yet.
I am not a web developer and I believe in keeping my life as simple as possible when it comes to web based configurators. I would appreciate any suggestions and ideas about how I should be approaching this in order to not complicate things because “components grid” is only the beginning of the functionality, there is “Cart” and “Summary” of the configured product as well.
Unfortunately I cannot share a project at this point since I have just started, but I would be happy to share whatever information possible if that would help you provide a better solution
Stay Safe Everyone!!
- Tanay Dimri