isabelle/ws_customhtml
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(main: Added default block classes

Browse Source
This commit is contained in:
isabelle
2026-09-08 16:36:39 +02:00
parent be9a676d9d
commit 620c34e353
29 changed files with 277 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/css/front/customhtml.css
+10 -6
View File
@@ -7,6 +7,7 @@
padding: 2rem;
bottom: 0px;
position: absolute;
z-index: 2;
}
.customhtml-banner-title {
@@ -18,13 +19,16 @@
margin-bottom: 1rem;
}
/* .customhtml-banner-image--gradient {
width: 100%;
height: 100%;
.customhtml-banner-image {
position: relative;
}
.customhtml-banner-image--gradient {
position: absolute;
background: transparent linear-gradient(180deg, #27272777 0%, #272727 100%)
0% 0% no-repeat padding-box;
} */
inset: 0;
pointer-events: none;
z-index: 1;
}
/* Alert */
.customhtml-alert {
max-height: 500px;
views/js/admin/customhtmlblock_form.js
+14
View File
@@ -18,6 +18,20 @@ $(document).ready(function () {
$('#custom_html_block_type').on('change', toggleBlockTypeFields);
toggleBlockTypeFields();
function toggleGroupDefaultClassHint() {
var hint = $('#customhtmlblock-group-default-class-hint');
var defaultClass = $('#custom_html_block_id_ws_customhtml_group option:selected').data('defaultBlockClass');
if (defaultClass) {
hint.text(hint.data('template').replace('%s%', defaultClass)).show();
} else {
hint.hide();
}
}
$('#custom_html_block_id_ws_customhtml_group').on('change', toggleGroupDefaultClassHint);
toggleGroupDefaultClassHint();
function initRepeater(containerSelector, addButtonSelector, itemClass, removeButtonClass) {
var container = $(containerSelector);
var removeLabel = container.data('removeLabel');
views/templates/admin/form/blocks/block_form.html.twig
+6 -1
View File
@@ -114,12 +114,17 @@
{{ form_row(customHtmlBlockForm.link_text) }}
</div>
<p
id="customhtmlblock-group-default-class-hint"
class="alert alert-warning"
data-template="{{ 'The group that this block belongs to applies the classes "%s%" to every block. Edit the group to change this - it is stored under the "Default block class" input.'|trans({}, 'Modules.Wscustomhtml.Admin')|e('html_attr') }}"
></p>
{{ form_row(customHtmlBlockForm.custom_class) }}
{{ form_row(customHtmlBlockForm.active) }}
{{ form_rest(customHtmlBlockForm) }}
</div>
<div class="card-footer">
<a href="{{ path('customhtmlblock_index') }}" class="btn btn-outline-secondary">
<a href="{{ path('customhtmlblock_index', idGroup is defined and idGroup ? {'idGroup': idGroup} : {}) }}" class="btn btn-outline-secondary">
{{ 'Cancel'|trans({}, 'Admin.Actions') }}
</a>
<button class="btn btn-primary float-right">
views/templates/admin/form/blocks/group_form.html.twig
+3
View File
@@ -17,6 +17,9 @@
{{ 'Cancel'|trans({}, 'Admin.Actions') }}
</a>
{% if idCustomHtmlGroup is defined %}
<a href="{{ path('customhtmlblock_index', {'idGroup': idCustomHtmlGroup}) }}" class="btn btn-outline-primary">
{{ 'View blocks'|trans({}, 'Modules.Wscustomhtml.Admin') }}
</a>
<a href="{{ path('customhtmlblock_create', {'idGroup': idCustomHtmlGroup}) }}" class="btn btn-outline-primary">
{{ 'Add block'|trans({}, 'Modules.Wscustomhtml.Admin') }}
</a>
views/templates/hook/_alert.tpl
+22 -13
View File
@@ -1,21 +1,30 @@
{if !empty($block.description)}
<div
id="customhtml-alert-{$block.id_ws_customhtml|intval}"
class="alert alert-{$block.alert_type|escape:'html':'UTF-8'} alert-dismissible customhtml-alert"
role="alert"
data-timeout="{$block.timeout|intval}"
>
{if $block.show_title && !empty($block.title)}
<strong class="customhtml-alert-title">{$block.title|escape:'html':'UTF-8'}</strong>
{/if}
<span class="customhtml-alert-text">{$block.description|escape:'html':'UTF-8'|nl2br}</span>
{if !empty($block.link)}
<a href="{$block.link|escape:'html':'UTF-8'}" class="btn btn-{$block.alert_type|escape:'html':'UTF-8'} customhtml-alert-btn">
{if !empty($block.link_text)}{$block.link_text|escape:'html':'UTF-8'}{else}{l s='Learn more' d='Modules.Wscustomhtml.Shop'}{/if}
</a>
{/if}
<button type="button" class="close customhtml-alert-close" aria-label="{l s='Close' d='Modules.Wscustomhtml.Shop'}">
<span aria-hidden="true">&times;</span>
</button>
<div class="row">
{block name=alert_content}
<div class="col d-flex align-items-center">
{if $block.show_title && !empty($block.title)}
<strong class="customhtml-alert-title">{$block.title|escape:'html':'UTF-8'}</strong>
{/if}
<span class="customhtml-alert-text">{$block.description|escape:'html':'UTF-8'|nl2br}</span>
</div>
{/block}
{block name=alert_actions}
<div class="col-auto">
{if !empty($block.link)}
<a href="{$block.link|escape:'html':'UTF-8'}" class="btn btn-{$block.alert_type|escape:'html':'UTF-8'} customhtml-alert-btn">
{if !empty($block.link_text)}{$block.link_text|escape:'html':'UTF-8'}{else}{l s='Learn more' d='Modules.Wscustomhtml.Shop'}{/if}
</a>
{/if}
<button type="button" class="close customhtml-alert-close" aria-label="{l s='Close' d='Modules.Wscustomhtml.Shop'}">
<span aria-hidden="true">&times;</span>
</button>
</div>
{/block}
</div>
</div>
{/if}
views/templates/hook/_banner.tpl
+33 -18
View File
@@ -1,23 +1,38 @@
<div class="customhtml-banner row flex-column position-relative">
<div class="customhtml-banner-image">
<div class="customhtml-banner-image--gradient"></div>
{if !empty($block.image_url)}
<img src="{$block.image_url|escape:'html':'UTF-8'}" alt="{$block.title|escape:'html':'UTF-8'}">
{else}
<img
src="{$urls.img_ps_url}noimageavailable.jpg"
alt="{$block.title|escape:'html':'UTF-8'}"
width="100%"
class="img-fluid rounded lazyload"
/>
{/if}
</div>
{block name=banner_image}
<div class="customhtml-banner-image">
<div class="customhtml-banner-image--gradient"></div>
{if !empty($block.image_url)}
<img src="{$block.image_url|escape:'html':'UTF-8'}" alt="{$block.title|escape:'html':'UTF-8'}">
{else}
<img
src="{$urls.img_ps_url}noimageavailable.jpg"
alt="{$block.title|escape:'html':'UTF-8'}"
width="100%"
class="img-fluid rounded lazyload"
/>
{/if}
</div>
{/block}
{block name=banner_content}
<div class="customhtml-banner-content">
{assign var="customhtmlOverridePath" value="{$smarty.const._PS_THEME_DIR_}modules/ws_customhtml/views/templates/hook/{$hookName}/_banner_content.tpl"}
{if file_exists($customhtmlOverridePath)}
{include file="module:ws_customhtml/views/templates/hook/`$hookName`/_banner_content.tpl" block=$block}
{else}
{include file="module:ws_customhtml/views/templates/hook/_banner_content.tpl" block=$block}
{if !empty($count)}
<span class="customhtml-banner-count font-monospace">{$count}</span>
{/if}
{if $block.show_title && !empty($block.title)}
<h3 class="customhtml-banner-title">{$block.title|escape:'html':'UTF-8'}</h3>
{/if}
{if !empty($block.description)}
<div class="customhtml-banner-description">{$block.description|escape:'html':'UTF-8'|nl2br}</div>
{/if}
{if !empty($block.extra_description)}
<div class="customhtml-banner-extra-description">{$block.extra_description|escape:'html':'UTF-8'|nl2br}</div>
{/if}
{if !empty($block.link)}
<a href="{$block.link|escape:'html':'UTF-8'}" class="btn btn-primary customhtml-banner-link">
{if !empty($block.link_text)}{$block.link_text|escape:'html':'UTF-8'}{else}{l s='Learn more' d='Modules.Wscustomhtml.Shop'}{/if}
</a>
{/if}
</div>
{/block}
</div>
views/templates/hook/_banner_content.tpl
-14
View File
@@ -1,14 +0,0 @@
{if $block.show_title && !empty($block.title)}
<h3 class="customhtml-banner-title">{$block.title|escape:'html':'UTF-8'}</h3>
{/if}
{if !empty($block.description)}
<div class="customhtml-banner-description">{$block.description|escape:'html':'UTF-8'|nl2br}</div>
{/if}
{if !empty($block.extra_description)}
<div class="customhtml-banner-extra-description">{$block.extra_description|escape:'html':'UTF-8'|nl2br}</div>
{/if}
{if !empty($block.link)}
<a href="{$block.link|escape:'html':'UTF-8'}" class="btn btn-primary customhtml-banner-link">
{if !empty($block.link_text)}{$block.link_text|escape:'html':'UTF-8'}{else}{l s='Learn more' d='Modules.Wscustomhtml.Shop'}{/if}
</a>
{/if}
views/templates/hook/_faq_accordion.tpl
+6 -2
View File
@@ -2,8 +2,9 @@
<div class="accordion customhtml-faq-accordion" id="customhtml-faq-{$block.id_ws_customhtml|intval}">
{foreach from=$block.faqs item="faq" name="customhtmlFaqLoop"}
<div class="card">
{block name=faq_question}
<div class="card-header" id="customhtml-faq-heading-{$block.id_ws_customhtml|intval}-{$faq.id_ws_customhtml_faq|intval}">
{if !empty($faq.answer)}
<button
class="btn btn-link col-12 d-flex text-left{if !$smarty.foreach.customhtmlFaqLoop.first} collapsed{/if}"
@@ -14,7 +15,7 @@
aria-controls="customhtml-faq-collapse-{$block.id_ws_customhtml|intval}-{$faq.id_ws_customhtml_faq|intval}"
>
{/if}
<div class="faq-question col pl-0">
{$faq.question|escape:'html':'UTF-8'}
</div>
@@ -39,7 +40,9 @@
{/if}
</div>
{/block}
{if !empty($faq.answer)}
{block name=faq_answer}
<div
id="customhtml-faq-collapse-{$block.id_ws_customhtml|intval}-{$faq.id_ws_customhtml_faq|intval}"
class="collapse{if $smarty.foreach.customhtmlFaqLoop.first} show{/if}"
@@ -50,6 +53,7 @@
{$faq.answer nofilter}
</div>
</div>
{/block}
{/if}
</div>
{/foreach}
views/templates/hook/_slider.tpl
+15 -10
View File
@@ -2,15 +2,16 @@
{if $block.slider_mode == 'responsive'}
{block name=slider_responsive}
<div class="d-lg-none">
<div id="customhtml-slider-{$block.id_ws_customhtml|intval}" class="swiper customhtml-slider" data-swiper="{$block.slider_config|escape:'html':'UTF-8'}">
<div class="swiper customhtml-slider" data-swiper="{$block.slider_config|escape:'html':'UTF-8'}">
<div class="swiper-wrapper">
{foreach from=$block.slides item="slide" name="slides"}
{assign var="count" value=$smarty.foreach.slides.iteration|string_format:"%02d"}
<div class="swiper-slide">
{assign var="customhtmlOverridePath" value="{$smarty.const._PS_THEME_DIR_}modules/ws_customhtml/views/templates/hook/{$hookName}/banner.tpl"}
{if file_exists($customhtmlOverridePath)}
{include file="module:ws_customhtml/views/templates/hook/`$hookName`/banner.tpl" block=$slide group=$group hookName=$hookName}
{include file="module:ws_customhtml/views/templates/hook/`$hookName`/banner.tpl" block=$slide group=$group hookName=$hookName count=$count}
{else}
{include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide}
{include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide count=$count}
{/if}
</div>
{/foreach}
@@ -19,12 +20,17 @@
</div>
<div class="row d-none d-lg-flex customhtml-slider-grid">
{foreach from=$block.slides item="slide" name="slides"}
{assign var="count" value=$smarty.foreach.slides.iteration|string_format:"%02d"}
{if !empty($block.slider_desktop_column_width)}
<div class="customhtml-slider-grid-item" style="flex: 0 0 {$block.slider_desktop_column_width|escape:'html':'UTF-8'}; max-width: {$block.slider_desktop_column_width|escape:'html':'UTF-8'};">
{else}
<div class="customhtml-slider-grid-item col">
{/if}
{assign var="customhtmlOverridePath" value="{$smarty.const._PS_THEME_DIR_}modules/ws_customhtml/views/templates/hook/{$hookName}/banner.tpl"}
{if file_exists($customhtmlOverridePath)}
{include file="module:ws_customhtml/views/templates/hook/`$hookName`/banner.tpl" block=$slide group=$group hookName=$hookName}
{include file="module:ws_customhtml/views/templates/hook/`$hookName`/banner.tpl" block=$slide group=$group hookName=$hookName count=$count}
{else}
{include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide}
{include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide count=$count}
{/if}
</div>
{/foreach}
@@ -33,15 +39,16 @@
{/if}
{if $block.slider_mode != 'responsive'}
{block name=slider_always}
<div id="customhtml-slider-{$block.id_ws_customhtml|intval}" class="swiper customhtml-slider" data-swiper="{$block.slider_config|escape:'html':'UTF-8'}">
<div class="swiper customhtml-slider" data-swiper="{$block.slider_config|escape:'html':'UTF-8'}">
<div class="swiper-wrapper">
{foreach from=$block.slides item="slide" name="slides"}
{assign var="count" value=$smarty.foreach.slides.iteration|string_format:"%02d"}
<div class="swiper-slide">
{assign var="customhtmlOverridePath" value="{$smarty.const._PS_THEME_DIR_}modules/ws_customhtml/views/templates/hook/{$hookName}/banner.tpl"}
{if file_exists($customhtmlOverridePath)}
{include file="module:ws_customhtml/views/templates/hook/`$hookName`/banner.tpl" block=$slide group=$group hookName=$hookName}
{include file="module:ws_customhtml/views/templates/hook/`$hookName`/banner.tpl" block=$slide group=$group hookName=$hookName count=$count}
{else}
{include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide}
{include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide count=$count}
{/if}
</div>
{/foreach}
@@ -50,5 +57,3 @@
{/block}
{/if}
{/if}
views/templates/hook/_usp.tpl
+8 -1
View File
@@ -1,17 +1,24 @@
{if !empty($block.image_url) || ($block.show_title && !empty($block.title))}
{if !empty($block.image_url) || ($block.show_title && !empty($block.title)) || !empty($block.description)}
{if !empty($block.link)}
<a href="{$block.link|escape:'html':'UTF-8'}" class="customhtml-usp d-flex align-items-center">
{else}
<div class="customhtml-usp d-flex align-items-center">
{/if}
{block name=usp_icon}
{if !empty($block.image_url)}
<span class="customhtml-usp-icon">
<img src="{$block.image_url|escape:'html':'UTF-8'}" alt="">
</span>
{/if}
{/block}
{block name=usp_content}
{if $block.show_title && !empty($block.title)}
<span class="customhtml-usp-text">{$block.title|escape:'html':'UTF-8'}</span>
{/if}
{if !empty($block.description)}
<span class="customhtml-usp-description">{$block.description|escape:'html':'UTF-8'|nl2br}</span>
{/if}
{/block}
{if !empty($block.link)}
</a>
{else}
views/templates/hook/customhtml_block.tpl
+4 -4
View File
@@ -1,13 +1,13 @@
{if !empty($groupList)}
<div class="customhtml-container {$hookName|escape:'html':'UTF-8'}--container">
{foreach from=$groupList item="group"}
<div class="customhtml-group customhtml-group-{$group.id_ws_customhtml_group|intval} row{if !empty($group.custom_class)} {$group.custom_class|escape:'html':'UTF-8'}{/if}">
{foreach from=$group.blocks item="block"}
<div class="customhtml-block col{if !empty($block.custom_class)} {$block.custom_class|escape:'html':'UTF-8'}{/if}">
<div class="customhtml-group row{if !empty($group.custom_class)} {$group.custom_class|escape:'html':'UTF-8'}{/if}">
{foreach from=$group.blocks item="block" name="blocks"}
<div class="customhtml-block col{if !empty($group.default_block_class)} {$group.default_block_class|escape:'html':'UTF-8'}{/if}{if !empty($block.custom_class)} {$block.custom_class|escape:'html':'UTF-8'}{/if}">
{assign var="customhtmlOverridePath" value="{$smarty.const._PS_THEME_DIR_}modules/ws_customhtml/views/templates/hook/{$hookName}/{$block.type}.tpl"}
{if file_exists($customhtmlOverridePath)}
{include file="module:ws_customhtml/views/templates/hook/`$hookName`/`$block.type`.tpl" block=$block group=$group hookName=$hookName}
{include file="module:ws_customhtml/views/templates/hook/`$hookName`/`$block.type`.tpl" block=$block group=$group hookName=$hookName iteration=$smarty.foreach.blocks.iteration}
{elseif $block.type == 'faq'}
{if $block.show_title && !empty($block.title)}
<div class="customhtml-title">{$block.title|escape:'html':'UTF-8'}</div>