Open DanielaPedrochevd opened 9 months ago
related to #199
SPIKE RESULTS:
Preview of the app to embed: https://199-tuck-configurator--vg-volvotrucks-us-rd--netcentric.hlx.page/scripts/v2-embed/index.html
Solution 1: App directly embedded on the website. Preview: https://199-tuck-configurator--vg-volvotrucks-us-rd--netcentric.hlx.page/drafts/tdziezyk/v2/embed-spike/direct-embed
Pros:
Const:
The external app has CSS styles that override some of our app styles. For instance, the styles affect the header on mobile
Some of our app CSS set styles that are not set in the external app. For instance the disabled arrow button
Testing the CSS collisions will be time-consuming. We can't predict what part of the apps can be affected by the other, so we should retest our app header and the whole external app.
The app uses CSS rules that set fixed positions. As a result, some app components are displayed in the wrong places. Example: The top menu is not displayed in the right place. It is under the header.
How it should be displayed:
How it is displayed:
Solution 2: App inside iframe. Preview: https://199-tuck-configurator--vg-volvotrucks-us-rd--netcentric.hlx.page/drafts/tdziezyk/v2/embed-spike/embed-iframe
Pros:
Const:
Solution 3: App added as shadow DOM element Preview: NOT AVAILABLE
The app is not designed in the way to add it as the shadow DOM element.
Explanation: The external app is using the document.querySelector
object to render the app root which should be inside the shadow root, but shadow root children aren't available by document.querySelector
.
Conclusion: Solution 1 would require some changes from the external app team. It is hard to predict what must be fixed without in-depth testing of the external app embedded in our app. Solution 2 is the best option from the solution complexity (developing and testing). Solution 3 is not possible to implement for now. The current external app structure would require changes.
External app problems found during spike:
open details
button and close the modal with X
button@TomaszDziezykNetcentric and I had a meeting with Rapid Images. The iframe solution is preferred, though we need to figure out how to deal with analytics. Probably we could simply add the tag manager script to their code.
The 403 error is because they’re working with whitelisting of IP addresses to protect the assets before NDA is lifted.
Description Investigate the best approach to achieve #199 and share the results with the team in this ticket.
During the refinement of #199 we discussed 2 possibilities: 1- Create a new Embed Spa block where the author adds the .js and .css files as an HTML route. 2- Create an iframe.