How to Hide Storage Unit Recommendations in the Calculator

What does the data-disable-list-results attribute do?

The data-disable-list-results attribute allows you to hide the recommended storage units list that normally appears in the calculator results. When set to 'true', this attribute will hide the "WE RECOMMEND" section that shows suggested unit sizes and the "BOOK NOW" button, while keeping the visual storage unit preview intact.

When would I want to use this feature?

You might want to disable the unit recommendations list in several scenarios:

• Custom booking flow: When you want to handle unit selection and booking through your own system

• Information-only display: When you want to show only the visual representation without specific unit recommendations

• Integration constraints: When the recommended units don't align with your available inventory

How do I implement this feature?

Add the data-disable-list-results="true" attribute to your calculator's root div element:

Basic Implementation

html

<div id="calcumate-root" 
     data-disable-list-results="true" <- Add this
>
</div>

What will users see with this setting enabled?

With data-disable-list-results="true":

✅ Still visible:

• Room type selector (Living Room, Bedroom, Kitchen, etc.)

• Preset options (1 Bedroom, 2 Bedroom, etc.)

• Visual storage unit representation with items

• Item category selection

• Calculation animation

❌ Hidden:

• "WE RECOMMEND" section

• Specific unit size recommendations (e.g., "5m x 5m")

• "BOOK NOW" button

• Edit Button

Can I toggle this setting dynamically?

Yes! You can enable or disable the list results at any time by updating the attribute value:

// Hide the recommendations list
document.getElementById('calcumate-root').setAttribute('data-disable-list-results', 'true');

// Show the recommendations list
document.getElementById('calcumate-root').setAttribute('data-disable-list-results', 'false');
// OR remove the attribute entirely
document.getElementById('calcumate-root').removeAttribute('data-disable-list-results');

But you will need to initialize the calculator again like this:

window.dispatchEvent(new CustomEvent('RE-INIT', {}));

Default behavior

If the data-disable-list-results attribute is not present or set to any value other than 'true', the calculator will display the recommendations list as normal.

Need help?

If you're having trouble implementing this feature or need assistance with your calculator integration, please contact our support team with your integration details and specific requirements.