This package adds simple functionality to manage cookie dialog on your website. It consists of the Controller, which expects request to indicate if third party cookies are being allowed or not and sets the cookie on user's machine accordingly.
You can either use your own front end implementation or use the examples towards the bottom of this page (vuejs/inertiajs/pinia/tailwindcss).
composer require sebastiansulinski/laravel-cookies-dialog
php artisan vendor:publish --tag=laravel-cookies-dialogYou will now have a config/cookies-dialog.php file available - feel free to update it to your heart's desire.
// App\Http\Middleware\HandleInertiaRequests.php
public function __construct(Request $request, private Share $share)
{
//...
}
public function share(Request $request): array
{
return array_merge(parent::share($request), $this->share->get());
}Included ServiceProvider (which is loaded using package discovery) automatically makes all these variables available to all views.
You can add more variables to the sharing pot by using Share::set() method from within your AppServiceProvider
// App\Providers\AppServiceProvider
use SSD\CookiesDialog\Utilities\Share;
public function boot(): void
{
Share::set('googleTagID', config('services.google.tag_id'));
}Within view file
@if($thirdPartyCookies)
// your scripts go here
@endifimport { defineStore } from 'pinia';
import { usePage } from '@inertiajs/inertia-vue3';
export const useCookieStore = defineStore('cookies', {
state: () => ({
visible: usePage().props.value.showCookiesDialog,
thirdParty: usePage().props.value.thirdPartyCookies,
}),
actions: {
toggle() {
this.thirdParty = !this.thirdParty;
},
agree() {
axios.post('/ssd/cookie', { third_party: Number(this.thirdParty) })
.then(() => window.location.reload())
.catch(error => console.log(error));
},
},
});Make sure that showCookiesDialog and thirdPartyCookies match your configuration variable names if you've overwritten those.
<script setup>
import Settings from './Settings.vue';
import { useCookieStore } from '@/stores/cookies';
import { Link } from '@inertiajs/inertia-vue3';
import { ref } from 'vue'
const store = useCookieStore();
const revealed = ref(false);
</script>
<template>
<div v-if="store.visible" class="w-full fixed inset-x-0 bottom-0 bg-neutral-900 bg-opacity-90 py-8 text-white z-20">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row space-y-4 lg:space-y-0">
<div class="flex-auto">
<h2 class="text-2xl font-semibold">Cookies</h2>
<p class="text-neutral-300 mt-4">
We use cookies to help provide you with the best possible online experience.<br />
By using this site, you agree that we may store and access cookies on your device.
</p>
<p class="text-neutral-300 mt-4">
<Link
href="/cookies"
class="text-yellow-300 hover:text-yellow-400"
>
Cookie policy</Link>.
<span
@click.prevent="revealed = !revealed"
class="text-yellow-300 hover:text-yellow-400 cursor-pointer"
>
Cookie settings
</span>.
</p>
</div>
<div>
<button
v-if="!revealed"
@click="store.agree"
type="button"
class="inline-flex rounded-md border px-4 py-2 text-base font-medium shadow-sm bg-white text-gray-800 border-gray-200 hover:border-gray-400"
>I Agree</button>
</div>
</div>
<Settings class="py-8" v-if="revealed" />
</div>
</div>
</template><script setup>
import { useCookieStore } from '@/stores/cookies';
const store = useCookieStore();
</script>
<template>
<div>
<div class="grid lg:grid-cols-2 gap-8">
<div>
<div class="flex items-center">
<input
id="cookies-functional"
aria-describedby="functional-description"
name="comments"
type="checkbox"
class="h-4 w-4 mr-2 rounded border-neutral-600 border-2 bg-neutral-900 text-primary focus:ring-primary-hover opacity-50"
checked="checked"
disabled
/>
<label for="cookies-functional" class="text-xl text-white">
Functional cookies
</label>
</div>
<p class="text-neutral-300 mt-6" id="functional-description">
Functional Cookies are enabled by default at all times so that we can save your preferences for cookie settings and ensure site works and delivers best experience.
</p>
</div>
<div>
<div class="flex items-center">
<input
id="cookies-third-party"
aria-describedby="third-party-description"
name="comments"
type="checkbox"
class="h-4 w-4 mr-2 rounded border-neutral-600 border-2 bg-neutral-900 text-primary focus:ring-primary-hover"
@change="store.toggle"
:checked="store.thirdParty"
/>
<label for="cookies-third-party" class="text-xl text-white">
Third party cookies
</label>
</div>
<p class="text-neutral-300 mt-6" id="third-party-description">
This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.
Keeping this cookie enabled helps us to improve our website.
</p>
</div>
</div>
<div class="flex justify-end mt-6">
<button
type="button"
@click="store.agree"
class="inline-flex rounded-md border px-4 py-2 text-base font-medium shadow-sm bg-white text-gray-800 border-gray-200 hover:border-gray-400"
>Agree to selected</button>
</div>
</div>
</template>Lastly add the component to the footer of your template, and you're done.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent