feat(main): Add slider block type
This commit is contained in:
@@ -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) }}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -9,6 +9,11 @@
|
||||
<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">×</span>
|
||||
</button>
|
||||
|
||||
@@ -3,9 +3,21 @@
|
||||
<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>
|
||||
<div class="customhtml-banner-content">
|
||||
{include file="module:ws_customhtml/views/templates/hook/_banner_content.tpl" block=$block}
|
||||
{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}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -8,5 +8,7 @@
|
||||
<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">{l s='Learn more' d='Modules.Wscustomhtml.Shop'}</a>
|
||||
<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}
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
{if !empty($block.slides)}
|
||||
{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-wrapper">
|
||||
{foreach from=$block.slides item="slide" name="slides"}
|
||||
<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}
|
||||
{else}
|
||||
{include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide}
|
||||
{/if}
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-none d-lg-flex customhtml-slider-grid">
|
||||
{foreach from=$block.slides item="slide" name="slides"}
|
||||
<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'};">
|
||||
{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}
|
||||
{else}
|
||||
{include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide}
|
||||
{/if}
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{/block}
|
||||
{/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-wrapper">
|
||||
{foreach from=$block.slides item="slide" name="slides"}
|
||||
<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}
|
||||
{else}
|
||||
{include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide}
|
||||
{/if}
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
|
||||
@@ -19,6 +19,11 @@
|
||||
{include file="module:ws_customhtml/views/templates/hook/_alert.tpl" block=$block}
|
||||
{elseif $block.type == 'usp'}
|
||||
{include file="module:ws_customhtml/views/templates/hook/_usp.tpl" block=$block}
|
||||
{elseif $block.type == 'slider'}
|
||||
{if $block.show_title && !empty($block.title)}
|
||||
<div class="customhtml-title">{$block.title|escape:'html':'UTF-8'}</div>
|
||||
{/if}
|
||||
{include file="module:ws_customhtml/views/templates/hook/_slider.tpl" block=$block}
|
||||
{else}
|
||||
{if $block.show_title && !empty($block.title)}
|
||||
<div class="customhtml-title">{$block.title|escape:'html':'UTF-8'}</div>
|
||||
|
||||
Reference in New Issue
Block a user