ruby-on-rails - CookiesEu gem 添加 cookie 同意在按确定后不会消失

Question

因此，我已将 CookiesEu gem 添加到我的应用程序中以添加 cookie 许可。但问题在于文本:Cookies help us deliver our services。使用我们的服务，即表示您同意我们使用 cookie。按下 OK 按钮后，OK Learn more 保持可见。而我希望它在按下 OK 后消失。

在文档中它说:这个 gem 使用一个名为 cookie_eu_consented 的 cookie 来跟踪用户是否接受了 cookie 通知以及是否需要再次显示。 但是显示了 cookie 通知即使在接受 cookie 之后。

附注我把 = render 'cookies_eu/consent_banner', link: '/cookies' 放在页脚

Answer 1

如果您使用的是 Rails 6 或更高版本，JavaScript 现在使用 webpacker 提供。这会破坏当前的文件结构并导致通常处理“确定”按钮的 JavaScript 失败。

您可以在下面找到解决方案:

为了使它与 Webpacker 一起工作。您的 JavaScript 代码必须作为 webpack 依赖项导入，而不是将 JS 嵌入 View 中的标记中。

第一步:

确保以下标签在您的布局中:

   <%= stylesheet_pack_tag 'application' %>
   <%= javascript_pack_tag 'application' %>

第二个:

就像在 README 中一样横幅 HTML 应该在您的布局/ View 中，即 <div id="cookies-eu-banner" style="display: none;">...</div>

第三:

在 app/javascript/(但不在 app/javascript/packs)的某处添加一个用于初始化横幅的 JS 文件，例如 app/javascript/src/add-banner.js。在这里，您将导入库(如果需要，还可以导入 CSS)并在 DOM 内容加载后对其进行初始化:

// app/javascript/src/add-eu-banner.js

import CookiesEuBanner from 'cookies-eu-banner'
import 'cookies-eu-banner/css/cookies-eu-banner.default.css'

document.addEventListener('DOMContentLoaded', () => {
  new CookiesEuBanner(() => {
    console.log('Cookies EU Banner accepted');
  })
})

最后:

通过在“application.js”包文件中添加 import 语句将该文件添加为 webpack 依赖项:

// app/javascript/packs/application.js

import '../src/add-eu-banner'

如果您使用的 Rails 版本低于 6，我建议您发布您的代码，以便人们可以更深入地研究您的问题。