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

Open in your IDE?
  1. {#
  2.     This file is part of EC-CUBE
  3.     
  4.     Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  5.     
  6.     http://www.ec-cube.co.jp/
  7.     　
  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' %}
  12.     
  13.     {% set body_class = 'product_page' %}
  14.     
  15.     {% if Product.hasProductClass -%}
  16.         {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  17.             {% set price = Product.getPrice01()[0] %}
  18.             {% set taxIn = Product.getPrice01IncTaxs()[0] %}
  19.         {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  20.             {% set price = Product.getPrice01()[0] %}
  21.             {% set taxIn = Product.getPrice01IncTaxs()[0] %}
  22.         {% endif %}
  23.     {% else -%}
  24.         {% if Product.getPrice01Max is not null %}
  25.             {% set price = Product.getPrice01()[0] %}
  26.             {% set taxIn = Product.getPrice01IncTaxs()[0] %}
  27.         {% endif %}
  28.     {% endif -%}
  29.     {% if Product.hasProductClass -%}
  30.         {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  31.             {% set price = Product.getPrice02()[0] %}
  32.             {% set taxIn = Product.getPrice02IncTaxs()[0] %}
  33.         {% else %}
  34.             {% set price = Product.getPrice02()[0] %}
  35.             {% set taxIn = Product.getPrice02IncTaxs()[0] %}
  36.         {% endif %}
  37.     {% else -%}
  38.         {% set price = Product.getPrice02()[0] %}
  39.         {% set taxIn = Product.getPrice02IncTaxs()[0] %}
  40.     {% endif -%}
  41.     
  42.     {% block stylesheet %}
  43.         <style>
  44.     
  45.             .slick-slider {
  46.                 margin-bottom: 30px;
  47.             }
  48.     
  49.             .slick-dots {
  50.                 position: absolute;
  51.                 bottom: -45px;
  52.                 display: block;
  53.                 width: 100%;
  54.                 padding: 0;
  55.                 list-style: none;
  56.                 text-align: center;
  57.             }
  58.     
  59.             .slick-dots li {
  60.                 position: relative;
  61.                 display: inline-block;
  62.                 width: 20px;
  63.                 height: 20px;
  64.                 margin: 0 5px;
  65.                 padding: 0;
  66.     
  67.                 cursor: pointer;
  68.             }
  69.     
  70.             .slick-dots li button {
  71.                 font-size: 0;
  72.                 line-height: 0;
  73.                 display: block;
  74.                 width: 20px;
  75.                 height: 20px;
  76.                 padding: 5px;
  77.                 cursor: pointer;
  78.                 color: transparent;
  79.                 border: 0;
  80.                 outline: none;
  81.                 background: transparent;
  82.             }
  83.     
  84.             .slick-dots li button:hover,
  85.             .slick-dots li button:focus {
  86.                 outline: none;
  87.             }
  88.     
  89.             .slick-dots li button:hover:before,
  90.             .slick-dots li button:focus:before {
  91.                 opacity: 1;
  92.             }
  93.     
  94.             .slick-dots li button:before {
  95.                 content: " ";
  96.                 line-height: 20px;
  97.                 position: absolute;
  98.                 top: 0;
  99.                 left: 0;
  100.                 width: 12px;
  101.                 height: 12px;
  102.                 text-align: center;
  103.                 opacity: .25;
  104.                 background-color: black;
  105.                 border-radius: 50%;
  106.     
  107.             }
  108.             .ec-blockBtn--action.add-cart{
  109.                 line-height: 0;
  110.             }
  111.     
  112.             .slick-dots li.slick-active button:before {
  113.                 opacity: .75;
  114.                 background-color: black;
  115.             }
  116.     
  117.             .slick-dots li button.thumbnail img {
  118.                 width: 0;
  119.                 height: 0;
  120.             }
  121.     
  122.         </style>
  123.     {% endblock %}
  124.     
  125.     {% block javascript %}
  126.         <script>
  127.             $("#classcategory_id2").parent().addClass('disabled');
  128.             eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  129.     
  130.             // 規格2に選択肢を割り当てる。
  131.             function fnSetClassCategories(form, classcat_id2_selected) {
  132.                 var $form = $(form);
  133.                 var product_id = $form.find('input[name=product_id]').val();
  134.                 var $sele1 = $form.find('select[name=classcategory_id1]');
  135.                 var $sele2 = $form.find('select[name=classcategory_id2]');
  136.                 eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  137.             }
  138.     
  139.             {% if form.classcategory_id2 is defined %}
  140.             fnSetClassCategories(
  141.                 $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  142.             );
  143.             {% elseif form.classcategory_id1 is defined %}
  144.             eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  145.             {% endif %}
  146.             $('#classcategory_id2').click(function(){
  147.                 if($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == ''){
  148.                     $(".popupAlert").fadeIn()
  149.                     setTimeout(function(){
  150.                         $(".popupAlert").fadeOut()
  151.                     },4000)
  152.                 }
  153.             })
  154.             $('#classcategory_id1').change(function(){
  155.                 if($(this).val() == "__unselected"){
  156.                     // $("#classcategory_id2").prop('disabled',true);
  157.                     $("#classcategory_id2").parent().addClass('disabled');
  158.                 }else{
  159.                     // $("#classcategory_id2").prop('disabled',false);
  160.                     $("#classcategory_id2").parent().removeClass('disabled');
  161.                 }
  162.             })
  163.         </script>
  164.         <script>
  165.             $(function() {
  166.                 // bfcache無効化
  167.                 $(window).bind('pageshow', function(event) {
  168.                     if (event.originalEvent.persisted) {
  169.                         location.reload(true);
  170.                     }
  171.                 });
  172.     
  173.                 $('.item_visual').slick({
  174.                     dots: false,
  175.                     arrows: false,
  176.                     responsive: [{
  177.                         breakpoint: 768,
  178.                         settings: {
  179.                             dots: true
  180.                         }
  181.                     }]
  182.                 });
  183.     
  184.                 $('.slideThumb').on('click', function() {
  185.                     var index = $(this).attr('data-index');
  186.                     $('.item_visual').slick('slickGoTo', index, false);
  187.                 })
  188.             });　
  189.         </script>
  190.         <script>
  191.             $(function() {
  192.                 $('.add-cart').on('click', function(event) {
  193.                     {% if form.classcategory_id1 is defined %}
  194.                     // 規格1フォームの必須チェック
  195.                     if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  196.                         $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  197.                         return true;
  198.                     } else {
  199.                         $('#classcategory_id1')[0].setCustomValidity('');
  200.                     }
  201.                     {% endif %}
  202.     
  203.                     {% if form.classcategory_id2 is defined %}
  204.                     // 規格2フォームの必須チェック
  205.                     if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  206.                         $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  207.                         return true;
  208.                     } else {
  209.                         $('#classcategory_id2')[0].setCustomValidity('');
  210.                     }
  211.                     {% endif %}
  212.     
  213.                     // 個数フォームのチェック
  214.                     if ($('#quantity').val() < 1) {
  215.                         $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  216.                         return true;
  217.                     } else {
  218.                         $('#quantity')[0].setCustomValidity('');
  219.                     }
  220.     
  221.                     event.preventDefault();
  222.                     $form = $('#form1');
  223.                     $.ajax({
  224.                         url: $form.attr('action'),
  225.                         type: $form.attr('method'),
  226.                         data: $form.serialize(),
  227.                         dataType: 'json',
  228.                         beforeSend: function(xhr, settings) {
  229.                             // Buttonを無効にする
  230.                             $('.add-cart').prop('disabled', true);
  231.                         }
  232.                     }).done(function(data) {
  233.                         // レスポンス内のメッセージをalertで表示
  234.                         $.each(data.messages, function() {
  235.                             $('#ec-modal-header').html(this);
  236.                         });
  237.     
  238.                         //GA4 add_cart START
  239.                         dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  240.                         
  241.                         dataLayer.push({
  242.                             'event': 'add_to_cart',
  243.                             'ecommerce': {
  244.                             'currency': 'JPY',
  245.                             'value': '{{ Product.getPrice02IncTaxMin }}',                            
  246.                                 'items': [{
  247.                                     'item_name': '{{ Product.name }}',
  248.                                     'item_id': '{{ Product.getCodeMin ? Product.getCodeMin : Product.id }}',
  249.                                     'price': '{{ Product.getPrice02IncTaxMin }}',
  250.                                     'item_category': '{% for ProductCategory in Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{% if ( Category.parent is not null ) %}{{ Category.Parent.name }}：{{ Category.name }}{% endif %}{% endfor %}{% endfor %}',
  251.                                     'quantity': '1'
  252.                                 }]
  253.                             }
  254.                         });   
  255.                         //GA4 add_cart END
  258.                         $('.ec-modal').show()
  259.     
  260.                         // カートブロックを更新する
  261.                         $.ajax({
  262.                             url: "{{ url('block_cart') }}",
  263.                             type: 'GET',
  264.                             dataType: 'html'
  265.                         }).done(function(html) {
  266.                             $('#headerCartWrapp').html(html);
  267.                         });
  268.                     }).fail(function(data) {
  269.                         alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  270.                     }).always(function(data) {
  271.                         // Buttonを有効にする
  272.                         $('.add-cart').prop('disabled', false);
  273.                     });
  274.                 });
  275.             });
  276.     
  277.             $('.ec-modal-overlay, .ec-modal .ec-inlineBtn--cancel').on('click', function() {
  278.                 $('.ec-modal').hide()
  279.             });
  280.         </script>
  281.     
  282.            {% set nglists = [73,74,75,84,83,78,79] %}
  283.     
  284.             {% if (Product.id in nglists ) == false %}
  285.     
  286.             <!--<script type="application/ld+json">
  287.         {
  288.           "@context": "http://schema.org/",
  289.           "@type": "Product",
  290.           "sku": "111{{ Product.id }}",
  291.           "gtin14" : "",
  292.           "mpn": "111{{ Product.id }}",
  293.           "image": [
  294.             {% for ProductImage in Product.ProductImage %}
  295.                 {% if loop.index != 1 %},{% endif %}
  296.         "https://raspia.com{{ asset(ProductImage.getWebpImage(), 'save_image') }}"
  297.             {% endfor %}
  298.            ],
  299.           "name": "{{ Product.name }}",
  300.           "description": "{{ Product.lead_text|raw }}",
  301.           "color" : "ゴールド",
  302.           "brand": {
  303.             "@type": "Thing",
  304.             "name": "RASPIA Jewelry"
  305.           },
  306.           "audience": {
  307.             "@type": "PeopleAudience",
  308.             "suggestedGender": "female",
  309.             "suggestedMinAge": "13",
  310.             "suggestedMaxAge": "100"
  311.           },
  312.           "offers": {
  313.             "@type": "Offer",
  314.             "url": "https://raspia.com/products/detail/{{ Product.id }}",
  315.             "priceCurrency": "JPY",
  316.             "price":{{ taxIn }},
  317.             "itemCondition": "http://schema.org/NewCondition",
  318.             {% if Product.stock_find %}
  319.             "availability": "http://schema.org/InStock"
  320.             {% else %}
  321.             {# 在庫がない場合は品切れボタンを表示 #}
  322.             "availability": "http://schema.org/SoldOut"
  323.             {% endif %} {#End stock find#}
  324.     
  325.           }
  326.         }
  327.         </script>-->
  328.     
  329.             {%  endif  %}
  330.     
  331.     
  332.     {% endblock %}
  333.     
  334.     {% block main %}
  335.     
  338.  {% set OpenEventHasCategory = false %}{#　南堀江店舗イベント用 #}
  339.  {% for ProductCategory in Product.ProductCategories %}
  340.       {% if ProductCategory.Category.id == 150 %}
  341.          {% set OpenEventHasCategory = true %}
  342.       {% endif %}
  343.  {% endfor %}
  344.     
  345.     
  346.     
  347. {#     
  348.     <div class="mvLow">
  349.         <h1 class="ttl01">COLLECTION</h1>
  350.     </div>
  351. #}    
  352.     <div class="breadcrumbs">
  353.         <ul>
  354.             <li><a href="{{ url('homepage') }}">HOME</a></li>
  355.             <li><a href="{{ url('product_list') }}">コレクション</a></li>
  356.     
  357.             <li>{{ Product.name|slice(0,16) }}...</li>
  358.         </ul>
  359.     </div>
  360.     
  362.     <div id="productDetailCampane">
  363. {# 
  364.         <p><strong>【クリスマスシーズン発送・お届けのお知らせ】</strong><br>12/21(木)中にご入金確認できたご注文は、12/22(金)中に発送します。<br>
  365.         国内へのお届けは発送完了から通常1〜2日で届きますが、運送会社の都合で配送遅延が発生する場合がございます。クリスマスプレゼントでご検討のお客様は、お早めにご注文いただけますと幸いです。
  366.         </p>
  367.         <p><strong>【年末年始休業/配送のお知らせ】</strong><br>12/29(木)中にご入金確認できたご注文につきましては、12/30(金)中に発送します。<br>12/30(金)〜翌年1/5(木)までのご注文は1/6(金)より順次発送いたします。</p>
  368.         <br>
  369. #}        
  370.          <p>公式SNS ▶
  371.                 <a href="https://www.facebook.com/raspiajewelry/"><img src="/html/template/raspia/img/common/ico_facebook_03.webp" alt="" width="33"></a>
  372.                 <a href="https://www.instagram.com/raspia_jewelry/"><img src="/html/template/raspia/img/common/ico_instagram_03.webp?2020" alt="" width="33"></a>
  373.                 <a href="https://twitter.com/RASPIA_Jewelry"><img src="/html/template/raspia/img/common/ico_twitter_03.webp" alt="" width="33"></a>
  374.                 <a href="https://lin.ee/qJTCKzZ"><img src="/html/template/raspia/img/common/ico_line.webp" alt="" width="33"></a>
  375.         </p>        
  376.     </div>
  378. {# 
  379.     <div class="bnrWrap01">
  380.         <a href="https://raspia.com/magazine/4397/">
  381.             <img src="/html/template/raspia/img/event/iyotetsu2024.webp" alt="いよてつ高島屋期間限定ショップ">
  382.             
  383. <!--            
  384.             <img class="pc" src="/html/template/raspia/img/event/iyotetsu2024.webp" alt="いよてつ高島屋期間限定ショップ">
  385.             <img class="sp" src="/html/template/raspia/img/event/img_19_sp.webp?2023" alt="店舗のご案内　大阪・南堀江店">
  386.             -->
  387.         </a>
  388.         <p class="subTxt01" style='font-size:105%;'><a href="https://raspia.com/magazine/4397/"> ２０２４年１月１７日〜２３日まで<br class="sp">愛媛県松山市「いよてつ高島屋」3Fにて<br class="sp">期間限定ショップ開催致します。 </a></p>
  389.     </div>
  390. #} 
  391.     
  393.     
  394.     <section class="productArea inner cf product-detail" data-id="{{ Product.id }}" data-name="{{ Product.name }}" data-category="{% for ProductCategory in Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{% if(loop.parent.loop.index != 1) %}{{ Category.name }}{%  endif  %}{% endfor %}{% endfor %}
  395.     " data-price="{{ Product.getPrice02IncTaxMax() }}">
  396.     
  397.         <div class="sliderArea">
  398.             {% if Product.ProductImage|length > 0 %}
  399.                 <div class="sliderPhoto">
  400.                     <ul>
  401.                     {% for ProductImage in Product.ProductImage %}
  402.                         <li><img class="lazyload" src="/html/template/raspia/img/common/load_logo.webp" data-src="{{ asset(ProductImage.getWebpImage(), 'save_image') }}" alt=""></li>
  403.                     {% else %}
  404.                         <li><img src="{{ asset(''|no_image_product, 'save_image') }}"/></li>
  405.                     {% endfor %}
  406.                     </ul>
  407.                 </div>
  408.                 <div class="sliderThumb cf">
  409.                     <ul>
  410.                         {% for ProductImage in Product.ProductImage %}
  411.                             <li><a data-slide-index="{{ loop.index-1 }}" href=""><img class="lazyload" src="/html/template/raspia/img/common/load_logo.webp" data-src="{{ asset(ProductImage.getWebpImage, 'save_image') }}"></a></li>
  412.                         {% else %}
  413.                             <li><a data-slide-index="{{ loop.index-1 }}" href=""><img src="{{ asset(''|no_image_product, 'save_image') }}"/></a></li>
  414.                         {% endfor %}
  415.                     </ul>
  416.                 </div>
  417.             {% else %}
  418.                 <div id="detail_image_box__item"><img class="lazyload" data-src="{{ app.config.image_save_urlpath }}/{{ ''|no_image_product }}"/></div>
  419.             {% endif %}
  420.     
  421.             <div class="sliderText">
  422.                 <p>■商品のご購入をご検討のお客様へ<br>
  423.                     2,000円以上お買い上げで<strong>全国送料無料</strong>です。すべて無料で台紙付きのラッピング、商品保証書をお付けしております。また、プレゼントラッピングもご希望の方も、別売りでご用意しております。</p>
  424.                 <p>■ご注文商品のお届けに関して<br>
  425.                 ご注文･ご入金確認後、２営業日以内（最短当日）に発送致します。
  426.                 </p>    
  427.                     
  428.             </div>
  429.         </div>
  430.     
  431.         <div class="productPlan">
  432.     
  433.             {% if Product.ProductTag is not empty %}
  434.                 {% for ProductTag in Product.ProductTag %}
  435.                     <span id="product_tag_box__product_tag--{{ ProductTag.Tag.id }}" class="product_tag_list">{{ ProductTag.Tag }}</span>
  436.                 {% endfor %}
  437.             {% endif %}
  438.             <h2 class="comTtl03">{{ Product.name }}</h2>
  439.             <div class="productColor">
  440.                 <p>{{ Product.lead_text|raw|nl2br }}</p>
  441.             </div>
  442.             <div class="productSupportInfo">
  443.            会員の方はご購入金額の1％のポイント還元いたします。<br>
  444.                 <span>品番</span> {{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}
  445.             </div>
  446.     
  447.             <div class="productPrice">
  448.                 <div class="price">
  449.                     <!--★通常価格★-->
  450.                     {% if Product.hasProductClass -%}
  451.                         {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  452.                             <p class="hightPrice">通常価格：<span class="price01_default">{ Product.getPrice01IncTaxs()[0]|price }}</span> <span class="small">(税込)</span></p>
  453.                         {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  454.                             <p class="hightPrice">通常価格：<span class="price01_default">{ Product.getPrice01IncTaxs()[0]|price }}</span> <span class="small">(税込)</span></p>
  455.                         {% endif %}
  456.                     {% else -%}
  457.                         {% if Product.getPrice01Max is not null %}
  458.                             <p class="hightPrice">通常価格：<span class="price01_default">{{ Product.getPrice01IncTaxs()[0]|price }}</span> <span class="small">(税込)</span></p>
  459.                         {% endif %}
  460.                     {% endif -%}
  461.     
  462.                     <!--★販売価格★-->
  463.                     {% if Product.hasProductClass -%}
  464.                         {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  465.                             <p class="lowPrice"><span>{{ Product.getPrice02IncTaxs()[0]|price }}</span> <span class="small">(税込)</span></p>
  466.                         {% else %}
  467.                             <p class="lowPrice"><span>{{ Product.getPrice02IncTaxs()[0]|price }}</span> <span class="small">(税込)</span></p>
  468.                         {% endif %}
  469.                     {% else -%}
  470.                         <p class="lowPrice"><span>{{ Product.getPrice02IncTaxs()[0]|price }}</span> <span class="small">(
  471.                         税込)</span></p>
  472.                     {% endif -%}
  473.                 </div>
  474.                 <div class="order">
  475.                  <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  476.                      {% if Product.stock_find %}
  477.                          <div class="ec-productRole__actions">
  478.                              {% if form.classcategory_id1 is defined %}
  479.                                  <div class="ec-select">
  480.                                      {{ form.classcategory_id1.vars.label }}：{{ form_widget(form.classcategory_id1) }}
  481.                                      {{ form_errors(form.classcategory_id1) }}
  482.                                  </div>
  483.                                  {% if form.classcategory_id2 is defined %}
  484.                                      <div class="ec-select disabled">
  485.                                          {{ form.classcategory_id2.vars.label }}：
  486.                                          <p class="small">{{ form.classcategory_id1.vars.label }}を最初に選択してください。</p>
  487.                                          {{ form_widget(form.classcategory_id2) }}
  488.                                          {{ form_errors(form.classcategory_id2) }}
  489.                                      </div>
  490.                                  {% endif %}
  491.                              {% endif %}
  492.                              <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  493.                                  {{ form_widget(form.quantity) }}
  494.                                  {{ form_errors(form.quantity) }}
  495.                              </div>
  496.                          </div>
  497.                          <div class="ec-productRole__btn">
  498.                              <button type="submit" id="add_cart" class="ec-blockBtn--action add-cart btn-primary btnNext">{{ 'カートに入れる'|trans }}</button>
  499.                          </div>
  500.                      {% else %}
  501.                          <div class="ec-productRole__btn">
  502.                              <button type="button" class="ec-blockBtn--action" disabled="disabled">
  503.                                  {{ 'ただいま品切れ中です。'|trans }}
  504.                              </button>
  505.                          </div>
  506.                      {% endif %}
  507.     
  508.                      {{ form_rest(form) }}
  509.                  </form>
  510.                  </div>
  511.                  <div class="ec-modal">
  512.                      <div class="ec-modal-overlay">
  513.                          <div class="ec-modal-wrap">
  514.                              <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  515.                              <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  516.                              <div class="ec-modal-box">
  517.                                  <div class="ec-role">
  518.                                      <span class="btnBack ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  519.                                      <a href="{{ url('cart') }}" class="btnNext ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  520.                                  </div>
  521.                              </div>
  522.                          </div>
  523.                      </div>
  524.                  </div>
  525.                  {% if BaseInfo.option_favorite_product %}
  526.                      <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  527.                          <div class="ec-productRole__btn">
  528.                              {% if is_favorite == false %}
  529.                                  <button type="submit" id="favorite" class="btn btn-info btn-block prevention-btn prevention-mask ec-blockBtn--cancel">
  530.                                      {{ 'お気に入りに追加'|trans }}
  531.                                  </button>
  532.                              {% else %}
  533.                                  <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  534.                                          disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  535.                                  </button>
  536.                              {% endif %}
  537.                          </div>
  538.                      </form>
  539.                  {% endif %}
  540.     
  541.     
  542.     
  543.                 <dl>
  544.                     <dt>備考：</dt>
  545.                     <dd>
  546.                         {% if Product.remark is not null %}{{ Product.remark|raw|nl2br }}<br>{% endif %}
  547.     
  548.                          注文確定後の変更とキャンセルはお受けできません。予めご了承ください。
  549.                     </dd>
  550.                 </dl>
  551.     
  552.             </div>
  553.         </div>
  554.     </section>
  555.     {% if Product.product_movie != "" %}
  556.     <div class="itemMovieWrap inner">
  557.         <h2 class="comTtl03">動画で見る</h2>
  558.         <div class="movieBg">
  559.             <video src="{{ Product.product_movie }}.mp4" poster="{{ Product.product_movie }}.webp" width="100%" muted="" loop="" playsinline="" controls=""></video>
  560.         </div>
  561.     </div>
  562.     {% endif %}
  563.     
  564.     <section class="productInfo inner">
  567.     {% if OpenEventHasCategory %}{#南堀江店舗用#}
  568.         <div id="eventSection">
  569.             <div class="backgroundImg01">
  570.                 <div class="eventSec01">
  571.                     <h4 class="comTtl04">その他のオープン記念商品</h4>
  572.                     <div class="event_flexbtn_wrapper">
  573.                         <a class="comBtn04" href="https://raspia.com/products/list?category_id=150">他の期間限定商品を見る</a>
  574.                     </div>
  575.                 </div>
  576.             </div>
  577.             <div class="backgroundImg02">
  578.             </div>
  579.             <div class="eventSec02">
  580.                 <h4 class="comTtl04">大阪・南堀江店 店舗情報</h4>
  581.                 <p class="txt02">
  582.                     ２０２３年４月２９日(土)に大阪・南堀江に直営店を<br class="sp">オープンいたしました。<br>
  583.                     ゆっくりジュエリーをお楽しみいただける<br class="sp">空間をご用意しました。<br>
  584.                     是非、お気軽にお越しください。
  585.                 </p>
  586.                 <div class="txtWrap">
  587.                     <p>
  588.                         【住　　所】<br class="sp">大阪府大阪市西区南堀江1丁目14番3号 喜多河ビル1F<br>
  589.                         【アクセス】<br class="sp">地下鉄四つ橋線四ツ橋駅　徒歩5分<br>
  590.                         <span class="pc">　　　　　　</span>地下鉄御堂筋線心斎橋駅/JRなんば駅　徒歩10分
  591.                     </p>
  592.                 </div>
  593.                 <div class="event_flexbtn_wrapper">
  594.                     <div class="comBtn02 solo">
  595.                         <a class="btnBasic" href="https://raspia.com/user_data/shop">店舗の詳細はこちら</a>
  596.                     </div>
  597.                 </div>
  598.             </div>
  599.         </div>
  601.         {% else %}{# 通常時 #}        
  602.             {% if Product.description_detail is not null %}
  603.             {% if Product.description_detail == "" %}
  604.             {% else %}
  606.                 <h2 class="comTtl03">商品説明</h2>
  607.                 <div class="box01 cf">
  608.                     <h4 class="comTtl02">{{ Product.name }}</h4>
  609.                     {{ Product.description_detail|raw }}
  610.                 </div>
  612.             {% endif %}
  613.             {% endif %}
  614.         {% endif %}
  617.     <!--
  618.         {% if Product.getSlider() is not null  %}
  619.     
  620.         <h2 class="comTtl03 earRing">イヤリングに変更・チャームのみ購入</h2>
  621.         <div class="box03 cf">
  622.             <div class="sliderArea earRingSlider">
  623.                 <div class="sliderPhoto">
  624.                     <ul>
  625.                         {% for Image in SliderImages %}
  626.                         <li><img class="lazyload" src="/html/template/raspia/img/common/load_logo.webp" data-src="{{ Image }}"></li>
  627.                         {% endfor %}
  628.                     </ul>
  629.                 </div>
  630.             </div>
  631.             <div class="textBox">
  632.                 <h4 class="comTtl02">金具の変更について</h4>
  633.                 <p>●イヤリングに変更ができるようになりました。ピアスホールが空いていない方も身につけていただけます。<br>
  634.                 ご注文時に「金具変更」より「イヤリング」を選択ください。<br>
  635.                 <br>
  636.                 ●チャームだけのご購入も可能です。<br>
  637.                 「金具変更」より「チャームのみ」を選択ください。<br>
  638.                 <br>
  639.                 ※チャーム丸カンのサイズは変更可能です。<br>
  640.                 お手持ちのピアス(orイヤリング)に通るか不安な方は事前にご相談いただくか、<br>
  641.                 合わせたいピアス(orイヤリング)の太さをお問い合わせ欄にご記入ください。<br>
  642.                 ※フックピアスに取り付けているチャームは金具から取り外しできません。
  643.                 </p>
  644.             </div>
  645.         </div>
  646.         {% endif %}
  647.     -->
  649.         {% if Product.materials != "" and Product.size != "" %}
  651.         <div class="productProfile">
  652.             <h4 class="comTtl04">ITEM SPEC</h4>
  653.             <table class="table01 spec">
  654.                 <tr>
  655.                     <th>サイズ</th>
  656.                     <td colspan="3">{{ Product.size }}</td>
  657.                 </tr>
  658.                 <tr>
  659.                     <th>素材</th>
  660.                     <td>{{ Product.materials }}</td>
  661.                     <th>カテゴリ</th>
  662.                     <td>
  663.                         <ul>
  664.                         {% for ProductCategory in Product.ProductCategories %}
  665.                             {% for Category in ProductCategory.Category.path %}
  666.                                 {% if(loop.parent.loop.index != 1) %}
  667.                                 <li><a id="relative_category_box__relative_category--{{ ProductCategory.product_id }}_{{ loop.parent.loop.index }}_{{ Category.id }}" href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a></li>
  668.                                 {%  endif  %}
  669.                             {% endfor %}
  670.                         {% endfor %}
  671.                         </ul>
  672.                     </td>
  673.                 </tr>
  674.             </table>
  675.             {{ Product.specification|raw }}
  676.         </div>
  677.         {% else -%}        
  678.         <div class="productProfile">
  679.             <table class="table01 spec">
  680.                 <tr>
  681.                     <th>カテゴリ</th>
  682.                     <td>
  683.                         <ul>
  684.                         {% for ProductCategory in Product.ProductCategories %}
  685.                             {% for Category in ProductCategory.Category.path %}
  686.                                 <li><a id="relative_category_box__relative_category--{{ ProductCategory.product_id }}_{{ loop.parent.loop.index }}_{{ Category.id }}" href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a></li>
  687.                             {% endfor %}
  688.                         {% endfor %}
  689.                         </ul>
  690.                     </td>
  691.                 </tr>
  692.             </table>
  693.         </div>
  694.         {% endif %}
  696.     </section>
  697.     <section class="seoWrap">
  698.         <div class="inner">
  699.             <h2 class="ttl001">ABOUT RASPIA</h2>
  700.             <span class="txt03">ラスピアについて</span>
  701.             <p class="seoTxt01">RASPIA(ラスピア)は、シンプルで大人可愛いデザインをイメージし、カラーストーン/天然石とK10(10金)/K18(18金)の本物のゴールド素材を使って手作りしています。<br class="pc">20代、30代から40代、50代の幅広い年齢層にレディース向けジュエリーとして、<br class="pc">普段使いからお仕事やフォーマルシーン・一生物ジュエリーなど様々なコーディネートをご提案します。</p>
  702.         </div>
  703.     </section>
  704.     
  705.     {# フリーエリア #}
  706.     {% if Product.free_area %}
  707.         <div id="sub_area" class="row">
  708.             <div class="col-sm-10 col-sm-offset-1">
  709.                 <div id="detail_free_box__free_area" class="free_area">{{ include(template_from_string(Product.free_area)) }}</div>
  710.             </div>
  711.         </div>
  712.     {% endif %}
  713.     <div id="relatedProduct">
  714.     
  715.     </div>
  716.     
  717.     <div id="lineButtonArea">
  718.     <a href="https://lin.ee/qJTCKzZ" target="_blank" alt="LINEで相談"><span>LINE</span>で相談</a>
  719.     </div>
  720.     <!--Criteo BEGIN-->
  721.     <script type="text/javascript">
  722.     
  723. async function sha256(text){
  724.     const uint8  = new TextEncoder().encode(text)
  725.     const digest = await crypto.subtle.digest('SHA-256', uint8)
  726.     return Array.from(new Uint8Array(digest)).map(v => v.toString(16).padStart(2,'0')).join('')
  727. }
  729.     {% if is_granted('ROLE_USER') %}
  730.     var crto_hem = sha256("{{ app.user.email }}");
  731.     {% endif %}
  733.      window.criteo_q = window.criteo_q || [];
  734.      window.criteo_q.push(
  735.         { event: "setAccount", account: 82881 },
  736.         { event: "setSiteType", type: /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d"  },
  737.     {% if is_granted('ROLE_USER') %}        
  738.         { event: "setEmail", email: crto_hem, hash_method: "sha256" },
  739.     {% endif %}            
  740.         { event: "viewItem", item: {{ Product.id }}, ecpplugin: "ec-cube-4gd" }
  741.       );
  742.     
  743.     </script>
  744.     <!--Criteo END-->
  745.     
  746.     {% endblock %}