app/template/tanzo/Block/cookie.twig line 1

Open in your IDE?
  1. {% if cookie %}
  2.     <div class="cookie-consent">
  3.         <div class="cookie-text">
  4.             当サイトでは、サイトの利便性向上のため、クッキー(Cookie)を使用しています。<!--<br>
  5.             Cookieの使用に関する詳細は<span class="policy-link"><a href="{{ url('help_privacy') }}" target="_blank" >「プライバシーポリシー」</a></span>をご覧ください。-->
  6.         </div>
  7.         <div class="cookie-agree">同意する</div>
  8.         <div class="cookie-reject d-none">拒否する</div>
  9.     </div>
  11.     {% block stylesheet %}
  12.         <style>
  13.             .cookie-consent {
  14.                 display: flex;
  15.                 justify-content: center;
  16.                 align-items: center;
  17.                 position: fixed;
  18.                 bottom: 0;
  19.                 width: 100%;
  20.                 font-size: 12px;
  21.                 color: #fff;
  22.                 background: rgba(0, 0, 0, .8);
  23.                 padding: 1.2em;
  24.                 box-sizing: border-box;
  25.                 visibility: hidden;
  26.                 z-index: 2147483647;
  27.             }
  28.             .cookie-consent.is-show {
  29.                 visibility: visible;
  30.             }
  31.             .policy-link, .policy-link :link, .policy-link :visited, .policy-link :hover, .policy-link :active {
  32.                 color: #0092C4;
  33.                 font-size: 15px;
  34.                 text-decoration: none;
  35.             }
  36.             .cookie-agree, .cookie-reject {
  37.                 color: #fff;
  38.                 padding: .5em 1.5em;
  39.                 margin-left: 20px;
  40.                 min-width: 84px;
  41.             }
  42.             .cookie-agree {
  43.                 background-color: #c8a353;
  44.                 min-width: 90px;
  45.                 text-align: center;
  46.             }
  47.             .cookie-reject {
  48.                 background: #9da3a9;
  49.                 min-width: 90px;
  50.                 text-align: center;
  51.             }
  52.             .cookie-agree:hover, .cookie-reject:hover {
  53.                 cursor: pointer;
  54.             }
  55.             .cookie-text .policy-link a {
  56.                 color: #c8a353!important;
  57.             }
  59.             .cc-hide {
  60.                 animation: hide 0.2s linear 0s;
  61.                 animation-fill-mode: forwards;
  62.             }
  63.             @keyframes hide {
  64.                 from {
  65.                     opacity: 1;
  66.                 }
  67.                 to {
  68.                     opacity: 0;
  69.                     visibility: hidden;
  70.                 }
  71.             }
  73.             @media screen and (max-width: 425px) {
  74.                 .cookie-consent {
  75.                     flex-direction: column;
  76.                 }
  77.                 .cookie-text {
  78.                     margin-bottom: 1.4em;
  79.                 }
  80.                 .cookie-agree{
  81.                     margin: 0 0 1em;
  82.                 }
  83.                 .cookie-reject {
  84.                     margin: 0;
  85.                 }
  86.             }
  87.         </style>
  88.     {% endblock %}
  90.     {% block javascript %}
  91.         <script type='text/javascript'>
  92.             (function() {
  93.                 const cookieConsent = document.querySelector('.cookie-consent');
  94.                 const cookieAgree = document.querySelector('.cookie-agree');
  95.                 const cookieReject = document.querySelector('.cookie-reject');
  97.                 const rejectFlag = sessionStorage.getItem('rejectFlag');
  99.                 const cookieData = document.cookie;
  101.                 let cookieSetFlag = false;
  103.                 const cookieDataList = cookieData.split('; ');
  105.                 for (const cookie of cookieDataList) {
  106.                     const cookieSplit = cookie.split('=');
  108.                     if (cookieSplit[0] === 'robotama-cookie') cookieSetFlag = true;
  109.                 }
  111.                 // Cookie同意の有効期限（日）をSetする
  112.                 const expire = {{ cookie_expiration_date }};
  114.                 function SetCookie(expire){
  115.                     const current = new Date();
  116.                     expire = current.getTime() + expire * 24 * 3600 * 1000;
  118.                     document.cookie = `robotama-cookie=robotama-read; expire=${expire}`;
  119.                 }
  121.                 function DeleteAllCookie(){
  122.                     const maxAgeZero = 'max-age=0';
  124.                     for (const cookie of cookieDataList) {
  125.                         const cookieSplit = cookie.split('=');
  127.                         document.cookie = `${cookieSplit[0]}=; ${maxAgeZero}`;
  128.                     }
  129.                 }
  131.                 function PopupDisplay(){
  132.                     cookieConsent.classList.add('is-show');
  133.                 }
  135.                 if (!cookieSetFlag && !rejectFlag) {
  136.                     PopupDisplay();
  137.                 }
  139.                 cookieAgree.addEventListener('click', ()=> {
  140.                     cookieConsent.classList.add('cc-hide');
  141.                     SetCookie(expire);
  142.                 });
  144.                 cookieReject.addEventListener('click', ()=> {
  145.                     cookieConsent.classList.add('cc-hide');
  146.                     sessionStorage.setItem('rejectFlag', true);
  147.                     DeleteAllCookie();
  148.                 });
  150.             }());
  151.         </script>
  152.     {% endblock %}
  153. {% endif %}