app/template/default/Block/ranking.twig line 1

Open in your IDE?
  1. {% block stylesheet %}
  2. <style type="text/css">
  3.     #rankingProudcts {
  4.         width: 100%;
  5.     }
  6.     #rankingProudcts div {
  7.         padding: 10px 5px 0 5px;
  8.         text-align: center;
  9.         text-decoration: none;
  10.         position: relative;
  11.     }
  12.     #rankingProudcts div a {
  13.         color: #333;
  14.     }
  15.     #rankingProudcts div .number {
  16.         top: -20px;
  17.         left: 10px;
  18.         width: auto;
  19.         height: 0;
  20.         text-shadow:1px 1px 1px rgba(255,255,255,1);
  21.         z-index: 1;
  22.         position: absolute;
  23.     }
  24.     @media screen and (min-width: 960px) {
  25.         #rankingProudcts div .number {
  26.             font-size: 600%;
  27.         }
  28.     }
  29.     @media screen and (max-width: 959px) {
  30.         #rankingProudcts div .number {
  31.             font-size: 300%;
  32.         }
  33.     }
  34.     #rankingProudcts img {
  35.         width: calc(100% - 10px);
  36.     }
  37.     #rankingProudcts .name {
  38.         margin: 6px 0 0 6px;
  39.     }
  40.     #rankingProudcts .price {
  41.         font-weight: 900;
  42.         margin: 6px 0 0 6px;
  43.     }
  44.     #rankingProudcts .colorDot {
  45.         list-style: none;
  46.         display: flex;
  47.         margin: 0;
  48.         padding: 0;
  49.         margin: 6px 0 0 6px;
  50.     }
  51.     #rankingProudcts .colorDot li {
  52.         margin-right: 12px;
  53.         width: 12px;
  54.         height: 12px;
  55.         border-radius: 50%;
  56.         border: solid 1px #000;
  57.     }
  58.     {# arrow #}
  59.     #rankingProudcts .slick-arrow {
  60.         position: absolute;
  61.         top: 50%;
  62.         /* transform: translateY(-50%); */
  63.         width: 50px;
  64.         height: 50px;
  65.         /* background: #606060; */
  66.         background: rgba(0, 0, 0, .7);
  67.         z-index: 1;
  68.         opacity: 0.7;
  69.         cursor: pointer;
  70.     }
  71.     #rankingProudcts .slick-arrow::before {
  72.         position: absolute;
  73.         content: "";
  74.         top: 50%;
  75.         width: 26px;
  76.         height: 26px;
  77.         border: solid 1px #FFF;
  78.         top: 11px;
  79.         border-width: 1px 0px 0px 1px;
  80.     }
  81.     #rankingProudcts .slick-prev {
  82.         left: 25px;
  83.     }
  84.     #rankingProudcts .slick-next {
  85.         right: 25px;
  86.     }
  87.     #rankingProudcts .slick-prev::before {
  88.         transform: rotate(-45deg);
  89.         left: 21px;
  90.     }
  91.     #rankingProudcts .slick-next::before {
  92.         transform: rotate(130deg);
  93.         right: 21px;
  94.     }
  95.     @media only screen and (max-width: 767px) {
  96.         #rankingProudcts .slick-track {
  97.             left: 10%;
  98.         }
  99.         #rankingProudcts .slick-arrow {
  100.             width: 30px;
  101.             height: 30px;
  102.         }
  103.         #rankingProudcts .slick-arrow::before {
  104.             top: 7px;
  105.             width: 16px;
  106.             height: 16px;
  107.         }
  108.         #rankingProudcts .slick-prev {
  109.             left: 0;
  110.         }
  111.         #rankingProudcts .slick-next {
  112.             right: 0;
  113.         }
  114.         #rankingProudcts .slick-prev::before {
  115.             left: 12px;
  116.         }
  117.         #rankingProudcts .slick-next::before {
  118.             right: 12px;
  119.         }
  120.     }
  121. </style>
  122. {% endblock %}
  124. {% block javascript %}
  125.     <script type="text/javascript">
  126.         $(function(){
  127.             $('#rankingProudcts').slick({
  128.                 infinite: true,
  129.                 slidesToShow: 4.5,
  130.                 slidesToScroll: 1,
  131.                 initialSlide: 2,
  132.                 centerMode: true,
  133.                 adaptiveHeight:true,
  134.                 autoplay: true,
  135.                 prevArrow: '<div class="slick-prev"></div>',
  136.                 nextArrow: '<div class="slick-next"></div>',
  137.                 responsive: [{
  138.                     breakpoint: 768,
  139.                     settings: {
  140.                         slidesToShow: 1.5,
  141.                     }
  142.                 }],
  143.             });
  144.             $('#rankingProudcts').slick("slickSetOption", "slidesToScroll", 1);
  145.         });
  146.     </script>
  147. {% endblock javascript %}
  149. {% block main %}
  150.     <section class="fadeinu block_box">
  151.         <div class="ec-role">
  152.             <div class="ec-secHeading">
  153.                 <span class="ec-secHeading__en">{{ 'RANKING'|trans }}</span><br>
  154.                 <span class="ec-secHeading__ja"><h2>{{ 'ランキング'|trans }}</h2></span>
  155.             </div>
  156.             <section id="rankingProudcts">
  157.                 <div>
  158.                     <span class="number">1</span>
  159.                     <a href="{{ url('product_detail', {'id': '28'}) }}">
  160.                         <img src="{{ asset('0617160317_648d5ab5174a1.jpg', 'save_image') }}" />
  161.                         <p class="name">限定商品おさしみゆば</p>
  162. {#
  163.                         <span class="price">￥735(税込)</span>
  164. #}
  165.                     </a>
  166.                 </div>
  167.                 <div>
  168.                     <span class="number">2</span>
  169.                     <a href="{{ url('product_detail', {'id': '1'}) }}">
  170.                         <img src="{{ asset('0122095541_6790420d18579.jpg', 'save_image') }}" />
  171.                         <p class="name">本さしみゆば</p>
  172. {#
  173.                         <span class="price">￥735(税込)</span>
  174. #}
  175.                     </a>
  176.                 </div>
  177.                 <div>
  178.                     <span class="number">3</span>
  179.                     <a href="{{ url('product_detail', {'id': '30'}) }}">
  180.                         <img src="{{ asset('0617161441_648d5d610c02d.jpg', 'save_image') }}" />
  181.                         <p class="name">比叡とろゆば</p>
  182. {#
  183.                         <span class="price">￥735(税込)</span>
  184. #}
  185.                     </a>
  186.                 </div>
  187.                 <div>
  188.                     <span class="number">4</span>
  189.                     <a href="{{ url('product_detail', {'id': '84'}) }}">
  190.                         <img src="{{ asset('0422150913_6625ff0987dce.jpg', 'save_image') }}" />
  191.                         <p class="name">お徳用乾燥ゆば（割れゆば）</p>
  192. {#
  193.                         <span class="price">￥432(税込)</span>
  194. #}
  195.                     </a>
  196.                 </div>
  197.                 <div>
  198.                     <span class="number">5</span>
  199.                     <a href="{{ url('product_detail', {'id': '40'}) }}">
  200.                         <img src="{{ asset('0619142617_648fe6f9a38fe.jpg', 'save_image') }}" />
  201.                         <p class="name">三色湯葉入り にゅうめん</p>
  202. {#
  203.                         <span class="price">￥594(税込)</span>
  204. #}
  205.                     </a>
  206.                 </div>
  207.                 <div>
  208.                     <span class="number">6</span>
  209.                     <a href="{{ url('product_detail', {'id': '33'}) }}">
  210.                         <img src="{{ asset('0906151958_64f81a0e44c58.jpg', 'save_image') }}" />
  211.                         <p class="name">湯葉ちらし寿司の素（１合用×２袋入）</p>
  212. {#
  213.                         <span class="price">￥1,059(税込)</span>
  214. #}
  215.                     </a>
  216.                 </div>
  217.                 <div>
  218.                     <span class="number">7</span>
  219.                     <a href="{{ url('product_detail', {'id': '5'}) }}">
  220.                         <img src="{{ asset('0122100452_6790443468a29.jpg', 'save_image') }}" />
  221.                         <p class="name">【WEB限定】人気の生ゆば食べくらべセット</p>
  222. {#
  223.                         <span class="price">￥2,310～￥9,870(税込)</span>
  224. #}
  225.                     </a>
  226.                 </div>
  227.                 <div>
  228.                     <span class="number">8</span>
  229.                     <a href="{{ url('product_detail', {'id': '8'}) }}">
  230.                         <img src="{{ asset('0615155303_648ab54f43564.jpg', 'save_image') }}" />
  231.                         <p class="name">【WEB限定】人気の生ゆば・生麩セット</p>
  232. {#
  233.                         <span class="price">￥2,830～￥4,300(税込)</span>
  234. #}
  235.                     </a>
  236.                 </div>
  237.                 <div>
  238.                     <span class="number">9</span>
  239.                     <a href="{{ url('product_detail', {'id': '17'}) }}">
  240.                         <img src="{{ asset('0616184956_648c30447a37c.jpg', 'save_image') }}" />
  241.                         <p class="name">ありがとう 湯葉のお吸物　三種</p>
  242. {#
  243.                         <span class="price">￥1,944～￥5,184(税込)</span>
  244. #}
  245.                     </a>
  246.                 </div>
  247.                 <div>
  248.                     <span class="number">10</span>
  249.                     <a href="{{ url('product_detail', {'id': '32'}) }}">
  250.                         <img src="{{ asset('1115160402_6736f262bc8db.jpg', 'save_image') }}" />
  251.                         <p class="name">【WEB・直営店限定】冷凍 生ゆばお徳用 （切落し）</p>
  252. {#
  253.                         <span class="price">￥1,000(税込)</span>
  254. #}
  255.                     </a>
  256.                 </div>
  257.             </section>
  258.         </div>
  259.     </section>
  260. {% endblock %}