I have a Flask app with a Bootstrap 4 front end that includes Jinja templates. What I'd like to do is create shopping cart type behavior so when a user selects an item it gets immediately reflected in the cart. As of now the cart is in the parent template (mylayout.html) so that it's able to be viewed on any child template which all have the line {% extends "mylayout.html" %}. I update the number of cart items in Flask using a context processor
@app.context_processor
def cart_total():
.
.
.
print('total number of items ',total)
return dict(total=total)
In the terminal I can see the correct number of items which I then put into the parent template like so
<li><a href="/cart" class="nav-link"><i class="fas fa-shopping-cart"></i> CART {{ total }}</a></li>
However the number of items isn't updated until I refresh a page or select a new page - i.e. after the parent template is reloaded. I tried all the solutions here and also looked here but still don't have the desired behavior. According to one user here TEMPLATES_AUTO_RELOAD isn't built to do so anyway. Right now any change I make to the parent or children is getting reflected except the number of items. I don't know if the solution is somewhere in jquery, javascript, ajax or something else? All feedback, ideas or info is welcome.
