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

feat(main): Add slider block type

Browse Source
This commit is contained in:
isabelle
2026-08-25 14:32:21 +02:00
parent 06e98a429b
commit be9a676d9d
28 changed files with 729 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/templates/admin/form/blocks/block_form.html.twig
+50 -1
View File
@@ -7,6 +7,17 @@
{% endmacro %}
{% import _self as faqMacros %}
{% macro slideFields(slideForm) %}
{{ form_widget(slideForm.id) }}
{{ form_row(slideForm.title) }}
{{ form_row(slideForm.description) }}
{{ form_row(slideForm.extra_description) }}
{{ form_row(slideForm.link) }}
{{ form_row(slideForm.link_text) }}
{{ form_row(slideForm.image) }}
{% endmacro %}
{% import _self as slideMacros %}
{% block customhtmlblock_form_block %}
<div class="card">
{{ form_start(customHtmlBlockForm) }}
@@ -42,6 +53,7 @@
id="customhtmlblock-faq-items"
data-prototype="{{ faqMacros.faqFields(customHtmlBlockForm.faqs.vars.prototype)|e('html_attr') }}"
data-index="{{ customHtmlBlockForm.faqs|length }}"
data-remove-label="{{ 'Remove'|trans({}, 'Admin.Actions')|e('html_attr') }}"
>
{% for faqRow in customHtmlBlockForm.faqs %}
<div class="customhtmlblock-faq-item card mb-2">
@@ -59,11 +71,48 @@
</button>
</div>
<div class="customhtmlblock-type-field customhtmlblock-type-slider">
<label class="form-control-label">
{{ 'Slides'|trans({}, 'Modules.Wscustomhtml.Admin') }}
</label>
<div
id="customhtmlblock-slide-items"
data-prototype="{{ slideMacros.slideFields(customHtmlBlockForm.slides.vars.prototype)|e('html_attr') }}"
data-index="{{ customHtmlBlockForm.slides|length }}"
data-remove-label="{{ 'Remove'|trans({}, 'Admin.Actions')|e('html_attr') }}"
>
{% for slideRow in customHtmlBlockForm.slides %}
<div class="customhtmlblock-slide-item card mb-2">
<div class="card-body">
{{ slideMacros.slideFields(slideRow) }}
<button type="button" class="btn btn-outline-danger btn-sm customhtmlblock-remove-slide">
<i class="material-icons">delete</i> {{ 'Remove'|trans({}, 'Admin.Actions') }}
</button>
</div>
</div>
{% endfor %}
</div>
<button type="button" id="customhtmlblock-add-slide" class="btn btn-outline-primary btn-sm">
<i class="material-icons">add</i> {{ 'Add slide'|trans({}, 'Modules.Wscustomhtml.Admin') }}
</button>
</div>
{{ form_row(customHtmlBlockForm.slider_mode) }}
<div class="row">
{{ form_row(customHtmlBlockForm.slides_per_view_mobile) }}
{{ form_row(customHtmlBlockForm.slides_per_view_tablet) }}
{{ form_row(customHtmlBlockForm.slides_per_view_desktop) }}
</div>
{{ form_row(customHtmlBlockForm.autoplay_delay) }}
{{ form_row(customHtmlBlockForm.alert_type) }}
{{ form_row(customHtmlBlockForm.timeout) }}
{{ form_row(customHtmlBlockForm.description) }}
{{ form_row(customHtmlBlockForm.extra_description) }}
{{ form_row(customHtmlBlockForm.link) }}
<div class="row">
{{ form_row(customHtmlBlockForm.link) }}
{{ form_row(customHtmlBlockForm.link_text) }}
</div>
{{ form_row(customHtmlBlockForm.custom_class) }}
{{ form_row(customHtmlBlockForm.active) }}
views/templates/admin/form/customhtmlblock_create.html.twig
+1 -44
View File
@@ -8,48 +8,5 @@
{% block javascripts %}
{{ parent() }}
<script>
$(document).ready(function () {
window.prestashop.component.initComponents([
'TinyMCEEditor',
]);
function toggleBlockTypeFields() {
var type = $('#custom_html_block_type').val();
$('.customhtmlblock-type-html').hide();
$('.customhtmlblock-type-faq').hide();
$('.customhtmlblock-type-banner').hide();
$('.customhtmlblock-type-alert').hide();
$('.customhtmlblock-type-usp').hide();
$('.customhtmlblock-type-' + type).show();
}
$('#custom_html_block_type').on('change', toggleBlockTypeFields);
toggleBlockTypeFields();
var removeFaqLabel = '{{ 'Remove'|trans({}, 'Admin.Actions')|e('js') }}';
var faqContainer = $('#customhtmlblock-faq-items');
$('#customhtmlblock-add-faq').on('click', function () {
var index = faqContainer.data('index');
var prototype = faqContainer.data('prototype').replace(/__name__/g, index);
var item = $('<div class="customhtmlblock-faq-item card mb-2"><div class="card-body"></div></div>');
item.find('.card-body')
.append(prototype)
.append(
'<button type="button" class="btn btn-outline-danger btn-sm customhtmlblock-remove-faq">' +
'<i class="material-icons">delete</i> ' + removeFaqLabel + '</button>'
);
faqContainer.append(item);
faqContainer.data('index', index + 1);
});
faqContainer.on('click', '.customhtmlblock-remove-faq', function () {
$(this).closest('.customhtmlblock-faq-item').remove();
});
});
</script>
<script src="{{ asset('../modules/ws_customhtml/views/js/admin/customhtmlblock_form.js') }}"></script>
{% endblock %}
views/templates/admin/form/customhtmlblock_edit.html.twig
+1 -44
View File
@@ -8,48 +8,5 @@
{% block javascripts %}
{{ parent() }}
<script>
$(document).ready(function () {
window.prestashop.component.initComponents([
'TinyMCEEditor',
]);
function toggleBlockTypeFields() {
var type = $('#custom_html_block_type').val();
$('.customhtmlblock-type-html').hide();
$('.customhtmlblock-type-faq').hide();
$('.customhtmlblock-type-banner').hide();
$('.customhtmlblock-type-alert').hide();
$('.customhtmlblock-type-usp').hide();
$('.customhtmlblock-type-' + type).show();
}
$('#custom_html_block_type').on('change', toggleBlockTypeFields);
toggleBlockTypeFields();
var removeFaqLabel = '{{ 'Remove'|trans({}, 'Admin.Actions')|e('js') }}';
var faqContainer = $('#customhtmlblock-faq-items');
$('#customhtmlblock-add-faq').on('click', function () {
var index = faqContainer.data('index');
var prototype = faqContainer.data('prototype').replace(/__name__/g, index);
var item = $('<div class="customhtmlblock-faq-item card mb-2"><div class="card-body"></div></div>');
item.find('.card-body')
.append(prototype)
.append(
'<button type="button" class="btn btn-outline-danger btn-sm customhtmlblock-remove-faq">' +
'<i class="material-icons">delete</i> ' + removeFaqLabel + '</button>'
);
faqContainer.append(item);
faqContainer.data('index', index + 1);
});
faqContainer.on('click', '.customhtmlblock-remove-faq', function () {
$(this).closest('.customhtmlblock-faq-item').remove();
});
});
</script>
<script src="{{ asset('../modules/ws_customhtml/views/js/admin/customhtmlblock_form.js') }}"></script>
{% endblock %}
views/templates/admin/grid/customhtmlblock.html.twig
+1 -11
View File
@@ -12,15 +12,5 @@
{% block javascripts %}
{{ parent() }}
<script>
$(document).ready(function () {
const customhtmlblockGrid = new window.prestashop.component.Grid('customhtmlblock');
customhtmlblockGrid.addExtension(new window.prestashop.component.GridExtensions.SortingExtension());
customhtmlblockGrid.addExtension(new window.prestashop.component.GridExtensions.FiltersResetExtension());
customhtmlblockGrid.addExtension(new window.prestashop.component.GridExtensions.ColumnTogglingExtension());
customhtmlblockGrid.addExtension(new window.prestashop.component.GridExtensions.SubmitRowActionExtension());
customhtmlblockGrid.addExtension(new window.prestashop.component.GridExtensions.PositionExtension());
});
</script>
<script src="{{ asset('../modules/ws_customhtml/views/js/admin/customhtmlblock_grid.js') }}"></script>
{% endblock %}
views/templates/admin/grid/customhtmlgroup.html.twig
+1 -11
View File
@@ -12,15 +12,5 @@
{% block javascripts %}
{{ parent() }}
<script>
$(document).ready(function () {
const customhtmlgroupGrid = new window.prestashop.component.Grid('customhtmlgroup');
customhtmlgroupGrid.addExtension(new window.prestashop.component.GridExtensions.SortingExtension());
customhtmlgroupGrid.addExtension(new window.prestashop.component.GridExtensions.FiltersResetExtension());
customhtmlgroupGrid.addExtension(new window.prestashop.component.GridExtensions.ColumnTogglingExtension());
customhtmlgroupGrid.addExtension(new window.prestashop.component.GridExtensions.SubmitRowActionExtension());
customhtmlgroupGrid.addExtension(new window.prestashop.component.GridExtensions.PositionExtension());
});
</script>
<script src="{{ asset('../modules/ws_customhtml/views/js/admin/customhtmlgroup_grid.js') }}"></script>
{% endblock %}