README

• 兼容 Magento Open Source 和 Adobe Commerce 2.3.x 及 2.4.x
• 兼容 Hyvä Themes 使用 Luma Checkout Fallback

功能

此模块提供了更改结账页面设计/布局的能力，类似于 页面特定可选布局。

模块目前提供以下功能

• 为每个商店提供不同的结账用户体验
• 为每个客户群体提供不同的结账用户体验

这反过来又允许您执行以下操作，但不仅限于以下操作

请注意：这些只是此模块使可能的功能示例。此模块本身不提供任何附加功能，仅作为其他模块的基座。有关示例用法，请参阅 Aimes_CheckoutDesignsExample。

• 进行任何结账更改的 A/B 测试
• 如果某些东西损坏或用户无法使用特定设计结账？选择不同的设计或默认的 Magento 结账，以便用户仍然可以结账，直到您部署修复的代码。
• 为每个设计收集不同的数据以帮助确定任何问题
  • 跟踪不同的流失点
  • 跟踪转化率

欢迎任何功能请求和/或拉取请求！

要求

• Magento Open Source 或 Adobe Commerce 版本 2.3.x 或 2.4.x

安装

请通过 Composer 安装此模块。此模块托管在 Packagist 上。

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

用法

步骤 1: 定义新的结账布局

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>

说明

• 设计必须实现 \Aimes\CheckoutDesigns\Api\CheckoutDesignInterface
  • code 是您设计的唯一字符串标识符
  • name 是表示前端/友好的字符串
  • layoutHandle 是表示当设计在使用时将处理的布局处理的字符串。上面包括 my_design_layout_handle.xml
  • layoutProcessors 是一个对象数组，仅当使用相关设计时才会处理
    • 必须实现 \Magento\Checkout\Block\Checkout\LayoutProcessorInterface 的项
  • configProviders 是一个对象数组，仅当使用相关设计时才会处理
    • 必须实现 \Magento\Checkout\Model\ConfigProviderInterface 的项

示例代码

有关工作代码示例，请参阅 Aimes_CheckoutDesignsExample。此包也可以安装。

步骤 2: 将您的设计添加到可用选项中

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>

步骤 3: 选择设计

您的设计现在应该显示在以下系统配置中的选项中

销售 -> 结账 -> 设计/布局 -> 结账设计

• 选择默认设计
• 为每个客户群体选择特定的设计

许可证

GPLv3 © Rob Aimes