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:
- Open the file:
/frontend/layout/customer_account_create.xml- 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
- Open the file:
/frontend/layout/default.xml- 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
- Open the file:
/frontend/templates/subscribe.phtml- 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- 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>