Skip to content

Commit fc1ed70

Browse files
SiegSieg
committed
WIP Improve lists design and add slider
1 parent 8a357ff commit fc1ed70

File tree

4 files changed

+79
-54
lines changed

4 files changed

+79
-54
lines changed

‎assets/widgets/apex/list.ejs.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
<div class="slider-container d-flex flex-nowrap">
2-
<% for (ip = 0; ip < products.length; ip++) { %>
1+
<% for (ip = 0; ip < products.length; ip++) { %>
32
<div class="card product-card">
43
<div class="product-img-wrapper">
5-
<img width="350" height="220" src="<%= products[ip].iconurl %>" alt="<%= products[ip].name %>" class="product-img">
4+
<img width="350" height="220" src="<%= products[ip].iconurl %>" alt="<%= products[ip].name %>"
5+
class="product-img">
66
<a href="<%= products[ip].deeplink %>" class="stretched-link" aria-label="<%= products[ip].name %>"></a>
77

88
<div class="actions d-none d-lg-block">
99
<div class="bottom">
1010
<div class="input-group">
11-
<a href="<%= products[ip].deeplink %>" class="btn btn-highlight" aria-label="<%= lang_MORE_INFO %>"><%= lang_MORE_INFO %></a>
11+
<a href="<%= products[ip].deeplink %>"
12+
class="btn btn-highlight" aria-label="<%= lang_MORE_INFO %>"><%= lang_MORE_INFO %></a>
1213
</div>
1314
</div>
1415
</div>
@@ -28,5 +29,4 @@
2829
<a href="<%= products[ip].deeplink %>" class="stretched-link" aria-label="<%= lang_MORE_INFO %>"></a>
2930
</div>
3031
</div>
31-
<% } %>
32-
</div>
32+
<% } %>

‎views/twig/extensions/themes/apex/page/list/list.html.twig

+37-32
Original file line numberDiff line numberDiff line change
@@ -7,39 +7,44 @@
77
{% block oepersonalization_page_list_listhead %}
88
{% set listType = oView.getListType() %}
99
{% if listType != 'manufacturer' and listType != 'vendor' %}
10-
<div class="boxwrapper">
11-
<div class="page-header">
12-
<h2>{{ translate({ ident: "OEPERSONALIZATION_TOP_SELLER" }) }}</h2>
13-
</div>
14-
<div id="oePersonalizationListHead">
15-
<div class="inner list-container">
16-
{% include '@oepersonalization/includes/preloader.html.twig' %}
10+
<div class="article-slider row-spacer">
11+
<div class="container-xxl">
12+
<h2 class="h3">{{ translate({ ident: "OEPERSONALIZATION_TOP_SELLER" }) }}</h2>
1713
</div>
18-
</div>
19-
{% set moreInfo = 'MORE_INFO'|translate|addslashes %}
20-
{% set widgetScript = '
21-
var lang_MORE_INFO = "' ~ moreInfo ~ '";
22-
(function () {
23-
var widget = new econda.recengine.Widget({
24-
element: document.getElementById("oePersonalizationListHead"),
25-
renderer: {
26-
type: "template",
27-
uri: "' ~ oViewConf.oePersonalizationGetListPageTemplateUrl()|raw ~ '"
28-
},
29-
accountId: "' ~ oViewConf.oePersonalizationGetAccountId() ~ '",
30-
id: "' ~ oViewConf.oePersonalizationGetListPageWidgetId() ~ '",
31-
context: {
32-
categories: new Array({
33-
type: "productcategory",
34-
id: "' ~ oView.oePersonalizationGetCategoryId() ~ '"
35-
})
36-
},
37-
chunkSize: 4
38-
});
39-
widget.render();
40-
})();
41-
' %}
42-
{{ script({ add: widgetScript, dynamic: __oxid_include_dynamic }) }}
14+
15+
<div class="d-flex flex-nowrap">
16+
<div id="oePersonalizationListHead" class="slider-container">
17+
<div class="inner list-container">
18+
{% include '@oepersonalization/includes/preloader.html.twig' %}
19+
</div>
20+
</div>
21+
{% include '@oepersonalization/includes/slider.html.twig' %}
22+
</div>
23+
24+
{% set moreInfo = 'MORE_INFO'|translate|addslashes %}
25+
{% set widgetScript = '
26+
var lang_MORE_INFO = "' ~ moreInfo ~ '";
27+
(function () {
28+
var widget = new econda.recengine.Widget({
29+
element: document.getElementById("oePersonalizationListHead"),
30+
renderer: {
31+
type: "template",
32+
uri: "' ~ oViewConf.oePersonalizationGetListPageTemplateUrl()|raw ~ '"
33+
},
34+
accountId: "' ~ oViewConf.oePersonalizationGetAccountId() ~ '",
35+
id: "' ~ oViewConf.oePersonalizationGetListPageWidgetId() ~ '",
36+
context: {
37+
categories: new Array({
38+
type: "productcategory",
39+
id: "' ~ oView.oePersonalizationGetCategoryId() ~ '"
40+
})
41+
},
42+
chunkSize: 8
43+
});
44+
widget.render();
45+
})();
46+
' %}
47+
{{ script({ add: widgetScript, dynamic: __oxid_include_dynamic }) }}
4348
</div>
4449
{% endif %}
4550
{% endblock %}

‎views/twig/extensions/themes/apex/page/shop/start.html.twig

+24-16
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,21 @@
55

66
{% if oViewConf.oePersonalizationEnableWidgets() and oViewConf.oePersonalizationGetStartPageBargainArticlesWidgetId() %}
77
{% block oepersonalization_start_bargain_articles %}
8-
<div class="boxwrapper row-spacer">
9-
<div class="page-header">
10-
<h2>{{ "START_BARGAIN_HEADER"|translate }}</h2>
11-
<small class="subhead">{{ "START_BARGAIN_SUBHEADER"|translate }}</small>
8+
<div class="article-slider row-spacer">
9+
<div class="container-xxl">
10+
<h2 class="h3">{{ "START_BARGAIN_HEADER"|translate }}</h2>
11+
<p>{{ "START_BARGAIN_SUBHEADER"|translate }}</p>
1212
</div>
1313

14-
<div id="oePersonalizationBargainArticles">
15-
<div class="inner list-container">
16-
{% include '@oepersonalization/includes/preloader.html.twig' %}
14+
<div class="d-flex flex-nowrap">
15+
<div id="oePersonalizationBargainArticles" class="slider-container">
16+
<div class="inner list-container">
17+
{% include '@oepersonalization/includes/preloader.html.twig' %}
18+
</div>
1719
</div>
20+
{% include '@oepersonalization/includes/slider.html.twig' %}
1821
</div>
22+
1923
{% set moreInfo = 'MORE_INFO'|translate|addslashes %}
2024
{% set widgetScript = '
2125
var lang_MORE_INFO = "' ~ moreInfo ~ '";
@@ -28,7 +32,7 @@
2832
},
2933
accountId: "' ~ oViewConf.oePersonalizationGetAccountId() ~ '",
3034
id: "' ~ oViewConf.oePersonalizationGetStartPageBargainArticlesWidgetId() ~ '",
31-
chunkSize: 4
35+
chunkSize: 8
3236
});
3337
widget.render();
3438
})();
@@ -45,17 +49,21 @@
4549

4650
{% if oViewConf.oePersonalizationEnableWidgets() and oViewConf.oePersonalizationGetStartPageTopArticlesWidgetId() %}
4751
{% block oepersonalization_start_top_articles %}
48-
<div class="boxwrapper row-spacer">
49-
<div class="page-header">
50-
<h2>{{ "START_TOP_PRODUCTS_HEADER"|translate }}</h2>
51-
<small class="subhead">{{ "START_TOP_PRODUCTS_SUBHEADER"|translate(4) }}</small>
52+
<div class="article-slider row-spacer">
53+
<div class="container-xxl">
54+
<h2 class="h3">{{ "START_TOP_PRODUCTS_HEADER"|translate }}</h2>
55+
<p>{{ "START_TOP_PRODUCTS_SUBHEADER"|translate(4) }}</p>
5256
</div>
5357

54-
<div id="oePersonalizationTopArticles">
55-
<div class="inner list-container">
56-
{% include '@oepersonalization/includes/preloader.html.twig' %}
58+
<div class="d-flex flex-nowrap">
59+
<div id="oePersonalizationTopArticles" class="slider-container">
60+
<div class="inner list-container">
61+
{% include '@oepersonalization/includes/preloader.html.twig' %}
62+
</div>
5763
</div>
64+
{% include '@oepersonalization/includes/slider.html.twig' %}
5865
</div>
66+
5967
{% set moreInfo = 'MORE_INFO'|translate|addslashes %}
6068
{% set widgetScript = '
6169
var lang_MORE_INFO = "' ~ moreInfo ~ '";
@@ -68,7 +76,7 @@
6876
},
6977
accountId: "' ~ oViewConf.oePersonalizationGetAccountId() ~ '",
7078
id: "' ~ oViewConf.oePersonalizationGetStartPageTopArticlesWidgetId() ~ '",
71-
chunkSize: 4
79+
chunkSize: 8
7280
});
7381
widget.render();
7482
})();

‎views/twig/includes/slider.html.twig

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="slider-nav">
2+
<button type="button" class="btn btn-secondary slide-left" aria-label="{{ translate({ ident: "MOVE_CAROUSEL_LEFT" }) }}">
3+
<svg aria-hidden="true">
4+
<use xlink:href="#left"></use>
5+
</svg>
6+
</button>
7+
<button type="button" class="btn btn-secondary slide-right" aria-label="{{ translate({ ident: "MOVE_CAROUSEL_RIGHT" }) }}">
8+
<svg aria-hidden="true">
9+
<use xlink:href="#right"></use>
10+
</svg>
11+
</button>
12+
</div>

0 commit comments

Comments
 (0)