Pobranie wybranej konfiguracji

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">Kup teraz</button>

JS - logika przycisku

const buyButton = document.getElementById("buy-button");
const configurator = document.querySelector("see-my-model-configurator");
if (buyButton && configurator) {
  buyButton.onclick = () => {
    //Tutaj można pobrać listę wybranych konfiguracji
    console.log(
      "Wybrane opcje: ",
      configurator.selectedConfigurationOptions.selectedConfigurationOptions
    );
    //W wersji prostej wylistowane są tylko wartości z pola "userMetadata" każdej wybranej opcji
    console.log(
      "Wybrane opcje [wersja prosta]: ",
      configurator.selectedConfigurationOptions
        .selectedConfigurationOptionsSimple
    );
  };
}

Po naciśnięciu przycisku "Kup teraz" w konsoli JS pojawi się lista wybranych opcji w wersji pełnej oraz wersji prostej. W większosci przypadków wystarczające będzie wykorzystanie wersji prostej. Zawiera one listę metadanych użtykownika dla każdej wybranej opcji. Metadane użytkownika można zdefiniować przy tworzeniu konfiguratora, patrz tutaj - punkt 6. Tak pobrane dane możesz wykorzystać przy integracji konfiguratora ze swoją stroną lub sklepem internetowym, np. przekierować użytkownika na odpowiednią stronę zakupową.

Przykładowa konfiguracja wybrana przez użytkownika

{
  "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"
    }
  ]
}