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

Open in your IDE?
  1. {% block stylesheet %}
  2.     <style>
  3.     {# タイトル #}
  4.     .ec-secHeading span.ec-secHeading__ja {
  5.         color: #000;
  6.         font-size: 18px;
  7.         font-style: normal;
  8.         font-weight: 700;
  9.         line-height: 24px;
  10.         letter-spacing: normal;
  11.         vertical-align: 0px;
  12.     }
  14.     {# 商品画像 #}
  15.     .ec-historyRole__listImage {
  16.         margin-bottom: 8px;
  17.     }
  19.     .ec-historyRole__listImage img {
  20.         width: 96px;
  21.         height: 96px;
  22.         object-fit: cover;
  23.         border-radius: 96px; 
  24.     }
  26.     .ec-historyRole__listItemTitle {
  27.         color: #000;
  28.         text-align: center;
  29.         font-size: 14px;
  30.         font-style: normal;
  31.         font-weight: 600;
  32.         line-height: 18px;
  33.         width: 96px;
  34.         display: -webkit-box;              /* flexboxの一種（省略に必要） */
  35.         -webkit-line-clamp: 2;             /* 最大行数 */
  36.         -webkit-box-orient: vertical;      /* 縦方向に行を積む */
  37.         overflow: hidden;                  /* 溢れた部分を非表示 */
  38.         text-overflow: ellipsis;           /* … を表示 */
  39.         word-break: break-word;            /* 長い単語も折り返す */
  40.     }
  41.     
  42.     .recently_product .item {
  43.         margin-right: 10px;
  44.     }
  46.     /* モバイル（幅767px以下） */
  47.     @media screen and (max-width: 767px) {
  48.         .ec-historyRole__listImage img {
  49.             width: 80px;
  50.             height: 80px;
  51.             object-fit: cover;
  52.             border-radius: 80px;
  53.         }
  55.         .ec-historyRole__listItemTitle {
  56.             font-size: 12px;
  57.             font-weight: 600;
  58.             line-height: 18px;
  59.             width: 80px;
  60.         }
  62.         .ec-role {
  63.             padding-left: 0px;
  64.             padding-right: 0px;
  65.         }
  66.         
  67.         .recently_product {
  68.             margin-left: 16px;
  69.         }
  71.         .ec-secHeading {
  72.             margin-left: 16px;
  73.         }
  74.         
  75.         .recently_product .item {
  76.             margin-right: 0px;
  77.         }
  78.     }
  80.     </style>
  81. {% endblock %}
  83. {% block javascript %}
  84.     <script>
  85.         
  86.         $(function() {
  87.             $('.recently_product').slick({
  88.                 dots: false,
  89.                 autoplay: true,
  90.                 autoplaySpeed: 1000,
  91.                 centerMode: false,   // 中央寄せしない
  92.                 variableWidth: true, // スライド幅に合わせて並べる（左寄せにしやすい）
  93.                 centerPadding: '1%',
  94.                 arrows: false,
  95.                 infinite: false,
  96.                 slidesToShow: 9,
  97.                 swipeToSlide: true
  98.             });
  99.         });
  100.     </script>
  101. {% endblock javascript %}
  103. {% if RecentlyViewedProducts|length > 0 %}
  104. <div class="ec-role" style="margin-bottom: 24px;">
  105.     <div class="ec-historyRole">
  106.         <div class="ec-historyRole__heading">
  107.             <div class="ec-secHeading">
  108.                 <span class="ec-secHeading__ja">最近閲覧した商品</span>
  109.             </div>
  110.         </div>
  111.         <div class="recently_product" style="">
  112.             {% for Product in RecentlyViewedProducts %}
  113.                 <div class="item slick-slide" style="">
  114.                     <a href="{{ url('product_detail', {id: Product.id}) }}">
  115.                         <div class="ec-historyRole__listImage">
  116.                             <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" style="background: url('{{ asset(Product.main_list_image|no_image_product, 'save_image') }}') lightgray 50% / cover no-repeat;" alt="{{ Product.name }}" loading="lazy">
  117.                         </div>
  118.                         <p class="ec-historyRole__listItemTitle">{{ Product.name }}</p>
  119.                     </a>
  120.                 </div>
  121.             {% endfor %}
  122.         </div>
  123.     </div>
  124. </div>
  125. {% endif %}