Initial setup

1. Enable the block

You can use the Roomle Configurator block with the Kirby blocks and layout fields. You need to enable the block in the blueprint for each field where you want to use the block:

fields:
  text:
    label: Blocks
    type: blocks
    fieldsets:
      - roomle-configurator
      # other block types...

Of course you can customize the list of blocks even more, e.g. with groups.

2. Add styling for your site frontend

The block comes with a default block snippet and the necessary JavaScript logic, but without any CSS code for the site frontend. This allows you to adapt the design of the block to your site.

Here is an example stylesheet you can use as a template:

.roomle-configurator-variants {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  max-width: 48rem;
  margin: 0 auto 1rem;
}

.roomle-configurator-variants li {
  list-style: none;
}

/* Visually hide the radio input */
.roomle-configurator-variants input {
  position: absolute;
  appearance: none;
  width: 0;
  height: 0;
  opacity: 0;
}

.roomle-configurator-variants label {
  cursor: pointer;
  display: block;
  padding: 0.5rem;
}

/* Highlight the active variant */
.roomle-configurator-variants input[checked] + label {
  background: #f6f6f6;
}

.roomle-configurator-variants strong,
.roomle-configurator-variants span {
  display: block;
}

.roomle-configurator iframe {
  border: none;
  min-height: 40rem;
}

Next steps

Congratulations, the Roomle plugin should now be ready to go! You can now create your first block.

Every block setting can be configured from the Panel. You can set global defaults from the Kirby config.php. It is recommended to set at least the configuratorId globally.

If you want, you can set up the following features:

Optional features

• Integration for the "request product" button
  • Contact form integration
  • Shop integration

Advanced features

• Custom block snippet