app/template/osechi/Block/topic.twig line 1

Open in your IDE?
  1. {#
  2. ///////////////////////////////////////////////////////////////////////
  4. This template is part of EC-CUBE Design template.
  6. Copyright(c) JAPAN ELECTRONIC INDUSTRIAL ARTS CO.LTD.
  8. http://www.jeia.co.jp/
  10. For the full copyright and license information, please view the LICENSE
  11. file that was distributed with this source code.
  13. 本テンプレートの著作権は、「株式会社日本電子工藝社」に帰属いたします。
  15. ※本テンプレートを譲渡・再頒布・転用・第三者へ開示することは禁止いたします。
  16. ただし、事業者によるショップ運営者への設置代行を禁止するものではございません。
  17. ※本テンプレートを申請されたご利用サイトへの設置以外の目的で複製することは禁止いたします。
  18. ※本テンプレートデータ内のライセンス条項、および著作権に関する記述を削除することはできません。
  19. ※ご利用サイトを変更することはできません。申請と異なるサイトにてご利用になる場合は、
  20. 別途、ご利用費用をお支払いただく必要がございます。
  21. ※本テンプレートの改変にあたり、一切のサポートはいたしかねます。
  22. ※本テンプレートは、すべての設置環境で動作する事は保証しておりません。
  24. ///////////////////////////////////////////////////////////////////////
  25. #}
  27. {#
  28. 以下のブロックを当Twigでまとめて記述しています。
  30. * Locations 所在地（Googleマップ埋め込み）
  31. * インスタグラム最新記事表示ブロック
  33. ※各ブロックを別々にブロック管理したい場合は、管理画面からブロックを新規作成し、各ブロックにコード内容をコピーして目的の位置にブロック挿入してください。
  34. #}
  38. {#
  39. Locations 所在地（Googleマップ埋め込み）
  41. Googleマップ埋め込みiframeタグ、背景画像のパス、ロゴ画像のパスを下記のTwig変数「ShopMap」に登録してください。
  43. * iframe:  Googleマップ埋め込みiframeタグ
  44. * bg:      背景画像のパス
  45. * logo:    ロゴ画像のパス
  47.            背景画像、ロゴ画像ともパス指定においては、
  48.            ※テンプレートのデフォルトでは「sample」ディレクトリに画像を格納していますので「asset('assets/img/sample/xxxx.jpg')」のように指定しています。​
  49.            ※クラウド版ec-cube.coをご利用の方はアップロード画像をフルパスにて以下のように指定してください。
  50.           【例】bg:   '/html/user_data/assets/img/xxxx.jpg',
  51.           【例】logo: '/html/user_data/assets/img/xxxx.png'
  53. Googleマップ埋め込みの手順
  54. Googleマップ（https://www.google.co.jp/maps/）にアクセスして、店舗名称もしくは住所で検索して目的の地図を開いてください。
  55. 左上のメニューボタンをクリックして「地図の共有または埋め込む」を選択して、表示されるダイアログから「地図を埋め込む」を選択してください。
  56. 表示されるiframeタグをコピーし、上記の変数を書き換えてください。width、height属性はあってもなくても構いません。
  58. 当ブロックの背景画像は「access_bg.jpg」、ロゴ画像は「access_logo.png」（透過画像）となっています。
  59. レスポンシブにより背景画像を挿す場所を変えています。
  60. 背景画像、ロゴ画像の指定については本来はCSSで定義する所でありますが、クラウド版ec-cube.coでも使用できるようにこちらにてTwig変数を用いて定義しています。
  62. CSSスタイリングは「_12.5.topics.scss」で行っています。
  63. #}
  65. {# ----------▼ shopMap画像登録 ▼---------- #}
  66. {% set ShopMap = 
  67.     {
  68.         iframe:   '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1363.0429595837415!2d139.69935249167554!3d35.65530905821623!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b57493e0879%3A0x488f94e329810eb2!2z44CSMTUwLTAwMzEg5p2x5Lqs6YO95riL6LC35Yy65qGc5LiY55S677yS77yT4oiS77yS77yT!5e0!3m2!1sja!2sjp!4v1694072534282!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>',
  69.         bg:       asset( 'assets/img/top/access_bg.webp' ),
  70.         logo:     asset( 'assets/img/sample/access_logo.png' )
  71.     }
  72. %}
  73. {# ----------▲ shopMap画像登録 ▲---------- #}
  75. <!-- Block/topic.twig -->
  76. {#
  77. <div class="ec-shopMapRole appearEffect">
  79.     <div class="ec-secHeading">
  80.         <h2>
  81.             <span class="ec-secHeading__en">Locations</span>
  82.             <span class="ec-secHeading__ja">所在地</span>
  83.         </h2>
  84.     </div>
  86.     <div class="ec-shopMapRole__container" style="background-image: url( {{ ShopMap.bg }} );">
  87.         <div class="ec-shopMapRole__wrap">
  89.             <div class="ec-shopMapRole__map">
  90.                 <div class="map">
  91.                     {{ ShopMap.iframe|raw }}
  92.                 </div>
  93.             </div>
  95.             <div class="ec-shopMapRole__content" style="background-image: url( {{ ShopMap.bg }} );">
  96.                 <div class="logo"><img src="{{ ShopMap.logo }}" alt=""></div>
  97.                 <address>
  98.                     location： 2nd floor, Shinoda Building, 23-3 Sakuragaoka-cho, Shibuya-ku, Tokyo
  99.                     <br>
  100.                     tel： 03-5784-3280
  101.                 </address>
  102.             </div>
  104.         </div>
  105.     </div>
  106. </div>
  107. #}
  111. {#
  112. インスタグラム最新記事表示ブロック
  114. インスタグラムの最新記事を表示するブロックです。
  115. 最新記事を動的に取得するには「Instagram Graph API」のビジネスアカウントIDとトークンを取得する必要があります。​
  116. 取得の方法についてはお手数ですがお調べくださるようお願い申し上げます。様々なサイト様が詳しく解説してくださっています。​
  118. 当テンプレートでは1段階目トークン取得の際に指定する「アクセス許可」は以下の9点を選択して動作確認しております。
  120. * public_profile（初めから選択済）
  121. * business_management
  122. * pages_show_list
  123. * instagram_basic
  124. * instagram_manage_insights
  125. * instagram_manage_comments
  126. * pages_manage_ads
  127. * pages_manage_metadata
  128. * pages_read_engagement
  129. * pages_read_user_content
  131. 取得したビジネスアカウントIDとアクセストークン（3段目トークン）を下記のTwig変数「Instagram」にセットしてください。
  133. * business_id:  ビジネスアカウントID
  134. * access_token: アクセストークン（3段目トークン）
  136. CSSスタイリングは「_12.11.instagram.scss」で行っています。
  137. #}
  139. {# ----------▼ Instagram Graph API設定 ▼---------- #}
  140. {% set Instagram = 
  141.     {
  142.         business_id:  '',
  143.         access_token: ''
  144.     }
  145. %}
  146. {# ----------▲ Instagram Graph API設定 ▲---------- #}
  148. <!-- Block/topic.twig -->
  149. {#
  150. <div class="ec-instagramRole appearEffect">
  152.     <div class="ec-secHeading">
  153.         <h2>
  154.             <span class="ec-secHeading__en">Instagram</span>
  155.             <span class="ec-secHeading__ja">インスタグラム</span>
  156.         </h2>
  157.     </div>
  159.     <ul class="ec-instagramRole__list"></ul>
  160. </div>
  161. #}
  163. {# 管理上の都合にてここにスクリプトを記述します。スクリプト実行順序があるので「$(function(){});」で囲っています。 #}
  164. <script>
  165.     $(function(){
  166.         var $base = $( '.ec-instagramRole' );
  167.         var $instagramList = $base.find( 'ul.ec-instagramRole__list' );
  169.         // Instastram ビジネスアカウントID
  170.         var business_id = '{{ Instagram.business_id }}';
  172.         // Instagram Graph APIトークン
  173.         var token = '{{ Instagram.access_token }}';
  175.         var amount = 16;// 取得する記事数
  176.         var textMax = 80;// コメント表示の文字数制限
  178.         // ビジネスアカウントIDとトークンが未指定の場合はダミー表示
  179.         if ( business_id == '' || token == '' ) {
  180.             for ( var i=0; i<amount; i++) {
  181.                 var image = '{{ asset("assets/img/sample/") }}instagram.jpg';
  182.                 var $instagram_li = '<li><a href="javascript:void(0);"><div class="media_image" style="background-image:url(' + image + ');"></div></a><div class="popup"><div class="comment">キャプションを表示します。Instagram Graph APIを使用するにはビジネスアカウントIDとトークンを取得する必要があります。</div></div></li>';
  183.                 $instagramList.append( $instagram_li );
  184.             }
  185.             return false;
  186.         }
  187.         
  188.         // 記事取得URLを生成
  189.         var instagram_api_url = 'https://graph.facebook.com/v11.0/';
  190.         var query =             'name,media.limit(' + amount +'){caption,like_count,media_url,permalink,timestamp,username,thumbnail_url}';
  191.         var geturl =            instagram_api_url + business_id + "?fields=" + query + "&access_token=" + token;
  193.         $.ajax({
  194.             type: 'GET',
  195.             url: geturl,
  196.             dataType: 'json',
  197.             success: function(json) {
  198.                 var insta = json.media.data;
  200.                 for ( var i=0; i<insta.length; i++ ) {
  201.                     //console.log(insta[i]);
  203.                     // li, a要素を生成
  204.                     var $instagram_li = $( '<li>' );
  205.                     var $instagram_link = $( '<a target="_blank">' ).attr( 'href', insta[i].permalink );
  206.                     var $instagram_media = null;
  208.                     // メディア（画像・動画）
  209.                     if (  insta[i].media_url.indexOf( 'video' ) > 0 ) {
  210.                         // 動画の場合
  211.                         if ( insta[i].thumbnail_url && window.innerWidth < 1280 ) {
  212.                             // 動画サムネイルが取得できている場合（かつスマホ・タブレット時）はサムネイル画像を表示（通常の画像と同じ構造）
  213.                             $instagram_media = $( '<div class="media_image video_thumbnail" style="background-image:url(' + insta[i].thumbnail_url + ');">' );
  214.                         } else {
  215.                             // videoタグを生成
  216.                             $instagram_media = $( '<div class="media_video">' ).append( $( '<video controls playsinline preload="metadata">' ).prop( 'src', insta[i].media_url ) );
  217.                         }
  218.                     } else {
  219.                         // 画像の場合（正方形でない画像を正方形クリップさせるため背景画像で使用）
  220.                         $instagram_media = $( '<div class="media_image" style="background-image:url(' + insta[i].media_url + ');">' );
  221.                     }
  223.                     // 要素組立て
  224.                     $instagram_link.append( $instagram_media );
  225.                     $instagram_li.append( $instagram_link )
  226.                     $instagramList.append( $instagram_li );
  227.                     
  228.                     // ポップアップ要素（キャプション、いいねの表示）
  229.                     var $popup = $( '<div class="popup">' );
  231.                     // コメント
  232.                     var caption = '';
  233.                     if ( insta[i].caption ) {
  234.                         caption = insta[i].caption;
  235.                         // 文字数制限
  236.                         if ( caption.length > textMax ) {
  237.                             caption = caption.substr(0, textMax) + '...';
  238.                         }
  239.                         // ポップアップ要素にキャプションを追加
  240.                         $popup.append( '<div class="insta_caption">' + caption + '</div>' );
  241.                     }
  243.                     // ポップアップHTMLを組立て
  244.                     //$popup.append( '<div class="likeCount">いいね！' + insta[i].like_count + '件</div>' );
  245.                     $popup.append( '<div class="likeCount"><i class="jeiafont jeia-heart_fill"></i>' + insta[i].like_count + '件</div>' );
  246.                     $popup.appendTo( $instagram_li );
  247.                 }
  248.             },
  249.             error: function() {
  250.                 //エラー時
  251.             }
  252.         });
  253.     });
  254. </script>