HowTo - Enable guest checkout in B2B Demo Shop

Edit on GitHub

As B2B environments usually implement complex business logics, in the B2B Demo Shop, guest users cannot check out by default. In some cases, you might need guest checkout to be enabled.

Examplary implementation

The implementation described in this document is examplary and may require additional development on the project level.

To enable guest checkout:

  1. In the is_restricted column of the spy_unauthenticated_customer_access table, set 0 for add-to-cart and order-place-submit content types.

  2. Remove customer permissions:

    1. In the Back Office, go to Customers > Customer Access.
    2. Clear all the permissions. customer-permissions
    3. Select Save This refreshes the page with the success message displayed.
  3. In ​ Pyz\Client\Permission\PermissionDependencyProvider.php, remove or comment ​PlaceOrderWithAmountUpToPermissionPlugin()​.

  4. DevVM-based instace: to sync code changes, run vagrant halt && vagrant up.

  5. In CheckoutPage module, create src/Pyz/Yves/CheckoutPage/Theme/default/views/login/login.twig.

src/Pyz/Yves/CheckoutPage/Theme/default/views/login/login.twig
{% extends template('page-layout-checkout', 'CheckoutPage') %}

{% define data = {
    isGuest: _view.guestForm.vars.value and (_view.guestForm.vars.value.customer and _view.guestForm.vars.value.customer.isGuest),
    forms: {
        registration: _view.registerForm,
        guest: _view.guestForm,
        login: _view.loginForm
    }
} %}

{% block content %}
    <ul class="list">
        <li class="list__item spacing-y">
            {% include molecule('toggler-radio') with {
                data: {
                    label: 'checkout.customer.proceed_as_user' | trans,
                },
                attributes: {
                    id: 'register',
                    checked: not data.isGuest,
                    name: 'checkoutProceedAs',
                    'target-class-name': 'js-login__register',
                },
            } only %}
        </li>
        <li class="list__item">
            {% include molecule('toggler-radio') with {
                data: {
                    label: 'checkout.customer.proceed_as_guest' | trans,
                },
                attributes: {
                    id: 'guest',
                    checked: data.isGuest,
                    name: 'checkoutProceedAs',
                    'target-class-name': 'js-login__guest',
                },
            } only %}
        </li>
    </ul>

    <div class="grid">
        <div class="col col--sm-12 col--lg-6">
            <div class="box">
                {% include molecule('form') with {
                    class: 'js-login__register' ~ (data.isGuest ? ' is-hidden' : ''),
                    data: {
                        title: 'customer.registration.title' | trans,
                        form: data.forms.registration,
                        submit: {
                            enable: true,
                            text: 'forms.submit.register' | trans
                        }
                    },
                    qa: 'register-form'
                } only %}

                {% include molecule('form') with {
                    class: 'js-login__guest' ~ (data.isGuest ? '' : ' is-hidden'),
                    data: {
                        title: 'checkout.customer.order_as_guest' | trans,
                        form: data.forms.guest,
                        submit: {
                            enable: true
                        }
                    }
                } only %}
            </div>
        </div>

        <div class="col col--sm-12 col--lg-6">
            {% embed molecule('form') with {
                class: 'box',
                data: {
                    form: data.forms.login,
                    layout: {
                        email: 'col col--sm-6',
                        password: 'col col--sm-6'
                    },
                    submit: {
                        enable: true,
                        text: 'forms.submit.login' | trans
                    },
                    cancel: {
                        enable: true
                    }
                }
            } only %}
                {% block cancel %}
                    <a href="{{ url('password/forgotten') }}" {{qa('customer-forgot-password-link')}}>
                        {{ 'forms.forgot-password' | trans }}
                    </a>
                {% endblock %}
            {% endembed %}
        </div>
    </div>
{% endblock %}
  1. In src/Pyz/Yves/CheckoutPage/Theme/default/views/summary/summary.twig adjust the form definition by replacing enable: data.isPlaceableOrder and can('WriteSharedCartPermissionPlugin', data.cart.idQuote), with the following:
enable: data.isPlaceableOrder
and can('SeeOrderPlaceSubmitPermissionPlugin')
and (not is_granted('ROLE_USER') or can('WriteSharedCartPermissionPlugin', data.cart.idQuote)),

Now you can check out as a guest user. After adding items to cart, use the http://yves.de.spryker.local/en/cart custom URL for checkout.