app/template/smartphone/Item/detail.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. 2022/11/17 class 変更
  8. #}
  9. {% extends 'default_frame.twig' %}
  10. {% set body_class = 'iteme_page_sphone' %}
  11. {% block main %}
  12. {% endblock %}
  13. {% block stylesheet %}
  14.   <meta charset="UTF-8" />
  15.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  16.   <link rel="stylesheet" type="text/css" href="/stylesheets/base_stylesheet2.min.css" />
  17.   <link rel="stylesheet" type="text/css" href="/stylesheets/sp/others/detail.min.css?20171208_01" />
  18.   <style>
  19.   body {
  20.     font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS Pゴシック", sans-serif !important;
  21.   }
  22.   .chokusoubtn img {
  23.       margin-bottom: 21px;
  24.   }
  25.   #item-detail #shopping-cart #shopping-cart-title{
  26.     background: #e3dbcd;
  27.     color: #000;
  28.   }
  29.   #shared-contents *,
  30.   .adjust-contents-to-sp * {
  31.     max-width: 100%;
  32.   }
  33.   .top_sashikomi_wrapper{
  34.     margin-bottom: 15px;
  35.   }
  36.   .item-price-other-size-price {
  37.     font-size: 3.44vw;
  38.     margin-bottom: 5px;
  39.   }
  40.   .item-price-other-size-price:last-of-type {
  41.     margin-bottom: 0;
  42.   }
  43.   </style>
  44.   <link rel="stylesheet" type="text/css" href="/stylesheets/sp/others/detail.min.css?20211016_001" />
  45.   <style>
  46.     .sf-minitoolbar {
  47.       display: none !important;
  48.     }
  49.   </style>
  50.     <style>
  51.         .ytlazy {
  52.             position: relative;
  53.             cursor: pointer;
  54.         }
  55.         .movie_frame .ytlazy {
  56.             position: absolute;
  57.             top: 0;
  58.             left: 0;
  59.             width: 100%;
  60.             height: 100%;
  61.         }
  62.         .ytlazy > .ytlazy-btn {
  63.             position: absolute;
  64.             top: calc(100% / 2 - 2em);
  65.             left: calc(100% / 2 - 3em);
  66.             /**/
  67.             padding: 1em 2em;
  68.             border-radius: 20%;
  69.             /**/
  70.             background: rgba(25, 25, 25, .75);
  71.             color: white;
  72.         }
  73.         .ytlazy:hover .ytlazy-btn {
  74.             /**/
  75.             background: red;
  76.             color: white;
  77.         }
  78.         .ytlazy > .ytlazy-btn:after {
  79.             content: '▶';
  80.             font-size: 1.75em;
  81.         }
  82.         .ytlazy > img {
  83.             object-fit: cover;
  84.         }
  85.     </style>
  86. {% endblock %}
  87. {% block javascript %}
  88.     <script>
  89.         $( function(){
  90.             // PC版ページで詳細を確認
  91.             $('#to-pc-detail-page').on('click', function(e){
  92.                 e.preventDefault();
  93.                 var $this = $(this);
  94.                 $.ajax({
  95.                     url: '/ajax/switch-display/?to=pc',
  96.                     dataType: 'json'
  97.                 });
  98.                 location.href = $this.attr('href');
  99.             });
  100.         });
  101.     </script>
  102.     <script>
  103.         /**
  104.          * SP版商品縮小画像が取得出来なかった際、PC版を表示
  105.          */
  106.         function replaceImg(image) {
  107.             window.addEventListener('load', function () {
  108.                 //pictureタグのsourceオプションを削除するだけでは、一部端末では画像切替が行われない為、
  109.                 //新しい画像で置き換え
  110.                 $img = $(image);
  111.                 imgsrc = $img.attr('src') || $img.data('src'); // Lazy Load 対策
  112.                 $picture = $img.parents('picture');
  113.                 $picture.empty().append('<img class="replaced_img" style="max-width:100%" src="' + imgsrc + '" />');
  114.             });
  115.         }
  116.     </script>
  117.   <script>
  118.     window.dataLayer = window.dataLayer || [];
  119.     // SP - 電話CV
  120.     function phoneCall () {
  121.       dataLayer.push({
  122.         'event': 'Phone Call'
  123.       });
  124.     }
  125.     // SP - FAX
  126.     function cvFAX () {
  127.       dataLayer.push({
  128.         'event': 'SP - FAX'
  129.       });
  130.     }
  131.     // SP -メール問合せ
  132.     function cvInquiry () {
  133.       dataLayer.push({
  134.         'event': 'SP - Inquiry'
  135.       });
  136.     }
  137.     //
  138.     $(function () {
  139.       // SP - 電話CV
  140.       $('a[href^="tel:"]').on('click', function (event) {
  141.         phoneCall();
  142.       });
  143.       /**
  144.       * FAXは対象PDFのリンククリックでCV発火とする
  145.       * ▼FAX注文用紙
  146.       * ・/fax/fax_base.pdf
  147.       * ・/files/company/fax_base.pdf
  148.       * ▼図柄を記入するFAX用紙
  149.       * ・/files/company/fax_zugara.pdf
  150.       */
  151.       $('a[href$="fax_base.pdf"],a[href$="fax_zugara.pdf"]').on('click', function (event) {
  152.         cvFAX();
  153.       });
  154.     });
  155.   </script>
  156.   <script>
  157.     $(function () {
  158.       // YouTube.Lazy - 元々手動再生の場合、手動遅延読込みで自動再生
  159.       const $ytLazy = $('.ytlazy').on('click', function (e) {
  160.         const $img = $(this).children('img');
  161.         const $iframe = $('<iframe />');
  162.         //
  163.         $img.each(function (i) {
  164.           $iframe.attr(this.dataset);
  165.         })
  166.         //
  167.         $(this).replaceWith($iframe);
  168.       });
  169.       // YouTube.Lazy - 元々自動再生の場合、自動遅延読込みで自動再生
  170.       $(window).on('load', function (e) {
  171.         setTimeout(function () {
  172.           $ytLazy.has('[data-auto-play="1"]').click()
  173.         }, 100);
  174.       });
  175.     });
  176.   </script>
  177. {% endblock %}