Sylius: [Enhancement] One Page Checkout (OPC)

[koemeet]

Hi,

I wanted to leave this here, because in some cases an one page checkout form can result in a better conversion. What do you guys think about such thing? Wouldn't it be nice if Sylius could do something like this easily (maybe even a back-end configuration too, so you can switch the checkout flow with one click). I haven't give this much thought yet, but wanted to share it.

Some links:
http://www.proimpact7.com/ecommerce-blog/checkout-ab-test-checkout-test-which-increased-conversion-by-13-39/

[kayue]

:+1:

IMO this cannot be done until Sylius support REST API.

[patie]

:+1:

[patie]

if you come up with something please share Information, we also need this functionality, many thanks! :)

[koemeet]

@patie I don't have very much time to implement this, just wanted to leave it here. But we could work on some RFC maybe. Because we have different controllers etc. to handle shipping etc. would we want to use AJAX and the REST API or should we implement a new controller for this that can handle it. Something like that. Currently I am not at home, but I like to discuss this first before trying something.

[patie]

ok we can discuss if will be little more time no problem :) thx

[kedves]

Any ideas here ? :)

[HellPat]

Duplicated by https://github.com/Sylius/Sylius/issues/5288

[mbabker]

FWIW a one-page checkout was requested from the client on our latest build, so we're tackling this issue right now at my company.

https://gist.github.com/mbabker/a40970f28116693219e663b6584d0b12 is a scratch pad of my notes and steps taken thus far. As of this writing all I've really gotten accomplished is getting the page to display with all of the data, functionality or actually submitting the form hasn't been started just yet.

[pjedrzejewski]

@mbabker This is an idea for a plugin. ;)

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in a week if no further activity occurs. Thank you for your contributions.

[dbalabka]

It is not trivial, but it is possible to configure the checkout process to submit all data per one step. It is briefly described in:
https://docs.sylius.com/en/latest/cookbook/shop/checkout.html

Steps (not precise):

1. Update Checkout Resolver:

sylius_shop:
    checkout_resolver:
        route_map:
            addressed:
                route: sylius_shop_checkout_complete

1. Update routes:

sylius_shop_checkout_start:
    path: /{_locale}/checkout/
    methods: [GET]
    defaults:
        _controller: FrameworkBundle:Redirect:redirect
        route: sylius_shop_checkout_address

sylius_shop_checkout_address:
    path: /{_locale}/checkout/step
    methods: [GET, PUT]
    defaults:
        _controller: sylius.controller.order:updateAction
        _sylius:
            event: address
            flash: false
            # Override this template in your theme
            template: "@SyliusShop/Checkout/Step/step.html.twig"
            form:
                # Your custom form here with all fields
                type: Acme\Bundle\CoreBundle\Form\Type\Checkout\CheckoutStepType
                options:
                    customer: expr:service('sylius.context.customer').getCustomer()
            repository:
                method: findCartForAddressing
                arguments:
                    - "expr:service('sylius.context.cart').getCart().getId()"
            state_machine:
                graph: sylius_order_checkout
                transition: address

1. Update State machine:

winzou_state_machine:
    sylius_order_checkout:
        class: Sylius\Component\Core\Model\Order
        transitions:
            complete:
                from:
                    - addressed

1. Create a new form Acme\Bundle\CoreBundle\Form\Type\Checkout\CheckoutStepType with all fields required to submit order per one step.

Still, there is a plugin to make it faster: https://plugins.sylius.com/plugin/one-page-checkout-plugin/

[dbalabka]

Related ticket #7673