Awesome

Aimes_CheckoutDesigns

• 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

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