Test module

modules/project_pro_news/views/css/project_pro_news.css

@@ -0,0 +1,133 @@
+.project-pro-news {
+  margin: 40px 0;
+}
+
+.project-pro-news__header {
+  margin-bottom: 18px;
+}
+
+.project-pro-news__title {
+  font-size: 42px;
+  line-height: 1.1;
+  margin: 0 0 6px 0;
+  font-weight: 500;
+}
+
+.project-pro-news__subtitle {
+  font-size: 44px;
+  line-height: 1.1;
+  font-weight: 300;
+  opacity: .85;
+}
+
+.project-pro-news__slider {
+  position: relative;
+  padding: 10px 0 0 0;
+}
+
+.project-pro-news__card {
+  display: block;
+}
+
+.project-pro-news__image {
+  display: block;
+  border-radius: 2px;
+  overflow: hidden;
+  background: #f6f6f6;
+}
+
+.project-pro-news__image img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.project-pro-news__meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 2px 0 2px;
+  align-items: baseline;
+}
+
+.project-pro-news__name {
+  font-size: 18px;
+  font-weight: 600;
+  color: inherit;
+  text-decoration: none;
+}
+
+.project-pro-news__price {
+  font-size: 16px;
+  opacity: .7;
+  white-space: nowrap;
+}
+
+.project-pro-news__priceSuffix {
+  margin-left: 4px;
+}
+
+.project-pro-news__footer {
+  margin-top: 22px;
+}
+
+.project-pro-news__more {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+  opacity: .75;
+  font-size: 16px;
+}
+
+.project-pro-news__more:before {
+  content: "";
+  display: inline-block;
+  width: 28px;
+  height: 1px;
+  background: currentColor;
+  opacity: .6;
+}
+
+.project-pro-news__nav .project-pro-news__prev,
+.project-pro-news__nav .project-pro-news__next {
+  position: absolute;
+  top: 45%;
+  width: 40px;
+  height: 40px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  opacity: .6;
+  z-index: 3;
+}
+
+.project-pro-news__nav .project-pro-news__prev { left: -10px; }
+.project-pro-news__nav .project-pro-news__next { right: -10px; }
+
+.project-pro-news__nav .project-pro-news__prev:after,
+.project-pro-news__nav .project-pro-news__next:after {
+  content: "";
+  display: block;
+  width: 10px;
+  height: 10px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.project-pro-news__nav .project-pro-news__prev:after {
+  transform: translate(-50%, -50%) rotate(135deg);
+}
+
+.project-pro-news__nav .project-pro-news__next:after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+@media (max-width: 992px) {
+  .project-pro-news__title { font-size: 34px; }
+  .project-pro-news__subtitle { font-size: 34px; }
+  .project-pro-news__nav .project-pro-news__prev { left: 0; }
+  .project-pro-news__nav .project-pro-news__next { right: 0; }
+}

modules/project_pro_news/views/js/project_pro_news.js

@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', function () {
+  var el = document.querySelector('.project-pro-news__slider.swiper');
+  if (!el || typeof Swiper === 'undefined') return;
+
+  new Swiper(el, {
+    slidesPerView: 3,
+    spaceBetween: 26,
+    loop: false,
+    navigation: {
+      nextEl: '.project-pro-news__next',
+      prevEl: '.project-pro-news__prev'
+    },
+    breakpoints: {
+      0:   { slidesPerView: 1.15, spaceBetween: 16 },
+      576: { slidesPerView: 2,    spaceBetween: 18 },
+      992: { slidesPerView: 3,    spaceBetween: 26 }
+    }
+  });
+});

modules/project_pro_news/views/templates/hook/project_pro_news.tpl

@@ -0,0 +1,59 @@
+<section class="project-pro-news">
+  <div class="project-pro-news__header">
+    {if $ppn_title}
+      <h2 class="project-pro-news__title">{$ppn_title|escape:'htmlall':'UTF-8'}</h2>
+    {/if}
+
+    {if $ppn_subtitle}
+      <div class="project-pro-news__subtitle">{$ppn_subtitle|escape:'htmlall':'UTF-8'}</div>
+    {/if}
+  </div>
+
+  {if $ppn_products|count > 0}
+    <div class="project-pro-news__slider swiper">
+      <div class="swiper-wrapper">
+        {foreach from=$ppn_products item=product}
+          <div class="swiper-slide">
+            <article class="project-pro-news__card">
+              <a class="project-pro-news__image" href="{$product.url}" title="{$product.name|escape:'htmlall':'UTF-8'}">
+                {if isset($product.cover.bySize.home_default.url)}
+                  <img src="{$product.cover.bySize.home_default.url}" alt="{$product.name|escape:'htmlall':'UTF-8'}" loading="lazy">
+                {elseif isset($product.cover.large.url)}
+                  <img src="{$product.cover.large.url}" alt="{$product.name|escape:'htmlall':'UTF-8'}" loading="lazy">
+                {/if}
+              </a>
+
+              <div class="project-pro-news__meta">
+                <a class="project-pro-news__name" href="{$product.url}">
+                  {$product.name|escape:'htmlall':'UTF-8'}
+                </a>
+
+                {if isset($product.price) && $product.price}
+                  <div class="project-pro-news__price">
+                    {$product.price}
+                    {if $ppn_price_suffix}
+                      <span class="project-pro-news__priceSuffix">{$ppn_price_suffix|escape:'htmlall':'UTF-8'}</span>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
+            </article>
+          </div>
+        {/foreach}
+      </div>
+
+      <div class="project-pro-news__nav">
+        <div class="project-pro-news__prev" aria-label="Prev"></div>
+        <div class="project-pro-news__next" aria-label="Next"></div>
+      </div>
+    </div>
+  {/if}
+
+  {if $ppn_button_label && $ppn_button_url}
+    <div class="project-pro-news__footer">
+      <a class="project-pro-news__more" href="{$ppn_button_url|escape:'htmlall':'UTF-8'}">
+        {$ppn_button_label|escape:'htmlall':'UTF-8'}
+      </a>
+    </div>
+  {/if}
+</section>