Example for restricting guest checkout
Preventing guest checkout is a two-step process involving disabling the guest checkout administration option and modifying the checkout UI on the storefront.
This section applies to Open Storefront Framework (OSF) and Storefront Classic.
First, you must disable Guest Checkout on the Settings page in the Commerce administration interface. This sets the flag used for testing whether guest checkout is allowed. For details on how to set this flag, see Restrict guest checkout. Second, you must modify your storefront’s checkout UI to prevent anonymous shoppers from accessing check out features until they have logged in. For example, you might disable the Place Order button on the Checkout page until the shopper logs in. The specifics of modifying your checkout UI to restrict guest checkout vary with each storefront’s requirements. As such, a simple example has been provided to give you an understanding of how you can restrict access to the Place Order button until a shopper has logged in or agreed to create an account.
In the illustration below, the out-of-the-box Login-Checkout widget has been modified to replace the Checkout as Guest button with a Register to Checkout button. The Register to Checkout button has been selected but the I Want to Create an Account checkbox has not. This combination of settings indicates that the shopper is an anonymous shopper who does not yet have an account. For a storefront that restricts guest checkout, this combination of settings should result in a disabled Place Order button.
When the shopper enables the “I want to create an account” option, he is agreeing to become a registered shopper using the information he provides on the Checkout page. At this point, the Place Order button becomes enabled.
To create this UI, you first modify the Login – Checkout widget to introduce
ko if
and ko ifnot
bindings that check for whether the
guestCheckoutEnabled
flag is true or false and then render the appropriate
radio button text (either “Checkout as guest” or “Register to checkout”) depending on the
state of the flag.
<!-- ko with: user -->
<div id="checkout-registration">
<h2 data-bind="widgetLocaleText:'checkoutRegistrationText'"></h2>
<hr>
<fieldset id="checkoutOptions" data-bind="visible: !loggedIn()">
<legend id="checkoutOptions-legend"
data-bind="widgetLocaleText:'checkoutOption'"></legend>
<div class="row">
<div class="form-group">
<div class="col-sm-6 col-lg-4 cc-checkoutRegistration-radio">
<label class="radio"
data-bind="attr:{ for: 'CC-checkoutRegistration-userOption-'+
$parent.order().checkoutGuest() }">
<input type="radio" class="form control" name="account"
data-bind="value: $parent.order().checkoutGuest,
attr:{ id: 'CC-checkoutRegistration-userOption-
'+$parent.order().checkoutGuest() },
checked: $parent.order().checkoutOption"/>
<!-- ko if: $data.contextData.global.guestCheckoutEnabled -->
<span data-bind="widgetLocaleText: 'checkoutAsGuestText'"></span>
<!-- /ko -->
<!-- ko ifnot: $data.contextData.global.guestCheckoutEnabled -->
Register to checkout
<!-- /ko -->
</label>
</div>
<div class="col-sm-6 col-lg-8 cc-checkoutRegistration-radio">
<label class="radio"
data-bind="attr:{ for: 'CC-checkoutRegistration-userOption-
'+$parent.order().checkoutLogin() }">
<input type="radio" class="form control" name="account"
data-bind="value: $parent.order().checkoutLogin,
attr:{ id: 'CC-checkoutRegistration-userOption-
'+$parent.order().checkoutLogin() },
checked: $parent.order().checkoutOption"/>
<span data-bind="widgetLocaleText: 'loginToAccountText'"></span>
</label>
</div>
</div>
</div>
...
...
Note: In the interest of simplicity, this example does not add a resource string for the “Register to checkout” label. To do that, you must download the widget, update the source files, and import the updated widget into Commerce.
Next, you modify the Order Summary – Checkout widget to update the
handleCreateOrder
enable data-binding with logic that controls whether the
Place Order button is enabled or disabled, based on whether guest checkout is enabled and
whether the shopper is logged in:
...
<div id="CC-checkoutOrderSummary-placeOrder" class="checkout row">
<button class="cc-button-primary col-xs-12"
data-bind="click: handleCreateOrder,
enable: (!user().contextData.global.guestCheckoutEnabled &&
user().loggedIn() && order().enableOrderButton) ||
(!user().contextData.global.guestCheckoutEnabled && !user().loggedIn()
&& order().enableOrderButton && order().createAccount) ||
(user().contextData.global.guestCheckoutEnabled &&
order().enableOrderButton)">
<span data-bind="widgetLocaleText:'placeOrderText'"></span>
</button>
</div>
...