app/template/default/Recipe/Resource/template/default/detail.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block stylesheet %}
  4.     <link rel="stylesheet" href="{{ asset('Recipe/assets/default/css/recipe.css' , 'plugin') }}">
  5. {% endblock stylesheet %}
  6. {% block javascript %}
  7.     <script type="text/javascript" src="{{ asset('Recipe/assets/default/js/detail.js', 'plugin') }}"></script>
  8. {% endblock javascript %}
  10. {% block main %}
  11. <section class="p-lower-mv">
  12.   <div class="inner">
  13.     <div class="under bread_wrap">
  14.       <ol itemscope itemtype="https://schema.org/BreadcrumbList">
  15.         <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  16.           <a itemprop="item" href="{{ url('homepage') }}">
  17.             <span class="freight-neo-pro" itemprop="name">TOP</span>
  18.           </a>
  19.           <meta itemprop="position" content="1" />
  20.         </li>
  21.         <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  22.           <a itemprop="item" href="{{ url('recipe') }}">
  23.             <span class="freight-neo-pro" itemprop="name">レシピ一覧</span>
  24.           </a>
  25.           <meta itemprop="position" content="2" />
  26.         </li>
  27.         <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  28.           <a itemprop="item" href="{{ url('recipe_detail', { 'id': Recipe.id }) }}">
  29.             <span class="freight-neo-pro" itemprop="name">{{ Recipe.name }}</span>
  30.           </a>
  31.           <meta itemprop="position" content="3" />
  32.         </li>
  33.       </ol>
  34.     </div>
  35.     <!-- /.bread_wrap -->
  36.   </div>
  37. </section>
  38. <section class="recipe-detail">
  39.   <div class="inner">
  40.     <article class="recipe-detail-article">
  41.       <h2 class="recipe-title">{{ Recipe.name }}</h2>
  42.       <div class="recipe-detail-article-head">
  43.         <div>
  44.           <div class="swiper recipe-detail-swiper recipe-image">
  45.             <div class="swiper-wrapper">
  46.               {% if Recipe.RecipeImage|length == 0 %}
  47.                 <div class="swiper-slide recipe-detail-slide">
  48.                   <img src="{{ asset(Recipe.mainListImage|no_image_product, 'save_image') }}" alt="{{ Recipe.name }}">
  49.                 </div>
  50.               {% else %}
  51.                 {% for image in Recipe.RecipeImage %}
  52.                 <div class="swiper-slide recipe-detail-slide">
  53.                   {% if image.filename|split('.')|last == 'mp4' or image.filename|split('.')|last == 'mov' %}
  54.                     <div class="recipe-detail-slide-video">
  55.                       <video src="{{ asset(image.filename, 'save_image') }}" controls></video>
  56.                     </div>
  57.                   {% else %}
  58.                     <img src="{{ asset(image.filename|no_image_product, 'save_image') }}" alt="{{ Recipe.name }}">
  59.                   {% endif %}
  60.                 </div>
  61.                 {% endfor %}
  62.               {% endif %}
  63.             </div>
  64.           </div>
  65.           <div class="recipe-detail-swiper-pagination">
  66.             <div class="swiper-pagination"></div>
  67.           </div>
  68.         </div>
  69.         <div class="recipe-info">
  70.           <div class="recipe-time">
  71.             <div class="recipe-info-head">
  72.               <div class="recipe-icon">調理時間</div>
  73.             </div>
  74.             <p class="recipe-info-body"><span class="number">{{ Recipe.minute }}</span>分</p>
  75.           </div>
  76.           <div class="recipe-calorie">
  77.             <div class="recipe-info-head">
  78.               <div class="recipe-icon">エネルギー</div>
  79.             </div>
  80.             <p class="recipe-info-body"><span class="number">{{ Recipe.energy }}</span>kcal</p>
  81.           </div>
  82.           <div class="recipe-label">
  83.             <ul class="recipe-label-list">
  84.               {% for category in Recipe.categorys %}
  85.                 <li class="recipe-label-item">
  86.                   <a href="{{ url('recipe') }}?category_id={{ category.id }}">{{ category.name }}</a>
  87.                 </li>
  88.               {% endfor %}
  89.               {% for material in Recipe.materials %}
  90.                 <li class="recipe-label-item">
  91.                   <a href="{{ url('recipe') }}?material_id={{ material.id }}">{{ material.name }}</a>
  92.                 </li>
  93.               {% endfor %}
  94.               {% for tag in Recipe.tags %}
  95.                 <li class="recipe-label-item">
  96.                   <a href="{{ url('recipe') }}?tag_id={{ tag.id }}">{{ tag.name }}</a>
  97.                 </li>
  98.               {% endfor %}
  99.             </ul>
  100.           </div>
  101.         </div>
  102.       </div>
  103.       {% if Recipe.RecipeMaterialInfos|length > 0 %}
  104.       <div class="recipe-detail-article-body">
  105.         <div class="recipe-material">
  106.           <h3 class="recipe-box-title">材料
  107.             {% if Recipe.people is defined %}
  108.               <span>（{{ Recipe.people }}人分）</span>
  109.             {% endif %}
  110.           </h3>
  111.           {% for info in Recipe.RecipeMaterialInfos %}
  112.             <dl class="recipe-material-list">
  113.               <dt class="recipe-material-title">{{ info.title }}</dt>
  114.               <dd class="recipe-material-desc">{{ info.content }}</dd>
  115.             </dl>
  116.           {% endfor %}
  117.         </div>
  118.         {% endif %}
  119.         {% if Recipe.RecipeSteps|length > 0 %}
  120.         <div class="recipe-howto">
  121.           <h3 class="recipe-box-title">作り方</h3>
  122.           <ol class="recipe-howto-list">
  123.             {% for info in Recipe.RecipeSteps %}
  124.               <li class="recipe-howto-item">
  125.                 <span>{{ '%02d'|format(loop.index) }}</span>
  126.                 <div class="recipe-howto-list__content">
  127.                     {{ info.content|raw }}
  128.                 </div>
  129.               </li>
  130.             {% endfor %}
  131.           </ol>
  132.         </div>
  133.       </div>
  134.       {% endif %}
  135.       {% if Recipe.RecipeNutritions|length > 0 %}
  136.       <div class="recipe-component">
  137.         <h3 class="recipe-box-title">1食あたりの栄養成分</h3>
  138.         <ul class="recipe-component-list">
  139.           {% for info in Recipe.RecipeNutritions %}
  140.             <li class="recipe-component-item">
  141.               <p class="recipe-component-title">{{ info.title }}</p>
  142.               <p class="recipe-component-number"><span>{{ '%.1f'|format(info.amount) }}</span>{{ info.unit }}</p>
  143.             </li>
  144.           {% endfor %}
  145.         </ul>
  146.       </div>
  147.       {% endif %}
  148.       {% if Recipe.RecipeCreator is defined and
  149.             Recipe.RecipeCreator is not null and
  150.             Recipe.CreatorHeading is defined and
  151.             Recipe.CreatorHeading is not null and
  152.             Recipe.CreatorComment is defined and
  153.             Recipe.CreatorComment is not null
  154.       %}
  155.       <div class="recipe-comment">
  156.         <div class="recipe-comment-sticky"><img src="{{ asset('assets/img/recipe/img-sticky.png', 'user_data') }}" alt=""></div>
  157.         <div class="recipe-comment-head">
  158.           <figure class="recipe-comment-picture">
  159.             <img src="{{ asset(Recipe.RecipeCreator.filename|no_image_product, 'save_image') }}" alt="{{ Recipe.RecipeCreator.name }}">
  160.             <figcaption>{{ Recipe.RecipeCreator.title }}<span class="name">{{ Recipe.RecipeCreator.name }}</span></figcaption>
  161.           </figure>
  162.         </div>
  163.         <div class="recipe-comment-body">
  164.           <p class="recipe-comment-title">{{ Recipe.CreatorHeading }}</p>
  165.           <p class="recipe-comment-text">{{ Recipe.CreatorComment|raw|nl2br }}</p>
  166.         </div>
  167.       </div>
  168.       {% endif %}
  169.     </article>
  170.   </div>
  171. </section>
  173. {% if Recipe.getEnableRelatedProducts|length > 0 %}
  174. <section class="p-section bg-gray recipe-product">
  175.   <div class="inner">
  176.     <h2 class="p-title icon-top"><span>このレシピに<br class="sp">使われている商品</span></h2>
  177.     <div class="recipe-product-wrap">
  178.       <div class="swiper recipe-product-swiper">
  179.         <div class="swiper-wrapper">
  180.           {% for RelatedProduct in Recipe.RelatedProducts %}
  181.           <div class="swiper-slide recipe-product-slide">
  182.             <a href="{{ url('product_detail', { 'id': RelatedProduct.ChildProduct.id })}}">
  183.               <div class="recipe-product-item-head">
  184.                 <img src="{{ asset(RelatedProduct.ChildProduct.main_list_image|no_image_product, 'save_image') }}" alt="">
  185.               </div>
  186.               <div class="recipe-product-item-body">
  187.                 <h3 class="recipe-product-item-name">{{ RelatedProduct.ChildProduct.name }}</h3>
  188.                 <p class="recipe-product-item-desc">{{ RelatedProduct.ChildProduct.description_detail }}</p>
  189.                 <p class="recipe-product-item-price">{{ RelatedProduct.ChildProduct.getPrice02Min|price }}<span>円（税抜）</span></p>
  190.               </div>
  191.             </a>
  192.           </div>
  193.           {% endfor %}
  194.         </div>
  195.       </div>
  196.       <div class="swiper-button-prev"></div>
  197.       <div class="swiper-button-next"></div>
  198.     </div>
  199.   </div>
  200. </section>
  201. {% endif %}
  203. {% include "@Recipe/default/recipe_search.twig" %}
  205. {% endblock %}