Building a full ecommerce site part 9: editing the checkout process

Django-Oscar has a pretty long checkout flow. Customers don't like that, and I don't need most of it anyway. So, I decided to contract it as much as possible.

Remember when we placed the PayPal Checkout Express button on the preview page? We're going to put it in the basket/cart page. Oscar's buttons label it as cart but the url says basket.

UPDATE 16 Apr 2018: Step 1 did not work. I wrote it up on Stack Overflow. Someone please tell me why. :( The best I can do are Steps 2 and 3.

Step 1: shift the Place Order block from preview to basket

The basket/cart page is at oscar.templates.oscar.basket.partials.basket_content.html. We don't want to screw up this original file. Override it by copying it to, or wherever you've decided to place your overriding templates.

In Part 5, we made the "Place Order" button invisible, and sent our customers to the thank-you page successfully. The code for this is the entire {% block place_order %} block in preview.html. Copy the whole block, and then comment it out. We're not deleting it because, who knows, we might need it again in future.

Open up the basket_content.html file you just copied over, and look for the "Proceed to checkout" block:

{% block formactions %}
<div class="form-group clearfix">
<div class="row">
<div class="col-sm-4 col-sm-offset-8">
<!-- originally {% url 'checkout:index' %} -->
<a href="{% url 'checkout:preview' %}" class="btn btn-lg btn-primary btn-block">{% trans "Proceed to checkout" %}</a>
{% endblock formactions %}

Comment it out. Paste our "Place Order" block right below it.

Step 2: make sure nobody goes to preview

People get to the preview page through two places. One, the "Proceed to checkout" button, which we've just commented out. Two, the "checkout now" button, which pops up whenever customers add something to cart. This button is found in oscar.templates.oscar.basket.messages.new_total.html. Override it!

Look for this block:

{% if include_buttons %}
<a href="{% url 'basket:summary' %}" class="btn btn-info">{% trans "View basket" %}</a>
<a href="{% url 'checkout:index' %}" class="btn btn-info">{% trans "Checkout now" %}</a>
{% endif %}

I edited mine into this:

<!-- <a href="{% url 'basket:summary' %}" class="btn btn-info">{% trans "View basket" %}</a> -->

<!-- Made "Checkout now" go to 'basket:summary' instead. -->
<a href="{% url 'basket:summary' %}" class="btn btn-info">{% trans "Checkout now" %}</a>
{% endif %}

Step 3: 

Here's a little think in Oscar's apps.checkout.views.PaymentDetailsView:

    # If preview=True, then we render a preview template that shows all order
# details ready for submission.
preview = False

So, override PaymentDetailsView as we usually do and make it True:

from oscar.apps.checkout.views import PaymentDetailsView as BasePaymentDetailsView

class PaymentDetailsView(BasePaymentDetailsView):
preview = True

Now, the 'payment-details' page will load but as the 'preview' page instead. This cuts the checkout process by one page. Still something.

I'll try and figure out why Step 1 didn't work later.


There are currently no comments

New Comment


required (not published)