app/template/default/Product/list.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% set body_class = 'product_page' %}
  3. {% block main %}
  4. <style type="text/css">
  5. .aki-btn-default {
  6.     background-color: #cacaca;
  7. }
  8. .form-select{
  9.     color: #333333;
  10. }
  11. .caption-price strong{
  12.     color: #333333;
  13.     font-weight: 600;
  14. }
  15. .caption-price li:last-child {
  16.     margin-top: 5px;
  17. }
  18. </style>
  19.     <div class="row">
  20.         <div class="col-12 text-center">
  21.             <h2 class="aki-title-zen mb20">{{ subtitle }}の{{ title }}</h2>
  22.             <p>
  23.                 {% if Category is not null %}
  24.                   {% if Category.id == 34 %}
  25.                     花嫁様のハレの日の装い、白無垢に綿帽子、色打掛、引き着など多数ご用意いたしました。<br>
  26.                     ヘア、メイク、着つけ、写真撮影まで全て承ります。詳細はご相談ください。
  27.                   {% elseif Category.id == 35 %}
  28.                     七五三は成長の節目の数え年三歳、五歳、七歳の身祝いです。<br>
  29.                     千歳飴を手に11月15日に氏神様にお参りしますが、天候やお子様の体調を考慮した日程でもよろしいでしょう。<br>
  30.                     <br>
  31.                     七歳の女児は「帯解の祝い」と言われ、着物のつけ紐を取り、帯を結ぶ儀式です。<br>
  32.                     七歳は、花嫁の子供バージョンになります。新日本髪に結って、三点セットの髪飾りで華やかに装いましょう。
  33.                   {% elseif Category.id == 36 %}
  34.                     七五三は成長の節目の数え年三歳、五歳、七歳の見祝いです。<br>
  35.                     千歳飴を手に11月15日に氏神様にお参りしますが、天候やお子様の体調を考慮した日程でもよろしいでしょう。<br>
  36.                     <br>
  37.                     男児は五歳になると幼年から少年になったことを祝い、初めて袴をつける儀式で「袴着の祝い」といわれます。<br>
  38.                     凛々しい袴スタイルのお祝い着を多数ご用意いたしました。
  39.                   {% elseif Category.id == 37 %}
  40.                     七五三は成長の節目の数え年三歳、五歳、七歳の見祝いです。<br>
  41.                     千歳飴を手に11月15日に氏神様にお参りしますが、天候やお子様の体調を考慮した日程でもよろしいでしょう。<br>
  42.                     <br>
  43.                     かつては数え年三歳の男女は、髪を伸ばし、すが糸を白髪になぞらえて子供の頭にのせ、<br>
  44.                     健康と長寿を祝う儀式「髪置の祝い」を行っていました。三歳のお子様は、可愛らしい被布セットがお楽でしょう。
  45.                   {% elseif Category.id == 38 %}
  46.                     新生児の健康と長寿を祈るお宮参りは、地方によって異なる場合もありますが、<br>
  47.                     男児は生後30日、女児は32日に氏神様にお参りします。<br>
  48.                     <br>
  49.                     この前後で天候や日の良い日程に行ってもよろしいでしょう。<br>
  50.                     {% if isSalon %}
  51.                     当店では、晴れの日にふさわしい男児、女児のお祝い着をご用意いたしました。
  52.                     {% else %}
  53.                     「着物レンタル{% if not isSalon %}あき{% endif %}」では、晴れの日にふさわしい男児、女児のお祝い着をご用意いたしました。
  54.                     {% endif %}
  55.                   {% elseif Category.id == 39 %}
  56.                     男性の正礼装は紋付袴です。伝統的な黒紋付からスタイリッシュなカラーの紋付、<br>
  57.                     袴は仙台平からアバンギャルドな殿様袴まで多数取り揃えております。<br>
  58.                     <br>
  59.                     {% if isSalon %}
  60.                     当店の袴はメディア関連のご利用も多くテレビ、雑誌の撮影、<br>
  61.                     {% else %}
  62.                     「着物レンタル{% if not isSalon %}あき{% endif %}」の袴はメディア関連のご利用も多くテレビ、雑誌の撮影、<br>
  63.                     {% endif %}
  64.                     イベントなどで多くのタレントさんにご利用頂いております。<br>
  65.                     紋付袴はその他、結婚式、成人式、卒業式、パーティ等にお召しください。
  66.                   {% elseif Category.id == 40 %}
  67.                     旅立ちの春、それぞれ思い入れの袴姿で卒業式に臨みましょう。<br>
  68.                     教え子を見送る先生はじめ大学生、専門学校生の他、小学生、中学生、高校生のご利用も多くなりました。<br>
  69.                     {% if isSalon %}
  70.                     当店では、皆様の個性を尊重したコーディネートのアドバイスをさせて頂いています。<br>
  71.                     {% else %}
  72.                     「着物レンタル{% if not isSalon %}あき{% endif %}」では、皆様の個性を尊重したコーディネートのアドバイスをさせて頂いています。<br>
  73.                     {% endif %}
  74.                   {% elseif Category.id == 41 %}
  75.                     男性の着物姿が人気上昇中です。いつものスーツスタイルから変身して<br>
  76.                     一味違った男らしさで周囲を魅了しましょう。<br>
  77.                     <br>
  78.                     着物と羽織の着流しに袴を着用すれば、<br>
  79.                     お茶会(羽織は着用しません)、結婚式、パーティ等に略礼装としてお召し頂けます。
  80.                   {% elseif Category.id == 42 %}
  81.                     浴衣は、平安時代に高貴な人が湯浴みをする時に、麻で作った単衣の着物を着用したのが始まりで、<br>
  82.                     江戸時代になって湯上りに着るようになりました。現代では夏のおしゃれ着として若い人々に人気です。<br>
  83.                     <br>
  84.                     カンサイ等のデザイナーズブランドはもちろん、涼しげな棉麻のクオリティの高いメンズ浴衣を<br>
  85.                     ご用意いたしました。 <br>
  86.                     <br>
  87.                     <span class="font-bold">おすすめの浴衣を掲載した特集ページもご用意しております。<br>
  88.                     <a href="/user_data/yukata" class="underline color-primary">浴衣レンタルの特集ページはこちら</a><br></span>
  89.                     <br>
  90.                     ※浴衣は所属店舗のみでの取り扱いとなります
  91.                   {% elseif Category.id == 43 %}
  92.                     浴衣は、平安時代に高貴な人が湯浴みをする時に、麻で作った単衣の着物を着用したのが始まりで、<br>
  93.                     江戸時代になって湯上りに着るようになりました。現代では夏のおしゃれ着として若い人々に人気です。<br>
  94.                     <br>
  95.                     今年も個性的なツモリチサト、大島優子、松田聖子、カンサイ等の人気デザイナーズブランドを<br>
  96.                     コレクションしました。<br>
  97.                     <br>
  98.                     <span class="font-bold">おすすめの浴衣を掲載した特集ページもご用意しております。<br>
  99.                     <a href="/user_data/yukata" class="underline color-primary">浴衣レンタルの特集ページはこちら</a><br></span>
  100.                     <br>
  101.                     ※浴衣は所属店舗のみでの取り扱いとなります
  102.                   {% elseif Category.id == 44 %}
  103.                     日本の着物は、都が永らく京都にあった関係で、夏暑く冬寒い京都の気候風土の影響を<br>
  104.                     受けたワンピース形式の南方系衣服です。<br>
  105.                     夏物は、うす物とも言われ7月と8月の盛夏に着用します。<br>
  106.                     <br>
  107.                     絽や紗、羅等の透ける材質、あるいはセミの羽のように薄い麻の着物など、<br>
  108.                     周囲に一陣の涼風を与える夏の装いをお楽しみください。
  109.                   {% elseif Category.id == 45 %}
  110.                     日本の着物には約束事があります。更衣(ころもがえ)もその一つです。<br>
  111.                     「ころもがえ」は季節に合わせて着物を着替えると言う意味です。<br>
  112.                     6月と9月には裏のついた袷(あわせ)から裏を取った単衣(ひとえ)を着用します。<br>
  113.                     <br>
  114.                     軽やかな単衣を纏って、ワンランク上のおしゃれを楽しみましょう。<br>
  115.                     単衣の着物に合わせる帯は月の前半と後半では変わります。<br>
  116.                     帯のコーディネートにつきましては、ご相談の上決めさせて頂きます。
  117.                   {% elseif Category.id == 47 %}
  118.                     小紋が白生地から染めた染の着物に対して、つむぎ(紬)は糸を先に染めて紡いで織った織の着物です。<br>
  119.                     小紋よりはカジュアルになります。丈夫な材質はお稽古着や街着、家庭着として重宝します。<br>
  120.                     <br>
  121.                     しかし一方でつむぎ(紬)の訪問着もありますが、おしゃれ着として観劇やパーティ、グレードの高いお食事会にいかがでしょうか。
  122.                   {% elseif Category.id == 48 %}
  123.                     反物の柄全体に同じ模様が連続して描かれたカジュアルな着物です。<br>
  124.                     伝統的なお茶や踊りのお稽古やママ友同士のお食事会など、気軽なお出かけにお召し頂ける普段使いの着物です。<br>
  125.                     しかし武士の裃が発生の起源とする鮫小紋等の江戸小紋は別格で、色無地と同格と考えてよろしいでしょう。
  126.                   {% elseif Category.id == 49 %}
  127.                     色無地は、袋帯を合わせて結婚式、パーティ、お茶会等の略礼装として、<br>
  128.                     名古屋帯を合わせて観劇や街着にお召し頂いたり、あるいは黒共帯を合わせて、<br>
  129.                     お通夜、法事などの半喪の装いとして幅広くお召し頂けます。<br>
  130.                     <br>
  131.                     半喪としてご利用の場合は、色彩や地紋に配慮しましょう。
  132.                   {% elseif Category.id == 50 %}
  133.                     訪問着は明治時代に考案され大正時代に普及しました。<br>
  134.                     絵羽模様は衣桁にかけると一幅の絵のような柄付けです。<br>
  135.                     <br>
  136.                     略礼装として結婚式披露宴、お茶会、パーティなど既婚・未婚の別なくお召し頂ける応用範囲の広い着物です。<br>
  137.                     <br>
  138.                     {% if not isSalon %}
  139.                     <span class="font-bold">おすすめの訪問着を掲載した特集ページもご用意しております。<br>
  140.                     <a href="/user_data/houmongi" class="underline color-primary">訪問着レンタルの特集ページはこちら</a><br></span>
  141.                     {% endif %}
  142.                   {% elseif Category.id == 51 %}
  143.                     黒留袖同様、比翼仕立てであること、染め抜き五つ紋、裾は引き返し等の条件を満たしていれば、<br>
  144.                     黒留袖と同格の正礼装になります。しかし紋の数や比翼を省略すれば、着用範囲が広がります。<br>
  145.                     <br>
  146.                     宮中では黒は喪の色とされるため、園遊会、叙勲その他の宮中参内には色留袖を着用します。
  147.                   {% elseif Category.id == 52 %}
  148.                     留袖は既婚女性の正礼装です。江戸時代は女性が結婚すると袖を短くして脇に留めたのが留袖の由来です。<br>
  149.                     江戸褄模様の模様付けから、江戸褄とも言われます。<br>
  150.                     <br>
  151.                     かつては主に親族が着用していましたが、最近では、新郎・新婦のお母様、仲人夫人が着用し、<br>
  152.                     その他の既婚女性親族は色留袖を着用するケースが多いようです。
  153.                   {% elseif Category.id == 53 %}
  154.                     振袖は未婚女性の正礼装です。永い人生の中で一度きりの成人式。<br>
  155.                     ご両親様はもとよりご家族の皆様にとっても感慨深いものがあると思います。<br>
  156.                     <br>
  157.                     振袖は成人式の他にも、結婚式、ご結納、パーティ、メディア関係等巾広いシーンでご利用頂いております。<br>
  158.                     {% if isSalon %}
  159.                     当店ではハレの日の装いにふさわしい振袖を多数ご用意いたしました。
  160.                     {% else %}
  161.                     「着物レンタル{% if not isSalon %}あき{% endif %}」ではハレの日の装いにふさわしい振袖を多数ご用意いたしました。
  162.                     {% endif %}
  163.                   {% elseif Category.id == 157 %}
  164.                     お通夜、告別式、以降の法事に際し、どのような装いをしたら良いかお迷いではないでしょうか。<br>
  165.                     喪の装いは地方により違う場合もありますが、一般的には喪主や親族は通夜、告別式とも黒喪服を着用します。<br>
  166.                     お悔やみに参列される方はお通夜は半喪の装い、告別式は黒喪服が一般的です。<br>
  167.                     <br>
  168.                     半喪の装いとは、蓮などが描かれた着物、<br>
  169.                     色無地又は鮫小紋に黒共帯、又は灰色や紫の喪用の帯を合わせます。<br>
  170.                     なお色無地や江戸小紋の色彩は暖色を避け、地紋も吉祥模様は避けてお悔やみの気持ちを表します。
  171.                   {% elseif Category.id == 158 %}
  172.                     最初の厄年を迎える数え年13歳の身祝いです。<br>
  173.                     広く知られるところでは、京都嵐山の虚空蔵菩薩法輪寺にお参りし、渡月橋を渡り切るまで後ろを向かないと<br>
  174.                     智恵を授けられるとの言い伝えがあります。主に関西を中心に行われて来ましたが<br>
  175.                     最近では虚空蔵菩薩に限定せず、近くの氏神様にお参りするなど全国的に広まってきたようです。
  176.                   {% else %}
  177.                 {% endif %}
  178.               {% endif %}
  179.               </p>
  180.         </div>
  181.     </div>
  182.     <form name="form1" id="form1" method="get" action="?" class="main-search-product-form">
  183.         <input type="hidden" id="name" name="name" maxlength="50" value="{{  app.request.get('name') }}" />
  184.         <div class="row">
  185.             <div class="col-md-12">
  186.                 <div class="panel-group mb00" id="accordion_search" role="tablist" aria-multiselectable="true">
  187.                     <div class="panel panel-primary aki-border">
  188.                         <div class="panel-heading" role="tab" id="search_filter">
  189.                             <h4 class="panel-title">
  190.                                 <a role="button" data-bs-toggle="collapse" data-bs-parent="#accordion_search" href="#search_filter_1" aria-expanded="true" aria-controls="search_filter_1" class="fas fa-plus" onclick="gtag('event', 'クリック', {'event_category': '条件検索関連','event_label': '条件検索を開くボタン'});">
  191.                                     <span class="aki-title-collaps">
  192.                                         サイズ・予算・店舗から絞り込む(クリックすると開閉します)</a>
  193.                                     </span>
  194.                             </h4>
  195.                         </div>
  196.                         <div id="search_filter_1" class="panel-collapse collapse show" role="tabpanel" aria-bs-labelledby="search_filter" aria-bs-expanded="false">
  197.                             <div class="panel-body">
  198.                                 <div class="aki-row">
  199.                                     <div class="col-12 col-md-6">
  200.                                         <div class="form-group date">
  201.                                             <div class="input-group input-group-lg">
  202.                                                 <span class="input-group-addon" id="basic-addon1">
  203.                                                     <i class="aki-icon-calenda color-primary"></i>
  204.                                                 </span>
  205.                                                 <input name="date" type="text" class="productListDate form-control date datepicker hasDatepicker" placeholder="ご利用日" readonly="readonly" id="useDateMainForm" data-id="date-main-form">
  206.                                             </div>
  207.                                         </div>
  208.                                     </div>
  209.                                     <div class="col-12 col-md-6">
  210.                                         {% include 'Product/partials/filter_category.twig' %}
  211.                                     </div>
  212.                                     <div class="col-12 mb10 mt10">
  213.                                         <p>ご利用いただく着物の条件を選択してください</p>
  214.                                     </div>
  215.                                     <div class="col-md-6 col-12">
  216.                                         <div class="panel panel-default">
  217.                                         <div class="panel-background_white panel-body aki-border">
  218.                                                 <div class="mb20 fw-bold">価格</div>
  219.                                                 <div class="checkbox">
  220.                                                     <label><input type="checkbox" name="category_id_0[]" value="179" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '10,000円以下'});">10,000円以下</label>
  221.                                                 </div>
  222.                                                 <div class="checkbox">
  223.                                                     <label><input type="checkbox" name="category_id_0[]" value="180" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '10,001円〜30,000円'});">10,001円〜30,000円</label>
  224.                                                 </div>
  225.                                                 <div class="checkbox">
  226.                                                     <label><input type="checkbox" name="category_id_0[]" value="185" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '30,001円〜50,000円'});">30,001円~50,000円</label>
  227.                                                 </div>
  228.                                                 <div class="checkbox">
  229.                                                     <label><input type="checkbox" name="category_id_0[]" value="186" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '50,001円~100,000円'});">50,001円~100,000円</label>
  230.                                                 </div>
  231.                                                 <div class="checkbox">
  232.                                                     <label><input type="checkbox" name="category_id_0[]" value="191" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '100,000円以上'});">100,000円以上</label>
  233.                                                 </div>
  234.                                             </div>
  235.                                         </div>
  236.                                         <div class="panel panel-default">
  237.                                             <div class="panel-background_white panel-body aki-border">
  238.                                                 <div class="mb20 fw-bold">大きさ(身長)</div>
  239.                                                 <div class="checkbox">
  240.                                                     <label><input type="checkbox" name="category_id_1[]" value="187" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': 'Sサイズ(女性149cm以下/男性160以下)'});">Sサイズ(女性149cm以下/男性160以下)</label>
  241.                                                 </div>
  242.                                                 <div class="checkbox">
  243.                                                     <label><input type="checkbox" name="category_id_1[]" value="188" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': 'Mサイズ(女性150-167cm/男性161-170cm)'});">Mサイズ(女性150-167cm/男性161-170cm)</label>
  244.                                                 </div>
  245.                                                 <div class="checkbox">
  246.                                                     <label><input type="checkbox" name="category_id_1[]" value="189" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': 'Lサイズ(女性168-173cm/男性171-180cm)'});">Lサイズ(女性168-173cm/男性171-180cm)</label>
  247.                                                 </div>
  248.                                                 <div class="checkbox">
  249.                                                     <label><input type="checkbox" name="category_id_1[]" value="190" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '大きいサイズ(女性174cm以上/男性181cm以上)'});">大きいサイズ(女性174cm以上/男性181cm以上)</label>
  250.                                                 </div>
  251.                                             </div>
  252.                                         </div>
  253.                                     </div>
  254.                                     <div class="col-md-6 col-12">
  255.                                         <div class="panel panel-default">
  256.                                             <div class="panel-background_white panel-body aki-border">
  257.                                                 <div class="mb20 fw-bold">イメージ</div>
  258.                                                 <div class="checkbox">
  259.                                                     <label class="checkbox-inline"><input type="checkbox" name="category_id_2[]" value="198" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': 'かわいい'});">かわいい</label>
  260.                                                     <label class="checkbox-inline"><input type="checkbox" name="category_id_2[]" value="199" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '華やか'});">華やか</label>
  261.                                                     <label class="checkbox-inline"><input type="checkbox" name="category_id_2[]" value="200" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': 'おしとやか'});">おしとやか</label>
  262.                                                     <label class="checkbox-inline"><input type="checkbox" name="category_id_2[]" value="201" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '古典'});">古典</label>
  263.                                                 </div>
  264.                                             </div>
  265.                                         </div>
  266.                                         <div class="panel panel-default">
  267.                                             <div class="panel-background_white panel-body aki-border">
  268.                                                 <div class="mb20 fw-bold">カラー</div>
  269.                                                 <div class="checkbox">
  270.                                                     <label class="checkbox-inline"><input type="checkbox" name="category_id_3[]" value="175" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '青・紺・水色'});">青・紺・水色</label>
  271.                                                     <label class="checkbox-inline"><input type="checkbox" name="category_id_3[]" value="176" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '赤・ピンク・紫'});">赤・ピンク・紫</label>
  272.                                                     <label class="checkbox-inline"><input type="checkbox" name="category_id_3[]" value="177" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '白'});">白</label>
  273.                                                     <label class="checkbox-inline"><input type="checkbox" name="category_id_3[]" value="192" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '黄色・オレンジ'});">黄色・オレンジ</label>
  274.                                                     <label class="checkbox-inline"><input type="checkbox" name="category_id_3[]" value="193" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '緑'});">緑</label>
  275.                                                     <label class="checkbox-inline"><input type="checkbox" name="category_id_3[]" value="194" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '黒'});">黒</label>
  276.                                                     <label class="checkbox-inline"><input type="checkbox" name="category_id_3[]" value="195" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': 'グレー'});">グレー</label>
  277.                                                     <label class="checkbox-inline"><input type="checkbox" name="category_id_3[]" value="196" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': 'クリーム・ベージュ・茶色'});">クリーム・ベージュ・茶色</label>
  278.                                                 </div>
  279.                                             </div>
  280.                                         </div>
  281.                                         {% if not isSalon %}
  282.                                             <div class="panel panel-default">
  283.                                                 <div class="panel-background_white panel-body aki-border mb-20-md">
  284.                                                     <div class="mb20 fw-bold">取扱店舗</div>
  285.                                                     <div class="checkbox">
  286.                                                         <label class="checkbox-inline"><input type="checkbox" name="category_id_4[]" value="217" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '渋谷本店'});">渋谷本店</label>
  287.                                                         <label class="checkbox-inline"><input type="checkbox" name="category_id_4[]" value="218" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '銀座店'});">銀座店</label>
  288.                                                         <label class="checkbox-inline"><input type="checkbox" name="category_id_4[]" value="219" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '池袋店'});">池袋店</label>
  289.                                                         <label class="checkbox-inline"><input type="checkbox" name="category_id_4[]" value="220" onclick="gtag('event', 'クリック', {'event_category': '条件検索分岐','event_label': '横浜店'});">横浜店</label>
  290.                                                     </div>
  291.                                                 </div>
  292.                                             </div>
  293.                                         {% endif %}
  294.                                     </div>
  295.                                     <div class="col-12 text-center">
  296.                                         <div class="aki-row aki-well align-items-center">
  297.                                             <div class="col-md-6 text-md-end">
  298.                                                 <p class="aki-btn aki-btn-default aki-btn-refresh"><i class="aki-icon-refresh"></i> 検索条件をクリア</p>
  299.                                             </div>
  300.                                             <div class="col-md-6 text-md-start">
  301.                                                 <button id="filter_button_search" class="aki-btn aki-btn-primary" onclick="gtag('event', 'クリック', {'event_category': '条件検索関連','event_label': '選択した条件で検索ボタン'});">
  302.                                                     <img loading="lazy" src="{{ asset('assets/icon/search-white.svg') }}" class="aki-icon-default" alt="icon"/>
  303.                                                     選択した条件で検索</button>
  304.                                             </div>
  305.                                         </div>
  306.                                     </div>
  307.                                 </div>
  308.                             </div>
  309.                         </div>
  310.                     </div>
  311.                 </div>
  312.             </div>
  313.         </div>
  314.         <div class="product">
  315.             <div class="row pb00">
  316.                 <div id="topicpath" class="col-md-5 col-md-12 mt05">
  317.                     <ol id="list_header_menu" class="mb00 product_top">
  318.                         {# <li>
  319.                             <a href="{{ url('product_list') }}">全商品</a>
  320.                         </li> #}
  321.                         {% if Category is not null %}
  322.                             {% for Path in Category.path %}
  323.                                 <li>
  324.                                     <a href="{{ url('product_list') }}?category_id={{ Path.id }}">{{ Path.name }}</a>
  325.                                 </li>
  326.                             {% endfor %}
  327.                         {% endif %}
  328.                         {% if search_form.vars.value.name %}
  329.                             <li>「{{ search_form.vars.value.name }}」の検索結果</li>
  330.                         {% endif %}
  331.                         <li><a href="/products/list">全商品 </a><strong><span id="productscount">{{ pagination.totalItemCount }}</span>件</strong>の商品</li>
  332.                         <li>
  333.                             <div class="pb00 product_title">
  334.                                 <span class="gray-sub-text">並べ替え</span>
  335.                                 <div class="pl00 position-relative custom_arrow_select">
  336.                                     {{ form_widget(order_by_form, {'id': '', 'attr': {'onchange': "javascript:fnChangeOrderBy(this.value);"}}) }}
  337.                                 </div>
  338.                             </div>
  339.                         </li>
  340.                     </ol>
  341.                 </div>
  342.                 {% if pagination.totalItemCount and pagination.totalItemCount is not null %}
  343.                 <div class="col-12">
  344.                     <div class="product_pager">
  345.                         <div class="product_pager_all-count">
  346.                             <span class="">表示件数: </span>
  347.                             <div class="disp_number_form position-relative custom_arrow_select">
  348.                                 {{ form_widget(disp_number_form, {'id': '', 'class':'form-control','attr': {'onchange': "javascript:fnChangeDispNumber(this.value);"}}) }}
  349.                             </div>
  350.                         </div>
  351.                         <div class="ec-pagerRole">
  352.                             {% include "pager.twig" with {'pages': pagination.paginationData} %}
  353.                         </div>
  354.                     </div>
  355.                 </div>
  356.                 {% endif %}
  357.             </div>
  358.         </div>
  359.         <div id="item_list">
  360.             <ul
  361.                 class="thumbnails list-unstyled row">
  362.                 {% for Product in pagination %}
  363.                     <li id="result_list_box--{{ Product.id }}" class="col-md-3 col-6 list_product">
  364.                             <div class="thumbnail" id="result_list__detail--{{ Product.id }}">
  365.                                 <a href="{{ url('product_detail', {'id': Product.id}) }}">
  366.                                     <div class="inline_block_before">
  367.                                         <img loading="lazy" src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" class="img-responsive" {% if loop.index > 5 %} loading="lazy"{% endif %}>
  368.                                     </div>
  369.                                 </a>
  370.                                 <div class="caption">
  371.                                     {% if Product.ProductTag is not empty %}
  372.                                         <!--▼商品タグ-->
  373.                                         <div id="product_tag_box" class="product_tag text-center mt-10">
  374.                                             {% for ProductTag in Product.ProductTag %}
  375.                                                 <div id="product_tag_box__product_tag--{{ ProductTag.Tag.id }}" class="new-tag">
  376.                                                     {{ ProductTag.Tag.name }}
  377.                                                 </div>
  378.                                             {% endfor %}
  379.                                         </div>
  380.                                     {% endif %}
  381.                                     <h3 id="result_list__name--{{ Product.id }}">
  382.                                 {% if __EX_PRODUCT_LIST[Product.id][5] is defined %}
  383.                                     {% if __EX_PRODUCT_LIST[Product.id][5].value is not empty %}
  384.                                         {% if __EX_PRODUCT_LIST[Product.id][5].value.value != LOCALE_JAPAN and __EX_PRODUCT_LIST[Product.id][5].value.value != '' %}
  385.                                             <a href="{{ url('product_detail_locale', {'id': Product.id, '_locale':  __EX_PRODUCT_LIST[Product.id][5].value.value}) }}">{{ Product.name }}</a>
  386.                                         {% else %}
  387.                                             <a href="{{ url('product_detail', {'id': Product.id}) }}">{{ Product.name }}</a>
  388.                                         {% endif %}
  389.                                     {% else %}
  390.                                         <a href="{{ url('product_detail', {'id': Product.id}) }}">{{ Product.name }}</a>
  391.                                     {% endif %}
  392.                                 {% else %}
  393.                                     <a href="{{ url('product_detail', {'id': Product.id}) }}">{{ Product.name }}</a>
  394.                                 {% endif %}
  395.                                     </h3>
  396.                                     <ul class="caption-price">
  397.                                         {% if Product.hasProductClass %}
  398.                                             {% if Product.getPrice02Min == Product.getPrice02Max %}
  399.                                                 <li>
  400.                                                     <strong id="result_list__price02_inc_tax--{{ Product.id }}">kore{{ Product.getPrice02IncTaxMin|price }}</strong>
  401.                                                 </li>
  402.                                             {% else %}
  403.                                                 <li>
  404.                                                     <strong id="result_list__price02_inc_tax--{{ Product.id }}">{{ Product.getPrice02IncTaxMin|price }}
  405.                                                         ~
  406.                                                         {{ Product.getPrice02IncTaxMax|price }}
  407.                                                     </strong>
  408.                                                 </li>
  409.                                             {% endif %}
  410.                                         {% else %}
  411.                                             <li>
  412.                                                 <strong id="result_list__price02_inc_tax--{{ Product.id }}">{{ Product.getPrice02IncTaxMin|number_format }}円</strong>
  413.                                             </li>
  414.                                         {% endif %}
  415.                                         {% if __EX_PRODUCT_LIST is defined %}
  416.                                             <li>&nbsp;</li>
  417.                                                 {% if (__EX_PRODUCT_LIST[Product.id][4]['value']) %}
  418.                                                     <li>素材:{{__EX_PRODUCT_LIST[Product.id][4]['value'].value}}</li>
  419.                                                 {% else %}
  420.                                                     <li>&nbsp;</li>
  421.                                                 {% endif %}
  422.                                             <li>&nbsp;</li>
  423.                                         {% endif %}
  424.                                         <li>商品コード :
  425.                                             <span id="item_code_default" data-id="{{ Product.id }}">{{ Product.code_min }}
  426.                                                 {% if Product.code_min != Product.code_max %}
  427.                                                     ~
  428.                                                     {{ Product.code_max }}
  429.                                                 {% endif %}
  430.                                             </span>
  431.                                         </li>
  432.                                         {% if not isSalon %}
  433.                                             <li>
  434.                                                 {% if Product.belongsToCategory(217) %}
  435.                                                     取扱店舗 :<a class="text-green text-decoration-underline" href="/user_data/shop/shibuya">渋谷本店</a>
  436.                                                 {% elseif Product.belongsToCategory(218) %}
  437.                                                     取扱店舗 :<a class="text-green text-decoration-underline" href="/user_data/shop/ginza">銀座店</a>
  438.                                                 {% elseif Product.belongsToCategory(219) %}
  439.                                                     取扱店舗 :<a class="text-green text-decoration-underline" href="/user_data/shop/ikebukuro">池袋店</a>
  440.                                                 {% elseif Product.belongsToCategory(220) %}
  441.                                                     取扱店舗 :<a class="text-green text-decoration-underline" href="/user_data/shop/yokohama">横浜店</a>
  442.                                                 {% else %}
  443.                                                 {% endif %}
  444.                                             </li>
  445.                                         {% endif %}
  446.                                     </ul>
  447.                                 </div>
  448.                             </div>
  449.                     </li>
  450.                 {% endfor %}
  451.             </ul>
  452.         </div>
  453.         {% if pagination.totalItemCount and pagination.totalItemCount is not null %}
  454.         <div class="product">
  455.             <div class="row pb00">
  456.                 <div class="col-12">
  457.                     <div class="product_pager">
  458.                         <div class="product_pager_all-count product_pager_all-count_down">
  459.                             <span>表示件数: </span>
  460.                         </div>
  461.                         <div class="ec-pagerRole">
  462.                             {% include "pager.twig" with {'pages': pagination.paginationData} %}
  463.                         </div>
  464.                     </div>
  465.                 </div>
  466.             </div>
  467.         </div>
  468.         {% endif %}
  469.     </form>
  470. {% endblock %}
  471. {% block javascript %}
  472. <script>
  473.     $(window).on('load', function() {
  474.         $('.aki-btn-refresh').click(function() {
  475.             $('#search_filter_1 input').prop('checked', false);
  476.         });
  477.         if($('.product_pager_all-count_down').length > 0){
  478.             $('.product_pager_all-count_down').append( $('.disp_number_form')[0].outerHTML)
  479.         }
  480.     })
  481.     // 並び順を変更
  482.     function fnChangeOrderBy(orderby) {
  483.         eccube.setValue('orderby', orderby);
  484.         eccube.setValue('pageno', 1);
  485.         eccube.submitForm();
  486.     }
  487.     // 表示件数を変更
  488.     function fnChangeDispNumber(dispNumber) {
  489.         eccube.setValue('disp_number', dispNumber);
  490.         eccube.setValue('pageno', 1);
  491.         eccube.submitForm();
  492.     }
  493.     $(document).ready(function() {
  494.         $('#filter_button_search').on('click', function(event) {
  495.             const specialUrl = [
  496.                 'big',
  497.                 'hitoenatu'
  498.             ]
  499.             const category = $('.category_id_side').val();
  500.             const calendar = $('#AkiuseDateSideForm').val();
  501.             if (specialUrl.includes(category)) {
  502.                 event.preventDefault();
  503.                 const newUrl = `/user_data/${category}?category_id=${category}${calendar ? `&date=${calendar}` : ''}`;
  504.                 window.location.href = newUrl;
  505.             }
  506.         });
  507.     });
  508.     </script>
  509.     {% if app.request.get('category_id_0') or app.request.get('category_id_1') or app.request.get('category_id_2') or app.request.get('category_id_3') or app.request.get('category_id_4') %}
  510.         <script>
  511.             $('#search_filter a').removeClass('collapsed');
  512.             $('#search_filter_1').addClass('in');
  513.             // Check selected checkbox in search filter
  514.             $checked_id = [];{% if app.request.get('category_id_0') %}{% for id in app.request.get('category_id_0') %}$checked_id.push('{{ id }}');{% endfor %}{% endif %}{% if app.request.get('category_id_1') %}
  515.             {% for id in app.request.get('category_id_1') %}
  516.             $checked_id.push('{{ id }}');{% endfor %}{% endif %}{% if app.request.get('category_id_2') %}
  517.             {% for id in app.request.get('category_id_2') %}
  518.             $checked_id.push('{{ id }}');{% endfor %}{% endif %}{% if app.request.get('category_id_3') %}
  519.             {% for id in app.request.get('category_id_3') %}
  520.             $checked_id.push('{{ id }}');{% endfor %}{% endif %}{% if app.request.get('category_id_4') %}
  521.             {% for id in app.request.get('category_id_4') %}
  522.             $checked_id.push('{{ id }}');{% endfor %}{% endif %}$('#search_filter_1 .checkbox input').each(function () {
  523.             if ($.inArray($(this).val(), $checked_id) !== -1) {
  524.             $(this).prop('checked', true);
  525.             }
  526.             });
  527.         </script>
  528.     {% endif %}
  529. {% endblock %}