お知らせバー

はい、Chromeでこれがどのように機能するのか私も理解できません。クッキーをクリアするだけで、それは無視されたままになります。ブラウザの履歴全体をクリアすると、再び表示されます。

「いいね!」 1

はい、自分で無視したわけではないことに気づきました。しかし、お二人から回答を得られたので、他の人にも役立つでしょう。それだけで満足です。

トピックを固定するよりはましです。

「いいね!」 2

ブラウザは時々面白いものです。シークレットモードのChromeブラウザタブで、閉じてから再度ログインした後、バナーは表示されませんでした。

リフレッシュごとにCookieがクリアされるはずです。しかし、@manuelが言及したように、ブラウザの履歴キャッシュにも保存されているようです。Chromeのシークレットモードブラウザを閉じて新しく開くまで、バナーは復元されませんでした。

これは以前、グローバルバナーの問題だったと思います。私の記憶が正しければ、チームがそれを修正したと思います。以前は、一度クリアすると、そのユーザーにはグローバルバナーが表示されなくなっていました。

「いいね!」 2

このコンポーネントをインストールしましたが、PREVIEWではヘッダーの上にバナーが表示されるのに、実際のサイトではヘッダーの下に表示されます。これは、テストしたBrave、Edge、Safariのすべてのブラウザで発生します。

plugin_outlet 設定は above-site-header になっていますか?それとも、これは Horizon テーマに関連しているのかもしれませんね :thinking:

FKB Pro テーマを使用しています。plugin_outletは正しく設定されていますが、それは無関係です。above-site-headerまたはbelow-site-headerのいずれに設定しても、プレビューは正しく機能しますが(最初の例)、実際のサイトではアナウンスがサイトヘッダーの下にのみ表示されます(2番目の例)。

「いいね!」 1

コンポーネントにいくつかの更新を行いました。元の投稿は既に更新済みですが、変更点をより詳細に説明します。

ローカライズされた文字列

バーのテキストとボタンのラベルは翻訳可能になりました。以前の bar_text および button_text 設定の代わりに、文字列は locales/en.yml に配置されています。追加のロケールは手動で追加することも、AI 翻訳を使用することもできます。

よりシンプルな非表示ロジック

クッキーベースの非表示機能を localStorage に置き換えました。キーはバーのテキスト自体から派生するため、お知らせのテキストを更新すると、以前のものを非表示にしたすべてのユーザーに対してバーが自動的に再表示されます。

レスポンシブレイアウト

flex-wrap を使用してスタイルを単一のファイルに統合しました。広い画面では、テキストとボタンがインラインで配置されます。テキストが折り返された場合、ボタンは下段に配置されます。

BEM エレメントクラス

マークアップにはすべての要素(__text、__button、__close)に BEM クラスが使用されるようになりました。これにより、テーマオーバーライドでのターゲット指定が容易になりました。

「いいね!」 3