How to Add Consent Checkboxes Manually

Use the documentation below to manually place checkboxes in the needed location of the page in the Magento 2 GDPR extension. At the moment 3 checkbox locations are supported: registration, checkout or newsletter subscription forms. Please note, you must first add the “Consent Checkboxes” in the Magento System Configuration -> GDPR -> Consent Checkboxes. See the GDPR configuration page for more details.

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 container to the XML layout file:

Open the file:

/frontend/layout/customer_account_create.xml

and add the code as shown below:

<referenceContainer name="form.additional.info">
    <block class="MagentoFrameworkViewElementTemplate" name="prgdpr_checkbox"
        template="Plumrocket_GDPR::consent-checkboxes-xinit.phtml"
        ifconfig="prgdpr/general/enabled">
        <arguments>
            <argument name="prgdprPage" xsi:type="string">registration</argument>
        </arguments>
    </block>
</referenceContainer>

Where:

“locationKey” argument describes the type of the checkbox. E.G:

<argument name="locationKey" xsi:type="string">location</argument>

“location” can have the following values: “registration”, “newsletter” or “checkout”.

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 into the Newsletter Subscription form.

Step 1. Insert block into the page XML layout

Open the file:

/frontend/layout/default.xml

and add the code as shown below:

<referenceBlock name="form.subscribe">
    <block class="Magento\Framework\View\Element\Template"
        name="prgdpr_newsletter_checkbox"
        template="Plumrocket_GDPR::consent-checkboxes-load.phtml"
        ifconfig="prgdpr/general/enabled">
        <arguments>
            <argument name="locationKey" xsi:type="string">newsletter</argument>
        </arguments>
    </block>
</referenceBlock>

Step 2. Insert block into the page HTML template

Open the file:

/frontend/templates/subscribe.phtml

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

Open the file:

/frontend/layout/checkout_index_index.xml

and 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>
    

PLEASE NOTE: If the page where you want to display checkboxes is cached with FPC or Varnish Cache, you should use the template “template=”Plumrocket_GDPR::consent-checkboxes-load.phtml”” (shown in examples above) and the checkboxes will be loaded using AJAX. Otherwise use “template=”Plumrocket_GDPR::consent-checkboxes-xinit.phtml”” and the checkboxes will be loaded with page content.

Was this article helpful?