app/template/user_data/builtin_select01.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  6. {% block main %}
  9. <style>
  10. /*html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {*/
  11. /*    margin: 0;*/
  12. /*    padding: 0;*/
  13. /*    border: 0;*/
  14. /*    outline: 0;*/
  15. /*    font-size: 100%;*/
  16. /*    vertical-align: baseline;*/
  17. /*    background: transparent;*/
  18. /*}*/
  19. /**, *::after, *::before {*/
  20. /*    box-sizing: border-box;*/
  21. /*}*/
  22. .l_item_btn {
  23.     border: 1px solid;
  24.     color: #444444;
  25. }
  26. /*a, a:visited, a:hover, a:active {*/
  27. /*    text-decoration: none;*/
  28. /*    transition: all 0.8s;*/
  29. /*    color: #1266ac;*/
  30. /*}*/
  31. /*a {*/
  32. /*    margin: 0;*/
  33. /*    padding: 0;*/
  34. /*    font-size: 100%;*/
  35. /*    vertical-align: baseline;*/
  36. /*    background: transparent;*/
  37. /*}*/
  38. /*div {*/
  39. /*    box-sizing: border-box;*/
  40. /*}*/
  41. /*body {*/
  42. /*    line-height: 1;*/
  43. /*}*/
  44. /*body {*/
  45. /*    color: #333;*/
  46. /*    word-wrap: break-word;*/
  47. /*    font-family: "Yu Mincho Light","YuMincho","Yu Mincho","游明朝体","ヒラギノ明朝 ProN","Hiragino Mincho ProN",sans-serif;*/
  48. /*    font-size: 14px;*/
  49. /*    line-height: 1.8;*/
  50. /*}*/
  51. /*article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {*/
  52. /*    display: block;*/
  53. /*}*/
  54. /*.d_contents {*/
  55. /*    width: 80%;*/
  56. /*    float: right;*/
  57. /*}*/
  58. .d_main {
  59.     padding: 30px 0;
  60.     width: 100%;
  61. }
  62. .clearfix {
  63.     display: inline-block;
  64.     display: block;
  65. }
  66. .l_items_builtin {
  67.     margin-bottom: 50px;
  68. }
  69. .d_item_title {
  70.     font-size: 20px;
  71.     padding-bottom: 5px;
  72.     border-bottom: 1px solid;
  73.     margin-bottom: 20px;
  74.     text-align: left;
  75. }
  76. .t_flexBox {
  77.     display: flex;
  78.     display: -webkit-box;
  79.     display: -ms-flexbox;
  80.     display: -webkit-flex;
  81.     flex-flow: row wrap;
  82.     justify-content: space-between;
  83. }
  84. .l_items_builtin .mainImg {
  85.     width: 40%;
  86.     position: relative;
  87. }
  88. .l_items_builtin .items {
  89.     width: 60%;
  90.     padding: 0 10px;
  91. }
  92. .l_items_builtin .l_items {
  93.     width: calc(50%);
  94.     padding: 0 10px;
  95.     margin-bottom: 30px;
  96. }
  97. .d_item_name {
  98.     font-size: 16px;
  99.     padding: 5px 0;
  100.     border-bottom: 1px solid;
  101.     margin-bottom: 13px;
  102. }
  103. .l_items_builtin .l_items .txt {
  104.     height: 65px;
  105.     font-size: 88%;
  106. }
  107. .l_items_builtin .l_items .price {
  108.     text-align: right;
  109.     font-weight: bold;
  110.     font-size: 110%;
  111. }
  112. .l_items_builtin .l_items .l_item_btn {
  113.     display: block;
  114.     width: 100%;
  115.     text-align: center;
  116.     margin: 10px auto 0;
  117.     padding: 5px 0;
  118. }
  119. .l_items_builtin .l_items img {
  120.     width: 100%;
  121. }
  122. .l_items_builtin .mainImg img {
  123.     width: 100%;
  124. }
  125. .d_item_title span {
  126.     font-size: 12px;
  127.     display: block;
  128.     font-weight: normal;
  129. }
  131. @media only screen and (max-width:767px) {
  132.     .d_main {
  133.         padding: 20px 0;
  134.         width: 100%;
  135.     }
  136.     .d_contents {
  137.         width: 100%;
  138.         padding: 0 8px;
  139.     }
  140.     .l_items_builtin .mainImg {
  141.         width: 100%;
  142.     }
  143.     .l_items_builtin .items {
  144.         width: 100%;
  145.         padding: 0;
  146.     }
  147.     .l_items_builtin :nth-child(2n-1).l_items {
  148.         padding-left: 0px;
  149.     }
  150.     .l_items_builtin :nth-child(2n).l_items {
  151.         padding-right: 0px;
  152.     }
  153.     .l_items_builtin .l_items .txt {
  154.         height: 100px;
  155.     }
  156. }
  158. </style>
  160. {% macro setLItem(product_id, description) %}
  161. {% set Product = getProduct(product_id) %}
  162.             <h3 class="d_item_name">{{ Product.name }}</h3>
  163.             {#<p class="txt">{{ Product.description_list }}</p>#}
  164.             {#<p class="txt">{{ Product.description_detail|raw|nl2br|length > 40 ? Product.description_detail|raw|nl2br|slice(0, 40) ~ '…' : Product.description_detail|raw|nl2br }}</p>#}
  165.             
  166.             {#{% set description_detail = Product.description_detail|replace({'<br>':''}) %}#}
  167.             {#<p class="txt">{{ description_detail|length > 40 ? description_detail|slice(0, 40) ~ '…' : description_detail }}</p>#}
  168.             {# <br>→に置換<br /> #}
  169.             {# <br />→でSplitして、1つ目の要素を表示 #}
  170.             {#{% set description_detail = Product.description_detail|raw|nl2br|replace({'<br>':'<br />'}) %}#}
  171.             {#{% set sp = description_detail|raw|nl2br|split('<br />') %}#}
  172.             {#<p class="txt">{{ sp[0] }}</p>#}
  173. {% autoescape false %}
  174.             <p class="txt">{{ description }}</p>
  175. {% endautoescape  %}
  176.             {#{% autoescape false %}{{ Product.description_detail|replace({'<br>':''}) }}{% endautoescape %}#}
  177.             <p class="price" style="text-align: left;">
  178.               {{ Product.getPrice02IncTaxMax|number_format }}円税込
  179.             </p>
  180.                     {% if Product.hasProductClass %}
  181.                         {% if Product.getPrice02Min == Product.getPrice02Max %}
  182.                             <br />
  183.                         {% else %}
  184.                             <span class="txt" style="font-size: 10px;">（オートシップメント契約価格{{ Product.getPrice02IncTaxMin|number_format }}円税込）</span>
  185.                         {% endif %}
  186.                     {% else %}
  187.                             <br />
  188.                     {% endif %}
  189.             
  190.             <a class="l_item_btn" href="{{ url('product_detail', {'id': Product.id}) }}">詳細へ</a>
  191. {% endmacro %}
  193. {% from _self import setLItem %}
  195. <body><main><div class="d_main clearfix"><section class="d_contents">
  196.     <div class="l_items_builtin">
  197.       <h2 class="d_item_title"><span>バクテリア・ウイルス除去が可能なマルチピュア最上位モデル</span>Aquaextra</h2>
  198.       <div class="t_flexBox">
  199.         {# Aquaextra #}
  200.         <div class="mainImg"><img src="/html/user_data/img/items/aquaextra.png"></div>
  201.         <div class="items t_flexBox">
  202.           {# BT #}
  203.           <div class="l_items">
  204.             <p><img src="/html/user_data/img/items/bt.jpg"></p>
  205.             {{ setLItem(328,"バクテリア・ウイルス除去が可能なマルチピュア最上位モデルです。") }}
  206.           </div>
  207.           {# BG #}
  208.           <div class="l_items">
  209.             <p><img src="/html/user_data/img/items/bg.png"></p>
  210.             {{ setLItem(311,"バクテリア・ウイルス除去が可能なマルチピュア最上位モデルです。。") }}
  211.           </div>
  212.           {# BA #}
  213.           <div class="l_items">
  214.             <p><img src="/html/user_data/img/items/ba.png"></p>
  215.             {{ setLItem(310,"バクテリア・ウイルス除去が可能なマルチピュア最上位モデルです。") }}
  216.           </div>
  217.           {# BH #}
  218.           <div class="l_items">
  219.             <p><img src="/html/user_data/img/items/bh.png"></p>
  220.             {{ setLItem(307,"バクテリア・ウイルス除去が可能なマルチピュア最上位機種とGROHE製の専用水栓のセットです。") }}
  221.           </div>
  222.           {# BJ #}
  223.           <div class="l_items">
  224.             <p><img src="/html/user_data/img/items/bj.png"></p>
  225.             {{ setLItem(308,"バクテリア・ウイルス除去が可能なマルチピュア最上位機種とシンプルな専用水栓のセットです。") }}
  226.           </div>
  227.         </div>
  228.       </div>
  229.     </div>
  230.     <div class="l_items_builtin">
  231.       <h2 class="d_item_title"><span>ご家族4人以上のファミリータイプ</span>Model-750</h2>
  232.       <div class="t_flexBox">
  233.         {# Model-750 #}
  234.         <div class="mainImg"><img src="/html/user_data/img/items/model750.png"></div>
  235.         <div class="items t_flexBox">
  236.           {# BT #}
  237.           <div class="l_items">
  238.             <p><img src="/html/user_data/img/items/bt.jpg"></p>
  239.             {{ setLItem(314,"水・お湯・浄水が1本の水栓で使用できる<br />グースネック型タッチレス水栓タイプです。") }}
  240.           </div>
  241.           {# BG #}
  242.           <div class="l_items">
  243.             <p><img src="/html/user_data/img/items/bg.png"></p>
  244.             {{ setLItem(317,"水・お湯・浄水が1本の水栓で使用できる<br />兼用水栓グースネックタイプです。") }}
  245.           </div>
  246.           {# BA #}
  247.           <div class="l_items">
  248.             <p><img src="/html/user_data/img/items/ba.png"></p>
  249.             {{ setLItem(316,"水・お湯・浄水が1本の水栓で使用できる<br />兼用水栓タイプです。") }}
  250.           </div>
  251.           {# BH #}
  252.           <div class="l_items">
  253.             <p><img src="/html/user_data/img/items/bh.png"></p>
  254.             {{ setLItem(318,"美しいデザインと機能性を兼ね備えたGROHE水栓を採用。") }}
  255.           </div>
  256.           {# BJ #}
  257.           <div class="l_items">
  258.             <p><img src="/html/user_data/img/items/bj.png"></p>
  259.             {{ setLItem(319,"浄水器本体をシンク下に設置し、キッチンをスッキリ快適に。") }}
  260.           </div>
  261.         </div>
  262.       </div>
  263.     </div>
  264.     <div class="l_items_builtin">
  265.       <h2 class="d_item_title"><span>ご家族4人未満のコンパクトタイプ</span>Model-D400</h2>
  266.       <div class="t_flexBox">
  267.         {# Model-D400 #}
  268.         <div class="mainImg"><img src="/html/user_data/img/items/model400.png"></div>
  269.         <div class="items t_flexBox">
  270.           {# BT #}
  271.           <div class="l_items">
  272.             <p><img src="/html/user_data/img/items/bt.jpg"></p>
  273.             {{ setLItem(322,"水・お湯・浄水が1本の水栓で使用できる<br />グースネック型タッチレス水栓タイプです。") }}
  274.           </div>
  275.           {# BG #}
  276.           <div class="l_items">
  277.             <p><img src="/html/user_data/img/items/bg.png"></p>
  278.             {{ setLItem(325,"水・お湯・浄水が1本の水栓で使用できる<br />兼用水栓グースネックタイプです。") }}
  279.           </div>
  280.           {# BA #}
  281.           <div class="l_items">
  282.             <p><img src="/html/user_data/img/items/ba.png"></p>
  283.             {{ setLItem(324,"水・お湯・浄水が1本の水栓で使用できる<br />兼用水栓タイプです。") }}
  284.           </div>
  285.           {# BH #}
  286.           <div class="l_items">
  287.             <p><img src="/html/user_data/img/items/bh.png"></p>
  288.             {{ setLItem(326,"美しいデザインと機能性を兼ね備えたGROHE水栓を採用。") }}
  289.           </div>
  290.           {# BJ #}
  291.           <div class="l_items">
  292.             <p><img src="/html/user_data/img/items/bj.png"></p>
  293.             {{ setLItem(327,"浄水器本体をシンク下に設置し、キッチンをスッキリ快適に。") }}
  294.           </div>
  295.         </div>
  296.       </div>
  297.     </div>
  298.   </section></div></main>
  299. {% endblock %}