{% extends '@user_data/layout/default_frame.twig' %}
{% block title %}
ZEAMI Goods | こだわり品質グッズ【小ロット1個から】
{% endblock %}
{% block js %}
<link href="{{ asset('assets/js/swiper/swiper.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('assets/custom_css/slide_campaign.css') }}" rel="stylesheet" type="text/css">
<script src="{{ asset('assets/js/swiper/swiper.min.js') }}"></script>
<script src="{{ asset('assets/js/top.js') }}" type="text/javascript"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('search-form').addEventListener('submit', function (event) {
event.preventDefault();
var form = this;
window.location.hash = 'Item';
setTimeout(function () {
HTMLFormElement.prototype.submit.call(form)
}, 0);
});
});
$(document).ready(function () {
let form = document.getElementById('search-form');
$('input[name="category"]').change(function () {
window.location.hash = 'Item';
HTMLFormElement.prototype.submit.call(form)
});
$('input[type="checkbox"]').change(function () {
window.location.hash = 'Item';
HTMLFormElement.prototype.submit.call(form)
});
});
</script>
{% endblock %}
{% block css %}
<style>
#first_viewList > .swiper-slide {
width: 728px !important;
}
@media(max-width: 728px) {
#first_viewList > .swiper-slide {
width: 100% !important;
padding-left: 10px;
padding-right: 10px;
}
#viewContainer .swiper-slide img {
height: 230px !important;
border-radius: 26px !important
}
#viewContainer {
height: 260px !important
}
}
@media print,
screen and(max-width: 480px) {
ul#use_Coupon.customer_check_list li {
max-width: 100%;
}
}
</style>
{% endblock %}
{% block content %}
<!-- ▼▼ MAIN CONTENTS __________________________________________________________________________________________________ ▼▼ -->
<main
id="mainContents">
<!-- // == FIRST VIEW ================================================================================ // -->
<section id="firstView" class="fades">
<article id="viewContainer" class="swiper-container view_campaign">
<ul id="first_viewList" class="swiper-wrapper">
{% for campaign in campaigns %}
<!-- \\ ☆☆ ONE SLIDE ☆☆ \\ -->
<li class="swiper-slide">
<a href="/campaign_detail/{{ campaign.id }}">
<img src="{{ asset(campaign.image|no_image_product, 'save_image') }}">
</a>
</li>
<!-- // ☆☆ ONE SLIDE ☆☆ // -->
{% endfor %}
</ul>
<!-- //// ++++ #first_viewList ++++ //// -->
<div class="swiper-pagination fades"></div>
<!-- ///// #viewContainer +++++ ///// -->
</article>
</section>
<!-- ///// +++++ #firstView +++++ ///// -->
<!-- // == 受注状況 ================================================================================ // -->
<section id="Status" class="section_basic fades">
{% if(season) %}
<!-- // ++ 通常時 ++ //////////////////////////////////////////////////////// -->
<aside id="order_statusBox" class="fades">
<div class="custom_inner">
<h4 id="statusHeadline" class="up">現在の受注状況</h4>
<div id="orderStatus" class="{{season.code == 'peak_season' ? 'limit' : ''}} up">
<p>{{season.note}}</p>
<!-- //// ++++ #orderStatus ++++ //// -->
</div>
</div>
</aside>
{% endif %}
<!-- ///// #order_statusBox +++++ ///// -->
</section>
<!-- ///// +++++ #Status +++++ ///// -->
<!-- // == トピックス ================================================================================ // -->
<section id="Topics" class="fades">
<article id="topicsContainer" class="swiper-container top_news">
<ul id="topicsList" class="swiper-wrapper">
{% for news in newsList %}
<!-- \\ ☆☆ ONE TOPICS ☆☆ \\ -->
{% if news.is_notification != true and news.is_notification != 1 %}
<li class="swiper-slide">
<a href="news_article/{{ news.id}}">
<img src="{{ asset('assets/img/top/top_news_thumb.gif') }}" style="background-image: url('{{ asset(news.image|no_image_product, 'save_image') }}');" class="topics_photo">
<div class="topics_titlebox">
<h5 class="top_topicstitle ">{{news.title}}</h5>
<p class="topics_update ">{{ news.publish_date|date('Y.m.d D') }}</p>
<!-- //// **** .topics_titlebox ***** //// -->
</div>
</a>
</li>
{% endif %}
<!-- // ☆☆ ONE TOPICS ☆☆ // -->
{% endfor %}
</ul>
<!-- //// ++++ #topicsList ++++ //// -->
<!-- ///// #newsContainer +++++ ///// -->
</article>
<!-- // ++ 最新ニュース ++ //////////////////////////////////////////////////////// -->
<div id="latest_newsArea" class="fades">
<dl id="whats_newContainer">
<dt>
<p class="up">お知らせ</p>
</dt>
<dd>
{% if newsNoti is not null %}
<div id="wtn_titleBox">
<span id="wtnDate" class="up">{{ newsNoti.publish_date|date('Y.m.d') }}</span>
<h5 id="wthTitle" class="up">
<a href="/news_article/{{ newsNoti.id }}">{{ newsNoti.title }}</a>
</h5>
</div>
{% endif %}
</dd>
</dl>
<!-- //// ++++ #whats_newContainer ++++ //// -->
<!-- ///// #latest_newsArea +++++ ///// -->
</div>
</section>
<!-- ///// +++++ #Topics +++++ ///// -->
<!-- // == 大口注文 ================================================================================ // -->
<section id="largeOrder" class="fades">
<div class="custom_inner">
<aside id="info_bnrArea">
<h4 id="info_bnrTitle">大口注文<p>特別注文窓口のご案内</p>
</h4>
<p id="btn_infoBnr">
<a href="/inquiry">詳しく見る</a>
</p>
<!-- ///// #info_bnrArea +++++ ///// -->
</aside>
</div>
</section>
<!-- ///// +++++ #largeOrder +++++ ///// -->
<!-- // == アイテム一覧 ================================================================================ // -->
<section id="Item" class="section_basic fades">
<h3 class="top_section_title" class="up">アイテム一覧<p class="up">以下のカテゴリーを選択してください</p>
</h3>
<form
action="" id="search-form">
<!-- // ++ カテゴリーリンク ++ /////////////////////////////////////////////////////// -->
<div id="item_categoryBox">
<ul id="item_categoryList" class="fades">
<li class="up on">
<label class="up"><input type="radio" {{ form.category_id == '' ? 'checked' : '' }} name="category" value="" class="input_cat"><span class="item_cat_name">全て</span>
</label>
</li>
{% for cate in categories %}
<li class="up">
<label class="up"><input type="radio" name="category" {{ cate.id == form.category_id ? 'checked' : '' }} value="{{ cate.id }}" class="input_cat"><span class="item_cat_name">{{cate.name}}</span>
</label>
</li>
{% endfor %}
</ul>
<!-- //// ++++ #item_categoryList ++++ //// -->
<!-- ///// #item_categoryList +++++ ///// -->
</div>
<!-- // ++ カテゴリーリンク ++ /////////////////////////////////////////////////////// -->
<div id="searchboxArea" class="input_content fades">
<div class="search_inner">
<dl id="searchBox" class="fades">
<dt class="up"><input type="text" name="name" value="{{ form.name }}" placeholder="キーワード検索" class="form_txt"></dt>
<dd class="up"><input type="submit" name="submit" value="submit" class="btn_search"></dd>
<!-- //// ++++ #searchBox ++++ //// -->
</dl>
<ul id="search_checkList" class="fades">
{% for tag in tags %}
<li class="up">
<label class="up"><input type="checkbox" {{ tag.id in form.tags ? 'checked' : '' }} name="tags[]" value="{{tag.id}}" id=""/><span class="check_text">{{tag.name}}</span>
</label>
</li>
{% endfor %}
<!-- //// ++++ #search_checkList ++++ //// -->
</ul>
</div>
<!-- //// **** .search_inner **** //// -->
<!-- ///// #searchboxArea +++++ ///// -->
</div>
<!-- // ++ アイテム一覧 ++ /////////////////////////////////////////////////////// -->
<article id="item_listConainer">
<ul id="top_itemList">
{% for product in products %}
{% set firstCategory = product.productCategories|first %}
<!-- \\ ☆☆ ONE ITEM ☆☆ \\-->
<li class="one_item up">
<a href="/product/{{ product.id }}">
<dl class="top_item_body">
<dt class="top_itemthumb up">
<img src="{{ asset('assets/img/space.gif') }}" style="background-image:url('{{ asset(product.mainFileName|no_image_product, 'save_image') }}');">
</dt>
<!-- //// .top_itemthumb **** //// -->
<dd class="top_iteminfobox">
<h4 class="top_itemname up">
{{ firstCategory ? firstCategory.Category.name : '' }}
{{product.name}}</h4>
<p class="top_itemprice up">
<span>1枚あたり</span>
{{ product.price02_min|price }}
{% if product.price02_min != product.price02_max %}
{{ 'admin.common.separator__range'|trans }}{{ product.price02_max|price }}
{% endif %}〜</p>
</dd>
<!-- //// .top_iteminfobox **** //// -->
<!-- //// **** .top_item_body **** //// -->
</dl>
</a>
</li>
<!-- // ☆☆ ONE ITEM ☆☆ // -->
{% endfor %}
</ul>
<!-- //// ++++ #top_itemList ++++ //// -->
<!-- ///// #item_listConainer +++++ ///// -->
</article>
</form>
</section>
<!-- ///// +++++ #Item +++++ ///// -->
<!-- // == アイテム一覧 ================================================================================ // -->
<section id="Coupon" class="section_basic fades">
<h3 class="top_section_title" class="up">現在配布中のクーポン</h3>
<aside id="top_couponBox">
<ul id="use_Coupon" class="customer_check_list up">
{% for Coupon in couponPro %}
<!-- ☆☆ CHECK ONE ☆☆-->
<li class="one_check type_check">
<a {% if Coupon.trans_url %} href="{{ Coupon.trans_url }}" target="_blank" {% endif %} style="text-decoration: none; color: inherit; height: 100%;">
<aside class="coupon_box type-{{Coupon.CouponKind.id == 2 ? 'percent' : 'yen'}}_off" style="height: 100%; display: flex; flex-direction: column;">
<div class="coupon_titlebox">
<p class="tiny">{{Coupon.coupon_name}}</p>
<h5 class="coupon_title">{{Coupon.CouponKind.id == 2 ? Coupon.discount_rate : (Coupon.discount_price | round )}}{{Coupon.CouponKind.id == 2 ? '%':'円'}}
OFF</h5>
</div>
<!-- /// .coupon_titlebox *** /// -->
<div class="coupon_main" style="flex: 1; padding-bottom: 0px">
<p class="coupon_caution">有効期限:{{ Coupon.available_to|date('Y年n月j日') }}まで</p>
<div class="coupon-wrap-list-sub">
<dl class="coupon_detail">
<dt>{{ 'front.mypage.coupon.terms_of_use'|trans }}</dt>
<dd>
{% set useConditions = [] %}
{% if Coupon.issued %}
{% set useConditions = useConditions|merge(['front.mypage.coupon.issued_format'|trans({'%issued%':Coupon.issued})]) %}
{% endif %}
{% if Coupon.min_price %}
{% set useConditions = useConditions|merge([Coupon.min_price|number_format~'front.mypage.coupon.min_price_format'|trans]) %}
{% endif %}
{% if Coupon.customer_available %}
{% set useConditions = useConditions|merge(['front.mypage.coupon.customer_available'|trans({'%customer_available%':Coupon.customer_available})]) %}
{% endif %}
{% if useConditions is empty %}
{{ 'front.mypage.coupon.terms_of_use.nothing'|trans }}
{% else %}
{{ useConditions|join('、') }}
{% endif %}
</dd>
</dl>
<dl class="coupon_detail">
<dt>{{ 'front.mypage.coupon.target_category'|trans }}</dt>
<dd>
{% if Coupon.getTargetCategories is not empty %}
{% for CategoryId, CategoryName in Coupon.getTargetCategories|slice(0, 3, true) %}
{% if not loop.first %}
、
{% endif %}
<object>{{ CategoryName }}</object>
{% endfor %}
{% if Coupon.getTargetCategories | length > 3 %}
など
{% endif %}
{% else %}
{{ 'front.mypage.coupon.terms_of_use.nothing'|trans }}
{% endif %}
</dd>
</dl>
<dl class="coupon_detail">
<dt>{{ 'common.coupon.target_product'|trans }}</dt>
<dd>
{% if Coupon.getTargetProducts is not empty %}
{% for ProductId, ProductName in Coupon.getTargetProducts|slice(0, 3, true) %}
{% if not loop.first %}
、
{% endif %}
{% if Coupon.issued %}
<object>{{ ProductName }}</object>
{% else %}
<object>
<a class="coupon-wrap-list-sub-link" href="/product/{{ ProductId }}">
{{ ProductName }}
</a>
</object>
{% endif %}
{% endfor %}
{% if Coupon.getTargetProducts | length > 3 %}
など
{% endif %}
{% else %}
{{ 'front.mypage.coupon.terms_of_use.nothing'|trans }}
{% endif %}
</dd>
</dl>
</div>
</div>
<!-- /// .coupon_main *** /// -->
<!-- /// *** .coupon_box *** /// -->
</aside>
</a>
</li>
{% endfor %}
<!-- /// *** .customer_check_list *** /// -->
</ul>
<!-- //// ++++ #top_couponBox ++++ //// -->
</aside>
</section>
<!-- ///// #Coupon +++++ ///// -->
<!-- ///// +++++ #mainContents +++++ ///// -->
</main>
{% endblock %}