# 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: 

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

In the end, this is translated into the following HTML:
```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
<?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.

```xml
<referenceBlock name="loki-checkout.agreements">
    <arguments>
        <argument name="message_area" xsi:type="string">global</argument>
    </arguments>
</referenceBlock>
```