app/template/myufull1/Block/product_detail_floating_cart_nav.twig line 1

Open in your IDE?
  1. {#
  2. 商品詳細ページ用フローティングカートナビ
  3. #}
  5. {% block javascript %}
  6. <script type="text/javascript">
  7.   $(function() {
  8.     // $('.product-detail-floating-nav').hide();
  10.     var targetClass = '.product-detail-floating-nav';
  11.     if (window.innerWidth > 767) { // PC表示の時のみに適用
  12.       targetClass += '.desktop';
  13.     }
  14.     else {
  15.       targetClass += '.mobile';
  16.     }
  17.     var $targetElem = $(targetClass);
  19.     $(window).on('scroll', function() {
  20.       if ($(this).scrollTop() > 500) {
  21.         $targetElem.slideDown();
  22.       } else {
  23.         $targetElem.slideUp();
  24.       }
  25.       return false;
  26.     });
  28.     // カートフォームのClone
  29.     $("#form1").clone().appendTo("#floating-nav-cart");
  31.     // フォーム要素のID修正
  32.     $formFloating = $("#floating-nav-cart");
  33.     $formFloating.find('form').prop('id', 'form2');
  34.     $formFloating.find('#classcategory_id1').prop('id', 'classcategory_id1-a');
  35.     $formFloating.find('#classcategory_id2').prop('id', 'classcategory_id2-a');
  36.     $formFloating.find('#quantity').prop('id', 'quantity-a');
  37.   });
  38. </script>
  39. {% endblock %}
  41. {% if Product is defined and Product is not empty %}
  43. <nav class="product-detail-floating-nav desktop">
  44.   <div class="ec-productRole__title">
  45.     <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  46.   </div>
  48.   {# 販売価格 #}
  49.   <div class="ec-productRole__price">
  50.     {% if Product.hasProductClass -%}
  51.       {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  52.         <div class="ec-price">
  53.           <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  54.           <span class="ec-price__tax">{{ '税込'|trans }}</span>
  55.         </div>
  56.       {% else %}
  57.         <div class="ec-price">
  58.           <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} <small>～</small> {{ Product.getPrice02IncTaxMax|price }}</span>
  59.           <span class="ec-price__tax">{{ '税込'|trans }}</span>
  60.         </div>
  61.       {% endif %}
  62.     {% else %}
  63.       <div class="ec-price">
  64.         <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  65.         <span class="ec-price__tax">{{ '税込'|trans }}</span>
  66.       </div>
  67.     {% endif %}
  68.   </div>
  70.   <div class="ec-productRole__btn">
  71.     {% if Product.stock_find %}
  72.       <a class="ec-blockBtn--action" data-toggle="modal" data-target="#cartModal">
  73.         <i class="fas fa-plus-circle"></i> {{ 'カートに入れる'|trans }}
  74.       </a>
  75.     {% else %}
  76.       <button type="button" class="ec-blockBtn--action" disabled="disabled">
  77.         <i class="fas fa-exclamation-triangle"></i> {{ 'ただいま品切れ中です。'|trans }}
  78.       </button>
  79.     {% endif %}
  80.   </div>
  82.   {% if BaseInfo.option_favorite_product %}
  83.     <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  84.       <div class="ec-productRole__btn mt-2">
  85.         {% if is_favorite == false %}
  86.           <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  87.             <i class="fas fa-heart fa-fw"></i> お気に入りに追加
  88.           </button>
  89.         {% else %}
  90.           <button type="submit" id="favorite" class="ec-blockBtn--cancel"　disabled="disabled">
  91.             <i class="fas fa-heart fa-fw"></i> お気に入り追加済
  92.           </button>
  93.         {% endif %}
  94.       </div>
  95.     </form>
  96.   {% endif %}
  98.   <div class="ec-productRole__btn mt-2 text-center">
  99.     <a href="{{ url('product_contact') }}?product_id={{ Product.id }}" class="btn d-block">商品について問い合せる</a>
  100.   </div>
  101. </nav>
  104. <nav class="product-detail-floating-nav mobile">
  105.   <div class="row">
  106.     <div class="col-5">
  107.       {% if Product.stock_find %}
  108.         <a class="cart d-block" data-toggle="modal" data-target="#cartModal">
  109.           <i class="fas fa-plus-circle"></i> {{ 'カートに入れる'|trans }}
  110.         </a>
  111.       {% else %}
  112.         <button type="button" class="cart" disabled="disabled">
  113.           <i class="fas fa-exclamation-triangle"></i> {{ '品切れ中'|trans }}
  114.         </button>
  115.       {% endif %}
  116.     </div>
  118.     <div class="col-4">
  119.       {% if BaseInfo.option_favorite_product %}
  120.         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  121.           {% if is_favorite == false %}
  122.             <button type="submit" id="favorite" class="d-block text-center full-width">
  123.               <i class="fas fa-heart fa-fw"></i><br>お気に入り追加
  124.             </button>
  125.           {% else %}
  126.             <button type="submit" id="favorite" disabled="disabled" class="d-block text-center full-width">
  127.               <i class="fas fa-heart fa-fw"></i> お気に入り済
  128.             </button>
  129.           {% endif %}
  130.         </form>
  131.       {% endif %}
  132.     </div>
  134.     <div class="col-3">
  135.       <a href="{{ url('product_contact') }}?product_id={{ Product.id }}" class="contact d-block text-center">商品について<br>問い合せる</a>
  136.     </div>
  137.   </div>
  138. </nav>
  140. <div class="modal fade" id="cartModal" tabindex="-1" role="dialog" aria-labelledby="cartModalLabel" aria-hidden="true">
  141.   <div class="modal-dialog" role="document">
  142.     <div class="modal-content">
  143.       <div class="modal-header">
  144.         <h5 class="modal-title" id="exampleModalLabel">{{ Product.name }}</h5>
  145.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  146.           <span aria-hidden="true">&times;</span>
  147.         </button>
  148.       </div>
  149.       <div class="modal-body" id="floating-nav-cart">
  150.       </div>
  151.     </div>
  152.   </div>
  153. </div>
  155. {% endif %}