app/template/default/Product/detail.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'product_page' %}
  15. {% block stylesheet %}
  16.     <style>
  18.         .ec-modal {
  19.             display: none;
  20.             position: fixed;
  21.             top: 0;
  22.             left: 0;
  23.             z-index: 99999;
  24.             width: 100%;
  25.             height: 100%;
  26.         }
  27.         .ec-modal.small {
  28.             width: 30%;
  29.         }
  30.         .ec-modal.full {
  31.             width: 100%;
  32.             height: 100%;
  33.         }
  34.         .ec-modal .ec-modal-overlay {
  35.             display: flex;
  36.             justify-content: center;
  37.             align-items: center;
  38.             background-color: rgba(0, 0, 0, 0.3);
  39.             width: 100%;
  40.             height: 100%;
  41.         }
  42.         .ec-modal .ec-modal-wrap {
  43.             position: relative;
  44.             border-radius: 6px;
  45.             border: 0px;
  46.             background-color: #fff;
  47.             width: 50%;
  48.             margin: 20px;
  49.             padding: 40px 5px;
  50.         }
  51.         .ec-modal .ec-modal-close {
  52.             cursor: pointer;
  53.             position: absolute;
  54.             right: 20px;
  55.             top: 10px;
  56.             font-size: 20px;
  57.             height: 30px;
  58.             width: 20px;
  59.         }
  60.         .ec-modal .ec-modal-close:hover {
  61.             color: #4b5361;
  62.         }
  63.         .ec-modal .ec-modal-box {
  64.             text-align: center;
  65.         }
  66.         .ec-modal .ec-role {
  67.             margin-top: 20px;
  68.         }
  70.         
  71.    
  72.         .slick-slider {
  73.             margin-bottom: 30px;
  74.         }
  76.         .slick-dots {
  77.             position: absolute;
  78.             bottom: -45px;
  79.             display: block;
  80.             width: 100%;
  81.             padding: 0;
  82.             list-style: none;
  83.             text-align: center;
  84.         }
  86.         .slick-dots li {
  87.             position: relative;
  88.             display: inline-block;
  89.             width: 20px;
  90.             height: 20px;
  91.             margin: 0 5px;
  92.             padding: 0;
  94.             cursor: pointer;
  95.         }
  97.         .slick-dots li button {
  98.             font-size: 0;
  99.             line-height: 0;
  100.             display: block;
  101.             width: 20px;
  102.             height: 20px;
  103.             padding: 5px;
  104.             cursor: pointer;
  105.             color: transparent;
  106.             border: 0;
  107.             outline: none;
  108.             background: transparent;
  109.         }
  111.         .slick-dots li button:hover,
  112.         .slick-dots li button:focus {
  113.             outline: none;
  114.         }
  116.         .slick-dots li button:hover:before,
  117.         .slick-dots li button:focus:before {
  118.             opacity: 1;
  119.         }
  121.         .slick-dots li button:before {
  122.             content: " ";
  123.             line-height: 20px;
  124.             position: absolute;
  125.             top: 0;
  126.             left: 0;
  127.             width: 12px;
  128.             height: 12px;
  129.             text-align: center;
  130.             opacity: .25;
  131.             background-color: black;
  132.             border-radius: 50%;
  134.         }
  136.         .slick-dots li.slick-active button:before {
  137.             opacity: .75;
  138.             background-color: black;
  139.         }
  141.         .slick-dots li button.thumbnail img {
  142.             width: 0;
  143.             height: 0;
  144.         }
  146.         .ec-numberInput {
  147.             display: none;
  148.         }
  149.        
  151.         .ec-blockBtn--cancel {
  152.             display: inline-block;
  153.             margin-bottom: 0;
  154.             font-weight: bold;
  155.             text-align: center;
  156.             vertical-align: middle;
  157.             touch-action: manipulation;
  158.             cursor: pointer;
  159.             background-image: none;
  160.             border: 1px solid transparent;
  161.             white-space: nowrap;
  162.             padding: 6px 12px;
  163.             font-size: 0.875rem;
  164.             border-radius: 1.42857142;
  165.             -webkit-user-select: none;
  166.             -moz-user-select: none;
  167.             -ms-user-select: none;
  168.             user-select: none;
  169.             padding: 10px 16px;
  170.             text-decoration: none;
  171.             color: #fff;
  172.             background-color: #F8C4CF;
  173.             border-color: #F8C4CF;
  174.             display: block;
  175.             width: 330px;
  176.             height: 56px;
  177.             line-height: 56px;
  178.             padding-top: 0;
  179.             padding-bottom: 0;
  180.             border-radius: 6px;
  181.         }
  183.         .ec-blockBtn--cancel:hover {
  184.             opacity: 0.7;
  185.             background-color: #F8C4CF;
  186.             border-color: #F8C4CF;
  187.         }
  189.         .ec-blockBtn--action-detail {
  190.             display: inline-block;
  191.             margin-bottom: 0;
  192.             font-weight: bold;
  193.             text-align: center;
  194.             vertical-align: middle;
  195.             touch-action: manipulation;
  196.             cursor: pointer;
  197.             background-image: none;
  198.             border: 1px solid transparent;
  199.             white-space: nowrap;
  200.             padding: 6px 12px;
  201.             font-size: 0.875rem;
  202.             border-radius: 1.42857142;
  203.             -webkit-user-select: none;
  204.             -moz-user-select: none;
  205.             -ms-user-select: none;
  206.             user-select: none;
  207.             padding: 10px 16px;
  208.             text-decoration: none;
  209.             color: #fff;
  210.             background-color: #d5a770;
  211.             border-color: #d5a770;
  212.             display: block;
  213.             width: 330px;
  214.             height: 56px;
  215.             line-height: 56px;
  216.             padding-top: 0;
  217.             padding-bottom: 0;
  218.             border-radius: 6px;
  219.         }
  221.         .ec-blockBtn--action-detail:hover {
  222.             background-color: #d5a770;
  223.             border-color: #d5a770;
  224.             opacity: 0.7;
  225.         }
  227.         .ec-blockBtn--action {
  228.             display: inline-block;
  229.             margin-bottom: 0;
  230.             font-weight: bold;
  231.             text-align: center;
  232.             vertical-align: middle;
  233.             touch-action: manipulation;
  234.             cursor: pointer;
  235.             background-image: none;
  236.             border: 1px solid transparent;
  237.             white-space: nowrap;
  238.             padding: 6px 12px;
  239.             font-size: 0.875rem;
  240.             border-radius: 1.42857142;
  241.             -webkit-user-select: none;
  242.             -moz-user-select: none;
  243.             -ms-user-select: none;
  244.             user-select: none;
  245.             padding: 10px 16px;
  246.             text-decoration: none;
  247.             color: #fff;
  248.             background-color: #F8C4CF;
  249.             border-color: #F8C4CF;
  250.             display: block;
  251.             width: 330px;
  252.             height: 56px;
  253.             line-height: 56px;
  254.             padding-top: 0;
  255.             padding-bottom: 0;
  256.             border-radius: 6px;
  257.         }
  259.         .ec-productRole__description_icon_car {
  260.             margin-top: 7%;
  261.             padding-top: 7%;
  262.             border-top: 1px dotted #ccc;
  263.             display: flex;
  264.         }
  266.         .ec-productRole__description_icon_present {
  267.             margin-top: 7%;
  268.             display: flex;
  269.         }
  271.         .item_desc_icon {
  272.             width: 25%;
  273.         }
  275.         .item_desc {
  276.             width: 75%;
  277.             padding-top: 0.5%;
  278.             font-weight: bold;
  279.         }
  281.         .item_desc_present {
  282.             width: 75%;
  283.             padding-top: 4%;
  284.             font-weight: bold;
  285.         }
  287.         .product-detail-artist-icon {
  288.             display: flex;
  289.         }
  291.         .box26 {
  292.             position: relative;
  293.             margin: 2em 0;
  294.             padding: 0.5em 1em;
  295.             border: solid 3px #d5a770;
  296.             border-radius: 8px;
  297.         }
  298.         .box26 .box-title {
  299.             position: absolute;
  300.             display: inline-block;
  301.             top: -13px;
  302.             left: 10px;
  303.             padding: 0 9px;
  304.             line-height: 1;
  305.             font-size: 19px;
  306.             background: #FFF;
  307.             color: #d5a770;
  308.             font-weight: bold;
  309.         }
  310.         .box26 h3 {
  311.             margin: 0; 
  312.             padding: 0;
  313.         }
  315.         .product-detail-artist-icon {
  316.             margin-left: -15px;
  317.         }
  319.         .mr-10 {
  320.             margin-right: 10px;
  321.         }
  323.         a.btn-sns {
  324.             font-size: 25px;
  325.             line-height: 40px;
  327.             width: 40px;
  328.             height: 40px;
  329.             padding: 1px 2px;
  330.             margin-left: 30px;
  332.             letter-spacing: 0;
  334.             color: #fff;
  335.             border-radius: 50%;
  336.         }
  338.         a.btn-sns:hover {
  339.             color: #fff;
  340.         }
  342.         a.btn-sns--twitter {
  343.             background: #1da1f2;
  344.         }
  346.         .product-detail-artist-link{
  347.             padding-top: 20px;
  348.         }
  350.         .product-detail-artist-link a:hover{
  351.             color: #d5a770;
  352.             border-bottom: 1px solid #d5a770;
  353.         }
  355.         .product-detail-artist-link a {
  356.             color: black;
  357.             border-bottom: 1px solid black;
  358.             font-weight: bold;
  359.             font-size: 15px;
  360.         }
  362.         /* 768以下の時 */
  363.         @media screen and (max-width: 767px) {  
  364.             .ec-productRole__description {
  365.                 display: none;
  366.             }
  367.             .product-detail-artist-photo {
  368.                 visibility:hidden
  369.             }
  370.             .artist-name-size {
  371.                 width: 500px;
  372.             }
  373.             .ec-grid2__cell_introduce {
  374.                 margin: 10% 15% 0;
  375.                 width: auto;
  376.             }
  377.             .ec-productRole__profile {
  378.                 width: auto;
  379.                 padding: 5%;
  380.                 text-align: center;
  381.             }
  382.             .ec-blockBtn--action {
  383.                 display: inline-block;
  384.                 margin-bottom: 0;
  385.                 font-weight: bold;
  386.                 text-align: center;
  387.                 vertical-align: middle;
  388.                 touch-action: manipulation;
  389.                 cursor: pointer;
  390.                 background-image: none;
  391.                 border: 1px solid transparent;
  392.                 white-space: nowrap;
  393.                 padding: 6px 12px;
  394.                 font-size: 0.875rem;
  395.                 border-radius: 1.42857142;
  396.                 -webkit-user-select: none;
  397.                 -moz-user-select: none;
  398.                 -ms-user-select: none;
  399.                 user-select: none;
  400.                 padding: 10px 16px;
  401.                 text-decoration: none;
  402.                 color: #fff;
  403.                 background-color: #d5a770;
  404.                 border-color: #d5a770;
  405.                 display: block;
  406.                 width: 230px;
  407.                 height: 56px;
  408.                 line-height: 56px;
  409.                 padding-top: 0;
  410.                 padding-bottom: 0;
  411.             }
  412.             .ec-blockBtn--action-detail {
  413.                 display: inline-block;
  414.                 margin-bottom: 0;
  415.                 font-weight: bold;
  416.                 text-align: center;
  417.                 vertical-align: middle;
  418.                 touch-action: manipulation;
  419.                 cursor: pointer;
  420.                 background-image: none;
  421.                 border: 1px solid transparent;
  422.                 white-space: nowrap;
  423.                 padding: 6px 12px;
  424.                 font-size: 0.875rem;
  425.                 border-radius: 1.42857142;
  426.                 -webkit-user-select: none;
  427.                 -moz-user-select: none;
  428.                 -ms-user-select: none;
  429.                 user-select: none;
  430.                 padding: 10px 16px;
  431.                 text-decoration: none;
  432.                 color: #fff;
  433.                 background-color: #d5a770;
  434.                 border-color: #d5a770;
  435.                 display: block;
  436.                 width: 230px;
  437.                 height: 56px;
  438.                 line-height: 56px;
  439.                 padding-top: 0;
  440.                 padding-bottom: 0;
  441.             }
  442.             .ec-blockBtn--cancel {
  443.                 display: inline-block;
  444.                 margin-bottom: 0;
  445.                 font-weight: bold;
  446.                 text-align: center;
  447.                 vertical-align: middle;
  448.                 touch-action: manipulation;
  449.                 cursor: pointer;
  450.                 background-image: none;
  451.                 border: 1px solid transparent;
  452.                 white-space: nowrap;
  453.                 padding: 6px 12px;
  454.                 font-size: 0.875rem;
  455.                 border-radius: 1.42857142;
  456.                 -webkit-user-select: none;
  457.                 -moz-user-select: none;
  458.                 -ms-user-select: none;
  459.                 user-select: none;
  460.                 padding: 10px 16px;
  461.                 text-decoration: none;
  462.                 color: #fff;
  463.                 background-color: #525263;
  464.                 border-color: #525263;
  465.                 display: block;
  466.                 width: 230px;
  467.                 height: 56px;
  468.                 line-height: 56px;
  469.                 padding-top: 0;
  470.                 padding-bottom: 0;
  471.             }
  472.             .ec-blockBtn--cancel:hover {
  473.                 opacity: 0.7;
  474.                 background-color: #525263;
  475.                 border-color: #525263;
  476.             }
  477.             .social-media-title {
  478.                 display: none;
  479.             }
  480.         }
  482.         /* 570以下の時 */
  483.         @media screen and (max-width: 570px) {  
  484.             .ec-grid2__cell_introduce {
  485.                 margin: 10% 5% 0;
  486.                 width: auto;
  487.             }
  488.         }
  490.     </style>
  491. {% endblock %}
  493. {% block javascript %}
  494.     <script>
  495.     $(function () {
  496.         $('#js-slider-4').slick({
  497.             arrows: true, // 前・次のボタンを表示する
  498.             speed: 500, // スライドさせるスピード（ミリ秒）
  499.             slidesToShow: 4, // 表示させるスライド数
  500.             centerMode: true, // slidesToShowが奇数のとき、現在のスライドを中央に表示する
  501.             variableWidth: true, // スライド幅の自動計算を無効化
  502.         });
  503.     });
  504.     </script>
  505.     <script>
  506.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  508.         // 規格2に選択肢を割り当てる。
  509.         function fnSetClassCategories(form, classcat_id2_selected) {
  510.             var $form = $(form);
  511.             var product_id = $form.find('input[name=product_id]').val();
  512.             var $sele1 = $form.find('select[name=classcategory_id1]');
  513.             var $sele2 = $form.find('select[name=classcategory_id2]');
  514.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  515.         }
  517.         {% if form.classcategory_id2 is defined %}
  518.         fnSetClassCategories(
  519.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  520.         );
  521.         {% elseif form.classcategory_id1 is defined %}
  522.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  523.         {% endif %}
  524.     </script>
  525.     <script>
  526.         $(function() {
  527.             // bfcache無効化
  528.             $(window).bind('pageshow', function(event) {
  529.                 if (event.originalEvent.persisted) {
  530.                     location.reload(true);
  531.                 }
  532.             });
  534.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  535.             // img タグに width, height が付与されている.
  536.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  537.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  538.             $('.ec-grid2__cell').hide();
  539.             var removeSize = function () {
  540.                 $('.slide-item').height('');
  541.                 $('.slide-item img')
  542.                     .removeAttr('width')
  543.                     .removeAttr('height')
  544.                     .removeAttr('style');
  545.             };
  546.             var slickInitial = function(slick) {
  547.                 $('.ec-grid2__cell').fadeIn(1500);
  548.                 var baseHeight = $(slick.target).height();
  549.                 var baseWidth = $(slick.target).width();
  550.                 var rate = baseWidth / baseHeight;
  552.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  553.                 // transform を使用することでCLSの影響を受けないようにする
  554.                 $('.slide-item img')
  555.                     .css(
  556.                         {
  557.                             'transform-origin': 'top left',
  558.                             'transform': 'scaleY(' + rate + ')',
  559.                             'transition': 'transform .1s'
  560.                         }
  561.                     );
  562.                 // 正しいサイズに近くなったら属性を解除する
  563.                 setTimeout(removeSize, 500);
  564.             };
  565.             $('.item_visual').on('init', slickInitial);
  566.             // リサイズ時は CLS の影響を受けないため属性を解除する
  567.             $(window).resize(removeSize);
  568.             $('.item_visual').slick({
  569.                 dots: false,
  570.                 arrows: false,
  571.                 responsive: [{
  572.                     breakpoint: 768,
  573.                     settings: {
  574.                         dots: true
  575.                     }
  576.                 }]
  577.             });
  579.             $('.slideThumb').on('click', function() {
  580.                 var index = $(this).attr('data-index');
  581.                 $('.item_visual').slick('slickGoTo', index, false);
  582.             })
  583.         });
  584.     </script>
  585.     <script>
  586.         $(function() {
  587.             $('.add-cart').on('click', function(event) {
  588.                 {% if form.classcategory_id1 is defined %}
  589.                 // 規格1フォームの必須チェック
  590.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  591.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  592.                     return true;
  593.                 } else {
  594.                     $('#classcategory_id1')[0].setCustomValidity('');
  595.                 }
  596.                 {% endif %}
  598.                 {% if form.classcategory_id2 is defined %}
  599.                 // 規格2フォームの必須チェック
  600.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  601.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  602.                     return true;
  603.                 } else {
  604.                     $('#classcategory_id2')[0].setCustomValidity('');
  605.                 }
  606.                 {% endif %}
  608.                 // 個数フォームのチェック
  609.                 if ($('#quantity').val() < 1) {
  610.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  611.                     return true;
  612.                 } else {
  613.                     $('#quantity')[0].setCustomValidity('');
  614.                 }
  616.                 event.preventDefault();
  617.                 $form = $('#form1');
  618.                 $.ajax({
  619.                     url: $form.attr('action'),
  620.                     type: $form.attr('method'),
  621.                     data: $form.serialize(),
  622.                     dataType: 'json',
  623.                     beforeSend: function(xhr, settings) {
  624.                         // Buttonを無効にする
  625.                         $('.add-cart').prop('disabled', true);
  626.                     }
  627.                 }).done(function(data) {
  628.                     // レスポンス内のメッセージをalertで表示
  629.                     $.each(data.messages, function() {
  630.                         $('#ec-modal-header').html(this);
  631.                     });
  633.                     $('.ec-modal').show()
  635.                     // カートブロックを更新する
  636.                     $.ajax({
  637.                         url: "{{ url('block_cart') }}",
  638.                         type: 'GET',
  639.                         dataType: 'html'
  640.                     }).done(function(html) {
  641.                         $('.ec-headerRole__cart').html(html);
  642.                     });
  643.                 }).fail(function(data) {
  644.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  645.                 }).always(function(data) {
  646.                     // Buttonを有効にする
  647.                     $('.add-cart').prop('disabled', false);
  648.                 });
  649.             });
  650.         });
  652.         $('.ec-modal-wrap').on('click', function(e) {
  653.             // モーダル内の処理は外側にバブリングさせない
  654.             e.stopPropagation();
  655.         });
  656.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  657.             $('.ec-modal').hide()
  658.         });
  659.     </script>
  660.     <script type="application/ld+json">
  661.     {
  662.         "@context": "https://schema.org/",
  663.         "@type": "Product",
  664.         "name": "{{ Product.name }}",
  665.         "image": [
  666.             {% for img in Product.ProductImage %}
  667.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  669.             {% else %}
  670.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  671.             {% endfor %}
  672.         ],
  673.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  674.         {% if Product.code_min %}
  675.         "sku": "{{ Product.code_min }}",
  676.         {% endif %}
  677.         "offers": {
  678.             "@type": "Offer",
  679.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  680.             "priceCurrency": "{{ eccube_config.currency }}",
  681.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  682.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  683.         }
  684.     }
  685.     </script>
  686. {% endblock %}
  688. {% block main %}
  689.     <div class="ec-productRole">
  690.         <div class="ec-grid2">
  691.             <div class="ec-grid2__cell">
  692.                 <div class="ec-sliderItemRole">
  694.                     <div class="item_visual">
  695.                         {% for ProductImage in Product.ProductImage %}
  696.                             <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" height="550"{% if loop.index > 1 %} loading="lazy"{% endif %}></div>
  697.                         {% else %}
  698.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"></div>
  699.                         {% endfor %}
  700.                     </div>
  701.                     <div class="item_nav">
  702.                         {% for ProductImage in Product.ProductImage %}
  703.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="133" height="133" loading="lazy"></div>
  704.                         {% endfor %}
  705.                     </div>
  706.                 </div>
  707.                 <div class="product-detail-artDetail">
  708.                     <div class="flex">
  709.                         <i class="fa-solid fa-palette fa-2x fontawesome-size"></i><h2 class="fontweight-bold">作品紹介<h2>
  710.                     </div>
  711.                     <div class="product-detail-title-description">
  712.                         {% if Product.getDescriptionDetail %}
  713.                             <p>{{ Product.getDescriptionDetail }}</p>
  714.                         {% endif %}
  715.                     </div>
  716.                 </div>
  718.                 <div class="hr-bold"></div>
  720.                 {% for artist in artists %}
  721.                 {% if Product.getArtistId == artist.id %}
  722.                 <div class="product-detail-artist">
  723.                     <div class="product-detail-artist-description">
  724.                         <div class="flex">
  725.                             <i class="fa-solid fa-pen-nib fa-2x fontawesome-size"></i>
  726.                             <h2 class="fontweight-bold artist-name-size">{{ artist.name }}</h2>
  727.                             <div class="product-detail-artist-photo">
  728.                                 <img src="{{ asset(artist.image |no_image_product, 'user_data') }}" alt=artist.name class='hidden'>
  729.                             </div>
  730.                         </div>
  731.                         <div class="product-detail-artist-desc">
  732.                             <p>« {{ artist.getDescription }} »</p>
  733.                         </div>
  735.                         <div class="hr"></div>
  737.                         {% if artist.twitter != null %}
  738.                         <h3 class="fontweight-bold social-media-title">アーティストのソーシャルメディア<h3>
  739.                         <div class="product-detail-artist-icon">
  740.                             <div>
  741.                                 <a href='{{artist.twitter}}' class="btn btn-sns btn-sns--twitter"><i class="fa-brands fa-twitter" style="color: white;" onMouseOver="this.style.color='#d5a770'" onMouseOut="this.style.color='white'"></i></a>
  742.                             </div>
  743.                         </div>
  744.                         {% endif %}
  746.                         <div class="product-detail-artist-link">
  747.                             <a href="/artists/detail/{{ artist.id }}">{{ artist.name }}の作品を閲覧</a>
  748.                         </div>
  749.                     </div>
  750.                 </div>
  751.                 {% endif %}
  752.                 {% endfor %}
  753.             </div>
  754.             <div class="ec-grid2__cell_introduce">
  755.                 <div class="ec-productRole__profile">
  756.                     {# 商品名 #}
  757.                     <div class="ec-productRole__title">
  758.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  759.                     </div>
  760.                     {# アーティスト名とリンク #}
  761.                     <div class="ec-productRole__title_flex">
  762.                        {% for artist in artists %}
  763.                             {% if Product.getArtistId == artist.id %}
  764.                             <div><a href="/artists/detail/{{ artist.id }}">{{ artist.name }}, </a></div>
  765.                             <div class="ml-5">
  766.                                 {# アーティストの出身地 #}
  767.                                 {% if Product.getArtistId == artist.id %}
  768.                                     <p>{{ artist.address }}</p>
  769.                                 {% endif %}
  770.                             </div>
  771.                             {% endif %}
  772.                         {% endfor %}
  773.                     </div>
  774.                     {# 絵が何で描かれたか #}
  775.                     {% if Product.getProductionTechnique is not null %}
  776.                     <div class="ec-productRole__title mt-10">
  777.                         <p>{{ Product.getProductionTechnique }}</p>
  778.                     </div>
  779.                     {% endif %}
  780.                     {# 絵のサイズ #}
  781.                     {% if Product.getProductionSizeVertical is not null %}
  782.                     <div class="ec-productRole__title">
  783.                         <div><p>{{ Product.getProductionSizeVertical }} x {{ Product.getProductionSizeWidth}} cm</p></div>
  784.                     </div>
  785.                     {% endif %}
  786.                     {# タグ #}
  787.                     <ul class="ec-productRole__tags">
  788.                         {% for Tag in Product.Tags %}
  789.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  790.                         {% endfor %}
  791.                     </ul>
  792.                     {# 通常価格 #}
  793.                     {# {% if Product.hasProductClass -%}
  794.                         <div class="ec-productRole__priceRegular">
  795.                             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  796.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  797.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  798.                             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  799.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}～ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  800.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  801.                             {% endif %}
  802.                         </div>
  803.                     {% else %}
  804.                         {% if Product.getPrice01Max is not null %}
  805.                             <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：{{ Product.getPrice01IncTaxMin|price }}</span>
  806.                             <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  807.                         {% endif %}
  808.                     {% endif %} #}
  809.                     {# 販売価格 #}
  810.                     <div class="ec-productRole__price">
  811.                         {% if Product.hasProductClass -%}
  812.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  813.                                 <div class="ec-price">
  814.                                     <span class="ec-productRole__priceRegularPrice">{{ '価格'|trans }}</span>
  815.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  816.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  817.                                 </div>
  818.                             {% else %}
  819.                                 <div class="ec-price">
  820.                                     <span class="ec-productRole__priceRegularPrice">{{ '価格'|trans }}</span>
  821.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  822.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  823.                                 </div>
  824.                             {% endif %}
  825.                         {% else %}
  826.                             <div class="ec-price">
  827.                                 <span class="ec-productRole__priceRegularPrice">{{ '価格'|trans }}</span>
  828.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  829.                                 <span class="ec-price__tax">{{ '税込'|trans }}</span>
  830.                             </div>
  831.                         {% endif %}
  832.                     </div>
  833.                     {# メーカー #}
  834.                     {% if maker_id is defined %}
  835.                         <div class="ec-productRole__code">
  836.                             {{ '店舗'|trans }}： <span>{{ maker[maker_id - 1].name }}</span>
  837.                         </div>
  838.                     {% endif %}
  839.                     {# 商品コード #}
  840.                     {% if Product.code_min is not empty %}
  841.                         <div class="ec-productRole__code">
  842.                             {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  843.                         </div>
  844.                     {% endif %}
  845.                     {# 関連カテゴリ #}
  846.                     {% if Product.ProductCategories is not empty %}
  847.                         <div class="ec-productRole__category">
  848.                             <div class="fontWeightBold">{{ '関連カテゴリ'|trans }}</div>
  849.                             {% for ProductCategory in Product.ProductCategories %}
  850.                                 <ul>
  851.                                     <li>
  852.                                         {% for Category in ProductCategory.Category.path %}
  853.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  854.                                             <span></span>{% endif -%}
  855.                                         {% endfor %}
  856.                                     </li>
  857.                                 </ul>
  858.                             {% endfor %}
  859.                         </div>
  860.                     {% endif %}
  861.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  862.                         {% if Product.stock_find %}
  863.                             <div class="ec-productRole__actions">
  864.                                 {% if form.classcategory_id1 is defined %}
  865.                                     <div class="ec-select">
  866.                                         {{ form_row(form.classcategory_id1) }}
  867.                                         {{ form_errors(form.classcategory_id1) }}
  868.                                     </div>
  869.                                     {% if form.classcategory_id2 is defined %}
  870.                                         <div class="ec-select">
  871.                                             {{ form_row(form.classcategory_id2) }}
  872.                                             {{ form_errors(form.classcategory_id2) }}
  873.                                         </div>
  874.                                     {% endif %}
  875.                                 {% endif %}
  876.                                 <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  877.                                     {{ form_widget(form.quantity) }}
  878.                                     {{ form_errors(form.quantity) }}
  879.                                 </div>
  880.                                 <div class="ec-numberInput"><span>{{ 'メーカーID'|trans }}</span>
  881.                                     {{ form_widget(form.maker_id) }}
  882.                                     {{ form_errors(form.maker_id) }}
  883.                                 </div>
  884.                                 {% if maker_id is defined %}
  885.                                 <div class="ec-numberInput"><span>{{ 'メーカーID'|trans }}</span>
  886.                                     <input type="number" id="maker_id" name="maker_id" required="required" value="{{ maker_id }}" class="form-control">
  887.                                 </div>
  888.                                 {% else  %}
  889.                                 <div class="ec-numberInput"><span>{{ 'メーカーID'|trans }}</span>
  890.                                 {% for cookie in productHistory %}
  891.                                     <input type="number" id="maker_id" name="maker_id" required="required" value="{{ cookie.id }}" class="form-control">
  892.                                 {% endfor %}
  893.                                 </div>
  894.                                 {% endif %}
  895.                             </div>
  896.                             <div class="ec-productRole__btn">
  897.                                 <button type="submit" class="ec-blockBtn--action-detail add-cart">
  898.                                     {{ 'カートに入れる'|trans }}
  899.                                 </button>
  900.                             </div>
  901.                         {% else %}
  902.                             <div class="ec-productRole__btn">
  903.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  904.                                     {{ 'ただいま品切れ中です。'|trans }}
  905.                                 </button>
  906.                             </div>
  907.                         {% endif %}
  909.                         {{ form_rest(form) }}
  910.                     </form>
  911.                     <div class="ec-modal">
  912.                         <div class="ec-modal-overlay">
  913.                             <div class="ec-modal-wrap">
  914.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  915.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  916.                                 <div class="ec-modal-box">
  917.                                     <div class="ec-role">
  918.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  919.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action mt-5per">{{ 'カートへ進む'|trans }}</a>
  920.                                     </div>
  921.                                 </div>
  922.                             </div>
  923.                         </div>
  924.                     </div>
  925.                     {% if BaseInfo.option_favorite_product %}
  926.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  927.                             <div class="ec-productRole__btn">
  928.                                 {% if is_favorite == false %}
  929.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  930.                                         <i class="ec-headerNav__itemIcon fas fa-heart fa-fw"></i>{{ 'お気に入りに追加'|trans }}
  931.                                     </button>
  932.                                 {% else %}
  933.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  934.                                             disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  935.                                     </button>
  936.                                 {% endif %}
  937.                             </div>
  938.                         </form>
  939.                     {% endif %}
  940.                     <div class="ec-productRole__description">
  941.                         {{ Product.description_detail|raw|nl2br }}
  942.                     </div>
  943.                     <div class="ec-productRole__description_icon_car">
  944.                         <div class='item_desc_icon'><i class="fa-solid fa-truck fa-3x" style="color: #d5a770;"></i></div>
  945.                         <div class='item_desc'>お届けの目安は<br />ご購入から７日前後</div>
  946.                     </div>
  947.                     <div class="ec-productRole__description_icon_present">
  948.                         <div class='item_desc_icon'><i class="fa-solid fa-gift fa-3x" style="color: #d5a770;"></i></div>
  949.                         <div class='item_desc_present'>返品無料</div>
  950.                     </div>
  951.                 </div>
  952.             </div>
  953.         </div>
  954.         {% if Product.freearea %}
  955.              <div class="ec-productRole__description">
  956.                  {{ include(template_from_string(Product.freearea)) }}
  957.             </div>
  958.         {% endif %}
  959.     </div>
  960.     {# <ul class="slider-2" id="js-slider-4">
  961.         {% for product in products %}
  962.             {% for artist in artists %}
  963.                 {% if product.getArtistId == artist.id %}
  964.                 {% if product.getArtistId == artist.id %}
  965.                 <li>
  966.                     <div class="ec-newItemRole__listItem">
  967.                         <a href="{{ url('product_detail', {'id': product.id}) }}" class="text-decoration">
  968.                             {% for productImage in product.ProductImage %}
  969.                                 <div class="slide-item"><img src="{{ asset(productImage, 'save_image') }}" /></div>
  970.                             {% endfor %}
  971.                             <p class="ec-newItemRole__listItemTitle fontWeightBold">{{ product.name|trans }}</p>
  972.                             <p class="ec-newItemRole__listItemPrice fontWeightBold">￥{{ product.getPrice02IncTaxMax|trans }}(税込)</p>
  973.                         </a>
  974.                     </div>
  975.                 </li>
  976.                 {% endif %}
  977.                 {% endif %}
  978.             {% endfor %}
  979.         {% endfor %}
  980.     </ul> #}
  981. {% endblock %}