## HubL Calculation filter

Highlighted
Top Contributor

Has anyone had experience in using HubL calculations within a fancybox?

I've created a slick slider which shows the original price and calculated reduced price. This displays correctly for each row. The caluclated price is also a button which displays a 'fancybox' but when launched the calculated boxes are empty!

...it works perfectly outside the fancybox!

{% set full_price = row["price"] %}
{% set htb_deposit = full_price * 5 / 100 %}
{% set equity_loan = full_price * 20 / 100 %}
{% set htb_mortgage = full_price - htb_deposit - equity_loan %}
{% set htb_price = htb_deposit + htb_mortgage %}

<!-- fancybox btn START -->
<a class="h2b-slick-info" data-fancybox data-src="#{{ row["plot"] }}" href="javascript&colon;;">
<img src="https://www.duchyhomes.co.uk/hubfs/duchy-homes-website/graphics/icons/htb-gov.png" class="dev-icon" style="margin-bottom:0px;margin-left:calc(50% - 15px);height:35px;width:35px;" alt="Help to Buy icon" />
<span class="moreinfo-border">{{ htb_price | round | format_currency("en-UK") }}</span>
<div class="h2b-moreinfo">More Info</div>
</a>
<!-- fancybox btn END -->

<!-- fancybox plots START -->
<div style="display:none;" class="fancy-plots" id="{{ row["plot"] }}">
<div class="h2b-header-container-mob">
<img src="https://www.duchyhomes.co.uk/hubfs/duchy-homes-website/graphics/icons/htb-gov.png" alt="Help to Buy Logo">
<div class="h2b-fancy-header">How does<br>it work?</div>
</div>
<div class="h2b-header-container-tab">
<img src="https://www.duchyhomes.co.uk/hubfs/duchy-homes-website/graphics/icons/htb-gov.png" alt="Help to Buy Logo">
<div class="h2b-fancy-header">How does it work?</div>
</div>
<div class="h2b-circle-container">
<div class="h2b-fancy-circles fancy-circle1">Equity<br>Loan<br>
<span class="fancy-circle-price">{{ equity_loan | round | format_currency("en-UK") }}</span>
</div>
<div class="fancy-plots-maths-symbol">
<img src="https://www.duchyhomes.co.uk/hubfs/duchy-homes-website/graphics/icons/h2b-plus-icon.svg" alt="Help to Buy Logo">
</div>
<div class="h2b-fancy-circles fancy-circle2">Your<br>Deposit<br>
<span class="fancy-circle-price">{{ htb_deposit | round | format_currency("en-UK") }}</span>
</div>
<div class="fancy-plots-maths-symbol">
<img src="https://www.duchyhomes.co.uk/hubfs/duchy-homes-website/graphics/icons/h2b-plus-icon.svg" alt="Help to Buy Logo">
</div>
<div class="h2b-fancy-circles fancy-circle2">Your<br>Mortgage<br>
<span class="fancy-circle-price">{{ htb_mortgage | round | format_currency("en-UK") }}</span>
</div>
<div class="fancy-plots-maths-symbol">
<img src="https://www.duchyhomes.co.uk/hubfs/duchy-homes-website/graphics/icons/h2b-equals-icon.svg" alt="Help to Buy Logo">
</div>
<div class="h2b-fancy-circles fancy-circle1">Your<br>Duchy Home<br>
<span class="fancy-circle-price">{{ full_price | round | format_currency("en-UK") }}</span>
</div>
</div>
<p class="h2b-fancy-footer">With a Help to Buy: Equity Loan the Government lends you up to 20% of the cost of your newly built home, so you’ll only need a 5% cash deposit and a 75% mortgage to make up the rest.
You won’t be charged loan fees on the 20% loan for the first five years of owning your home. <a class="h2b-footer-link" href="https://www.duchyhomes.co.uk/help-to-buy">More Info</a></p>
</div>
<!-- fancybox plots END -->

1 Reply 1
Community Manager

Hey @ben-duchy

I will tag a few of our experts

Hey @Anton @tjoyce @derekcavaliero could you please share your knowledge with @ben-duchy

Thank you

Sharon