Canvas Support

GDPR - change to alert on small devices

2 replies · opened Jan 12, 2022

DDavegdrJan 12, 2022

I would like to use the GDPR template for MD and above devices & an alert for xs and small devices. Reason = CLS in Core Web Vitals of the GDPR bar on mobile testing.

I have the following code for the small devices just before the footer. However, when pressing close, the alert will re-appear when reloading the page. Is there a solution for this?

	<div class="alert alert-primary rounded-0 fixed-bottom m-0 d-md-none">
		<div class="container">
			<div class="row justify-content-between align-items-center">
				<div class="col-lg-auto">
					Blablabla
				</div>
				<div class="col-lg-auto mt-3 mt-lg-0">
					<button class="btn btn-primary gdpr-accept" data-bs-dismiss="alert" aria-hidden="true">Close</button>
					
				</div>
			</div>
		</div>
	</div>
DDavegdrJan 13, 2022

I tried adding gdpr-settings to the <div class=”alert alert-primary rounded-0 fixed-bottom m-0 d-md-none”>, but then the styling gets applied, which results again in a high CLS.

SSemicolon WebSTAFFJan 14, 2022

Hello,

Thanks for your Patience!

Consider using the following code:

HTML:

<div class="alert alert-primary rounded-0 fixed-bottom m-0 d-none d-md-none" data-cookies="true">
	<div class="container">
		<div class="row justify-content-between align-items-center">
			<div class="col-lg-auto">
			Blablabla
			</div>
			<div class="col-lg-auto mt-3 mt-lg-0">
				<button class="btn btn-primary gdpr-accept" data-bs-dismiss="alert" aria-hidden="true">Close</button>
			</div>
		</div>
	</div>
</div>

JS Code at the bottom of the Page after the js/functions.js JS File Linking:

<script>
	jQuery('.gdpr-accept').on('click', function(){
		Cookies.set('websiteUsesCookies', 'yesConfirmed', { expires: 30 });
	});

	if( Cookies.get('websiteUsesCookies') != 'yesConfirmed' ) {
		jQuery('.gdpr-accept').parents('.alert').removeClass('d-none');
	} else {
		jQuery('.gdpr-accept').parents('.alert').addClass('d-none');
	}
</script>

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard