Marking wrapper element for search and product listing

You are reading about requirements for the integration done by the Luigi's Box team. You can safely skip this part of the documentation if you are integrating yourself using either API or Luigi's Box frontend libraries.

The search and product listing integration provided by the Luigi's Box team needs an existing HTML element that it will replace with the search/listing user interface. Luigi's Box team will identify a suitable HTML element in your existing HTML structure and use it. To avoid breaking the integration in the future when you do a minor redesign, we recommend that you explicitely mark this HTML element with a CSS class lbx-wrapper. This way you will avoid an accidental search/product listing downtime when you deploy a design change.

The example below shows how the HTML code for a wrapper typically looks like.

<html>
  <body>
    <nav>..</nav>
    <main class="container"></main>
    <footer></footer>
  </body>
</html>

To avoid unexpected breakage, you can add the lbx-wrapper CSS class and change the HTML code to:

<html>
  <body>
    <nav>..</nav>
    <main class="container lbx-wrapper"></main>
    <footer></footer>
  </body>
</html>

This way it will be more obvious to your developers that the wrapper has special purpose for Luigi's Box and as long as they keep this class, they can add or remove style-related CSS classes.