Estamos tratando de redirigir a nuestra página checkout.html que requiere una identificación en sus argumentos para llegar, pero estamos tratando de llegar usando Javascript.
En la página store.html
{% for item in product %} <div class="col-md-3"> <div class="card" style="width: 90%; margin: 5px 5px;"> <a href="Product/{{item.id}}"><img src="{{item.image.url}}" class="card-img-top"></a> <div class="cart-footer text-center"> <button onclick="redirect()">Order</button> </div> </div> </div> {% endfor %} <script> function redirect() { var url = "{% url 'Checkout' %}"; var id = $(this).item('id'); window.location.href = url + "/" + id; } </script>Sabemos que podemos usar un botón normal como
<button onclick="window.location.href='Checkout/{{item.id}}'">Order</button>Así es como lo teníamos antes, pero estamos tratando de obtenerlo a través de Javascript para uso futuro. ¿Cómo se obtiene la identificación de un objeto específico en javascript?
urls.py
path('', views.Store, name= "Store"), path('Checkout/<id>', views.createlocation, name="Checkout"), path('Product/<id>', views.product_details, name="Product")En su plantilla:
. . {{ item|json_script:"item_obj" }} <button onclick="redirect()">Order</button> . .Entonces en tu función JS
function redirect() { var url = "{% url 'Checkout' %}"; const item = JSON.parse(document.getElementById('item_obj').textContent); window.location.href = url + "/" + item[id]; }Mira este ejemplo de doc