vaskaloidis
commented
7 years ago This ticket specifically corresponds to the Shopify AJAX Bug - which has been fixed. The actual ticket to create the feature is #14
Documentation here: https://github.com/vaskaloidis/mail-funnel-client/wiki
The Mail-Funnel's actual Funnel Builder is built in JQuery. It was previously getting all the data from the controller, but when we switched back to the Jquery Flowchart builder, from the MermaidJS flowchart builder, we had to dynamically build the flowchart's chart contents in JSON.
The issue here is a chicken-before-the-egg issue. When the controller builds the JSON string for the charts content, it needs to specify where each node will go using XY values.
So the controller, when building the JSON String, has no knowledge of the View's width. So it cannot correctly build the chart with each node's XY values because it does not know how wide the screen is and accordingly it does not know how to calculate the X axis. Right now it calculates the Chart for an 800px width browser window. This needs to be fixed.
The solution is to use JQuery and use the client as it's own JSON API Server. So we had to modify the controller to do very little, rather than building the entire chart's JSON String like it was previously doing. Now it just passes a few variables to the View, and the View, when loaded - it immediatley runs an AJAX command against the Client's new JSON API, and gets the JSON string from there. When it makes the request for the chart's JSON String, it sends the width of the browser window, so the JSON that is returned will correctly calculate the X-Axis accordingly.
This is changing how the rest of the JS Application works also though, for the better.
Now, when you edit a node, you will have the node's contents dynamically loaded in the editor window, where as currently it loads pre-generated data that comes from the controller on-load.
Now, it will still use that pre-generated data from the controller, but it will load current data from the JSON API, and compare the two against eachother when the user saves the Node entry. If there are any differences, then it will update that node, and then update the HTML for the Funnel-Builder chart, and then re-load the chart by re-hitting the AJAX Query that loads it initially. This allows more of a dynamic feel to our application.
But, we now have to finish implementing a JSON API Into our client (like the one we made on the server), including the JSON Security Token.
The intial API call to first build the Funnel-Builder canvas is complete, but the feature to edit and save the chart have not been converted to our new JSON API service model. These JSON Calls are routed to the Funnel Builder controller, which renders executes the code to update each node, delete a node, or create a new node.
There is a bug with how the AJAX is loaded in Shopify preventing this feature from getting completed. Shopify embedded apps do everything differently, including the AJAX Calls. So this should be a minor fix.