HowTo: Enable guest checkout in B2B Demo Shop

Edit on GitHub

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

Exemplary implementation

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

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. The page refreshes with the success message displayed.
  3. In ​Pyz\Client\Permission\PermissionDependencyProvider.php, remove or comment ​PlaceOrderWithAmountUpToPermissionPlugin()​.

  4. DevVM-based instance: Sync code changes:

    vagrant halt && vagrant up
    
Warning

We will soon deprecate the DevVM and stop supporting it. Therefore, we highly recommend installing Spryker with Docker.

  1. In the 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)),

After this, you can check out as a guest user.

After adding items to cart, use the https://mysprykershop/en/cart custom URL for checkout.