Mortgage Calculator Tutorial

How to change the position of the Mortgage Calculator on IDX Detail pages?

For this example, we are using Miami IDX Detail Template. Let's say that we want to add the Mortgage Calculator below the "Additional" section.

In your browser (for this example, we are using Google Chrome), right-click on the "Additional" element and select the Inspect option.

The id of the element is IDX-detailsContainer-a000--5. We need this information to position the mortgage calculator after it (this id will vary depending on where you want to add the mortgage calculator).

The id of the Mortgage Calculator is IDX-mortgageCalculator. So we need to add the following JavaScript code to the IDX Detail Sub-Headers:

<script>
    window.onload = function() {
        let mortgageCalculator = document.getElementById('IDX-mortgageCalculator');
        let idxContainer = document.getElementById('IDX-detailsContainer-a000--5');
        idxContainer.insertAdjacentElement('afterend', mortgageCalculator);
        mortgageCalculator.style.display = 'block';
    }
</script>

Go to Design > Website > Sub-Headers > Categories, select the Details category, click on Turn WYSIWYG Off, paste the code and save the changes.

Finally, we need to add Custom CSS so it hides the mortgage calculator while the rest of the page is loading. Go to Design > Website > Custom CSS and select Categories > Details.

Copy and paste the following CSS rule and save the changes.

#IDX-mortgageCalculator {
    display: none;
}

Now the mortgage calculator will be displayed in the selected position!