app/template/user_data/index.twig line 1

Open in your IDE?
  1. {% extends '@user_data/layout/default_frame.twig' %}
  2. {% block title %}
  3.     ZEAMI Goods | こだわり品質グッズ【小ロット1個から】
  4. {% endblock %}
  5. {% block js %}
  6.     <link href="{{ asset('assets/js/swiper/swiper.css') }}" rel="stylesheet" type="text/css">
  7.     <link href="{{ asset('assets/custom_css/slide_campaign.css') }}" rel="stylesheet" type="text/css">
  8.     <script src="{{ asset('assets/js/swiper/swiper.min.js') }}"></script>
  9.     <script src="{{ asset('assets/js/top.js') }}" type="text/javascript"></script>
  10.     <script>
  11.         document.addEventListener('DOMContentLoaded', function () {
  12. document.getElementById('search-form').addEventListener('submit', function (event) {
  13. event.preventDefault();
  14. var form = this;
  15. window.location.hash = 'Item';
  16. setTimeout(function () {
  17. HTMLFormElement.prototype.submit.call(form)
  18. }, 0);
  19. });
  20. });
  21. $(document).ready(function () {
  22. let form = document.getElementById('search-form');
  23. $('input[name="category"]').change(function () {
  24. window.location.hash = 'Item';
  25. HTMLFormElement.prototype.submit.call(form)
  26. });
  27. $('input[type="checkbox"]').change(function () {
  28. window.location.hash = 'Item';
  29. HTMLFormElement.prototype.submit.call(form)
  30. });
  31. });
  32.     </script>
  33. {% endblock %}
  34. {% block css %}
  35.     <style>
  36.         #first_viewList > .swiper-slide {
  37.             width: 728px !important;
  38.         }
  39.         @media(max-width: 728px) {
  40.             #first_viewList > .swiper-slide {
  41.                 width: 100% !important;
  42.                 padding-left: 10px;
  43.                 padding-right: 10px;
  44.             }
  45.             #viewContainer .swiper-slide img {
  46.                 height: 230px !important;
  47.                 border-radius: 26px !important
  48.             }
  49.             #viewContainer {
  50.                 height: 260px !important
  51.             }
  52.         }
  53.         @media print,
  54.         screen and(max-width: 480px) {
  55.             ul#use_Coupon.customer_check_list li {
  56.                 max-width: 100%;
  57.             }
  58.         }
  59.     </style>
  60. {% endblock %}
  61. {% block content %}
  62.     <!-- ▼▼ MAIN CONTENTS __________________________________________________________________________________________________ ▼▼ -->
  63.     <main
  64.         id="mainContents">
  65.         <!-- // == FIRST VIEW ================================================================================ // -->
  66.         <section id="firstView" class="fades">
  67.             <article id="viewContainer" class="swiper-container view_campaign">
  68.                 <ul id="first_viewList" class="swiper-wrapper">
  69.                     {% for campaign in campaigns %}
  70.                         <!-- \\ ☆☆ ONE SLIDE ☆☆ \\ -->
  71.                         <li class="swiper-slide">
  72.                             <a href="/campaign_detail/{{ campaign.id }}">
  73.                                 <img src="{{ asset(campaign.image|no_image_product, 'save_image') }}">
  74.                             </a>
  75.                         </li>
  76.                         <!-- // ☆☆ ONE SLIDE ☆☆ // -->
  77.                     {% endfor %}
  78.                 </ul>
  79.                 <!-- //// ++++ #first_viewList ++++ //// -->
  80.                 <div class="swiper-pagination fades"></div>
  81.                 <!-- ///// #viewContainer +++++ ///// -->
  82.             </article>
  83.         </section>
  84.         <!-- ///// +++++ #firstView +++++ ///// -->
  85.         <!-- // == 受注状況 ================================================================================ // -->
  86.         <section id="Status" class="section_basic fades">
  87.             {% if(season) %}
  88.                 <!-- // ++ 通常時 ++ //////////////////////////////////////////////////////// -->
  89.                 <aside id="order_statusBox" class="fades">
  90.                     <div class="custom_inner">
  91.                         <h4 id="statusHeadline" class="up">現在の受注状況</h4>
  92.                         <div id="orderStatus" class="{{season.code == 'peak_season' ? 'limit' : ''}} up">
  93.                             <p>{{season.note}}</p>
  94.                             <!-- //// ++++ #orderStatus ++++ //// -->
  95.                         </div>
  96.                     </div>
  97.                 </aside>
  98.             {% endif %}
  99.             <!-- ///// #order_statusBox +++++ ///// -->
  100.         </section>
  101.         <!-- ///// +++++ #Status +++++ ///// -->
  102.         <!-- // == トピックス ================================================================================ // -->
  103.         <section id="Topics" class="fades">
  104.             <article id="topicsContainer" class="swiper-container top_news">
  105.                 <ul id="topicsList" class="swiper-wrapper">
  106.                     {% for news in newsList %}
  107.                         <!-- \\ ☆☆ ONE TOPICS ☆☆ \\ -->
  108.                         {% if news.is_notification != true and news.is_notification != 1 %}
  109.                             <li class="swiper-slide">
  110.                                 <a href="news_article/{{ news.id}}">
  111.                                     <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">
  112.                                     <div class="topics_titlebox">
  113.                                         <h5 class="top_topicstitle ">{{news.title}}</h5>
  114.                                         <p class="topics_update ">{{ news.publish_date|date('Y.m.d D') }}</p>
  115.                                         <!-- //// **** .topics_titlebox ***** //// -->
  116.                                     </div>
  117.                                 </a>
  118.                             </li>
  119.                         {% endif %}
  120.                         <!-- // ☆☆ ONE TOPICS ☆☆ // -->
  121.                     {% endfor %}
  122.                 </ul>
  123.                 <!-- //// ++++ #topicsList ++++ //// -->
  124.                 <!-- ///// #newsContainer +++++ ///// -->
  125.             </article>
  126.             <!-- // ++ 最新ニュース ++ //////////////////////////////////////////////////////// -->
  127.             <div id="latest_newsArea" class="fades">
  128.                 <dl id="whats_newContainer">
  129.                     <dt>
  130.                         <p class="up">お知らせ</p>
  131.                     </dt>
  132.                     <dd>
  133.                         {% if newsNoti is not null %}
  134.                             <div id="wtn_titleBox">
  135.                                 <span id="wtnDate" class="up">{{ newsNoti.publish_date|date('Y.m.d') }}</span>
  136.                                 <h5 id="wthTitle" class="up">
  137.                                     <a href="/news_article/{{ newsNoti.id }}">{{ newsNoti.title }}</a>
  138.                                 </h5>
  139.                             </div>
  140.                         {% endif %}
  141.                     </dd>
  142.                 </dl>
  143.                 <!-- //// ++++ #whats_newContainer ++++ //// -->
  144.                 <!-- ///// #latest_newsArea +++++ ///// -->
  145.             </div>
  146.         </section>
  147.         <!-- ///// +++++ #Topics +++++ ///// -->
  148.         <!-- // == 大口注文 ================================================================================ // -->
  149.         <section id="largeOrder" class="fades">
  150.             <div class="custom_inner">
  151.                 <aside id="info_bnrArea">
  152.                     <h4 id="info_bnrTitle">大口注文<p>特別注文窓口のご案内</p>
  153.                     </h4>
  154.                     <p id="btn_infoBnr">
  155.                         <a href="/inquiry">詳しく見る</a>
  156.                     </p>
  157.                     <!-- ///// #info_bnrArea +++++ ///// -->
  158.                 </aside>
  159.             </div>
  160.         </section>
  161.         <!-- ///// +++++ #largeOrder +++++ ///// -->
  162.         <!-- // == アイテム一覧 ================================================================================ // -->
  163.         <section id="Item" class="section_basic fades">
  164.             <h3 class="top_section_title" class="up">アイテム一覧<p class="up">以下のカテゴリーを選択してください</p>
  165.             </h3>
  166.             <form
  167.                 action="" id="search-form">
  168.                 <!-- // ++ カテゴリーリンク ++ /////////////////////////////////////////////////////// -->
  169.                 <div id="item_categoryBox">
  170.                     <ul id="item_categoryList" class="fades">
  171.                         <li class="up on">
  172.                             <label class="up"><input type="radio" {{ form.category_id == '' ? 'checked' : '' }} name="category" value="" class="input_cat"><span class="item_cat_name">全て</span>
  173.                             </label>
  174.                         </li>
  175.                         {% for cate in categories %}
  176.                             <li class="up">
  177.                                 <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>
  178.                                 </label>
  179.                             </li>
  180.                         {% endfor %}
  181.                     </ul>
  182.                     <!-- //// ++++ #item_categoryList ++++ //// -->
  183.                     <!-- ///// #item_categoryList +++++ ///// -->
  184.                 </div>
  185.                 <!-- // ++ カテゴリーリンク ++ /////////////////////////////////////////////////////// -->
  186.                 <div id="searchboxArea" class="input_content fades">
  187.                     <div class="search_inner">
  188.                         <dl id="searchBox" class="fades">
  189.                             <dt class="up"><input type="text" name="name" value="{{ form.name }}" placeholder="キーワード検索" class="form_txt"></dt>
  190.                             <dd class="up"><input type="submit" name="submit" value="submit" class="btn_search"></dd>
  191.                             <!-- //// ++++ #searchBox ++++ //// -->
  192.                         </dl>
  193.                         <ul id="search_checkList" class="fades">
  194.                             {% for tag in tags %}
  195.                                 <li class="up">
  196.                                     <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>
  197.                                     </label>
  198.                                 </li>
  199.                             {% endfor %}
  200.                             <!-- //// ++++ #search_checkList ++++ //// -->
  201.                         </ul>
  202.                     </div>
  203.                     <!-- //// **** .search_inner **** //// -->
  204.                     <!-- ///// #searchboxArea +++++ ///// -->
  205.                 </div>
  206.                 <!-- // ++ アイテム一覧 ++ /////////////////////////////////////////////////////// -->
  207.                 <article id="item_listConainer">
  208.                     <ul id="top_itemList">
  209.                         {% for product in products %}
  210.                             {% set firstCategory = product.productCategories|first %}
  211.                             <!-- \\ ☆☆ ONE ITEM ☆☆ \\-->
  212.                             <li class="one_item up">
  213.                                 <a href="/product/{{ product.id }}">
  214.                                     <dl class="top_item_body">
  215.                                         <dt class="top_itemthumb up">
  216.                                             <img src="{{ asset('assets/img/space.gif') }}" style="background-image:url('{{ asset(product.mainFileName|no_image_product, 'save_image') }}');">
  217.                                         </dt>
  218.                                         <!-- //// .top_itemthumb **** //// -->
  219.                                         <dd class="top_iteminfobox">
  220.                                             <h4 class="top_itemname up">
  221.                                                 {{ firstCategory ? firstCategory.Category.name : '' }}
  222.                                                 {{product.name}}</h4>
  223.                                             <p class="top_itemprice up">
  224.                                                 <span>1枚あたり</span>
  225.                                                 {{ product.price02_min|price }}
  226.                                                 {% if product.price02_min != product.price02_max %}
  227.                                                     {{ 'admin.common.separator__range'|trans }}{{ product.price02_max|price }}
  228.                                                 {% endif %}〜</p>
  229.                                         </dd>
  230.                                         <!-- //// .top_iteminfobox **** //// -->
  231.                                         <!-- //// **** .top_item_body **** //// -->
  232.                                     </dl>
  233.                                 </a>
  234.                             </li>
  235.                             <!-- // ☆☆ ONE ITEM ☆☆ // -->
  236.                         {% endfor %}
  237.                     </ul>
  238.                     <!-- //// ++++ #top_itemList ++++ //// -->
  239.                     <!-- ///// #item_listConainer +++++ ///// -->
  240.                 </article>
  241.             </form>
  242.         </section>
  243.         <!-- ///// +++++ #Item +++++ ///// -->
  244.         <!-- // == アイテム一覧 ================================================================================ // -->
  245.         <section id="Coupon" class="section_basic fades">
  246.             <h3 class="top_section_title" class="up">現在配布中のクーポン</h3>
  247.             <aside id="top_couponBox">
  248.                 <ul id="use_Coupon" class="customer_check_list up">
  249.                     {% for Coupon in couponPro %}
  250.                         <!-- ☆☆ CHECK ONE ☆☆-->
  251.                         <li class="one_check type_check">
  252.                             <a {% if Coupon.trans_url %} href="{{ Coupon.trans_url }}" target="_blank" {% endif %} style="text-decoration: none; color: inherit; height: 100%;">
  253.                                 <aside class="coupon_box type-{{Coupon.CouponKind.id == 2 ? 'percent' : 'yen'}}_off" style="height: 100%; display: flex; flex-direction: column;">
  254.                                     <div class="coupon_titlebox">
  255.                                         <p class="tiny">{{Coupon.coupon_name}}</p>
  256.                                         <h5 class="coupon_title">{{Coupon.CouponKind.id == 2 ? Coupon.discount_rate : (Coupon.discount_price | round )}}{{Coupon.CouponKind.id == 2 ? '%':'円'}}
  257.                                             OFF</h5>
  258.                                     </div>
  259.                                     <!-- /// .coupon_titlebox *** /// -->
  260.                                     <div class="coupon_main" style="flex: 1; padding-bottom: 0px">
  261.                                         <p class="coupon_caution">有効期限:{{ Coupon.available_to|date('Y年n月j日') }}まで</p>
  262.                                         <div class="coupon-wrap-list-sub">
  263.                                             <dl class="coupon_detail">
  264.                                                 <dt>{{ 'front.mypage.coupon.terms_of_use'|trans }}</dt>
  265.                                                 <dd>
  266.                                                     {% set useConditions = [] %}
  267.                                                     {% if Coupon.issued %}
  268.                                                         {% set useConditions = useConditions|merge(['front.mypage.coupon.issued_format'|trans({'%issued%':Coupon.issued})]) %}
  269.                                                     {% endif %}
  270.                                                     {% if Coupon.min_price %}
  271.                                                         {% set useConditions = useConditions|merge([Coupon.min_price|number_format~'front.mypage.coupon.min_price_format'|trans]) %}
  272.                                                     {% endif %}
  273.                                                     {% if Coupon.customer_available %}
  274.                                                         {% set useConditions = useConditions|merge(['front.mypage.coupon.customer_available'|trans({'%customer_available%':Coupon.customer_available})]) %}
  275.                                                     {% endif %}
  276.                                                     {% if useConditions is empty %}
  277.                                                         {{ 'front.mypage.coupon.terms_of_use.nothing'|trans }}
  278.                                                     {% else %}
  279.                                                         {{ useConditions|join('、') }}
  280.                                                     {% endif %}
  281.                                                 </dd>
  282.                                             </dl>
  283.                                             <dl class="coupon_detail">
  284.                                                 <dt>{{ 'front.mypage.coupon.target_category'|trans }}</dt>
  285.                                                 <dd>
  286.                                                     {% if Coupon.getTargetCategories is not empty %}
  287.                                                         {% for CategoryId, CategoryName in Coupon.getTargetCategories|slice(0, 3, true) %}
  288.                                                             {% if not loop.first %}
  289.                                                                 、
  290.                                                             {% endif %}
  291.                                                             <object>{{ CategoryName }}</object>
  292.                                                         {% endfor %}
  293.                                                         {% if Coupon.getTargetCategories | length > 3 %}
  294.                                                             など
  295.                                                         {% endif %}
  296.                                                     {% else %}
  297.                                                         {{ 'front.mypage.coupon.terms_of_use.nothing'|trans }}
  298.                                                     {% endif %}
  299.                                                 </dd>
  300.                                             </dl>
  301.                                             <dl class="coupon_detail">
  302.                                                 <dt>{{ 'common.coupon.target_product'|trans }}</dt>
  303.                                                 <dd>
  304.                                                     {% if Coupon.getTargetProducts is not empty %}
  305.                                                         {% for ProductId, ProductName in Coupon.getTargetProducts|slice(0, 3, true) %}
  306.                                                             {% if not loop.first %}
  307.                                                                 、
  308.                                                             {% endif %}
  309.                                                             {% if Coupon.issued %}
  310.                                                                 <object>{{ ProductName }}</object>
  311.                                                             {% else %}
  312.                                                                 <object>
  313.                                                                     <a class="coupon-wrap-list-sub-link" href="/product/{{ ProductId }}">
  314.                                                                         {{ ProductName }}
  315.                                                                     </a>
  316.                                                                 </object>
  317.                                                             {% endif %}
  318.                                                         {% endfor %}
  319.                                                         {% if Coupon.getTargetProducts | length > 3 %}
  320.                                                             など
  321.                                                         {% endif %}
  322.                                                     {% else %}
  323.                                                         {{ 'front.mypage.coupon.terms_of_use.nothing'|trans }}
  324.                                                     {% endif %}
  325.                                                 </dd>
  326.                                             </dl>
  327.                                         </div>
  328.                                     </div>
  329.                                     <!-- /// .coupon_main *** /// -->
  330.                                     <!-- /// *** .coupon_box *** /// -->
  331.                                 </aside>
  332.                             </a>
  333.                         </li>
  334.                     {% endfor %}
  335.                     <!-- /// *** .customer_check_list *** /// -->
  336.                 </ul>
  337.                 <!-- //// ++++ #top_couponBox ++++ //// -->
  338.             </aside>
  339.         </section>
  340.         <!-- ///// #Coupon +++++ ///// -->
  341.         <!-- ///// +++++ #mainContents +++++ ///// -->
  342.     </main>
  343. {% endblock %}