Add Presizing Banner

To display a banner showing stock availability and the recommended size on the product image, the Presizing Banner must be integrated into the product specifications. This ensures that the banner appears alongside essential product details such as title, image, and price in the product listing.

Required Identifiers

• global-id: Takes the EAN/UPC product code of your bike. This should be the code for any of the frame sizes you are selling (e.g., the EAN code for an "XS" frame size). The API will automatically detect the correct model.
• variant-id: A unique product identifier that must match the identifier used in the product feed.

Styling

• You can add basic styling to the default banner.
• Extended styling including your own colors and labels can be implemented with the Custom Presizing Banner.

Default Presizing Banner

<!-- You can add  styles or CSS classes to the banner. -->
<oz-banner 
  global-id="{{ GTIN variable }}"  
  variant-id="{{ Variant-ID variable }}"
  style=""
  class="">
</oz-banner> 

Custom Presizing Banner

<oz-banner
  global-id="{{ GTIN variable }}"  
  variant-id="{{ Variant-ID variable }}"
>
<!-- The template slot “fitting-banner” is the element that is generated for products that fit the customer and that contains both the “in-stock-items” and the “out-of-stock-items”.  -->
  <template slot="fitting-banner">
    <span style="">
      <slot name="items"> </slot>
    </span>
  </template>

<!-- The template slot “non-fitting-banner” is the element that is generated for products where no size is suitable for the customer. -->
  <template slot="non-fitting-banner">
    <span style="border: 2px solid red; border-radius: 5px; padding: 3px"> Passt nicht :( </span>
  </template>

<!-- For "in-stock-items", the matching sizes that are available according to the product feed information are returned. -->
  <template slot="in-stock-item">
    <span style="border: 2px solid green; border-radius: 5px; padding: 3px">
      <span> Passende Größe </span>
      <span>
        <slot name="size"> </slot>
      </span>
      <span> verfügbar</span>
    </span>
  </template>

<!-- For "out-of-stock-items", the matching sizes that are NOT vailable according to the product feed information are returned. -->
  <template slot="out-of-stock-item">
    <span style="border: 2px solid red; border-radius: 5px; padding: 3px">
      <span> Passende Größe </span>
      <span>
        <slot name="size"> </slot>
      </span>
      <span> nicht verfügbar</span>
    </span>
  </template>
</oz-banner>