Get selected configuration

CSS

.configurator {
  width: 100%;
  height: 400px;
}

HTML

<see-my-model-configurator
  class="configurator"
  model-access-key="f0a9fb6c374797fd5574fe78"
>
</see-my-model-configurator>
<button id="buy-button">Buy now</button>

JS - Button Logic

const buyButton = document.getElementById("buy-button");
const configurator = document.querySelector("see-my-model-configurator");
if (buyButton && configurator) {
  buyButton.onclick = () => {
    //Here you can download a list of selected configurations
    console.log(
      "Selected options: ",
      configurator.selectedConfigurationOptions.selectedConfigurationOptions
    );
    //In the simple version, only the values from the "userMetadata" field of each selected option are listed
    console.log(
      "Selected options [simple version]: ",
      configurator.selectedConfigurationOptions
        .selectedConfigurationOptionsSimple
    );
  };
}

After pressing the "Buy Now" button, a list of selected options will appear in the JS console in full version and simple version. In most cases the simple version will suffice. They contain a list user metadata for each selected option. User metadata can be defined when creating the configurator, see here - secton 6. You can use the data collected in this way to integrate the configurator with your website or an online store, e.g. redirect the user to the appropriate shopping page.

Sample configuration selected by the user

{
  "name": "Default Configurator",
  "selectedConfigurationOptions": [
    {
      "uuid": "7eae416a-6a7b-45bf-88ea-549f38f0c5cc",
      "type": "configuration_option",
      "description": "<p>Czy dodać dodatkową kostkę?</p>",
      "userMetadata": {},
      "selectedOptionValue": {
        "uuid": "7180c4a3-573c-4d69-9d62-50b4b15c81e4",
        "name": "Nie",
        "userMetadata": {
          "dodatkowa_kostka": "nie"
        },
        "type": "option_value"
      }
    }
  ],
  "selectedConfigurationOptionsSimple": [
    {
      "dodatkowa_kostka": "nie"
    }
  ]
}