Configurator control
  • 18 Dec 2024
  • 2 Minutes to read
  • Contributors
  • Dark
    Light

Configurator control

  • Dark
    Light

Article summary

The configurator control is a static control which exists by default in every configurator and cannot be deleted or renamed. It has no visual representation and mainly serves as a hub for Signals and Slots which neither belong to a control nor a component.

SigSlos

IFrame size

The size of the configurator itself can be observed with the Size changed signal and adjusted with the slots Set IFrame width & Set IFrame height.

E.g. you can create the following SigSlo to write the current width of the configurator into the CfgrWidth components input every time the configurators size changed:

Configurator.SizeChanged -> CfgrWidth.SetValue(Configurator.ConfiguratorWidth)
Info

The Size changed SigSlo also works in the design editor.
Therefore one advantage of implementing different layouts based on the configurator size saved in a component like CfgrWidth & CfgrHeight versus using CSS media queries is that the former allows easier testing and editing for different sizes live within the design editor.

The Set IFrame width & Set IFrame height slots allow you to set a dedicated width & height for the IFrame on the parent page in which the configurator is embedded. Those slots won't do anything if the configurator is opened "full screen" (not embedded in parent page).

Setting the size not always works

We can't guarantee that the slots Set IFrame width & Set IFrame height are working as expected under all circumstances. For example, the parent page could interfere by defining the IFrame's size using some very strong CSS rules etc.

Load mask

You can show & hide a system load mask with some text of your choice with the slots Show load mask & Hide load mask.

Restart configuration

The configurator control's Restart configuration slot can be used to restart a running configuration.

The slot takes 2 paramters:

  • Preset ID: The preset ID from which the components input values should be copied from. If not given (an empty string), the preset of the currently open configuration is used.
  • Copy configuration values: True to copy all component input values to the newly created configuration. False to create a completely new configuration.

Possible use cases for this slot:

  • Start a new configuration after the checkout succeeded to allow the user to configure a second product.
  • Reset configurator to start afresh.

Redirect parent page

Allows the configurator to change the URL of the parent page. This requires the correct embedded Combeenation plugin on the parent page.

Fire analytics event

Forwards certain event data into the "data layer", which can then be interpreted by the Google Tag Manager.

If the configurator is embedded in an IFrame, the event data will be forwarded to the data layer of the parent page instead.
This requires the correct embedded Combeenation plugin on the parent page.

The slot takes 2 parameters:

  • event: Key for event identification
  • eventData: Optional metadata for the event. By default this is a string, valid JSON notation like { "price": 10 } will be interpreted and forwarded as object.

Was this article helpful?

What's Next