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

feat(main): Add FAQ accordion

Browse Source
This commit is contained in:
isabelle
2026-08-11 13:25:06 +02:00
parent 635c13a0ed
commit 1493081602
22 changed files with 459 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/templates/admin/form/blocks/block_form.html.twig
+38
View File
@@ -1,6 +1,12 @@
{% import '@PrestaShop/Admin/macros.html.twig' as ps %}
{% form_theme customHtmlBlockForm '@PrestaShop/Admin/TwigTemplateForm/prestashop_ui_kit.html.twig' %}
{% macro faqFields(faqForm) %}
{{ form_row(faqForm.question) }}
{{ form_row(faqForm.answer) }}
{% endmacro %}
{% import _self as faqMacros %}
{% block customhtmlblock_form_block %}
<div class="card">
{{ form_start(customHtmlBlockForm) }}
@@ -10,6 +16,38 @@
</h3>
</div>
<div class="card-body">
{{ form_row(customHtmlBlockForm.id_ws_customhtml_group) }}
{{ form_row(customHtmlBlockForm.title) }}
{{ form_row(customHtmlBlockForm.type) }}
{{ form_row(customHtmlBlockForm.show_title) }}
{{ form_row(customHtmlBlockForm.content) }}
<div class="customhtmlblock-type-field customhtmlblock-type-faq">
<label class="form-control-label">
{{ 'FAQ items'|trans({}, 'Modules.Wscustomhtml.Admin') }}
</label>
<div
id="customhtmlblock-faq-items"
data-prototype="{{ faqMacros.faqFields(customHtmlBlockForm.faqs.vars.prototype)|e('html_attr') }}"
data-index="{{ customHtmlBlockForm.faqs|length }}"
>
{% for faqRow in customHtmlBlockForm.faqs %}
<div class="customhtmlblock-faq-item card mb-2">
<div class="card-body">
{{ faqMacros.faqFields(faqRow) }}
<button type="button" class="btn btn-outline-danger btn-sm customhtmlblock-remove-faq">
<i class="material-icons">delete</i> {{ 'Remove'|trans({}, 'Admin.Actions') }}
</button>
</div>
</div>
{% endfor %}
</div>
<button type="button" id="customhtmlblock-add-faq" class="btn btn-outline-primary btn-sm">
<i class="material-icons">add</i> {{ 'Add FAQ item'|trans({}, 'Modules.Wscustomhtml.Admin') }}
</button>
</div>
{{ form_row(customHtmlBlockForm.active) }}
{{ form_rest(customHtmlBlockForm) }}
</div>
<div class="card-footer">
views/templates/admin/form/customhtmlblock_create.html.twig
+38
View File
@@ -13,6 +13,44 @@
window.prestashop.component.initComponents([
'TinyMCEEditor',
]);
function toggleBlockTypeFields() {
var type = $('#custom_html_block_type').val();
if (type === 'html') {
$('.customhtmlblock-type-html').show();
$('.customhtmlblock-type-faq').hide();
} else {
$('.customhtmlblock-type-html').hide();
$('.customhtmlblock-type-faq').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>
{% endblock %}
views/templates/admin/form/customhtmlblock_edit.html.twig
+38
View File
@@ -13,6 +13,44 @@
window.prestashop.component.initComponents([
'TinyMCEEditor',
]);
function toggleBlockTypeFields() {
var type = $('#custom_html_block_type').val();
if (type === 'html') {
$('.customhtmlblock-type-html').show();
$('.customhtmlblock-type-faq').hide();
} else {
$('.customhtmlblock-type-html').hide();
$('.customhtmlblock-type-faq').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>
{% endblock %}