Skip to main content

Migration to Vanilla JS v2.9^

Steps to follow​

In our new SDK 2.9 update, we’re moving from iframe to web components for our vanilla JS package.

What does this mean when updating the nuvo SDK to version 2.9?

When migrating to the latest version of the nuvo SDK, you need to update your nuvo importer definition.

Follow the two steps below to update your nuvo importer:

Install latest version​

Install our latest vanilla JavaScript version with either NPM or Yarn, or by directly sourcing it from our CDN:

Add the following script tag into your app:

<script src="https://unpkg.com/nuvo-vanilla-js@latest"></script>

Update implementation syntax​

  • Define where the importer is added via any CSS Selector, e.g. class
<div class="nuvo-importer" />
  • Import the nuvo importer
import { launchNuvoImporter } from "nuvo-vanilla-js";
  • Make sure to refer to that same class or id in launchNuvoImporter
launchNuvoImporter('.nuvo-importer', {
  ...your nuvo configuration
});

New syntax example​

See here a full example of how your nuvo importer declaration should look like with the latest version:

<div class="nuvo-importer" />
<script type="module">
  import { launchNuvoImporter } from "nuvo-vanilla-js";

  launchNuvoImporter(".nuvo-importer", {
    licenseKey: "Your License Key",
    settings: {
      developerMode: true,
      identifier: "product_data",
      columns: [
        {
          label: "Product ID",
          key: "product_id",
        },
        {
          label: "Article Name",
          key: "article_name",
        },
      ],
    },
    columnHooks: {
      article_name: (values) => {
        return values.map(([item, index]) => [{ value: "#NU" + item }, index]);
      },
    },
    onCancel: () => {
      console.log("onCancel");
    },
    onEntryChange: (rows) => {
      return rows.map((row) => {
        return {
          data: {
            product_id: { value: row.data.product_id + ' on change' },
          },
          rowIndex: row.rowIndex,
        };
      });
    },
    onEntryInit: (row, rowIndex) => {
      return { product_id: { value: row.product_id + " on init" } };
    },
    onResults: (result, errors, complete, logs) => {
      console.log("Result:", result);
      console.log("Error rows:", errors);
      console.log("Logs:", logs);
      complete();
    },
  });
</script>

Old syntax example​

<!DOCTYPE html>
<html>
  <body>
    <script src="https://unpkg.com/nuvo-vanilla-js@latest"></script>
    <script type="text/javascript">
      const settings = {
        developerMode: true,
        identifier: "product_data",
        columns: [
          {
            label: "Product ID",
            key: "product_id",
          },
          {
            label: "Article Name",
            key: "article_name",
          },
        ],
      };

      const nuvoImporter = new window.nuvo.NuvoImporter("Your License Key", settings);

      nuvoImporter.onResults((values, errors, complete, logs) => {
        console.log("Result:", result);
        console.log("Error rows:", errors);
        console.log("Logs:", logs);
        complete();
      });

      nuvoImporter.onCancel(() => {
        console.log("onCancel");
      });

      nuvoImporter.registerEntryInit((row) => {
        return { product_id: { value: row.product_id + " on init" } };
      });

      nuvoImporter.registerEntryChange((row, rowIndex) => {
       return { product_id: { value: row.product_id + " on change" } };
      });

      nuvoImporter.registerColumnHooks("article_name", (values) => {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(
              values.map(([item, index]) => [{ value: "#NU" + item }, index])
            );
          }, 0);
        });
      });

      nuvoImporter.launch();
    </script>
  </body>
</html>