Django Detail View на Boostrap Modal?

Я в процессе создания приложения Ecomerce с django, и хотя все идет хорошо, я не могу отобразить детали конкретного объекта в bootstrap-модале.

Вот скриншот того, что я пытаюсь отобразить в модале

Это отображение модала, но ни изображения, ни данных ему не передается

Я поискал и увидел, что модалы могут быть отображены с помощью Ajax, но до сих пор не нашел ни одной серьезной статьи. Буду благодарен, если кто-нибудь сможет предоставить источник или быстрый пример того, как это сделать.

NOTE: Я могу отобразить детальный вид как отдельный вид, как вы можете видеть на следующем изображении:Detail View

Мои взгляды:

def product_list(request, category_slug=None):
# category_slug parameter gives us the ability to optionally filter product by a give category
category = None
categories = Category.objects.all()

# Available=True to filter only the available products
products = Product.objects.filter(available=True)
if category_slug:
    category = get_object_or_404(Category, slug=category_slug)
    products = products.filter(category=category)

paginator = Paginator(products, 9)  # Show 9 contacts per page.
page_number = request.GET.get('page')

page_obj = paginator.get_page(page_number)

# -> Adds the "add to cart" form to list view
cart_product_form = CartAddProductForm()
context = {
    'category': category,
    'categories': categories,
    'products': products,
    'cart_product_form': cart_product_form,
    "page_obj": page_obj,

}
return render(request, 'shop/product/list.html', context)

def product_detail(request, id, slug):
# id and slug parameters in order to retrieve a product instance
# Slug parameter added to make the SEO-friendly URLs for products
product = get_object_or_404(Product,
                            id=id,
                            slug=slug,
                            available=True)

# -> Adds the "add" to cart form to detail view
cart_product_form = CartAddProductForm()
return render(request,
              'shop/product/detail.html',
              {'product': product, 'cart_product_form': cart_product_form})

Урлы моих приложений:

urlpatterns =[
path('', views.index, name='index'),
path('product/', views.product_list, name='product_list'),
path('<slug:category_slug>/', views.product_list, name='product_list_by_category'),
path('<int:id>/<slug:slug>/', views.product_detail, name='product_detail'),

]

<ul>
    {% for obj in object_list %}
        <li>
            {{ obj.name }}
            <button
                    type="button"
                    class="btn btn-primary"
                    data-toggle="modal"
                    data-target="#exampleModal"
                    data-ajaxurl="{% url 'product_detail' obj.id obj.slug %}">
                    Open modal
            </button>
        </li>
    {% endfor %}
</ul>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var ajaxUrl = button.data('ajaxurl') // Extract info from data-* attributes
  
  $('#exampleModal-content').load(ajaxUrl)
})