How to implement Qonfi in your Magento2 site

While installing an extension to get Qonfi running is not required, it can speed up the process. In the documentation below, we'll explain how you can install, configure and use the Qonfi Magento extension.

There are 2 ways to install the Qonfi extension. You could install the extension via the Magento2 plugin store, or you could install Qonfi via composer.
Both methods will be explained.

Magento2 store

We have provided the Qonfi extension via the Adobe Magento2 store. Installation should be straight forward.

The extension can be found here
https://commercemarketplace.adobe.com/qonfi-block.html

Composer

We also have a composer, where you can directly install the extension into your Magento site.

When you log into your server, you can run the following commands:
composer require qonfi.

Create a Qonfi block

Now that you have installed the Qonfi extension, you can start creating blocks and widgets to Qonfi.
There are 2 methods to create a Qonfi block.

The first way to display the Qonfi product selector is to create your own widget. This widget is configurable to be displayed at any place and any page you want. Just like any other widget.

To add the widget, go in the admin panel to content > Widgets

Here you can add a new widget with the “Add Widget” button. This will generate a widget that we can define.

When you press the “Add Widget” button, you should see a configuration screen with widget settings. We can configure the “Type” and the “Design Theme”.

For the type we have 2 custom options. The Qonfi Widget WYSIWYG and the Qonfi Widget default. Both of which will be discussed later.

For the Design Theme, you should pick the theme your site is built on. In this example we will use the Luma theme, but this can be any theme.

After we created the widget, we can start configuring some standard widget settings.
This contains the title, views and layouts to display the widgets

Default template

For the type we previously picked the Qonfi Widget default. This is a block that is pre-defined. It contains a title, text and a button. With this block type you are able to configure the texts and colors, but no further hassle.

After configuring the storefront properties, we can go to the configuration of the widget itself.

Here we can configure the UUID, the Type, Title, Text as content and Text in the button. Further we can do some color configurations for text and some background colors.

When you click the color inputs, either the background or the text color, a color picker appears. Here you can edit until you find the color you want.

Now that all the configurations have been done, we can save the widget.

In this case we have not set any of the colors, which means that the block will default to the theme colors.

WYSIWYG template

Because we picked the Qonfi Widget WYSIWYG as the display type, we get some different settings then the default block.

There still is the Qonfi UUID and the type. The WYSIWYG is the What You See Is What You Get editor. This editor can contain text, titles and widgets.

When you have created the block you want, you can save it, clear the cache and see it in the front-end.

HTML element

When you don’t want to create a widget, you can also add the product selector via the html editor.

This has a disadvantage, due to the fact that when you want to use the same product selector multiple times, you have to create it multiple times. Including when you want to edit the product selector, you have to edit all the different product selectors at all the different places.

You can circumvent this by creating a global widget and including it in the places you want to display the product selector.

To create the product selector via the html element you start with editing the page via the page builder:

This will open the page editor where you can add elements. For the Qonfi product selector, we are going to add the “HTML Code” element. Drag the element to the designated area.

Now that the “HTML Code” element has been added, we can edit the element. Instead of building the element all by yourself, we have prepared a widget template. Insert the widget.

We have prepared 2 templates, just like adding the product selector via the widgets, discussed in “Via the widget”. For this example, we are going to use the “Qonfi Widget default” template.

When we edit this widget, we have to set some settings. Some are required, like the Qonfi UUID. Some are not required, like background colors and text colors. If the background colors or the text colors are not set, the widget will use the colors set as default in your current theme.
After setting all the required settings, we can press Insert Widget.

When the widget is inserted you can see the code has been generated into the “HTML Code” element. You can now safely press “Save”, to save the “HTML Code”.

When you have saved the “HTML Code” element, the block automatically closes. If you want to, edit the page as needed. When you are ready, press “Save” to save the page.

As you can see, a block has been added to the homepage! When you click the block, or just the button, a Qonfi product selector will appear.

If it doesn't appear, make sure your Qonfi UUID is set correctly and your Qonfi product selector has been published.