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

Open in your IDE?
  1. {#
  2. This file is part of RecentlyViewedProducts Plugin
  4. Copyright (C) 2023 Diezon.
  6. For the full copyright and license information, please view the LICENSE
  7. file that was distributed with this source code.
  8. #}
  9. {% block stylesheet %}
  10.     <style>
  11.     .ec-historyRole {
  12.         padding: 40px 0;
  13.     }
  14.     .ec-historyRole__list {
  15.         list-style-type: none;
  16.         padding-left: 0;
  17.         display: flex;
  18.         flex-wrap: nowrap;
  19.         gap: 8px;
  20.         overflow-x: scroll;
  21.         white-space: nowrap;
  22.         width: 100%;
  23.     }
  24.     .ec-historyRole__list::-webkit-scrollbar {
  25.         display: none;
  26.     }
  27.     .ec-historyRole__listItem {
  28.         max-width: 107px;
  29.         min-width: 107px;
  30.     }
  31.     .ec-historyRole__listImage {
  32.         aspect-ratio: 1/1;
  33.     }
  34.     .ec-historyRole__listImage img {
  35.         width: 100%;
  36.         height: 100%;
  37.         object-position: center;
  38.         object-fit: contain;
  39.     }
  40.     .ec-historyRole__listItemTitle, .ec-historyRole__listItemPrice {
  41.         font-size: 10px;
  42.         color: #000;
  43.         margin-top: 8px;
  44.         line-height: 1.2;
  45.         white-space: initial;
  46.     }
  47.     .ec-historyRole__heading {
  48.         display: flex;
  49.         justify-content: flex-end;
  50.         align-items: center;
  51.         margin-bottom: 15px;
  52.     }
  53.     .ec-historyRole__heading .ec-secHeading {
  54.         margin-bottom: 0;
  55.     }
  56.     .ec-historyRole__linkText {
  57.         font-size: 10px;
  58.     }
  59.     @media only screen and (max-width: 767px) {
  60.         .ec-historyRole__heading .ec-secHeading__line {
  61.             margin: 0 10px;
  62.         }
  63.     }
  64.     @media only screen and (min-width: 768px){
  65.         .ec-historyRole {
  66.             padding: 60px 0;
  67.         }
  68.         .ec-historyRole__list {
  69.             gap: 16px;
  70.         }
  71.         .ec-historyRole__listItem {
  72.             max-width: 128px;
  73.             min-width: 128px;
  74.         }
  75.         .ec-historyRole__listItemTitle, .ec-historyRole__linkText {
  76.             font-size: 12px;
  77.         }
  78.     }
  79.     </style>
  80. {% endblock %}
  82. {% if RecentlyViewedProducts|length > 0 %}
  83. <div class="ec-role">
  84.     <div class="ec-historyRole">
  85.         <div class="ec-historyRole__heading">
  86.             {#<div class="ec-secHeading">#}
  87.             {#    <span class="ec-secHeading__en">{{ 'recently_viewed_products.title.en'|trans }}</span>#}
  88.             {#    <span class="ec-secHeading__line"></span>#}
  89.             {#    <span class="ec-secHeading__ja">{{ 'recently_viewed_products.title.jp'|trans }}</span>#}
  90.             {#</div>#}
  91.             <a href="{{ url('block_recently_viewed_products_clear') }}" class="ec-historyRole__linkText">{{ 'recently_viewed_products.clear'|trans }}</a>
  92.         </div>
  93.         <div class="content-2">
  94.             {% for Product in RecentlyViewedProducts %}
  95.             <div class="card-2">
  96.                 {% for ProductTags in Product.ProductTag %}
  97.                     {% if ProductTags.Tag.id == 1 %}
  98.                         <div class="new">
  99.                             <div class="new-text">New</div>
  100.                         </div>
  101.                     {% endif %}
  102.                 {% endfor %}
  103.                 <a href="{{ url('product_detail', {id: Product.id}) }}">
  104.                     <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" class="" alt="{{ Product.name }}"/>
  105.                 </a>
  106.                 <h3>タイトル:{{ Product.name }}</h3>
  107.                 <p>著者:<span>{{ Product.author }}</span></p>
  108.                 <p>￥<span>{{ Product.getPrice02IncTaxMax }}</span>税込</p>
  109.             </div>
  110.             {% endfor %}
  111.         </div>
  112.     </div>
  113. </div>
  114. {% endif %}