2

I'm building a basic cart page in Craft 3.7.37 with Commerce 3.4.12. The /store/cart page has a <form> with the line items in the cart next to an <input /> to change quantity and one to remove the line item. I also have an "Update Cart" button that updates quantities from the form (redirecting back to /store/cart) and a "Checkout" button that currently just submits the form. I've added a redirectInput function to the form to redirect back to /store/cart on submit, which works for the "Update Cart" and "Remove" buttons.

How do I make the "Checkout" button redirect to /store/checkout/contact and update cart quantities when the user clicks it?

I know this is possible in PHP server side but I'm not great at PHP. I'm hoping there's a a way to use Craft's built-in functions. I want to avoid using jQuery ajax and Javascript form processing if possible (as in this question). I also want to ensure urls are hashed.

Here's the relevant template code:

<form method="POST" data-cart>
<input type="hidden" name="action" value="commerce/cart/update-cart" />
{{ redirectInput('/store/cart') }}
{{ csrfInput() }}
<input type="hidden" name="gatewayId" value="{{ gatewayId }}" />
{% set item = item | default(false) %}
{% set maxQty = maxQty | default('') %}
{% set summary = summary | default(false) %}
{% if item %}
{% set sum = item.price * item.qty %}
{% if summary %}
<p class="cart-items__item__summary">
    {{ item.qty }} &times; {{ item.price | currency }} = {{ sum | currency }}
</p>
{% else %}
<div class="cart-items__item__fields">
    <label class="cart-items__item__qty">
        {{ item.price | currency }}
        &times;
        <input max="{{ maxQty }}" min="0" name="lineItems[{{ item.id }}][qty]" placeholder="qty" step="1" type="number" value="{{ item.qty }}" />
        =
        {{ sum | currency }}
    </label>
    <label class="cart-items__item__remove">
        <input name="lineItems[{{ item.id }}][remove]" type="submit" value="{{ item.qty }}" />
        Remove
    </label>
</div>
{% endif %}
{% endif %}
<div class="actions">
    <a href="/store" class="button actions__action">&larr; Back to Store</a>
    <button type="submit" class="button actions__action">Update Cart</button>
    <button type="submit" class="button actions__action">Checkout &rarr;</button>
</div>

and a screenshot of the front-end to help clarify: enter image description here

1 Answer 1

3

You may be able to use the browser-native <button type="submit"> feature!

Check this out:

<form method="POST">
  {{ csrfInput() }}
  {{ actionInput('commerce/carts/update-cart') }}

  {# ...your existing form controls... #}

  <button
    type="submit"
    name="redirect"
    value="{{ 'update/path/target' | hash  }}">Update Quantities</button>

  <button
    type="submit"
    name="redirect"
    value="{{ 'checkout/path/target' | hash  }}">Checkout</button>
</form>

The only peculiar thing to note here is the direct use of Craft's hash filter—ultimately the same functionality that redirectInput() helper provides, as a means to prevent tampering with the values and exposing your app to remote code execution vulnerabilities!

1
  • 1
    Thanks! This works like a charm. For anyone else wondering the hash filter is necessary. If you don't do it you'll get HTTP 400 – Bad Request.
    – Yawner
    Mar 17 at 18:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.