Fibbl Bar

A complex element. It must be provided with buttons as children (by a button we imply any element with data-element attribute). Each button corresponds to either model-viewer, carousel or qr-code, which are rendered inside a user provided container or in a pop-up.

Code example (no container)

<script src="https://cdn.fibbl.com/fibbl.js" type="module"></script>
<style>
    fibbl-bar:not(:defined) {
        opacity: 0;
    }
</style>

<fibbl-bar data-product-id="@demo-bag">
    <button data-element="fibbl-model-viewer">Model Viewer</button>
    <button data-element="fibbl-3d-quick-view">3D Quick View</button>
    <button data-element="fibbl-carousel">Carousel</button>
    <button data-element="fibbl-qr-code" data-type="ar">AR</button>
</fibbl-bar>

Note, you can copy this example into the live demo

Live demo (with container)

See the Pen Untitled by Fibbl (@Fibbl) on CodePen.

How it works

Initially, the bar hides all the buttons. Then it makes a request to the Fibbl's databases and analyzes what options are enabled for the product with the provided product-id (e.g. 3D model can be enabled, but Virtual Try On disabled or not supported by the product at all). Then only buttons corresponding to the enabled options are shown, all others are hidden. That is why the video button is hidden in the live demo, because @demo-glasses doesn't have a video. But if you use @demo-shoe instead, the button will be there.

Each button should be provided with the data-element attribute, which is either a name of a Fibbl element or default . All other data- attributes are passed to the corresponding element, when it's created, so you can configure elements this way. Alternatively, you can provide the inner elements markup, this way is described below.

default element is a special case - no element is rendered, the default content is used. It should be used if you have a custom gallery or something and provide data-default-content-selector (read about it to know more).

Custom attributes

• data-product-id - required. A unique id of product in Fibbl's databases.
• data-container-selector - optional. A CSS selector of one element wherein the bar renders its elements. If not provided, the bar will render elements into a pop-up.
• data-default-content-selector - optional. A CSS selector of one element that already exists (usually inside the container). It's hidden by the bar when any Fibbl element is rendered, and shown back once the default button is clicked. A typical use case to hide/show a gallery or a poster image, as it's in the example above.
• data-insert-mode - either append (default) or prepend. This option determines how the bar inserts its content into the container. If the bar itself is located in the same container, and the content is needed to be inserted above the bar, then the prepend option may be used to avoid adding one more wrapper element.

Inner components attributes

If you want to set certain attributes for inner components (e.g. for fibbl-model-viewer) you should set them for the corresponding buttons. An example:

<!-- fibbl-bar can be used instead of fibbl-layer - the principle is the same -->
<fibbl-layer data-product-id="@demo-shoe">
    <button
        data-element="fibbl-model-viewer"
        data-ui-config='{ "expand-button": false }'
    >
        3D
    </button>
</fibbl-layer>

Refer to each component documentation to get to know what attributes are available.

CSS classes

• .fibbl-active - this class is added to a button inside the bar, once it's selected and the corresponding element is shown. It's provided to allow users to override standard bar's styles.
• .fibbl-bar-content - a class of the component which is inserted into client defined container. Using this class you can style the element. Usually only height and width required.

Custom events

• fibbl-bar-content-change - CustomEvent with {detail: {button: HTMLElement}}, where button is the clicked HTML element with data-element attribute. Currently, the event is fired only when the bar has a container and the content has been updated after the click. The event may be useful on mobile devices, where a click on "Augmented Reality" or "Virtual Try On" buttons doesn't cause the content change, but the AR or VTO are launched at once and the event isn't fired.

Explicit definition of inner elements

There is an alternative way how inner elements can be defined. You can provide the elements markup in a template tag. If choose this way, then you should take into account the following:

• There must be only 1 template tag, and it must be a direct child of the composite component (fibbl-bar/ fibbl-layer)
• All the attributes must be defined in the element markup, not on the corresponding button. The button should contain only the data-element attribute (and other non-Fibbl attributes, if needed).
• The inner elements should not contain data-product-id. It has no effect, because the product id will be set programmatically from the composite component.

The explicit definition of elements allows one to use the Slot API of the inner elements.

In the example below Fibbl Model Viewer is defined explicitly, and the default expand button is replaced with a custom element:

<script src="https://cdn.fibbl.com/fibbl.js" type="module"></script>

<style>
  .custom-expand {
    margin: 0.5em;
    padding: 0.5em;
    background: orange;
    border-radius: 100px;
  }
</style>

<div id="gallery" style="position: relative; display: flex; place-content: center">
  <img id="picture" src="https://cdn.fibbl.com/img/kitten.jpg" alt="cat"/>
  <fibbl-layer data-product-id="@demo-shoe">
    <button data-element="default"> Default</button>
    <button
      class="fibbl-active"
      data-element="fibbl-model-viewer"
    >
      3D
    </button>
    <button data-element="fibbl-carousel" data-mode="full"> IMG</button>
    <button data-element="fibbl-qr-code" data-type="ar"> AR</button>
    <button data-element="fibbl-qr-code" data-type="vto"> VTO</button>
    <button data-element="fibbl-video"> Video</button>
    <template>
      <fibbl-model-viewer data-ui-config='{ "hint-text": false }'>
        <div slot="expand-button" class="custom-expand">Expand</div>
      </fibbl-model-viewer>
    </template>
  </fibbl-layer>
</div>

INFO

The inner elements defined via the markup may be used as is, may be copied by the composite component, may be recreated several times. That is, you must not assume that the element provided in the markup will be same element, which is shown, when the corresponding button is clicked. And you must not edit the template, once the composite component has initialized. However, even if the element is copied, its attributes are copied as well, so you can add classes to inner elements.

Advanced usage of fibbl-bar

If you want to use the fibbl-bar to create a fancy menu with significant customizations, first of all, you should consider implementing it from scratch without fibbl-bar at all, using standalone components. It will give you more freedom.

If you still want to use the fibbl-bar (the only probable reason to use it is that it hides buttons for unsupported features), here is a list of what you can do with it (also read about the styles reset in the next section):

1. The component listens for clicks on itself not on buttons inside. Also, it traverses the event path looking for an element with the data-element attribute. It means that you can use something like this

   <div data-element="fibbl-model-viewer">
      <img src="https://icon_url" alt="button icon" />
      <span>3D model</span>
   </div>

   as a button, and if a user clicks on the img icon, the click still will be processed correctly, because it has a parent with data-element attribute.
2. The bar hides unsupported buttons using a global style. But it's applied only if there is at least one unsupported button inside, when the bar is added to the DOM. Again, you must not rely on the presence of hidden buttons in the DOM - the way of hiding can be changed in the future (e.g. don't use CSS sibling selectors).
3. Given the first two points, you can change the markup dynamically inside the bar - it will handle clicks on new markup correctly and still will hide unsupported buttons even if you inject them anew.
4. Correspondingly if you stop a click propagation, the bar will not react.
5. The bar requires you to initially provide at least 1 button for a supported feature. If there are no buttons for supported features, the bar will hide itself completely as any other Fibbl component.
6. You can nest [data-element] buttons as you wish, that is, it's allowed using wrappers around your buttons.
7. But note that the bar will hide only [data-element]s, not wrappers around them. So probably you will want to add data-element attribute to the first wrapper and in most cases it will be a direct child of the bar component.