Product-Documentation

Functionality

User site

The theme styles all built-in pageflex UI elements. Functionality outside of this includes:

Adding in the Beamer product updates sidebar

Template Preview

The default Pageflex preview has been replaced with a custom Vue.js component to handle template display. This was achieved by using a MutationObserver to intercept Pageflex’s image insertion into the container, to render the image within the Vue component instead.

Zoom control

Template Preview: When zoomed in beyond the default 100%, the preview will adapt to the container’s dimensions. Any part of the image that extends beyond the container can be panned.
Zoom Slider: A reusable slider component that works in conjunction with the zoom control buttons. It allows zooming in and out between 20% and 200%.
Fit to Screen: Resets the preview to its original position and scale (100%) as it appeared on page load.
Minimize: Decreases the zoom level in 10% increments, down to a minimum of 20%.
Maximize: Increases the zoom level in 10% increments, up to a maximum of 200%.

Design Page

The design page has been updated to keep the template preview fixed on the right side, ensuring it’s always visible. This replaces the previous experience where users had to scroll back up after filling out the form to see updates. The form now takes up the full viewport height, with a scrollable container for longer forms.

Mobile and smaller device usability has also been improved, making the form-filling process simpler and eliminating the need to scroll when the preview updates.

New DesignToolbar full viewport height interface

Data collection

Data for clicked elements within the theme is collected and stored in Pendo.

Name a product

Users can update a product’s name directly within the breadcrumb navigation. When the name is focused, pressing Enter or clicking it activates an editable input field. After editing, clicking the tick icon or losing focus from the input will revert the field back to it’s display state, the change is confirmed when the design is saved.

Invite collaborator feature

When a user clicks on the invite button in the top navigation and enters an email in the input element, the invite button triggers a Mailto email, opening up default email client, filling in the recipients email address, including the sender’s name and a link to the RightMarket login page.