app/template/user_data/keyholder-size_s.twig line 1

Open in your IDE?
  1. {% extends '@user_data/layout/default_frame.twig' %}
  2. {% block title %}
  3.     {{category_name}}製作 - {{ Product.name }} | こだわり品質【小ロット1個から】ZEAMI Goods
  4. {% endblock %}
  5. {% block description %}
  6.     <meta name="description" content="cscascsa"></meta>
  7. {% endblock %}
  8. {% block js %}
  9.     <!-- // ++ Guide jQuery ++ /////////////////////////////////////////////////////////// -->
  10.     <script>
  11.         const PRODUCT_ID = "{{ Product.id }}";
  12.     </script>
  13.     <link href="{{ asset('assets/custom_css/home_product.css') }}" rel="stylesheet" type="text/css">
  15.     <link href="{{ asset('assets/js/fancybox02/jquery.fancybox.css') }}" rel="stylesheet" type="text/css" media="screen, projection">
  16.     <script src="{{ asset('assets/js/fancybox02/jquery.fancybox.pack.js') }}" type="text/javascript"></script>
  17.     <script src="{{ asset('assets/js/fancybox02/jquery.mousewheel-3.0.6.pack.js') }}" type="text/javascript"></script>
  18.     <script src="{{ asset('assets/js/fancybox02/jquery.easing-1.3.pack.js') }}" type="text/javascript"></script>
  19.     <script src="{{ asset('assets/js/holiday_calender.js') }}" type="text/javascript"></script>
  20.     <script>
  21.         const STEPS = {{ Steps | json_encode | raw }};
  22.         const WORKING_TIME = {{WorkingTime | json_encode | raw}}
  23.     </script>
  25.     <script src="{{ asset('assets/js/product.js') }}" type="text/javascript"></script>
  27.     <script src="{{ asset('assets/js/tooltip.js') }}" type="text/javascript" media="screen and (min-width:769px)"></script>
  28.     <script src="{{ asset('assets/js/sp_tooltip.js') }}" type="text/javascript" media="screen and (max-width:768px)"></script>
  29.     <script>
  30.         $(document).ready(function(){
  31.             $('.add_wishlist').click(function(e) {
  32.                 e.preventDefault();
  33.                 const is_favorite = {{ is_favorite ? 1: 0 }} ? 1 : 0;
  35.                 if(!is_favorite) {
  36.                     $('#form-favorite').submit();
  37.                 }
  38.             })
  39.         })
  40.     </script>
  42. {% endblock %}
  44. {% block css %}
  45.     <style>
  46.         @media (max-width: 700px) {
  47.             .responsive-table-area table, 
  48.             .responsive-table-area thead, 
  49.             .responsive-table-area tbody, 
  50.             .responsive-table-area th, 
  51.             .responsive-table-area td, 
  52.             .responsive-table-area tr {
  53.                 display: block !important;
  54.                 width: 100% !important;
  55.                 height: auto !important;
  56.             }
  57.     
  58.             .responsive-table-area thead {
  59.                 display: none !important;
  60.             }
  62.             .responsive-table-area tr {
  63.                 margin-bottom: 15px !important;
  64.                 height: auto !important;
  65.             }
  67.             .responsive-table-area td {
  68.                 padding: 6px !important;
  69.                 height: auto !important;
  70.                 width: 100% !important;
  71.                 
  73.             }
  74.             .responsive-table-area td img {
  75.                 width: 100% !important;
  76.                 height: auto !important;
  77.             }
  78.             
  79.             .product-info table, 
  80.             .product-info thead, 
  81.             .product-info tbody, 
  82.             .product-info th, 
  83.             .product-info td, 
  84.             .product-info tr {
  85.                 border: none !important;
  86.             }
  87.             .product-info td {
  88.                 border: 1px solid !important
  89.             }
  90.             .product-info tr {
  91.                 margin-bottom: 0px !important;
  92.                 height: auto !important;
  93.             }
  94.             #specList img {
  95.                 width: 100%;
  96.                 height: auto;
  97.             }
  99.             table#cart_indexTable.product .order_num {
  100.                 width: 115px !important;
  101.             }
  102.             table#cart_indexTable.product th, table#cart_indexTable.product td {
  103.                 width: auto !important;
  104.             }
  105.         }
  109.     </style>
  110. {% endblock %}
  112. {% block content %}
  114.     <!-- // ++ パンクズ ++ //////////////////////////////////////////////////////////// // -->
  115.     <div id="bread_crumbBloc" class="fades">
  116.         <ul id="breadCrumb" class="fades">
  117.             <li class="up">
  118.                 <a href="/"><img src="{{ asset('assets/img/icon_home.png') }}" alt="ホーム"></a>
  119.             </li>
  120.             <li class="up">
  121.                 <a href="{{'/category/' ~ category_id}}">{{category_name}}</a>
  122.             </li>
  123.             <li class="up">{{ Product.name }}</li>
  124.         </ul>
  125.         <!-- ///// #breadCrumb +++++ ///// -->
  126.         <!-- ///// +++++ #bread_crumbBloc +++++ ///// -->
  127.     </div>
  130.     <!-- ▼▼ MAIN CONTENTS __________________________________________________________________________________________________ ▼▼ -->
  131.     <main
  132.         id="mainContents">
  134.         <!-- // == MAIN ================================================================================ // -->
  135.         <section
  136.             id="Product" class="section_basic">
  139.             <!-- // ++ 詳細：商品名＆画像 ++ /////////////////////////////////////////////////////////////// -->
  140.             <div class="one_box fades responsive-table-area product-info">
  141.                 <dl
  142.                     id="product_topBloc" class="fades">
  144.                     <!-- ■■ ++ メイン画像 ++ ■■ -->
  145.                     <dt id="product_mainPhoto" class="up"><img src="{{ asset(Product.mainFileName|no_image_product, 'save_image') }}">
  146.                         {% if Product.icon is not empty %}
  147.                             <p class="catlist_thumb_chara fades"><img src="{{ asset(Product.icon|no_image_product, 'save_image') }}" alt="ミラーコート"></p>
  148.                         {% else %}
  149.                             <p class="catlist_thumb_chara fades"><img src="{{ asset('assets/img/mirror_coat.png') }}" alt="ミラーコート"></p>
  150.                         {% endif %}
  151.                     </dt>
  154.                     <!-- ■■ ++ 商品名など ++ ■■ -->
  155.                     <dd id="product_nameArea" class="fades">
  156.                         <h3 id="productName">
  157.                             <p class="up">{{category_name}}
  158.                                 {{ Product.name }}</p>
  159.                             {% if BaseInfo.option_favorite_product %}
  160.                                 <form id="form-favorite" action="{{ url('add_product_favorite', {id:Product.id}) }}" method="post">
  161.                                     <div class="ec-productRole__btn">
  162.                                         {% if is_favorite == false %}
  163.                                             <div id="btn_wishList" class="up add_wishlist">
  164.                                                 <a href="/">
  165.                                                     <span class="mk_off">お気に入り追加</span>
  166.                                                     <!-- /// #btn_wishList +++  /// -->
  167.                                                 </a>
  168.                                             </div>
  169.                                         {% else %}
  170.                                             <div id="btn_wishList" class="up add_wishlist">
  171.                                                 <a href="/">
  172.                                                     <span class="mk_off">お気に入り済</span>
  173.                                                     <!-- /// #btn_wishList +++  /// -->
  174.                                                 </a>
  175.                                             </div>
  176.                                         {% endif %}
  177.                                     </div>
  178.                                 </form>
  179.                             {% endif %}
  180.                         </h3>
  181.                         <!-- /// +++ #productName +++ /// -->
  182.                         {{ Product.description_detail | raw }}
  184.                         <!-- //// #product_nameArea ++++ //// -->
  185.                     </dd>
  186.                 </dl>
  187.                 <!-- //// ++++ #product_topBloc ++++ //// -->
  188.                 <!-- ///// .one_box ***** ///// -->
  189.             </div>
  192.             <!-- // ++ SPEC ++ /////////////////////////////////////////////////////////////// -->
  193.             <div class="one_box fades responsive-table-area">
  194.                 <h4 class="section_title up">SPEC<span>商品の仕様</span>
  195.                 </h4>
  196.                 <ul id="specList" class="fades">
  197.                     {{ Product.description_list | raw }}
  198.                 </ul>
  199.                 <!-- ///// #specList +++++ ///// -->
  200.                 <!-- ///// .one_box ***** ///// -->
  201.             </div>
  204.             <!-- // ++ IMAGE ++ /////////////////////////////////////////////////////////////// -->
  205.             <div class="one_box">
  206.                 <h4 class="section_title up">IMAGE<span>イメージサンプル</span>
  207.                 </h4>
  208.                 <ul id="image_sampleList" class="up">
  209.                     {% for ProductImage in Product.ProductImage %}
  210.                         <li class="up">
  211.                             <a href={{asset(ProductImage, 'save_image')}} class="samplepic" rel="photo">
  212.                                 <img src={{asset(ProductImage, 'save_image')}}>
  213.                             </a>
  214.                         </li>
  215.                     {% endfor %}
  218.                 </ul>
  219.                 <!-- ///// #image_sampleList +++++ ///// -->
  220.                 <!-- ///// .one_box ***** ///// -->
  221.             </div>
  224.             <!-- // ++ PRICE ++ /////////////////////////////////////////////////////////////// -->
  225.             <div class="one_box">
  226.                 <form action="#" class="product_form" method="post">
  227.                     <h4 class="section_title up">PRICE<span>価格表</span>
  228.                     </h4>
  229.                     <h5 class="sub_title up">STEP-1<span>数量を選択してください</span>
  230.                     </h5>
  231.                     <ul id="detail_checkList" class="input_content fades">
  232.                         {% for option in option_quantity %}
  234.                             <li class="type_check up">
  235.                                 <label><input type="radio" name="step_quantity" value="{{option |json_encode }}" class="form_check"/>
  236.                                     <span>
  237.                                         {% if option.from %}
  238.                                         {{ option.from|number_format(0, '.', ',') }}
  239.                                         {% endif %}
  240.                                         〜
  241.                                         {% if option.to %}
  242.                                         {{ option.to|number_format(0, '.', ',') }}
  243.                                         {% endif %}
  244.                                         枚</span>
  245.                                 </label>
  246.                             </li>
  248.                         {% endfor %}
  249.                     </ul>
  251.                     <div style="display: flex; flex-direction: column; align-items: center" id='inquiry_box'>
  252.                         <aside class="caution_box fades fadeIn" style="">
  253.                             <div class="caution_inner" id="text-warning">
  254.                                 <h5 class="caution_title up moveup">大ロットオーダーに関して</h5>
  255.                                 <p class="indent up moveup">◯ 具体的な発注内容をお知らせください。１営業日以内にサポートよりご連絡差し上げます。</p>
  256.                             </div>
  257.                         </aside>
  258.                             <a href='/inquiry' style='text-decoration: none; 
  259.                                                 width: 300px; color: white; 
  260.                                                 background: #01B4BE; height: 80px; 
  261.                                                 display: flex; align-items: center; 
  262.                                                 justify-content: center; font-size: 20px; 
  263.                                                 font-weight: bold; border-radius: 6px; 
  264.                                                 margin-top: 40px'>
  265.                                 お問い合わせフォームへ
  266.                             </a>
  267.                     </div>
  269.                     {% for step in Steps %}
  270.                         <div id="{{'step_' ~ step.step_number}}">
  271.                             <h5 class="sub_title up">STEP-{{step.step_number + 1}}<span>{{step.step_name}}</span>
  272.                             </h5>
  273.                             <ul id="detail_checkList" class="input_content fades">
  274.                                 {% for option in step.options %}
  276.                                     <li class="type_check up step_option_container" id="{{'option_' ~ option.id}}">
  277.                                         <label><input type="radio" name="{{step.step_name}}" id="{{'check_option_' ~ option.id}}" value="{{option |json_encode }}" class="form_check step_options_product"/>
  278.                                             <span>{{option.name}}</span> 
  279.                                             {% if option.option_tag is not null %}
  280.                                              <font class="reco_mark famous">{{option.option_tag}}</font>    
  281.                                              {% endif %}
  282.                                             {% if option.name_detail is not null %}
  283.                                                 <div style="margin-top: 6px; max-width: 175px; text-wrap: wrap; font-size: 11px">{{option.name_detail}}</div>
  284.                                             {% endif %}
  286.                                         </label>
  288.                                         {% if option.detail is not null and option.detail is not empty %}
  289.                                         <span class="onepoint">
  290.                                             <img src="{{ asset('assets/img/icon_question.png') }}" class="for_pc">
  291.                                             <a href="" class="tt_open for_sp" data-modal-btn="Tooltip01"><img src="{{ asset('assets/img/icon_question.png') }}"></a>
  292.                                         </span>
  293.                                         {% endif %}
  295.                                         <aside class="baloon for_pc">
  296.                                             <div class="baloon_body">
  297.                                                 {{option.detail | raw}}
  298.                                             </div>
  299.                                         </aside>
  300.                                     </li>
  302.                                 {% endfor %}
  303.                             </ul>
  304.                         </div>
  305.                     {% endfor %}
  306.                     <div id="loading-price">
  307.                         <div class="loader"></div>
  308.                         <div>価格表を読み込み中</div>
  309.                     </div>
  311.                     <!-- // △△ STEP-6 ++ △△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△ -->
  312.                     <div id='latest-step'>
  313.                         <h5 class="sub_title up" style="margin-bottom: 8px">STEP-{{Steps | length + 2}}<span>ご希望の納期と数量に応じた価格を押してください</span>
  314.                         </h5>
  315.                         <div style="margin-bottom: 6px" id="text-infor-delivery"></div>
  317.                         <p class="table_caption" style="margin-bottom:.3em">※価格は全て１枚あたりの税込価格です。</p>
  318.                         <div id="tableBox">
  319.                             <table
  320.                                 cellpadding="0" cellspacing="0" id="cart_indexTable" class="product">
  321.                             </table>
  322.                             <!-- //// ++++ #cart_indexTable ++++ //// -->
  323.                         </div>
  324.                     </div>
  325.                     <!-- //// ++++ #tableBox ++++ //// -->
  326.                     <!-- ///// .one_box ***** ///// -->
  327.                 </form>
  328.             </div>
  329.             <div class='show_calc_price'>
  330.                 {# <div style="color: #01b4be; margin-bottom: 10px">見積金額</div>
  331.                 <div>
  332.                     <div style="margin-bottom: 10px">
  333.                         <div style="margin-bottom: 5px">購入数量</div>
  334.                         <input type="number" min="0" id="calc_price" style="height: 50px; border-radius: 6px" class="form-control" value="0" />
  335.                     </div>
  336.                     <div>
  337.                         <div>合計金額</div>
  338.                         <div id="tableBox">
  339.                             <table cellpadding="0" cellspacing="0" id="calc_indexTable" class="product"></table>
  340.                         <div>
  341.                     </div>
  342.                 </div> #}
  343.             </div>
  344.                 <div style="display: flex; flex-direction: column; align-items: center">
  345.                         {% if Product.simulator is not null %}
  346.                             <a href="{{Product.simulator}}" target="_blank" style='text-decoration: none; 
  347.                                                 width: 250px; color: white; 
  348.                                                 background: #01B4BE; height: 60px; 
  349.                                                 display: flex; align-items: center; 
  350.                                                 justify-content: center; font-size: 18px; 
  351.                                                 font-weight: bold; border-radius: 6px; 
  352.                                                 margin-top: 40px'>
  353.                                 <i class='fa fa-check' style="font-weight: bold; margin-right: 6px; font-size: 20px"></i> シミュレーターで作る
  354.                             </a>
  355.                         {% endif %}
  356.                 </div>
  357.         </section>
  358.         <!-- ///// +++++ #Product +++++ ///// -->
  359.         <!-- ///// +++++ #mainContents +++++ ///// -->
  360.     </main>
  363.     <!-- // ++ パンクズ ++ //////////////////////////////////////////////////////////// // -->
  364.     <div id="bread_crumbBloc" class="fades">
  365.         <ul id="breadCrumb" class="fades">
  366.             <li class="up">
  367.                 <a href="/"><img src="{{ asset('assets/img/icon_home.png') }}" alt="ホーム"></a>
  368.             </li>
  369.             <li class="up">
  370.                 <a href="{{'/category/' ~ category_id}}">{{category_name}}</a>
  371.             </li>
  372.             <li class="up">{{ Product.name }}</li>
  373.         </ul>
  374.         <!-- ///// #breadCrumb +++++ ///// -->
  375.         <!-- ///// +++++ #bread_crumbBloc +++++ ///// -->
  376.     </div>
  378.     <?php /* ... SMARATPHONE TOOLTIP ................................................................ */ ?>
  380.     <!-- ■■ ++ ToolTip(SMARTPHONE)：1000個 ++ ■■ -->
  381.     <aside id="Tooltip01" class="baloon for_sp">
  382.         <div class="baloon_body">
  383.             <?php // include('/EC-CUBE/ec-cube/tree/4.3/src/Eccube/Resource/template/default/block/tooltip/over1000.html');?>
  384.         </div>
  385.     </aside>
  386.     <!-- /// *** .baloon *** /// -->
  388.     <!-- ■■ ++ ToolTip(SMARTPHONE)：表面＋白印刷 ++ ■■ -->
  389.     <aside id="Tooltip02" class="baloon for_sp">
  390.         <div class="baloon_body">
  391.             <?php // include('/EC-CUBE/ec-cube/tree/4.3/src/Eccube/Resource/template/default/block/tooltip/print_front.html');?>
  392.         </div>
  393.     </aside>
  394.     <!-- /// *** .baloon *** /// -->
  396.     <!-- ■■ ++ ToolTip(SMARTPHONE)：表面＋白印刷+裏面印刷 ++ ■■ -->
  397.     <aside id="Tooltip03" class="baloon for_sp">
  398.         <div class="baloon_body">
  399.             <?php // include('/EC-CUBE/ec-cube/tree/4.3/src/Eccube/Resource/template/default/block/tooltip/print_front_back.html');?>
  400.         </div>
  401.     </aside>
  402.     <!-- /// *** .baloon *** /// -->
  405.     <?php /* ................................................................ SMARATPHONE TOOLTIP ... */ ?>
  407.     <!-- ////// +++++++ #Wrapper +++++++ /////// -->
  408. {% endblock %}