Help with some JS 🙏🏻 for minimum order threshold message in cart

[elisabethw]

I've added this minimum order threshold notice to the cart with HTML but can't get the JS to work properly. What am I doing wrong?

Here's my code that is working:

{% if section.settings.is_threshold_bar %}
{% assign threshold_txt = section.settings.promote_threshold_txt | escape%}
{% assign threshold = section.settings.min_order_threshold | times:100 %}
{% assign value_left = threshold | minus:cart.total_price %}
{% if value_left > 0 %}
<div class="threshold-message" data-txt="{{threshold_txt}}" data-threshold="{{threshold}}">
<p class="threshold_notice">You are {{ value_left | money }} away from our order minimum. </p>
</div>
{% endif %}

{% endif %}

<style>
.threshold-message {
width: 100%;
display: flex;
justify-content: left;
padding: var(--gutter-content) var(--gutter-content) calc(var(--gutter-content) + env(safe-area-inset-bottom, 0px) * 1.5) ;
}
.threshold_notice {
font-size: 1em;
font-weight: 400;
color: #000000;
line-height: 1.5em;
background-color: #DFE3E8;
padding: 15px 14px 14px;
width: 100%;
}
</style>

Here's the JS that isn't right (it's breaking the announcement bar which I did take this from a tutorial to edit the announcement bar so I get that's why I just don't know how to fix it):

theme.ThresholdBar = (function() {

var bar = document.QuerySelector('.threshold-message');
var threshold_txt = bar.dataset.txt;
var threshold = bar.dataset.threshold;
function update()
{
$.getJSON('/cart.js')then(
function(cart) {

var value_left = threshold - cart.total_price;
var value_left_money = theme.Currency.formatMoney(value_left,theme.moneyFormat);

if(value_left > 0){
bar.innerHTML = '<p class="threshold_notice">' + threshold_txt.replace('[value]',value_left_money) + '</p>';
}

}
);
}
return { update:update }
}) ();

 

[elisabethw]

Thanks! But now the cart drawer doesn't work. The theme has an option for the regular cart and the cart drawer which I'm using. I only see one js file that it could go in--the cart-drawer.js.