README

此包提供了无头 blade 组件，用于构建同意，例如 cookie 同意。同意存储在 local-storage 中。

安装

通过 composer 安装

composer require aw-studio/laravel-consent

组件

Laravel Consent 包包含三个 blade 组件： <x-consent-wrapper>、<x-consent> 和 <x-consent-toggle>。

同意包装器

<x-consent-wrapper> 组件用于分组同意。您可以按需设计每个包装器的样式。每个包装器需要一个唯一的 id。每个包装器组件显示同意的完整列表和一个 保存按钮。保存包装器后，包装器将隐藏。

<x-consent-wrapper id="group-1" save="Save">
    <!-- consents go here -->
</x-consent-wrapper>

同意

<x-consent> 组件用于实际给出同意，必须由 <x-consent-wrapper> 包装，并且需要一个唯一的 id。每个同意都有一个标签和复选框。标签文本填充了默认插槽的内容。

在给出同意时，您可能想要执行一个本地脚本或从源加载一个脚本。

如果您想在同意后加载一个 外部脚本，组件应如下所示

<x-consent
    id="google-maps"
    preselect
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
    callback="initMap"
>
    I consent to use google maps.
</x-consent>

脚本将被附加到 <head> 中。

如果您想执行一个 本地脚本，您可以在 <x-slot name="script"> 中提供您的 <x-consent> 的代码

<x-consent id="analytics" preselect>
    I consent to use google analytics.
    <x-slot name="script">
        (function (w, d, s, l, i) { console.log('consent a') w[l] = w[l] || [];
        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js', }); var
        f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l !=
        'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
        'https://#/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f); })(window, document, 'script',
        'dataLayer', 'GTM-ABCDEFG');
    </x-slot>
</x-consent>

同意切换

有时您可能想要提供一个 '一次性同意'。这可以通过使用 <x-consent-toggle> 组件来实现。您可以将它放在您的标记中任何有对应 <x-consent> 的位置。切换通过提供相同的 id 链接到同意。切换可以按您的喜好设计。

以下切换将触发 google-maps 同意的回调

<x-consent-toggle
    id="google-maps"
    class="p-4 text-xs bg-gray-100"
    button="Show Map"
    button-class="inline-block px-2 py-1 mt-2 text-xs text-white bg-green-400 rounded-md cursor-pointer"
>
    I consent to using google maps.
</x-consent-toggle>

完整示例

在这个示例中，展示了包含两个同意的同意包装器

<x-consent-wrapper
    id="google-group"
    class="fixed bottom-0 left-0 w-full p-8 bg-gray-200"
    button-class="px-2 py-1 mt-2 text-xs text-white bg-green-400 rounded-md cursor-pointer"
    save="Speichern"
>
    <x-consent
        id="google-maps"
        preselect
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"
        callback="initMap"
    >
        I consent to use google maps.
    </x-consent>
    <x-consent id="analytics" preselect>
        I consent to use google analytics.
        <x-slot name="script">
            (function (w, d, s, l, i) { console.log('consent a') w[l] = w[l] ||
            []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js',
            }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl
            = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
            'https://#/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f); })(window, document, 'script',
            'dataLayer', 'GTM-ABCDEFG');
        </x-slot>
    </x-consent>
</x-consent-wrapper>

aw-studio / laravel-consent

维护者

详细信息

README

安装

组件

同意包装器

同意

同意切换

完整示例