/module-checkout-designs

Allow multiple options for Magento 2 checkout layout. Provides capabilities to AB test checkout changes and more.

Primary LanguagePHP

Aimes_CheckoutDesigns

"Supported Magento Version" "Latest Release"

  • Compatible with Magento Open Source and Adobe Commerce 2.3.x & 2.4.x
  • Compatible with Hyvä Themes using the Luma Checkout Fallback

Features

This module provides the ability to change checkout page designs/layout similar to page specific selectable layouts.

The module currently provides the following functionality:

  • Provide a different checkout user experience per store
  • Provide a different checkout user experience per customer group
Example Config

Example Config

This in turn will allow you to do things such as, but not limited to, the following:

Please note: These are only examples of functionality that this module makes possible. This module itself does not provide any additional functionality and serves only as a base for other modules. For example usage, please see Aimes_CheckoutDesignsExample.

  • AB Testing any checkout changes
  • Something broken or users can't checkout with a specific design? Select a different design or the default Magento checkout so that users can still checkout until you can deploy your fixed code.
  • Collect different data per design to help determine any issues
    • Track the different drop-off points
    • Track conversion rates

Any feature requests and/or pull requests are welcomed!

Requirements

  • Magento Open Source or Adobe Commerce version 2.3.x or 2.4.x

Installation

Please install this module via Composer. This module is hosted on Packagist.

  • composer require aimes/module-checkout-designs
  • bin/magento module:enable Aimes_CheckoutDesigns
  • bin/magento setup:upgrade

Usage

Step 1: Define new checkout layout

di.xml

<virtualType name="Vendor\Module\Model\Checkout\Design\MyDesign"
             type="Aimes\CheckoutDesigns\Model\CheckoutDesign">
    <arguments>
        <argument name="code" xsi:type="string">my_design_code</argument>
        <argument name="name" xsi:type="string">My Design Name</argument>
        <argument name="layoutHandle" xsi:type="string">my_design_layout_handle</argument>
        <argument name="layoutProcessors" xsi:type="array">
            <item name="defaultProcessor" xsi:type="object">
                <!-- Object must implement \Magento\Checkout\Block\Checkout\LayoutProcessorInterface -->
            </item>
        </argument>
        <argument name="configProviders" xsi:type="array">
            <item name="defaultProvider" xsi:type="object">
                <!-- Object must implement \Magento\Checkout\Model\ConfigProviderInterface -->
            </item>
        </argument>
    </arguments>
</virtualType>

Explanation

  • Designs must implement \Aimes\CheckoutDesigns\Api\CheckoutDesignInterface
    • code is a unique string identifier for your design
    • name is a string to represnt the frontend / human friendly label
    • layoutHandle is a string to represent the layout handle that will be processed when the design is in use. The above would include my_design_layout_handle.xml
    • layoutProcessors is an array of objects that will only be processed when the associated design is utilised
      • Items must implement \Magento\Checkout\Block\Checkout\LayoutProcessorInterface
    • configProviders is an array of objects that will only be processed when the associated design is utilised
      • Items must implement \Magento\Checkout\Model\ConfigProviderInterface

Example code

For working code examples, please refer to Aimes_CheckoutDesignsExample. This package can also be installed.

Step 2: Add your design to the available options

di.xml

<type name="Aimes\CheckoutDesigns\Model\Config\Source\CheckoutDesigns">
    <arguments>
        <argument name="designs" xsi:type="array">
            <item name="my_design" xsi:type="object">
                Vendor\Module\Model\Checkout\Design\MyDesign
            </item>
        </argument>
    </arguments>
</type>

Step 3: Select design

Your design should now show up as an option in the system configuration below:

Sales -> Checkout -> Design / Layout -> Checkout Design

  • Select the default design
  • Select specific designs per customer groups

Licence

GPLv3 © Rob Aimes