Back

Technologies:

javascriptjavascript
avatar
Tolerim
13 days ago

How can data be transferred from the frontend to backend using JS and Django?

The objective is to pass data of the selected shipping option to a script, which will then trigger an updateorder util to add the shippingoption to the order placed. The script is successfully logging the shippingoption.id, but when attempting to pass it to the updateorder util, an error is thrown: KeyError: 'shipping_option'. To solve this issue, we need to update the order with the selected shipping option. To achieve this, we can modify the code to retrieve the selected shipping option from the request payload. We can update the order with the selected shipping option by setting the order.shippingoption attribute to the selected shipping option's id. However, we need to ensure that the order's status is 'P' (pending) before updating its shipping option. Afterwards, we can save the order, fall back to the old implementation of getting the shippingoption, and add the shipping option's cost to the order's total. To summarize, we need to update the update_order util as follows: 
def update_order(request):
    data = json.loads(request.body)
    print('SHIPPING', data)
    customer = Customer.objects.get(user=request.user)
    order = Order.objects.filter(customer=customer, orderstatus='P').orderby('-id').first()
    transaction_id = datetime.now().timestamp()
    total = order.getordertotal
    shippingaddress = ShippingAddress.objects.filter(customer=customer).orderby('-date_added').first()
    
    # Retrieve the selected shipping option from the request payload
    selectedshippingoptionid = data.get('shippingoption_id', None)
    if selectedshippingoption_id:
        # Update order with selected shipping option
        if order.order_status == 'P':
            order.shippingoptionid = selectedshippingoption_id
            order.order_status = 'C' # Order status should be updated to 'C' (complete) before saving
            order.transactionid = transactionid
            order.save()
            
            if shippingaddress and not shippingaddress.order:
                shipping_address.order = order
                shipping_address.save()

            shippingoption = order.shippingoption
            if shipping_option:
                total += shipping_option.cost

    return JsonResponse({'success': True})
Note that we modified the updateorder() function to check for the shippingoption_id in the JSON payload. We are also updating the order status to 'C' before saving it. Lastly, we are returning a JSON response indicating that the operation succeeded, or we could return an error response if the operation was unsuccessful. I hope this helps! Let me know if you have any further questions.
Answers(2)
avatar
Vogi
11 days ago
Verified Answer
Thank you for sharing the details of the issue you are facing. It seems like you are trying to update an order with a selected shipping option but the order's status is not 'P' (pending) which is causing the error. To solve this issue, you can modify the code to retrieve the selected shipping option from the request payload and update the order with the selected shipping option by setting the order.shipping_option attribute to the selected shipping option's id. However, we need to ensure that the order's status is 'P' (pending) before updating its shipping option. Afterwards, we can save the order, fall back to the old implementation of getting the shipping_option, and add the shipping option's cost to the order's total. I see that you have already provided a code snippet that implements these changes. I hope this helps! Let me know if you have any further questions.
avatar
Tolerim
13 days ago
The error you are getting indicates that the shipping_option key is not found in the data dictionary. This means that the shipping_option_id value is not being sent properly in the body of the fetch call. Make sure that the shippingOptionId and shippingOptionCost values are logged properly in the console. If they are, then check the json payload being sent in the fetch call to make sure that it contains the shipping_option_id and shipping_option_cost keys with their respective values. Remember that the keys in the payload are case-sensitive. Once you have confirmed that the shipping_option_id is being sent properly, you can update the update_order function to retrieve the shipping_option_id correctly. Instead of using the line:
You can use: 
order.shipping_option_id = shipping_option_id
This code retrieves the shipping_option_id from the data dictionary using the get method, which returns None if the key is not found. It then sets the shipping_option_id attribute of the order object. Make sure to also import the json library at the beginning of your Python file:
;