Symfony Profiler

{#
This file is part of EC-CUBE
Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
http://www.ec-cube.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}
{% set body_class = 'front_page' %}
{% block stylesheet %}
<style>
.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -45px;
display: block;
width: 100%;
padding: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
content: " ";
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 12px;
text-align: center;
opacity: .25;
background-color: black;
border-radius: 50%;
}
.slick-dots li.slick-active button:before {
opacity: .75;
background-color: black;
}
.slick-dots li button.thumbnail img {
width: 0;
height: 0;
}
</style>
{% endblock %}
{% block javascript %}
<script>
const worksSplide = new Splide('.works-slide-wrap', {
perPage: 4,
perMove: 1,
rewind: true,
gap: '40px',
autoWidth: true,
pagination: true,
breakpoints: {
769: {
perPage: 1,
focus: 'center',
trimSpace: false,
gap: '50px',
},
}
});
worksSplide.mount();
const bannerSplide = new Splide('.main-visual__banner', {
perPage: 1,
focus: 'center',
type: 'loop',
gap: '10px',
padding: '30px',
mediaQuery: 'min',
breakpoints: {
769: {
destroy: true,
},
}
});
bannerSplide.mount();
</script>
{% endblock javascript %}
{% block main %}
<section class="main-visual">
<div class="main-visual__video">
<video src="{{ asset('assets/img/top/madoba_fv_video01.mp4') }}" class="mv-video" autoplay muted loop playsinline></video>
<div class="mv-catch">
<div class="mv-catch__text">毎日の暮らしを良質に。<br>街並みを美しく。</div>
<a href="{{ url('history') }}" class="link-block en-font mv-catch__button btn-design01">Our history</a>
</div>
</div>
<div class="splide main-visual__banner" role="group" aria-label="banner-slider">
<div class="splide__track">
<ul class="mv-banner-wrap splide__list">
<li class="mv-banner-item splide__slide">
<a href="https://tokyogumi.co.jp/showroom/" target="_blank">
<div class="mv-banner-item__text mv-banner-text">
<p class="mv-banner-text__heading">
<span>東京ショールーム</span>
</p>
<p class="mv-banner-text__sub-heading">Show Room in Tokyo</p>
</div>
<img src="{{ asset('assets/img/top/fv_banner01.jpg') }}" alt="" srcset="{{ asset('assets/img/top/fv_banner01.jpg') }} 1x, {{ asset('assets/img/top/fv_banner01@2x.jpg') }} 2x">
</a>
</li>
<li class="mv-banner-item splide__slide">
<a href="https://madoba.jp/wp/showroom.html" target="_blank">
<div class="mv-banner-item__text mv-banner-text">
<p class="mv-banner-text__heading">
<span>青森ショールーム</span>
</p>
<p class="mv-banner-text__sub-heading">Show Room in Aomori</p>
</div>
<img src="{{ asset('assets/img/top/fv_banner02.jpg') }}" alt="" srcset="{{ asset('assets/img/top/fv_banner02.jpg') }} 1x, {{ asset('assets/img/top/fv_banner02@2x.jpg') }} 2x">
</a>
</li>
<li class="mv-banner-item splide__slide">
<a href="https://madoba.jp/news/" target="_blank">
<div class="mv-banner-item__text mv-banner-text">
<p class="mv-banner-text__heading">
<span>その他イベント情報</span>
</p>
<p class="mv-banner-text__sub-heading">News & Event</p>
</div>
<img src="{{ asset('assets/img/top/fv_banner03.jpg') }}" alt="" srcset="{{ asset('assets/img/top/fv_banner03.jpg') }} 1x, {{ asset('assets/img/top/fv_banner03@2x.jpg') }} 2x">
</a>
</li>
</ul>
</div>
</div>
</section>
<section class="top-works">
<div class="inner sp-full">
<div class="top-works__heading top-works-heading">
<p class="en-font top-works-heading__lead"><span>Our works</span></p>
<span class="top-works-heading__line"></span>
<p class="top-works-heading__caption">わたしたちの家づくりを体験する</p>
</div>
<div class="splide top-works__slider works-slide-wrap" role="group" aria-label="works-slider">
<div class="splide__arrows works-arrows">
<button class="splide__arrow splide__arrow--prev">
<svg class="icon">
<use xlink:href="assets/img/common/sprite.svg#icon-arrow01"></use>
</svg>
</button>
<button class="splide__arrow splide__arrow--next">
<svg class="icon">
<use xlink:href="assets/img/common/sprite.svg#icon-arrow01"></use>
</svg>
</button>
</div>
<div class="splide__track">
<ul class="splide__list">
{# 施工事例一覧 #}
{% for Construction in Constructions %}
<li class="works-slide splide__slide">
<div class="works-slide__num en-font">
<p><span>Case</span>{{ Construction.id }}</p>
</div>
<p class="works-slide__text">
<span>{{ Construction.title }}</span>
</p>
<div class="works-slide__image-wrap">
<img src="{{ asset(attribute(Construction, 'fileName' ~ 1)|no_image_product, 'save_image') }}" alt="{{ Construction.title }}">
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
<a href="{{ url('work') }}" class="top-works__button btn-design02">一覧で表示</a>
</div>
</section>
<section class="top-product products-wrap">
<div class="inner sp-full">
{{ include('Block/sidebar.twig') }}
<div class="product-main">
{## Pickup items ##}
<div class="pickup-items-wrap">
<div class="heading-design01">
<div class="heading-design01-wrap">
<p class="heading-design01__lead en-font">Pickup items</p>
<p class="heading-design01__caption">
<span>MADOBAシリーズ</span>
</p>
</div>
</div>
<div class="item-intro-deisgn01">
<div class="item-intro-deisgn01__image-wrap">
<img src="{{ asset('assets/img/top/product_pickup-items_image.jpg') }}" alt="" srcset="{{ asset('assets/img/top/product_pickup-items_image.jpg') }} 1x, {{ asset('assets/img/top/product_pickup-items_image@2x.jpg') }} 2x">
</div>
<div class="item-intro-deisgn01__text">
<p class="lead">サンプルテキストサンプルテキストサンプルテキスト</p>
<p class="text">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</div>
</div>
{% if Category1Products|length > 0 %}
<div class="category-items-wrap">
<div class="category-items-wrap__heading">
<p class="lead">MADOBAシリーズ</p>
<a href="{{ url('product_list') }}?category_id=1" class="link-txt">すべて見る</a>
</div>
<div class="splide category-slider" role="group" aria-label="category-slider" data-splide='{"perPage":4}'>
<div class="splide__arrows works-arrows">
<button class="splide__arrow splide__arrow--prev">
<svg class="icon">
<use xlink:href="assets/img/common/sprite.svg#icon-arrow01"></use>
</svg>
</button>
<button class="splide__arrow splide__arrow--next">
<svg class="icon">
<use xlink:href="assets/img/common/sprite.svg#icon-arrow01"></use>
</svg>
</button>
</div>
<div class="splide__track">
<ul class="splide__list">
{## MADOBAシリーズの商品一覧 ##}
{% for Product in Category1Products %}
<li class="splide__slide category-slide-list">
<a href="{{ url('product_detail', {'id': Product.id}) }}">
<div class="category-slide-list__image-wrap">
<img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}">
</div>
<div class="category-slide-list__text product-list-text">
<p class="product-list-text__code">{% if Product.code_min is not empty %}{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}{% endif %}</p>
<p class="product-list-text__name">{{ Product.name }}</p>
<p class="product-list-text__price en-font">
{% if Product.hasProductClass %}
{% if Product.getPrice02Min == Product.getPrice02Max %}
{{ Product.getPrice02IncTaxMin|price }}
{% else %}
{{ Product.getPrice02IncTaxMin|price }}
～
{{ Product.getPrice02IncTaxMax|price }}
{% endif %}
{% else %}
{{ Product.getPrice02IncTaxMin|price }}
{% endif %}
</p>
</div>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</div>
{## 建材カテゴリ（表示対象のカテゴリは app/config/eccube/services.yaml で指定） ##}
{% for CategoriesProduct in CategoriesProducts %}
{% if CategoriesProduct.products|length > 0 %}
<div class="category-items-wrap">
<div class="category-items-wrap__heading">
<p class="lead">{{ CategoriesProduct.category_name }}</p>
<a href="{{ url('product_list') }}?category_id={{ CategoriesProduct.category_id }}" class="link-txt">すべて見る</a>
</div>
<div class="splide category-slider" role="group" aria-label="category-slider" data-splide='{"perPage":4}'>
<div class="splide__arrows works-arrows">
<button class="splide__arrow splide__arrow--prev">
<svg class="icon">
<use xlink:href="assets/img/common/sprite.svg#icon-arrow01"></use>
</svg>
</button>
<button class="splide__arrow splide__arrow--next">
<svg class="icon">
<use xlink:href="assets/img/common/sprite.svg#icon-arrow01"></use>
</svg>
</button>
</div>
<div class="splide__track">
<ul class="splide__list">
{## 建材カテゴリの商品一覧 ##}
{% for Product in CategoriesProduct.products %}
<li class="splide__slide category-slide-list">
<a href="{{ url('product_detail', {'id': Product.id}) }}">
<div class="category-slide-list__image-wrap">
<img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}">
</div>
<div class="category-slide-list__text product-list-text">
<p class="product-list-text__code">{% if Product.code_min is not empty %}{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}{% endif %}</p>
<p class="product-list-text__name">{{ Product.name }}</p>
<p class="product-list-text__price en-font">
{% if Product.hasProductClass %}
{% if Product.getPrice02Min == Product.getPrice02Max %}
{{ Product.getPrice02IncTaxMin|price }}
{% else %}
{{ Product.getPrice02IncTaxMin|price }}
～
{{ Product.getPrice02IncTaxMax|price }}
{% endif %}
{% else %}
{{ Product.getPrice02IncTaxMin|price }}
{% endif %}
</p>
</div>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</section>
{% endblock %}

app/template/default/index.twig line 1