app/template/meldiastore/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) LOCKON CO.,LTD. All Rights Reserved.
  6. http://www.lockon.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 = 'front_page' %}
  15. {% block stylesheet %}
  16.     <style>
  17.     
  18.          @import url("https://use.typekit.net/ifj0bvi.css");
  20.         {# main visual #}
  21.         .p-top__main-visual-slide-link.is-1st {
  22.             background-image:url({{ asset('/html/user_data/assets/shop_item_img/slide_yamazaki.jpg') }});
  23.         }
  24.         .p-top__main-visual-slide-link.is-2nd {
  25.             background-image:url({{ asset('/html/user_data/assets/shop_item_img/slide_footfit2.jpg') }});
  26.         }
  27.         .p-top__main-visual-slide-link.is-3rd {
  28.             background-image:url({{ asset('/html/user_data/assets/shop_item_img/slide_mirableplus2.jpg') }});
  29.         }
  30.         .p-top__main-visual-slide-link.is-4th {
  31.             background-image:url({{ asset('/html/user_data/assets/shop_item_img/slide_refa.jpg') }});
  32.         }
  33.         .p-top__main-visual-slide-link.is-5th {
  34.             background-image:url({{ asset('/html/user_data/assets/shop_item_img/slide_mirablezero.jpg') }});
  35.         }
  36.        {# komori 追加分 #}
  37.         .catcthcopy {
  38.             font-family: trajan-pro-3, serif;
  39.             font-weight: 400;
  40.             font-style: normal;
  41.             font-size: 60px;
  42.             color: #807245;
  43.             line-height: 1.2;
  44.             margin: 0;
  45.         }
  46.         .p-top__main-visual-copy--sub {
  47.             color: #807245;
  48.         }
  49.         .p-top__main-visual-description {
  50.             color: #807245;
  51.         }
  52.         .p-top__main-visual-sns-link.is-twitter:before {
  53.             background-image: url(/html/user_data/assets/shop_item_img/top-sprites.png);
  54.         }
  55.         .p-top__main-visual-sns-link.is-instagram:before {
  56.             background-image: url(/html/user_data/assets/shop_item_img/top-sprites.png);
  57.         }
  58.         .p-top__main-visual-sns-link.is-facebook:before {
  59.             background-image: url(/html/user_data/assets/shop_item_img/top-sprites.png);
  60.             
  61.         }
  62.         .p-top__main-visual-slide-navi-prev {
  63.             background-color: #000;
  64.         }
  65.         .p-top__main-visual-slide-navi-next {
  66.             background-color: #807245;
  67.             
  68.         }
  69.         .p-top__main-visual-pager .swiper-pagination-bullet {
  70.             background-color: #807245;
  71.             
  72.         }
  73.         .p-top__main-visual-pager .swiper-pagination-bullet-active {
  74.             background-color: #000;
  75.             
  76.         }
  77.         .b-news__post {
  78.             border-bottom: #807245 solid 1px;
  79.             
  80.         }
  81.         {# komori 追加分おわり #}
  82.         @media screen and (max-width: 839px) {
  83.             .p-top__main-visual-slide-link.is-1st {
  84.                 background-image:url({{ asset('/html/user_data/assets/shop_item_img/slide_yamazaki.jpg') }});
  85.             }
  86.             .p-top__main-visual-slide-link.is-2nd {
  87.                 background-image:url({{ asset('/html/user_data/assets/shop_item_img/slide_footfit2.jpg') }});
  88.             }
  89.             .p-top__main-visual-slide-link.is-3rd {
  90.                 background-image:url({{ asset('/html/user_data/assets/shop_item_img/slide_mirableplus2.jpg') }});
  91.             }
  92.             .p-top__main-visual-slide-link.is-4th {
  93.                 background-image:url({{ asset('/html/user_data/assets/shop_item_img/slide_refa.jpg') }});
  94.             }
  95.             .p-top__main-visual-slide-link.is-5th {
  96.                 background-image:url({{ asset('/html/user_data/assets/shop_item_img/slide_mirablezero.jpg') }});
  97.             }
  98.             {# komori 追加分 #}
  99.             .catcthcopy {
  100.             font-size: 30px;
  101.         }
  102.         {# komori 追加分おわり #}
  103.         }
  105.         {# category #}
  106.         .b-category:after {
  107.             background-image:url({{ asset('assets/img/top/b-category@1x.png') }});
  108.         }
  109.         @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  110.             .b-category:after {
  111.                 background-image:url({{ asset('assets/img/top/b-category@2x.png') }});
  112.             }
  113.         }
  115.     </style>
  116. {% endblock %}
  118. {% block javascript %}
  119.     <script src="https://cdn.jsdelivr.net/npm/swiper@5.3.6/js/swiper.min.js" integrity="sha256-dwAIpWA5jmq1E3AHBeJDH86emZuOEMKZrZxNr9DJAQs=" crossorigin="anonymous"></script>
  120.     <script>
  122.         $(function(){
  123.             {# main visual #}
  124.             var mainVisualSwiper = new Swiper ('#js-top__main-visual-slide', {
  125.                 effect: "slide",
  126.                 loop: true,
  127.                 slidesPerView: 1,
  128.                 pagination: {
  129.                     el: '#js-top__main-visual-pager-contents',
  130.                     clickable: true
  131.                 },
  132.                 navigation: {
  133.                     prevEl: '#js-top__main-visual-slide-navi-prev',
  134.                     nextEl: '#js-top__main-visual-slide-navi-next',
  135.                 },
  136.                 autoplay: {
  137.                     delay: 2000,
  138.                     
  139.                 }
  140.             })
  142.             {# category #}
  143.             var categorySwiper = new Swiper('#js-category__slide', {
  144.                 slidesPerView: 2,
  145.                 spaceBetween: 12,
  146.                 scrollbar: {
  147.                     el: '#js-category__slide-scrollbar',
  148.                     draggable: true
  149.                 },
  150.                 breakpoints: {
  151.                     480: {
  152.                         slidesPerView: 3,
  153.                         spaceBetween: 12
  154.                     },
  155.                     840: {
  156.                         slidesPerView: 4,
  157.                         spaceBetween: 30
  158.                     },
  160.                 }
  161.             });
  163.             {# news #}
  164.             $('#js-news__contents').each(function() {
  165.                 var listLength = $(this).find('.js-news__post').length;
  166.                 if (listLength > 5) {
  167.                     $(this).find('.js-news__post:gt(4)').each(function() {
  168.                         $(this).hide();
  169.                     });
  170.                     var dispNum = 5;
  171.                     $(this).find('#js-news-button').click(function() {
  172.                         dispNum += 5;
  173.                         $(this).parents('#js-news__contents').find('.js-news__post:lt(' + dispNum + ')').fadeIn();
  174.                         if (dispNum >= listLength) {
  175.                             $(this).parents('#js-news__actions').hide();
  176.                         }
  177.                     })
  178.                 }
  179.             });
  180.             $('.js-news__post-heading').on('click', function() {
  181.                 $newsPost = $(this).parent('.js-news__post');
  182.                 $newsDescription = $newsPost.children('.js-news__post-contents');
  183.                 if ($newsDescription.css('display') == 'none') {
  184.                     $newsPost.addClass('is-active');
  185.                     $newsDescription.slideDown(300);
  186.                 } else {
  187.                     $newsPost.removeClass('is-active');
  188.                     $newsDescription.slideUp(300);
  189.                 }
  190.             });
  192.         });
  194.         $(window).on('load',function() {
  196.             {# topic #}
  197.             gridItems();
  199.         });
  201.         var resizeTimer = null;
  202.         $(window).on('resize', function() {
  203.             clearTimeout(resizeTimer);
  204.             resizeTimer = setTimeout(function() {
  206.                 {# topic #}
  207.                 gridItems();
  209.             }, 200);
  211.         });
  213.         function gridItems(){
  214.             var items = $('.js-topic__list-item');
  215.             items.each(function(index, elem) {
  216.                 gridItem($(elem));
  217.             });
  218.         }
  220.         function gridItem(item){
  221.             var grid,
  222.                 rowHeight,
  223.                 rowGap,
  224.                 rowSpan;
  225.             grid = $('#js-topic__list');
  226.             rowHeight = parseInt(grid.css('grid-auto-rows'));
  227.             rowGap = parseInt(grid.css('grid-row-gap'));
  228.             rowSpan = Math.ceil((item.find('.js-topic__item').outerHeight() + rowGap) / (rowHeight + rowGap));
  229.             if (window.innerWidth > 839) {
  230.                 item.css('grid-row-end', '');
  231.             } else {
  232.                 item.css('grid-row-end', 'span ' + rowSpan);
  233.             }
  234.         }
  236.     </script>
  237. {% endblock javascript %}
  239. {% block main %}
  240.     <div class="p-top__main-visual">
  241.         <div class="p-top__main-visual-slide" id="js-top__main-visual-slide">
  242.             <div class="p-top__main-visual-slide-contents swiper-wrapper">
  243.                 <a class="p-top__main-visual-slide-link is-4th swiper-slide" href="{{ url('product_detail', {'id': '680'}) }}">
  244.                     <span class="p-top__main-visual-slide-link-text">Slide4</span>
  245.                 </a>
  246.                 <a class="p-top__main-visual-slide-link is-5th swiper-slide" href="{{ url('product_detail', {'id': '695'}) }}">
  247.                     <span class="p-top__main-visual-slide-link-text">Slide5</span>
  248.                 </a>
  249.                 <a class="p-top__main-visual-slide-link is-2nd swiper-slide" href="{{ url('product_detail', {'id': '687'}) }}">
  250.                     <span class="p-top__main-visual-slide-link-text">Slide2</span>
  251.                 </a>
  252.                 <a class="p-top__main-visual-slide-link is-3rd swiper-slide" href="{{ url('product_detail', {'id': '615'}) }}">
  253.                     <span class="p-top__main-visual-slide-link-text">Slide3</span>
  254.                 </a>
  255.                 <a class="p-top__main-visual-slide-link is-1st swiper-slide" href="{{ url('product_list') }}?category_id=45">
  256.                     <span class="p-top__main-visual-slide-link-text">Slide1</span>
  257.                 </a>
  258.                 
  259.             </div>
  260.             <div class="p-top__main-visual-slide-navi">
  261.                 <div class="p-top__main-visual-slide-navi-prev" id="js-top__main-visual-slide-navi-prev"></div>
  262.                 <div class="p-top__main-visual-slide-navi-next" id="js-top__main-visual-slide-navi-next"></div>
  263.             </div>
  264.         </div>
  265.         <div class="p-top__main-visual-pager">
  266.             <div class="p-top__main-visual-pager-contents" id="js-top__main-visual-pager-contents"></div>
  267.         </div>
  268.         <div class="p-top__main-visual-reading">
  269.             <div class="p-top__main-visual-reading-contents">
  270.                 <div class="p-top__main-visual-copy">
  271.                     <!--<p class="p-top__main-visual-copy--main">meldia Store</p>-->
  272.                     <p class="catcthcopy">Meldia Store</p>
  273.                     <p class="p-top__main-visual-copy--sub">meldia online store</p>
  274.                 </div>
  275.                 <p class="p-top__main-visual-description">meldia Storeは暮らしに必要な商品を<br>特別な価格でお求めいただけるショッピングサイトです</p>
  276.             </div>
  277.         </div>
  278.         <div class="p-top__main-visual-sns">
  279.             <ul class="p-top__main-visual-sns-list">
  280.                 <li class="p-top__main-visual-sns-list-item">
  281.                     <a class="p-top__main-visual-sns-link is-twitter" href="https://twitter.com/meldia_group">Twitter</a>
  282.                 </li>
  283.                 <li class="p-top__main-visual-sns-list-item">
  284.                     <a class="p-top__main-visual-sns-link is-instagram" href="https://www.instagram.com/meldia_group/">Instagram</a>
  285.                 </li>
  286.                 <li class="p-top__main-visual-sns-list-item">
  287.                     <a class="p-top__main-visual-sns-link is-facebook" href="https://www.facebook.com/sanei.archi">Facebook</a>
  288.                 </li>
  289.             </ul>
  290.         </div>
  291.     </div>
  292. {% endblock %}