app/template/default/makerSlider.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. {% block javascript %}
  14. <script>
  15.   $(function () {
  16.     $('#js-slider-5').slick({
  17.       arrows: false, // 前・次のボタンを表示する
  18.       autoplaySpeed: 25000, // スライドさせるスピード（ミリ秒）
  19.       fade: true, // スライドをフェードイン・フェードアウト
  20.       autoplay: true,
  21.       infinite: true,
  22.       asNavFor: "#js-slider-6"
  23.     });
  24.   });
  26.   $('#js-slider-5').on('afterChange', function (slick, currentSlide) {
  27.     makeQR();
  28.   });
  30.   var id = {{id}}
  32.   $('#js-slider-5').on('beforeChange', function (slick, currentSlide) {
  33.     var idNum = {{productId}}[currentSlide['currentSlide'] + 1];
  34.     var qrtext = `https://tas-lab.net/products/detail/${idNum}/${id}`;
  35.     localStorage.setItem("demo", qrtext);
  36.   });
  38.   var makeQR = function() {
  39.       var qrtext2 = localStorage.getItem("demo");
  40.       $("#img-qr").html("");
  41.       $("#img-qr").qrcode({text:qrtext2});
  42.   }
  44.   $(function () {
  45.     $('#js-slider-6').slick({
  46.       arrows: false, // 前・次のボタンを表示する
  47.       autoplaySpeed: 25000, // スライドさせるスピード（ミリ秒）
  48.       fade: true, // スライドをフェードイン・フェードアウト
  49.       autoplay: true,
  50.       infinite: true,
  51.     });
  52.   });
  53. </script>
  54. {% endblock %}
  56. {% block stylesheet %}
  57. <style>
  58.   ol,
  59.   ul {
  60.     padding-left: 0;
  61.   }
  62.   .sliderMakerAll {
  63.   }
  64.   .sliderMaker {
  65.     float: left;
  66.     width: 50%;
  67.     padding: 3% 3%;
  68.   }
  70.   .sliderMaker2 {
  71.     float: left;
  72.     width: 50%;
  73.     padding: 2% 0 2% 11%;
  74.   }
  76.   .img-wrap-slider {
  77.     box-shadow: 10px 10px 15px -10px;
  78.   }
  80.   .img-slider {
  81.     width: 100%;
  82.     min-height: 90vh;
  83.     max-height: 90vh;
  84.     box-shadow: 10px 10px 15px -10px;
  85.     border-radius: 6px;
  86.   }
  88.   .qrCode{
  89.     float: left;
  90.     width: 50%;
  91.     height: auto;
  92.     padding: 10% 15% 8% 15%;
  93.   }
  95.   .design_card {
  96.     float: left;
  97.     background: #EDE5D5;
  98.     box-shadow: 10px 10px 10px -10px;
  99.     margin: 10px;
  100.     width: 400px;
  101.     height: auto;
  102.     text-align: center;
  103.     border-radius: 6px;
  104.   }
  106.   .design_card_title {
  107.      border-bottom: 2px solid #d5a770;
  108.   }
  109.   .design_card_technique {
  110.     margin: 10px 0;
  111.   }
  113.   {# ipad #}
  114.   @media screen and (max-width: 821px) and (min-width: 416px) {
  115.     .sliderMakerAll {
  116.       clear: both;
  117.     }
  118.     .sliderMaker {
  119.       clear: both;
  120.       width: 100%;
  121.     }
  123.     .img-wrap-slider {
  124.       border-radius: 10px;
  125.     }
  127.     .img-slider {
  128.       width: 100%;
  129.       min-height: 50vh;
  130.       max-height: 50vh;
  131.       border-radius: 10px;
  132.     }
  134.     .qrCode {
  135.       clear: both;
  136.       width: 100%;
  137.       padding: 4%;
  138.       text-align: center;
  139.     }
  140.     .sliderMaker2 {
  141.       clear: both;
  142.       width: 100%;
  143.       margin-left: 14%;
  144.     }
  145.   }
  147.   {# ihone #}
  148.   @media screen and (max-width: 415px ) {
  149.     .sliderMakerAll {
  150.       clear: both;
  151.     }
  152.     .sliderMaker {
  153.       clear: both;
  154.       width: 100%;
  155.     }
  157.     .img-wrap-slider {
  158.       border-radius: 10px;
  159.     }
  161.     .img-slider {
  162.       width: 100%;
  163.       min-height: 50vh;
  164.       max-height: 50vh;
  165.       border-radius: 10px;
  166.     }
  168.     .qrCode {
  169.       clear: both;
  170.       width: 100%;
  171.       min-height: 30vh;
  172.       max-height: 30vh;
  173.       padding: 3%;
  174.       margin-top: -4%;
  175.       text-align: center;
  176.     }
  177.     .sliderMaker2 {
  178.       clear: both;
  179.       width: 100%;
  180.       min-height: 20vh;
  181.       max-height: 20vh;
  182.       padding: 20px 0 0 6px;
  183.     }
  184.   }
  185. </style>
  186. {% endblock %}
  189. {% block main %}
  191. <div class="sliderMakerAll">
  192.   <ul id="js-slider-5" class="sliderMaker">
  193.     {% for product in products %}
  194.     {% if product.ProductImage[0] is defined %}
  195.     <li>
  196.       <div>
  197.         <div class="img-wrap-slider"><img class="img-slider" src="{{ asset(product.ProductImage[0], 'save_image') }}" /></div>
  198.       </div>
  199.     </li>
  200.     {% endif %}
  201.     {% endfor %}
  202.   </ul>
  204.   <div id='img-qr' class="qrCode"></div>
  206.   
  207.   <ul id="js-slider-6" class="sliderMaker2">
  208.     {% for product in products %}
  209.     {% if product.ProductImage[0] is defined %}
  210.     <li>
  211.       <div class="design_card">
  212.         <h2 class="fontWeightBold design_card_title">{{ product.name|trans }}</h2>
  213.         <h3 class="fontWeightBold design_card_technique">{{ product.getProductionTechnique|trans }}</h3>
  214.         <h3 class="fontWeightBold design_card_technique">{{ product.getProductionSizeVertical }} x {{ product.getProductionSizeWidth}} cm</h3>
  215.       </div>
  216.     </li>
  217.     {% endif %}
  218.     {% endfor %}
  219.   </ul>
  221. </div>
  224. {% endblock %}