Develop Reference

Django and HTMX I am looking for not "hacky" way to update class of link that calls HTMX request. Like "refresh-self" or something along those lines

I have a problem with HTMX in Django. I basically have two important components on page. List of categories and content that is being shown after you click on category.
I was working nicely with just standard htmx "out of the box". But I started having problems when I wanted to add active css class on category link after you click it (to show user where he is currently).
I did a lot of experiments with hx-swap-oob and hx-swap but the only thing that work was this:
(it is the most relevant part of the code)
<div class="col-sm-4">
<div class="card">
<div class="card-body" hx-boost="true" hx-target="#manual_results">
<div id="manual_categories">
{% include 'partials/manual_categories.html' %}
</div>
</div>
</div>
</div>
<div class="col-sm-8">
<div id="manual_results">
{% include 'partials/manual_entries_list.html' %}
</div>
</div>
and in manual_entries_list.html:
<some html results>
<div id="manual_categories" hx-swap-oob="true">
{% include 'partials/manual_categories.html' %}
</div>
Each category has simple if statement in django template code that is checking if it is selected (based on url path.)
And it is working, thing is, on the first request the categories are rendered twice (which is logical since I have 2 includes on the same HTML). After I select one category, everything goes back to normal because HTMX "starts to understand what is happening" and it switches the categories from manual_entries_list.html into our main page.
And like I said it works, I modified manual_entries_list.html to:
<some html results>
<div class="set_size_to_0px">
<div id="manual_categories" hx-swap-oob="true">
{% include 'partials/manual_categories.html' %}
</div>
</div>
So it is always invisible (so I will have only one set of categories visible).
The thing is, that it is an obvious hack. I am sure that there needs to be a better way of solving this problem but I cannot find it.
(I even tried to do it with plain javascript the thing is that categories are rendered in a for loop so it is pretty much impossible to get IDs correctly etc.)
Could someone please help me?

The easiest way to avoid this issue is to detect the HTMX request in the view function, pass this state to your templates and render HTMX content only if needed. HTMX will add a HX-Request: true header to each request.
For the detection you can use the Django-HTMX package that provides a request.htmx variable in your view functions that will be True if the request is coming from HTMX. Or if you want to check it manually:
def my_view(request):
is_htmx = request.headers.get('HX-Request') == 'true'
return render(request, 'my_template.html', {'is_htmx': is_htmx})
After that in manual_entries_list.html template include HTMX related stuff only in the HTMX requests:
<some html results>
{% if is_htmx %}
<div id="manual_categories" hx-swap-oob="true">
{% include 'partials/manual_categories.html' %}
</div>
{% endif %}

why additional script not working in shopify?

I want to add some additional content under shipping method on Shopify checkout page.
same like this.
My ref Site
https://www.thegldshop.com
enter image description here
For this, I found this article and added this script
https://help.shopify.com/en/manual/orders/status-tracking/customize-order-status/show-content-based-on-shipping-method
{% if checkout.shipping_method.title != 'Pick-up at the store' %}
Shopify.Checkout.OrderStatus.addContentBox(
`<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
)
{% endif %}
But still not working for me.
Here is my website url
https://hypeyourbeast.com/

In Shopify, You will need Shopify plus account to do any change on the checkout page. Without a Shopify Plus account, you can't change anything on the checkout page.

You can modify the Thank You / Orders page in checkout without Shopify Plus. Plus is required to edit checkout for any step prior to "thank you".
Add tags around your code in the additional scripts area. This code worked for me:
<script>
// DEBUG {{ checkout.shipping_method.title }} has been used
{% if checkout.shipping_method.title != 'Pick-up at the store' %}
Shopify.Checkout.OrderStatus.addContentBox(
`<p>Added content box {{ checkout.shipping_method.title }}</p>`
)
{% endif %}
</script>

Shopify adding the product price inside the add to cart button

I want to add the price within the button "add to cart".
As you can see I am able to add the price within the button but when i change the variant it disappears. (the URL changes along with selecting a different varient)
GIF that shows the problem
Any suggestions?
The current code is:
<button
{% if product.empty? %}type="button"{% else %}type="submit"{% endif %}
name="add"
id="AddToCart-{{ section_id }}"
class="btn btn--full add-to-cart{% if enable_dynamic_buttons %} btn--secondary{% endif %}"
{% unless current_variant.available %} disabled="disabled"{% endunless %}>
<span id="AddToCartText-{{ section_id }}" data-default-text="{{ default_text }}">
{{ button_text }} {{ current_variant.price | money }}
</span>
</button>

The answer is to use Javascript. When you render your page for the first time, Liquid rendering places a price on the button. But when you change a variant, no Liquid is rendering, so you're left with using Javascript. I am sure that by now, after 10+ years you can find some examples out there that do what you need done.
When a variant changes, usually some Javascript runs that "knows" the variant, and hence it's price, so the only challenge is to find the old price on the button, and overwrite it. Simple stuff usually.

Unable to loop over data-content in a Bootstrap Popover to display Python list data

I'm currently trying to create a local Dashboard that displays certain information about areas of our product, it does what I initially intended but I wanted to extend the functionality slightly and that is where I'm currently stuck.
The Code is written in Python, this gets data from a database and puts it into a python list. The list below is the output of the SQL after it's been put through a for loop and appended to the contractname list.
contractname = [u'Contract Almond', u'Contract Amber', u'Contract Black']
I'm then using the data from this list to render it onto a HTML page using Flask and the Jinja2 templating engine. I have a feature on the dashboard that displays a "total number" and this is working as I intended it too but I wanted to display all the contract name's in a bootstrap popover. If I don't use the jinja2 "for" statement it displays the popover content from the list above and looks kind of ugly.
I'd like to display each value in the same popover box and place each value on another line within the box. At the moment, it's just repeating the element each time and giving each contractname its own popover. The data it should be looping over is in the data-content="{{ name }}.
The Javascript for the popover:
$(function () {
$('[data-toggle="popover"]').popover()
});
The HTML code:
<div class="center">
{% for name in contractname %}
<p id="Number" data-container="body" data-toggle="popover" data-placement="top" title="Contracts" data-content="{{ name }}">{{ contracts }}</p>
{% endfor %}
</div>
I can see why it's repeating itself, as the for loop is only pointed at the <p> tag but I just cannot figure out how to loop over only the data-content="{{ name }}part of the element.
I've looked all over google and stackoverflow but I haven't yet found a solution that makes this work. This is maybe something very simple that I'm not seeing as I've been looking at it for so long.
Any help on this would be great! Thank you in advance!

This should do it.
<div class="center">
<p id="Number" data-container="body" data-toggle="popover" data-placement="top" title="Contracts" data-content="{% for name in contractname %}{{ name }} <br/> {% endfor %}">{{ contracts }}</p>
</div>

a better way to do ajax in django

The other day I wrote some AJAX for a Django app that i have been working on.
I come from Ruby on Rails, so I haven't done much in the way of raw JS.
So based on Rails' partials, I something similar to the following in a sort of pseudocode, don't sweat the details:
1) JS function using prototype's Ajax.Updater ('tablediv' being the id of the table i wanted to update Ajaxily, and url pointing to the proper django view)
function updateTable(){
new Ajax.Updater('tablediv',url {params: params....etc
2) django view that got new data to populate the table with:
def ajaxTable
objects = Objects.object.all...
return render_to_response('ajaxtable.html',objects)
3) ajaxtable.html was just a sort of Rails "partial" so basically a table w/o <table> </table> ...:
<th>{{object.data}}</th>
<td>{{object.moredata}}</td>
so to my actual question:
This seemed hacky to me, I sort of threw it together after getting tired of searching online for what i wanted.
Is this the way it's done? It works fine, I just don't know enough to know, you know?

It kinda depends what you want to do I think. Ajax being quite a wide range of scenarios from Google Maps to a simple auto-complete varys greatly in complexity and the best approach.
However, there are some useful things you can do that help.
1) Template level
Make sure you have "django.core.context_processors.request" in your TEMPLATE_CONTEXT_PROCESSORS setting. Then you can do this;
{% if not request.is_ajax %}
<html>
<head>
...
</head>
<body>
...
{% endif %}
actual content
{% if not request.is_ajax %}
</body>
</html>
{% endif %}
Basically then say this page is /test/ you can do a browser request and get the full content or a request via JavaScript and just get the content. There is a blogpost somewhere that explains this in more detail but I can't find it at the moment.
2) In the view
In the template we are just accessing the request object in the template. In the view you can do very similar things.
def my_view(request):
if requst.is_ajax():
# handle for Ajax requests
# otherwise handle 'normal' requests
return HttpResponse('Hello world')
The above methods don't really do it differently than you do but allow you to re-use views and write it bit more concisely. I wouldn't really say what you are doing is wrong or hacky but you could write it to make it more concise and re-use the templates and views.
say for example you could have just one template and if its a Ajax request have it only return the section that will need to be updated. In your case it would be the tables views.

I am quite late, but I want to document how to combine and adapt the solutions presented by d0ugal
in a way, that it will resolve a much cleaner template-code.
I have a model representing contact persons.
The (generic) view to get one ContactPerson looks like this:
def contcactperson_detail_view(request, name):
try:
person = ContactPerson.objects.get(slug=name)
except:
raise Http404
if request.is_ajax():
return contcactperson_detail_view_ajax(request, person)
return list_detail.object_detail(
request,
queryset = ContactPerson.objects.all(),
object_id = person.id,
template_object_name = "contactperson",
)
#render_to('cms/contactperson_detail_ajax.html')
def contcactperson_detail_view_ajax(request, person):
return {'contactperson':person, 'is_ajax':True}
The template to render the view that handles one ContactPerson is called contcactperson_detail_view.html:
{% extends "index.html" %}
{% block textpane %}
<h1 id="mainheader">{{ contactperson.first_name }} {{ contactperson.family_name }} </h1>
<div class="indentation"> </div>
{% include 'cms/contactperson_detail_photo.html' %}
<div id="text_pane">
{% include 'cms/contactperson_detail_textpane.html' %}
</div>
{% endblock %}
It includes two sub-templates
contactperson_detail_textpane.html
<p>{{ contactperson.description }}</p>
<ul>
<li>
<dl>
<dt>Email</dt>
<dd>
{{ contactperson.mail }}
</dd>
</dl>
</li>
<li>
<dl>
<dt>Contact Person for</dt>
<dd>
<ul>
{% for c in contactperson.categories.all %}
<li>{{ c }}</li>
{% endfor %}
</ul>
</dd>
</dl>
</li>
</ul>
and contactperson_detail_photo.html
{% with contactperson.photo.detailphoto as pic %}
{% with pic.url as pic_url %}
<div {% if not is_ajax %}id='imageContainer'{% endif %} style="float: right;padding-right:0.5em;
padding-bottom: 1em; padding-left:0.5em;clear:both;
width:{{ pic.width }}px">
<div style="width:{{ pic.width}}px">
<img style="clear:both" src="{{ pic_url }}" alt="{{ i.name }}"/>
</div>
</div>
{% endwith %}
{% endwith %}
this 3 templates will be used, if the request isn't ajax.
But if the request is ajax, contcactperson_detail_view will return the view contcactperson_detail_view_ajax, that uses the template contactperson_detail_ajax.html for rendering. And this template looks like this:
<h1>{{ contactperson.first_name }} {{ contactperson.family_name }}</h1>
{% include 'cms/contactperson_detail_photo.html' %}
{% include 'cms/contactperson_detail_textpane.html' %}
So it uses the same sub-templates but isn't extending anything, therefore only the needed markup delivered. As the ajax view passes is_ajax = True to the template, it can be used to adjust minor things, like setting correct id-attributes.
No context-processor or additional url-conf needed.
Finally the Javascript code:
$("#contact_person_portlet a").click(function(event){
event.preventDefault();
$.ajax({
type: "GET",
url: event.target.getAttribute('href'),
success: function(msg){
overlay(msg);
}
});
});
Hope that it will be useful for some people. If so, please leave a comment!

No matter what, you're going to need at least two things:
Your javascript code to make the call (you have this)
Server side code to handle the request (this is your view and url-config)
There is absolutely nothing "hacky" about this.
The third thing, your template file, is optional - but is generally good practice. You want to separate your markup from the code, for many reasons.
So I think you've got the right idea. Carry on.

What exactly seems hacky about it? Seems like a perfectly valid way of doing something.
I guess an alternative would be serialising to json and sending it back to a javascript templating snippet.