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

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