Skip to content

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

Notifications You must be signed in to change notification settings

robaimes/module-checkout-designs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Rob Aimes
May 11, 2022
9da42ef · May 11, 2022

History

20 Commits
Jul 3, 2021
Apr 13, 2021
Apr 13, 2021
Mar 2, 2022
Mar 2, 2022
Mar 29, 2021
May 11, 2022
Apr 13, 2021
Mar 17, 2021

Repository files navigation

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

About

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

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages