Add product carousel module with template and database structure
- Created `pp_carousel.tpl` for rendering product carousel with Swiper integration. - Added `plan.md` detailing module architecture, database schema, and implementation steps. - Initialized log files for development and production environments.
This commit is contained in:
67
modules/pp_carousel/views/templates/hook/pp_carousel.tpl
Normal file
67
modules/pp_carousel/views/templates/hook/pp_carousel.tpl
Normal file
@@ -0,0 +1,67 @@
|
||||
<section class="pp-carousel" id="pp-carousel-{$ppc_id}">
|
||||
<div class="pp-carousel__header">
|
||||
{if $ppc_title}
|
||||
<h2 class="pp-carousel__title">{$ppc_title|escape:'htmlall':'UTF-8'}</h2>
|
||||
{/if}
|
||||
{if $ppc_subtitle}
|
||||
<div class="pp-carousel__subtitle">{$ppc_subtitle|escape:'htmlall':'UTF-8'}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{if $ppc_products|count > 0}
|
||||
<div class="pp-carousel__slider swiper">
|
||||
<div class="swiper-wrapper">
|
||||
{foreach from=$ppc_products item=product}
|
||||
<div class="swiper-slide">
|
||||
<article class="pp-carousel__card">
|
||||
<a class="pp-carousel__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"
|
||||
width="300" height="300">
|
||||
{elseif isset($product.cover.large.url)}
|
||||
<img src="{$product.cover.large.url}"
|
||||
alt="{$product.name|escape:'htmlall':'UTF-8'}"
|
||||
loading="lazy">
|
||||
{/if}
|
||||
|
||||
{if isset($product.category_name) && $product.category_name}
|
||||
<span class="pp-carousel__label">{$product.category_name|escape:'htmlall':'UTF-8'}</span>
|
||||
{/if}
|
||||
</a>
|
||||
|
||||
<div class="pp-carousel__meta">
|
||||
<a class="pp-carousel__name" href="{$product.url}">
|
||||
{$product.name|escape:'htmlall':'UTF-8'}
|
||||
</a>
|
||||
|
||||
{if isset($product.price) && $product.price}
|
||||
<div class="pp-carousel__price">
|
||||
{$product.price}
|
||||
{if $ppc_price_suffix}
|
||||
<span class="pp-carousel__priceSuffix">{$ppc_price_suffix|escape:'htmlall':'UTF-8'}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
|
||||
<div class="pp-carousel__nav">
|
||||
<div class="pp-carousel__prev" aria-label="Poprzedni"></div>
|
||||
<div class="pp-carousel__next" aria-label="Następny"></div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{if $ppc_button_label && $ppc_button_url}
|
||||
<div class="pp-carousel__footer">
|
||||
<a class="pp-carousel__more" href="{$ppc_button_url|escape:'htmlall':'UTF-8'}">
|
||||
{$ppc_button_label|escape:'htmlall':'UTF-8'}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
Reference in New Issue
Block a user