Migrate Geometry Display

Overview of Differences (V2 → V3)

Attributes

V2 Attribute	V3 Attribute	Required in V3	Description
data-oz-widget	-	-	Determined by the custom element used
data-oz-embed	-	-	V3 automatically detects custom button implementations
data-oz-code	global-id	true	Official GTIN/SKU from manufacturer
-	variant-id	Required if product feed is active	Shop SKU / Article number
data-oz-name	name	true	Product display name
data-oz-image	image	true	URL to product preview image
data-oz-fullscreen	-	-	Not currently supported (work in progress)
data-oz-labels	-	-	Will not be added in V3
data-oz-launcher-label-show	-	-	Will not be added in V3
data-oz-launcher-label-hide	-	-	Will not be added in V3
-	workflow	false	Override API settings
-	lang	false	Override API settings (default: user preference)

---

Migration Steps

Custom Button

V2

<button data-oz-widget="geometries" data-oz-embed="custom" ...>
  Show geometries
</button>

V3 – Without Fallback

The class attribute can be any name and serves as a selector for your CSS. It is recommended to use style="visibility: hidden" to prevent the button from flickering on page load.

<sf-geometry-display ...>
  <button type="button" style="visibility: hidden" class="custom-btn"></button>
</sf-geometry-display>

V3 – With Fallback

The fallback element is displayed when the widget cannot be shown (e.g., code not available in our database or server issues). Since the custom button is wrapped in a template element, the initial visibility style is no longer necessary.

<sf-geometry-display ...>
  <!-- Element shown if the widget cannot be loaded -->
  <a href="#">Your fallback element</a>
  <!-- The template tag must be the direct parent of the button element -->
  <template>
    <button type="button" class="custom-btn"></button>
  </template>
</sf-geometry-display>

Full Example

V2

<style>
  .custom-btn {
      ...
  }
</style>

<button
  class="custom-btn"
  data-oz-widget="geometries"
  data-oz-embed="custom"
  data-oz-code="{{ product.ean }}"
  data-oz-name="{{ product.title }}"
  data-oz-image="{{ product.image.src }}"
>
  Show geometries
</button>

V3

<style>
  .custom-btn {
      ...
  }
</style>

<sf-geometry-display
  name="{{ Product title variable }}"
  global-id="{{ GTIN variable }}"
  variant-id="{{ Variant-ID variable }}"
  image="{{ Product image url }}"
>
  <div id="my-geometry-chart">...</div>
  <template>
    <button type="button" class="custom-btn"></button>
  </template>
</sf-geometry-display>