app/template/user_data/category/index.twig line 1

Open in your IDE?
  1. {% extends '@user_data/layout/default_frame.twig' %}
  2. {% block title %}
  3. {{category.name}} | オリジナル缶バッジ/カンバッチ製作【個人小ロットから業務用OEMまで激安印刷】ZEAMI Goods
  4. {% endblock %}
  5. {% block content %}
  6. <!-- // == カテゴリー：タイトル ================================================================================ // -->
  7. <div id="product_pagetitleBloc" class="fades">
  8. <img src="{{ asset('assets/img/product/visual_cover.gif') }}" id="mainVisual" style="background-image: url('{{ asset(category.image|no_image_product, 'save_image') }}');">
  9. <article id="category_infoArea">
  10. <div class="custom_inner">
  11. <h3 id="categoryTitle">
  12. <span>{{category.name}}</span>
  13. {% if category.simulation %}
  14. <a href="/faq#Q2-1" id="titleCap">{{category.simulation}}</a>
  15. {% endif %}
  16. </h3>
  17. {{ category.note|raw }}
  18. </div>
  19. </article>
  20. <!-- ///// #category_infoArea +++++ ///// -->
  21. <!-- ///// +++++ #product_pagetitleBloc +++++ ///// -->
  22. </div>
  25. <!-- // ++ パンクズ ++ //////////////////////////////////////////////////////////// // -->
  26. <div id="bread_crumbBloc" class="fades">
  27. <ul id="breadCrumb" class="fades">
  28. <li class="up">
  29. <a href="/"><img src="{{ asset('assets/img/icon_home.png') }}" alt="ホーム"></a>
  30. </li>
  31. <li class="up">{{category.name}}</li>
  32. </ul>
  33. <!-- ///// #breadCrumb +++++ ///// -->
  34. <!-- ///// +++++ #bread_crumbBloc +++++ ///// -->
  35. </div>
  38. <!-- ▼▼ MAIN CONTENTS __________________________________________________________________________________________________ ▼▼ -->
  39. <main
  40. id="mainContents">
  42. <!-- // == MAIN ================================================================================ // -->
  43. <section
  44. id="Category" class="section_basic">
  46. <!-- // ++ カテゴリー紹介文 ++ /////////////////////////////////////////////////////////////// -->
  47. <aside id="guidanceBox" class="fades">
  48. <h4 id="guideHeadline" class="up">{{category.title}}</h4>
  49. <p>{{category.description|raw}}</p>
  51. <ul id="category_guideLink" class="fades">
  52. <li class="link_design up">
  53. <a href="{{ category.link_design }}">デザイン方法</a>
  54. </li>
  55. <li class="link_sample up">
  56. <a href="/sample">サンプル購入</a>
  57. </li>
  58. <!-- //// ++++ #category_guidelink ++++ //// -->
  59. </ul>
  60. </aside>
  61. <!-- ///// #guidanceBox +++++ ///// -->
  62. <div style="margin-bottom: 10px">
  63. {{ category.design_method|raw }}
  64. </div>
  66. <!-- // ++ 商品一覧 ++ /////////////////////////////////////////////////////////////// -->
  67. <div class="one_box">
  68. <ul
  69. id="cat_itemList" class="fades">
  71. {% for product in category.ProductCategories|sort((a, b) => b.sort_no <=> a.sort_no) %}
  72. {% if product.Product.is_sample == 0 and product.Product.getStatus.id == 1 %}
  73. <!-- ☆☆ ONE ITEM ☆☆ -->
  74. <li
  75. class="one_item up">
  77. <!--■■ ++ サムネイル ++ ■■-->
  78. <figure class="catlist_thumb fades">
  79. <a href="/product/{{ product.Product.id }}">
  80. <img
  81. src="{{ asset('assets/img/product_thumb_cover.gif') }}" style="background-image: url('{{ asset(product.Product.mainFileName|no_image_product, 'save_image') }}');">
  83. <!--■■ ++ ミラーコート ++ ■■-->
  84. {% if product.Product.icon is not empty %}
  85. <p class="catlist_thumb_chara fades"><img src="{{ asset(product.Product.icon|no_image_product, 'save_image') }}"></p>
  86. {% else %}
  87. <p class="catlist_thumb_chara fades"><img src="{{ asset('assets/img/mirror_coat.png') }}"></p>
  88. {% endif %}
  89. </a>
  90. </figure>
  91. <!-- /// *** .favourite_thumb *** /// -->
  93. <article class="catlist_namebox fades">
  94. <h4 class="catlist_name up">
  95. <a href="/product/{{ product.Product.id }}">{{product.Product.name}}</a>
  96. </h4>
  97. <h5 class="catlist_catch up">{{product.Product.free_area|raw}}</h5>
  99. <!--■■ ++ カテゴリーマーク ++ ■■-->
  100. <aside class="catlist_mark fades">
  101. {% for tag in product.Product.ProductTag %}
  102. <p class="up">
  103. <span>{{tag.Tag.name}}</span>
  104. </p>
  105. {% endfor %}
  106. <!-- ///.favourite_catlist *** /// -->
  107. </aside>
  108. </article>
  109. <!-- /// *** .favourite_titlebox *** /// -->
  110. </li>
  111. <!-- //// **** .one_item **** //// -->
  112. {% endif %}
  113. {% endfor %}
  115. <!-- //// ++++ #cat_itemList ++++ //// -->
  116. </ul>
  119. <!-- // ++ カテゴリー紹介文02 ++ /////////////////////////////////////////////////////////////// -->
  120. <aside id="guidanceBox" class="fades">
  121. <h4 id="guideHeadline" class="up">印刷オプションや梱包オプションもございます。<br>
  122. また別途お問い合わせいただければ、証紙の貼付や特別パッケージも対応可能です。</h4>
  123. <p class="up">ZEAMI Goodsでは、商品が届いたら即販売、またはそのまま卸先や業者様に納品できるような柔軟な対応を行っております。<br>
  124. 詳しい内容は、お気軽に<a href="/inquiry">お問い合わせ</a>ください。</p>
  125. </aside>
  126. <!-- ///// #guidanceBox +++++ ///// -->
  129. </div>
  130. <!-- ///// .one_box ***** ///// -->
  133. <!-- // ++ パンクズ ++ //////////////////////////////////////////////////////////// // -->
  134. <ul
  135. id="guide_otherpageLink" class="for_productlist fades">
  137. <!-- ☆☆ ONE LINK ☆☆ -->
  138. <li class="one_link up">
  139. <figure class="other_linkPic">
  140. <a href="#">
  141. <img src="{{ asset('assets/img/guide_link_pic01.jpg') }}" alt="お支払いについて">
  142. </a>
  143. </figure>
  144. <div class="guide_link_textbox up">
  145. <h5 class="guide_link_title up">
  146. <a href="#">裏面印刷<p class="guide_title_cap">企業ロゴやQRコードなど</p>
  147. </a>
  148. </h5>
  149. <p class="up">裏の剥離紙（セパレーター）に企業情報、プロフィール、キャンペーン情報などを印刷して PR 度UP！</p>
  150. <!-- /// *** .guide_link_textbox *** /// -->
  151. </div>
  152. </li>
  153. <!-- //// .one_link *+** //// -->
  155. <!-- ☆☆ ONE LINK ☆☆ -->
  156. <li class="one_link up">
  157. <figure class="other_linkPic">
  158. <a href="#">
  159. <img src="{{ asset('assets/img/guide_link_pic01.jpg') }}" alt="お支払いについて">
  160. </a>
  161. </figure>
  162. <div class="guide_link_textbox up">
  163. <h5 class="guide_link_title up">
  164. <a href="#">裏面印刷<p class="guide_title_cap">企業ロゴやQRコードなど</p>
  165. </a>
  166. </h5>
  167. <p class="up">裏の剥離紙（セパレーター）に企業情報、プロフィール、キャンペーン情報などを印刷して PR 度UP！</p>
  168. <!-- /// *** .guide_link_textbox *** /// -->
  169. </div>
  170. </li>
  171. <!-- //// .one_link *+** //// -->
  173. <!-- ☆☆ ONE LINK ☆☆ -->
  174. <li class="one_link up">
  175. <figure class="other_linkPic">
  176. <a href="#">
  177. <img src="{{ asset('assets/img/guide_link_pic01.jpg') }}" alt="お支払いについて">
  178. </a>
  179. </figure>
  180. <div class="guide_link_textbox up">
  181. <h5 class="guide_link_title up">
  182. <a href="#">裏面印刷<p class="guide_title_cap">企業ロゴやQRコードなど</p>
  183. </a>
  184. </h5>
  185. <p class="up">裏の剥離紙（セパレーター）に企業情報、プロフィール、キャンペーン情報などを印刷して PR 度UP！</p>
  186. <!-- /// *** .guide_link_textbox *** /// -->
  187. </div>
  188. </li>
  189. <!-- //// .one_link *+** //// -->
  192. <!-- ☆☆ ONE LINK ☆☆ -->
  193. <li class="one_link up">
  194. <figure class="other_linkPic">
  195. <a href="#">
  196. <img src="{{ asset('assets/img/guide_link_pic01.jpg') }}" alt="お支払いについて">
  197. </a>
  198. </figure>
  199. <div class="guide_link_textbox up">
  200. <h5 class="guide_link_title up">
  201. <a href="#">裏面印刷<p class="guide_title_cap">企業ロゴやQRコードなど</p>
  202. </a>
  203. </h5>
  204. <p class="up">裏の剥離紙（セパレーター）に企業情報、プロフィール、キャンペーン情報などを印刷して PR 度UP！</p>
  205. <!-- /// *** .guide_link_textbox *** /// -->
  206. </div>
  207. </li>
  208. <!-- //// .one_link *+** //// -->
  211. <!-- //// ++++ #guide_otherpageLink ++++ //// -->
  212. </ul>
  215. </section>
  216. <!-- ///// +++++ #Category +++++ ///// -->
  217. <!-- ///// +++++ #mainContents +++++ ///// -->
  218. </main>
  221. <!-- // ++ パンクズ ++ //////////////////////////////////////////////////////////// // -->
  222. <div id="bread_crumbBloc" class="fades">
  223. <ul id="breadCrumb" class="fades">
  224. <li class="up">
  225. <a href="/"><img src="{{ asset('assets/img/icon_home.png') }}" alt="ホーム"></a>
  226. </li>
  227. <li class="up">{{category.name}}</li>
  228. </ul>
  229. <!-- ///// #breadCrumb +++++ ///// -->
  230. <!-- ///// +++++ #bread_crumbBloc +++++ ///// -->
  231. </div>
  232. {% endblock %}