loki Documentation

Customizing agreements

**This playbook scenario goes through various customizations of the agreements - the technical name for the Terms and Conditions that can be configured in the Magento Admin Panel and shown in the checkout before placing the order.

Activating agreements

Make sure to enable the setting checkout/options/enable_agreements first. It can be configured in the Admin Panel via Store Configuration > Sales > Checkout > Checkout Options > Enable Terms and Conditions.

Managing the agreements

Agreements are managed via the page Stores > Settings > Terms and Conditions. All options, except the Content Height (css) are supported.

How the checkbox text is shown

Each agreement comes with a Checkbox Text. If this text is set to plain string, an additional link with the text Show Terms is created to allow people to see the terms in a popup. However, if the text contains an anchor tag <a> (without any attributes), the text within the anchor tag is used to create a link:

Agree with <a>terms and conditions</a>

In the end, this is translated into the following HTML:

Agree with <a @click="toggleModal" class="underline cursor-pointer">terms and conditions</a>

Moving the agreements block from sidebar to billing step

With the LokiCheckout, the position of a given Loki Components determines to which step that component belongs. For instance, a field in the shipping step is taken into account when validating the shipping step. This is the same for the agreements block, except for the fact that the Default Theme places this block in the sidebar, so that the step is set to any: Regardless of which step you are in, you first need to agree to the terms, before proceeding.

You might want to change this, so that the Terms and Conditions are only shown in the final step, for instance the billing step. This is easily done by moving the block to the billing step block.

Create a file view/frontend/layout/loki_checkout.xml and add the following:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
    <body>
        <referenceBlock name="loki-checkout.agreements">
            <arguments>
                <argument name="sort_order" xsi:type="number">1</argument>
            </arguments>
        </referenceBlock>

        <referenceBlock name="loki-checkout.steps.billing.buttons">
            <arguments>
                <argument name="sort_order" xsi:type="number">2</argument>
            </arguments>
        </referenceBlock>

        <move element="loki-checkout.agreements" destination="loki-checkout.steps.billing" as="agreements" />
    </body>
</page>

Note that this XML layout also sets the ordering of blocks, so that the agreements appear after the payment methods and before the buttons. This logic relies upon the $childRenderer.

A more advanced scenario, creates a new container agreements-container, adds the agreements to them and then orders them. Such an example can be found in the file loki_checkout_theme_demo.xml of the module LokiCheckout_Demo.

Changing the messages from local to global

By default, all Loki Components - so also the agreements component - add their messages as local messages. Within the template LokiCheckout_Core::checkout/other/agreements.phtml, a specific child block is rendered to allow for these messages to be displayed.

You can also turn these messages into global messages, popping up in the top of the screen. To do so, simply change the XML argument message_area into global. Note that this actually works for any Loki Component.

<referenceBlock name="loki-checkout.agreements">
    <arguments>
        <argument name="message_area" xsi:type="string">global</argument>
    </arguments>
</referenceBlock>
Last modified: November 23, 2025