How to Add Consent Checkboxes Manually

In this guide, you can learn how to manually place checkboxes in the needed location of the page with the help of the Data Privacy module, which is a part of Magento 2 GDPR, CCPA, and LGPD extensions.

There are default locations that you can view in the Magento admin panel ->Plumrocket -> Data Privacy -> Consent Locations. At the moment, 4 Magento checkbox locations are available: registration, checkout, newsletter subscription forms, and contact us form.

Additionally, the locations can be added by other Plumrocket extensions, or you can create your custom ones. Please follow this guide to learn how to create custom consent locations.

Example 1. Displaying Checkboxes Using Layout Containers

If your page is built using containers, then you should use the code from the example below.

In this example, we will add checkboxes on the Registration Page. Add a container to the XML layout file:

  1. Open the file:
/frontend/layout/customer_account_create.xml
  1. Add the code as shown below:
<referenceContainer name="form.additional.info">
    <block name="data_privacy_checkbox"
        template="Plumrocket_DataPrivacy::x-init/location_checkbox_list.phtml"
        ifconfig="prgdpr/general/enabled">
        <arguments>
            <argument name="locationKey" xsi:type="string">registration</argument>
            <argument name="scope" xsi:type="string">pr-data-privacy-registration</argument>
        </arguments>
    </block>
</referenceContainer>

Where:

  • locationKey” is a location identifier, which you can find in the Consent Locations grid.
  • scope” is a unique identifier for each checkbox list.

Example 2. Displaying Checkboxes Using Layout Blocks

Create layout blocks if you need to add checkboxes within HTML content. Use the code from the example below.

In this example, we will add checkboxes to the Newsletter Subscription form.

Step 1. Insert block into the page XML layout

  1. Open the file:
/frontend/layout/default.xml
  1. Add the code as shown below:
<referenceBlock name="form.subscribe">
    <block name="prgdpr_newsletter_checkbox"
        template="Plumrocket_DataPrivacy::x-init/location_checkbox_list.phtml"
        ifconfig="prgdpr/general/enabled">
        <arguments>
            <argument name="locationKey" xsi:type="string">newsletter</argument>
            <argument name="scope" xsi:type="string">pr-data-privacy-newsletter</argument>
        </arguments>
    </block>
</referenceBlock>

Step 2. Insert block into the page HTML template

  1. Open the file:
/frontend/templates/subscribe.phtml
  1. Add the highlighted code as shown below:
<div class="field newsletter">
    <label class="label" for="newsletter"><span>
        <?= $block->escapeHtml(__('Sign Up for Our Newsletter:')) ?></span></label>
    <div class="control">
        <input name="email" type="email" id="newsletter"
            placeholder="<?= $block->stripTags(__('Enter your email address')) ?>"
            data-validate="{required:true, 'validate-email':true}"/>
    </div>
</div>

<?= $block->getChildHtml('prgdpr_newsletter_checkbox') ?>

<div class="actions">
    <button class="action subscribe primary"
        title="<?= $block->stripTags(__('Subscribe')) ?>" type="submit">
        <span><?= $block->escapeHtml(__('Subscribe')) ?></span>
    </button>
</div>

Example 3. Displaying Checkboxes Using UI Components

If your page is based on UI Components, then you should use the code from the example below.

Let’s try to add checkboxes on the Checkout Page. Add container and UI Component to the XML layout file:

  1. Open the file:
/frontend/layout/checkout_index_index.xml
  1. Add the code as shown below:
<referenceContainer name="content">
    <block
        class="MagentoFrameworkViewElementTemplate"
        name="prgdpr_checkbox"
        template="Plumrocket_GDPR::consent-checkboxes-jslayout.phtml"
    >
        <arguments>
            <argument name="prgdprPage" xsi:type="string">checkout</argument>
        </arguments>
    </block>
</referenceContainer>

<referenceBlock name="checkout.root">
    <arguments>
        <argument name="jsLayout" xsi:type="array">
            <item name="components" xsi:type="array">
                <item name="checkout" xsi:type="array">
                    <item name="children" xsi:type="array">
                        <item name="steps" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="billing-step" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="payment" xsi:type="array">
                                            <item
                                                name="children"
                                                xsi:type="array"
                                            >
                                                <item
                                                    name="payments-list"
                                                    xsi:type="array"
                                                >
                                                    <item
                                                        name="children"
                                                        xsi:type="array"
                                                    >
                                                        <item
                                                            name="before-place-order"
                                                            xsi:type="array"
                                                        >
                                                            <item
                                                                name="children"
                                                                xsi:type="array"
                                                            >
                                                                <item
                                                                    name="prgdpr-consent-checkboxes"
                                                                    xsi:type="array"
                                                                >
                                                                    <item
                                                                        name="component"
                                                                        xsi:type="string"
                                                                        >Plumrocket_GDPR/js/view/consent-checkbox</item
                                                                    >
                                                                    <item
                                                                        name="sortOrder"
                                                                        xsi:type="string"
                                                                        >200</item
                                                                    >
                                                                    <item
                                                                        name="displayArea"
                                                                        xsi:type="string"
                                                                        >before-place-order</item
                                                                    >
                                                                    <item
                                                                        name="dataScope"
                                                                        xsi:type="string"
                                                                        >prgdprConsent</item
                                                                    >
                                                                    <item
                                                                        name="provider"
                                                                        xsi:type="string"
                                                                        >prgdprConsentProvider</item
                                                                    >
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>
    

Was this article helpful?