app/template/default/Block/recommend_recipe.twig line 1

Open in your IDE?
  1. {% if Product is defined %}
  2.   {% set RecommendRecipe = repository('Plugin\\Recipe\\Entity\\Recipe').getRecommendRecipe(Product) %}
  3.   {% set recommend_recipe_style = 'related-recipe' %}
  4. {% else %}
  5.   {% set RecommendRecipe = repository('Plugin\\Recipe\\Entity\\Recipe').getRecommendRecipe() %}
  6.   {% set recommend_recipe_style = 'recommend-recipe' %}
  7. {% endif %}
  8. <link rel="stylesheet" href="{{ asset('Recipe/assets/default/css/recipe.css' , 'plugin') }}">
  9. <script>
  10. $(window).on('load', function () {
  11.   //レシピ
  12.   const recipe = new Swiper(".recipe-swiper", {
  13.     loop: true,
  14.     slidesPerView: 1,
  15.     breakpoints: {
  16.       769: {
  17.         slidesPerView: 2
  18.       },
  19.       1024: {
  20.         slidesPerView: 3
  21.       }
  22.     },
  23.     spaceBetween: 18,
  24.     autoHeight: true,
  25.     navigation: {
  26.       nextEl: ".p-recipe .swiper-button-next",
  27.       prevEl: ".p-recipe .swiper-button-prev",
  28.     },
  29.   });
  30. });
  31. </script>
  32. <section class="p-section p-recipe {{ recommend_recipe_style }}">
  33.   <div class="inner">
  34.     {% if recommend_recipe_title is defined and recommend_recipe_title is not null %}
  35.       <h2 class="p-title icon-top"><span>{{ recommend_recipe_title }}</span></h2>
  36.     {% else %}
  37.       <h2 class="p-title icon-top"><span>おすすめレシピ</span></h2>
  38.     {% endif %}
  39.     {% if recommend_recipe_text is defined and recommend_recipe_text is not null %}
  40.     <p class="p-text">{{ recommend_recipe_text }}</p>
  41.     {% endif %}
  42.     <div class="recipe-slide">
  43.       <div class="swiper recipe-swiper">
  44.         <div class="swiper-wrapper">
  45.           {% for Recipe in RecommendRecipe %}
  46.           <div class="swiper-slide">
  47.             <div class="p-recipe-box">
  48.               <a href="{{ url('recipe_detail', {'id': Recipe.id}) }}">
  49.                 <div class="recipe-head">
  50.                   {% if
  51.                         Product is defined and
  52.                         Recipe.RecipeBadge is defined and
  53.                         Recipe.RecipeBadge.name is defined and
  54.                         Recipe.RecipeBadge.name is not null and
  55.                         Recipe.RecipeBadge.filename != '' %}
  56.                     <div class="recipe-badge">
  57.                       <img
  58.                           src="{{ asset(Recipe.RecipeBadge.filename|no_image_product, 'save_image') }}"
  59.                           alt="{{ Recipe.RecipeBadge.name }}">
  60.                     </div>
  61.                   {% endif %}
  62.                   <img src="{{ asset(Recipe.mainListImage|no_image_product, 'save_image') }}" alt="">
  63.                 </div>
  64.                 <div class="recipe-body">
  65.                   <h3 class="recipe-name">{{ Recipe.name }}</h3>
  66.                   {% if Recipe.RelatedProducts|length > 0 %}
  67.                   <p class="recipe-product">使用した商品：{{ Recipe.RelatedProducts[0].ChildProduct.name }}</p>
  68.                   {% endif %}
  69.                   <div class="recipe-wrap">
  70.                     <p class="recipe-time"><span>{{ Recipe.minute }}</span>分</p>
  71.                     <p class="recipe-calorie"><span>{{ Recipe.energy }}</span>kcal</p>
  72.                   </div>
  73.                   <ul class="recipe-tag-list">
  74.                     {% for tag in Recipe.tags %}
  75.                     <li class="recipe-tag-item">♯{{ tag.name }}</li>
  76.                     {% endfor %}
  77.                   </ul>
  78.                   {% if Product is defined %}
  79.                   <ul class="material-list">
  80.                     {% for material in Recipe.materials %}
  81.                     <li class="material-item">{{ material.name }}</li>
  82.                     {% endfor %}
  83.                   </ul>
  84.                   {% endif %}
  85.                 </div>
  86.               </a>
  87.             </div>
  88.           </div>
  89.           {% endfor %}
  90.         </div>
  91.       </div>
  92.       <div class="swiper-button-prev"></div>
  93.       <div class="swiper-button-next"></div>
  94.     </div>
  95.     {% if Product is not defined or Product is null %}
  96.     <div class="p-button orange"><a href="{{ url('recipe') }}">もっと見る</a></div>
  97.     {% endif %}
  98.   </div>
  99. </section>