Skip to content

Commit 252eec5

Browse files
jhandajhanda
committed
Initial implementation of carousel UI
1 parent 6e250ef commit 252eec5

File tree

7 files changed

+146
-13
lines changed

7 files changed

+146
-13
lines changed

‎README.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,27 @@
55

66
## Usage
77

8-
This module provides a carousel view in the Product List Renderer
8+
This module provides a carousel view in the Product List Renderer.
99

1010
## Requirements
1111

1212
- Liferay Commerce 2.1.2
1313

1414
## Installation
1515

16-
- Download the `.jar` file in [releases](https://github.com/jhanda/CarouselRenderer/releases/tag/1.0.0) and deploy it into Liferay.
16+
- Download the `.jar` file in [releases](https://github.com/jhanda/CarouselRenderer/releases/tag/1.0.0) and deploy it
17+
into Liferay.
1718

1819
or
1920

2021
- Clone this repository, add it to a Liferay workspace and deploy it into Liferay.
2122

23+
## Known Issues
24+
Currently the CSS in [main.scss](src/main/resources/META-INF/resources/css/main.scss) is not being correctly applied so
25+
product images are stacked vertically instead of horizontally. As a workaround, copy the contents of
26+
[main.scss](src/main/resources/META-INF/resources/css/main.scss) and
27+
[apply at the portlet](https://help.liferay.com/hc/en-us/articles/360029132791-Look-and-Feel-Configuration) or
28+
[page set level](https://help.liferay.com/hc/en-us/articles/360029132671-Configuring-Page-Sets).
2229

2330
## License
2431

‎doc/preview.gif‎

14.1 MB
Loading

‎src/main/resources/META-INF/resources/css/.sass-cache/main.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@media (max-width: 992px) {
2+
.carousel-inner .carousel-item > div {
3+
display: none; }
4+
.carousel-inner .carousel-item > div:first-child {
5+
display: block; } }
6+
7+
.carousel-inner .carousel-item.active,
8+
.carousel-inner .carousel-item-next,
9+
.carousel-inner .carousel-item-prev {
10+
display: flex;
11+
justify-content: center; }
12+
13+
@media (min-width: 992px) {
14+
.carousel-inner .carousel-item-right.active,
15+
.carousel-inner .carousel-item-next {
16+
transform: translateX(16.6%); }
17+
.carousel-inner .carousel-item-left.active,
18+
.carousel-inner .carousel-item-prev {
19+
transform: translateX(-16.6%); } }
20+
21+
.carousel-inner .carousel-item-right,
22+
.carousel-inner .carousel-item-left {
23+
transform: translateX(0); }

‎src/main/resources/META-INF/resources/css/.sass-cache/main_rtl.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/main/resources/META-INF/resources/css/main.scss‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@media (max-width: 992px) {
2+
.carousel-inner .carousel-item > div {
3+
display: none;
4+
}
5+
.carousel-inner .carousel-item > div:first-child {
6+
display: block;
7+
}
8+
}
9+
10+
.carousel-inner .carousel-item.active,
11+
.carousel-inner .carousel-item-next,
12+
.carousel-inner .carousel-item-prev {
13+
display: flex;
14+
justify-content: center;
15+
}
16+
17+
@media (min-width: 992px) {
18+
.carousel-inner .carousel-item-right.active,
19+
.carousel-inner .carousel-item-next {
20+
transform: translateX(16.6%);
21+
}
22+
23+
.carousel-inner .carousel-item-left.active,
24+
.carousel-inner .carousel-item-prev {
25+
transform: translateX(-16.6%);
26+
}
27+
}
28+
29+
.carousel-inner .carousel-item-right,
30+
.carousel-inner .carousel-item-left{
31+
transform: translateX(0);
32+
}
33+

‎src/main/resources/META-INF/resources/init.jsp‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
1212
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
1313
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
14+
<%@ taglib uri="http://liferay.com/tld/frontend" prefix="liferay-frontend" %>
15+
1416

1517
<%@taglib uri="http://liferay.com/tld/util" prefix="liferay-util" %>
1618

‎src/main/resources/META-INF/resources/list_render/view.jsp‎

Lines changed: 78 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
<%@ page import="com.liferay.commerce.product.content.util.CPContentHelper" %>
2+
<%@ page import="com.liferay.commerce.product.content.constants.CPContentWebKeys" %>
3+
<%@ page import="com.liferay.commerce.product.util.CPInstanceHelper" %>
4+
<%@ page import="com.liferay.commerce.product.data.source.CPDataSourceResult" %>
5+
<%@ page import="com.liferay.commerce.product.constants.CPWebKeys" %>
6+
<%@ page import="com.liferay.commerce.product.catalog.CPCatalogEntry" %>
7+
<%@ page import="com.liferay.commerce.context.CommerceContext" %>
8+
<%@ page import="com.liferay.commerce.constants.CommerceWebKeys" %>
9+
<%@ page import="com.liferay.commerce.product.catalog.CPSku" %>
10+
<%@ page import="java.util.List" %>
111
<%@ include file="/META-INF/resources/init.jsp" %>
212

313
<%
@@ -8,33 +18,90 @@
818
List<CPCatalogEntry> cpCatalogEntries = cpDataSourceResult.getCPCatalogEntries();
919
CommerceContext commerceContext = (CommerceContext)request.getAttribute(CommerceWebKeys.COMMERCE_CONTEXT);
1020
21+
int counter = 0;
22+
1123
%>
24+
1225
<c:choose>
1326
<c:when test="<%= !cpCatalogEntries.isEmpty() %>">
27+
<div class="container text-center my-3">
28+
<div class="row mx-auto my-auto">
29+
<div id="myCarousel" class="carousel slide w-100" data-interval="false">
30+
<div class="carousel-inner w-100" role="listbox">
31+
1432
<%
1533
for (CPCatalogEntry cpCatalogEntry : cpCatalogEntries) {
1634
String friendlyURL = cpContentHelper.getFriendlyURL(cpCatalogEntry, themeDisplay);
1735
List<CPSku> cpSkus = cpCatalogEntry.getCPSkus();
1836
long cpInstanceId = cpSkus.get(0).getCPInstanceId();
19-
String thumbnailSrc = cpInstanceHelper.getCPInstanceThumbnailSrc(cpInstanceId);
37+
String thumbnailSrc = cpInstanceHelper.getCPInstanceThumbnailSrc(cpInstanceId);
38+
String active = "active";
39+
40+
if(counter > 0){
41+
active ="";
42+
}
2043
%>
21-
<div>
22-
<div>
23-
<img src="<%= thumbnailSrc %>"></img>
24-
</div>
25-
<div>
26-
<a href="<%= friendlyURL %>"><%= cpCatalogEntry.getName() %></a>
27-
</div>
28-
</div>
44+
45+
<div class="carousel-item <%= active%>">
46+
<div class="col-lg-2">
47+
<a href="<%= friendlyURL %>"><img class="img-fluid" src="<%= thumbnailSrc %>"></a>
48+
<div class-"product-name">
49+
<a href="<%= friendlyURL %>"><%= cpCatalogEntry.getName() %></a>
50+
</div>
51+
</div>
52+
</div>
53+
2954
<%
55+
counter++;
3056
}
3157
%>
32-
58+
</div>
59+
<a class="carousel-control-prev bg-dark w-auto" href="#myCarousel" role="button" data-slide="prev">
60+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
61+
<span class="sr-only">Previous</span>
62+
</a>
63+
<a class="carousel-control-next bg-dark w-auto" href="#myCarousel" role="button" data-slide="next">
64+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
65+
<span class="sr-only">Next</span>
66+
</a>
67+
</div>
68+
</div>
69+
</div>
3370
</c:when>
3471

3572
<c:otherwise>
3673
<div class="alert alert-info">
3774
<liferay-ui:message key="no-products-were-found" />
3875
</div>
3976
</c:otherwise>
40-
</c:choose>
77+
</c:choose>
78+
79+
80+
<script>
81+
82+
console.log("In the script");
83+
$('#myCarousel').carousel({
84+
interval: 10000
85+
})
86+
87+
$('.carousel .carousel-item').each(function(){
88+
89+
console.log("In the item");
90+
91+
var minPerSlide = 3;
92+
var next = $(this).next();
93+
if (!next.length) {
94+
next = $(this).siblings(':first');
95+
}
96+
next.children(':first-child').clone().appendTo($(this));
97+
98+
for (var i=0;i<minPerSlide;i++) {
99+
next=next.next();
100+
if (!next.length) {
101+
next = $(this).siblings(':first');
102+
}
103+
104+
next.children(':first-child').clone().appendTo($(this));
105+
}
106+
});
107+
</script>

0 commit comments

Comments
 (0)