app/template/default/Block/NOGOOD_BTN_LANG.twig line 1

Open in your IDE?
  1. <!-- ラジオボタン部分 (例) -->
  2. <div class="lang_btn__wrap">
  3.     <label>
  4.         <input type="radio" name="lang" class="btn_lang" id="jp" checked> JP
  5.     </label>
  6.     <span> / </span>
  7.     <label>
  8.         <input type="radio" name="lang" class="btn_lang" id="en"> EN
  9.     </label>
  10. </div>
  12. <script>
  13. // 言語表示を再適用する関数
  14. function applyLanguageShow() {
  15.     const checkedLang = document.querySelector('input[type="radio"].btn_lang:checked');
  16.     if (checkedLang) {
  17.         // 一旦全ての言語要素から .show を削除
  18.         document.querySelectorAll('.jp, .en').forEach(el => el.classList.remove('show'));
  19.         // 現在選択されている言語に対応する要素に .show を追加
  20.         document.querySelectorAll('.' + checkedLang.id).forEach(el => el.classList.add('show'));
  21.     }
  22. }
  24. document.addEventListener('DOMContentLoaded', function() {
  25.     // ページロード時に適用
  26.     applyLanguageShow();
  28.     // ラジオボタンの変更時に適用
  29.     document.querySelectorAll('input[type="radio"].btn_lang').forEach(btn => {
  30.         btn.addEventListener('change', function() {
  31.             applyLanguageShow();
  32.         });
  33.     });
  35.     // 例：select の変更時にも再適用する（select が更新される場合）
  36.     document.querySelectorAll('select[name="classcategory_id1"], select[name="classcategory_id2"]').forEach(sel => {
  37.         sel.addEventListener('change', function() {
  38.             // DOM更新後に少し遅延させて再適用する
  39.             setTimeout(applyLanguageShow, 100);
  40.         });
  41.     });
  42. });
  43. </script>
  44. <style>
  45. .lang_btn__wrap{
  46.     position: fixed;
  47.     right:2%;
  48.     top: 1rem;
  49.     display: flex;
  50.     align-items: center;
  51.     gap: 0.25em;
  52. }
  53. .lang_btn__wrap label{
  54.     display:block;
  55. }
  56. label:has(:checked){
  57.     font-size: 0.75em;
  58.     padding-inline: 0.125em;
  59.     color:#bbb;
  60.     text-decoration: underline;
  61. }
  62. .jp,.en{
  63. display:none !important;
  64. }
  65. .jp.show,.en.show{
  66. display:block !important;
  67. }
  68. @media (max-width:768px){
  69.     .lang_btn__wrap{
  70.         right: 5.5%;
  71.         top: 7rem;
  72.     }
  73. }
  74. </style>