Use API without viewer

Is is possible to use the API without using the viewer? We’d like to send parameter changes to Shapediver and get exports, but with our own viewer on top. We tried hiding the viewer element but this feels kind of hacky.

Yes, this is definitely possible. To start, you need to allow backend access in the model settings. Updating parameter changes without the viewer is well explained here, more on exports API is here.

I can also recommend reading this blog post which illustrates how the backend access was used for Google Spreadsheets integration.

Hi @pavol

Thanks for pointing out the links. I checked all of them, but I can’t find any examples anywhere. Its great to have all this theory, but only with examples can we actually start to understand how everything works.

I am trying to do the same and start an export during the checkout process.

What I am struggling with is how to load the scripts properly and have something trigger (like the export).

If I trigger the export by something like a button it works fine. But I try to trigger something as soon as the page loads (for example an “Order Complete” page).

I keep getting the error “Uncaught ReferenceError: api is not defined”.

Here is my code:

<div id="sdv-container" style="height: 0; display: none;"></div>
<script>

  // ShapeDiver Viewer Initialisation
    var initSdvApp = function(/*event*/) {
      // Settings can be defined here, or as attributes of the viewport container. Settings defined here take precedence.
      let _container = document.getElementById('sdv-container'); 
      let settings = {
        container: _container,
        ticket: 'c6e06a950c0c16262abc6a43cdd5d4cdf350c806d9c83d86a92519be54151d91a81b1b27b8b733642d596109d378c5fc0e97162bec800f479bfe91b9b7d3d6b570ffcd2e8e0d40ddc924f94e67d13a9fb815890f5281594544e9a385aaa0fea47ddbe81c809285853fbf1cf7227226af65d45820a5473bd8b5d823f8f7e4738d9e4eba70beff80-934a91d6160d7286f69a34ed7095bdae',
        modelViewUrl: "eu-central-1"
      };
      // See https://viewer.shapediver.com/v2/2.14.0/doc/SDVApp.ParametricViewer.html for all settings available via the constructor.
      window.api = new SDVApp.ParametricViewer(settings);

   };

  // there is a slight chance that loading has been completed already
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initSdvApp, false);
  } else {
    initSdvApp();
  }

  function requestEmail(modismo_text, export_size) {

      api.parameters.updateAsync([{name: "Text", value: modismo_text}, {name: "Size", value: export_size}]);

      api.exports.requestAsync({name: "Order"}).catch(function(err) {
            return Promise.reject(err);
          }).then(function(response) {
            console.log("EXPORT DONE!");
            console.log("Result message: " + response.data.result.msg);
          });
      }
   
  
  </script>

<?php 

global $woocommerce;
$items = $woocommerce->cart->get_cart();

    foreach ( WC()->cart->get_cart() as $cart_item ) { 

        $modismo_text = $cart_item['addons'][0]['value'];

        $modismo_size = $cart_item['addons'][1]['value'];

        $modismo_material = $cart_item['addons'][2]['value'];

        ?>

        <script type="text/javascript">
          var modismo_size = "<?php echo $modismo_size ?>";
          var modismo_text = "<?php echo $modismo_text ?>";
          var export_size = -1;

        if (modismo_size == "XS") {
          export_size = 0
         } else if(modismo_size == "S") {
          export_size = 1
         } else if(modismo_size == "M") {
          export_size = 2
         } else if(modismo_size == "L") {
          export_size = 3
         } else if(modismo_size == "XL") {
          export_size = 4
         }


        requestEmail(modismo_text, export_size);


        </script>

        <a href="javascript:void(0)" onclick="requestEmail();">Export</a>

I wish there were a lot more examples on Shapediver and the API and general documentation was a bit nicer.

Lastly, in the blog post it talks about exactly what I need, but again I can’t find the code examples. Are there none?

You need to wait for the scene to be ready before you can read data, parameters and exports from it. One way to do it is to wait for the VISIBILITY_ON event from the scene interface. This is described in this tutorial for example: https://support.shapediver.com/hc/en-us/articles/360023000891-Tutorial-Generating-dynamic-user-interfaces
In summary only request parameter updates and exports once you have received this event.

However, if you want to trigger exports during the checkout process, you should use the backend REST API which is not linked to the viewer. You might have missed the link in the blog post posted by Pavol, there is a specific documentation on postman where you can see examples with sample data and test extensively: https://documenter.getpostman.com/view/2947303/SVzua1WT?version=9029af8a-cb74-41dc-bd3e-8ff5ff7f253c

As always, we agree with your point about the documentation and examples, we are working on a new version with better organized sections and links to more code samples.

2 Likes

Thanks @mathieu1 that is a great resource and amazing how you can view all the code examples in so many different languages on getpostman.

The second example with the GUI is also very helpful since its the only example yet that shows how to use the event listener to do stuff only when Shapediver is ready. I have not seen or read anything about this anywhere in the examples, since they conveniently only do stuff on interaction so its safe to assume it is ready.

It doesn’t specifically mention E-Mail exports on postman, but I assume it doesn’t make a difference. You just reference it by the name of the export, right?

Lastly, where do you get the URL from that is used in the REST API examples? It only says:

“The API key allowing to open a session with a model is called a ticket . The ticket is part of the session init request URL.”

But where do I get the URL from. I know the backend ticket is the last part, but what about the first part? Is it the same for everyone?

Other things I would like to have examples for: how to load a scene with a specific set of parameters. Right now we are using a workaround to update the parameters right after it has loaded, but it would be so much more sensible to load it with the right parameters already. How can that be done?

ps: I think you can tell which documentation is written by whom. The tutorials on Shapediver are great, but sometimes don’t go into enough technical details. The API documentation and stuff on postman was probably written by Dev’s, so doesn’t give enough real-world context and examples.