How to Display the Price Outside the App Builder Configurator

Hello,

I’m encountering some difficulties displaying the price value on my website outside the App Builder configurator.
Inside the configurator, the price is displayed correctly, but I haven’t been able to extract it and show it dynamically in a specific area of the page.

Could you please let me know if this is possible to achieve using App Builder?
If yes, I would really appreciate some guidance or an example.

ShapeDiver user name: raducb

We offer an open-source plugin for WordPress/WooCommerce that allows to plug App Builder configurators into a store. You can find the plugin here. Since it’s open-source, you can reuse some of the code if you want to connect to something else.

Hi Alexander,

At the moment, I’m integrating the configurator on my website using the App Builder iframe, and I’d like to display the price on the same page — outside of the App Builder — using the “direct data output” component in Grasshopper. Unfortunately, I haven’t been able to make it work yet — the price doesn’t appear on the page.

I’d like to know if it’s actually possible to display the price outside the App Builder using this method. Maybe I’m missing something, or perhaps it’s a limitation of my current plan. I’m currently using the Starter plan.

Also, could you please let me know if the WordPress/WooCommerce plugin you mentioned can be used with the Starter plan, or if I’d need to upgrade to a higher one?

Thanks a lot!

Whenever you are using an iframe in a web application, the code running inside the iframe does not have access to the page that embeds the iframe. If you want to display something in your web application (like the price) that depends on data available inside the iframe, you need to implement custom JavaScript code to communicate with the iframe, get the data, and display it.

The open-source WordPress plugin implements a mechanism for communicating with an iframe running App Builder. You could fork this source code and look into implementing what you want. However, this is going to be quite some effort, and you will need web development skills.

Have you considered using the “Add to cart” action that comes with App Builder?

I’m considering using the “Add to cart” action. I’ve tried to make it work, but so far I haven’t succeeded. My website is built on OpenCart — could that be an obstacle for the “Add to cart” action?

Also, could you please clarify whether my current Starter plan is sufficient for using the JavaScript method (custom JavaScript code to communicate with the iframe, get the data, and display it), or if an upgrade would be required?

Thanks!

Yes the Starter plan is sufficient.

As I mentioned above, you will need to implement code on your end to make it work (or hire someone to implement it for you). The open-source WordPress plugin can be used as a starting point.

Ok. Thank you for your answers!

I had made a typo in my reply, I am sorry. The Starter plan is sufficient.

To clarify, is the Starter plan sufficient, including for using the JavaScript method (custom JavaScript code to communicate with the iframe, get the data, and display it)?

yes it is

Could you recommend some documentation or perhaps an example of the JavaScript method?

Please review the source code of the WordPress plugin - all you need is available there.