How to sort and have a custom Admin template?

[coofercat]

I am looking to use Sortable2 along side a custom 'admin button' (the button runs a Celery task which syncs the data in the model with a cloud service). Everything works until I introduce a change_list_template change in the admin class. For example:

@admin.register(models.StripePrices)
class StripePricesAdmin(SortableAdminMixin, admin.ModelAdmin):
    list_display = ('price_id', 'product__name', 'price', 'currency', 'interval', 'tax_behaviour', 'active')
    change_list_template = "variants/admin_stripeprices_list.html"     # <-- if this is present, sortable2 doesn't work

    def get_urls(self):
        urls = super().get_urls()
        my_urls = [
            path('sync-stripeprices/', self.sync_stripeprices),
        ]
        return my_urls + urls

    def sync_stripeprices(self, request):
        result = tasks.stripe_sync_prices.delay()
        self.message_user(
            request,
            f"Task with the ID: {result.task_id} was added to queue. Last known status: {result.status}"
        )
        return HttpResponseRedirect("../")

The actual template I'm putting in is as minimal as I could make it:

{% extends 'admin/change_list.html' %}

{% block object-tools-items %}
  <style>
    .generatelink {
      background: var(--link-fg) !important;
    }

    .generatelink:hover {
      background: var(--link-hover-color) !important;
    }
  </style>
  <li>
    <a href="sync-stripeprices/" class="generatelink">
      Sync Prices with Stripe
    </a>
  </li>
  {{ block.super }}
{% endblock %}

(There's another template I've also used, which uses the {% block object-tools %} instead of {% block object-tools-items %} - both cause the same problem).

Looking at the HTML source, this bit disappears when I use my custom template:

<script type="application/json" id="admin_sortable2_config">
		{
			"update_url": "/admin/payments/stripeprices/adminsortable2_update/",
			"current_page": 1,
			"total_pages": 1
		}
	</script>

I've found that if I paste the above into my custom template, everything works fine. The question then is... how do I get sortable2 and my custom template to play together so I don't have to hack this to work?

[jrief]

adminsortable2 ships with its own modified version of a change_list_template, so make sure to either inherit from there, or to integrate the JSON <script> into the block "extrahead" of your own template.

[coofercat]

Awesome - thank you @jrief

For anyone wondering, this is (now) my template:

{% extends 'adminsortable2/change_list.html' %}

{% block object-tools-items %}
  <style>
    .generatelink {
      background: var(--link-fg) !important;
    }

    .generatelink:hover {
      background: var(--link-hover-color) !important;
    }
  </style>
  <li>
    <a href="sync-stripeprices/" class="generatelink">
      Sync Prices with Stripe
    </a>
  </li>
  {{ block.super }}
{% endblock %}

(the main thing is to change admin/change_list.html to adminsortable2/change_list.html - then it all works completely automatically)