Need to develop best seller and new arrival sections. The item must be configurable from the configuration record.
The item image must be changed when hovering over the item. When the item must be redirected to the item page.
So clients can change the item image, and hover the image to their needs accordingly.
Used Owl carousel2 script for the sliders and created an extension for passing the values from configuration to the template files.
This code can be reused for adding slider images and item images with their links on the home page of any SCA website.
Code:
Template:
<!-- //New Arrival section starts -->
<div class="newarrivals-section">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-KGp8WJFXU6vCJ6Z7U6Yd8WCOxGUNnA0vrD+LoA5/8L1szSJ48QsJTwTvwT7GGFgySLjXV+iTHAflx/EU6rklqw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="headingsec">
<div class="headerslider">
<h1 class="new-arrivals-home-page">NEW ARRIVALS</h1>
</div>
<div class="owl-carousel owl-theme carouselstyle" id="owl-carousel">
{{#each NewArriv_slidearray}}
<a href="{{link}}">
<div class="card1232 item">
<div class="wrapper2">
<div class="imgProd2">
<img class="facets-item-cell-grid-link-image hover-hide" src="{{image}}" data-hover="{{hoverimage}}" alt="Placeholder Image 1">
<img class="facets-item-cell-grid-link-image image-hover" src="{{hoverimage}}" alt="Placeholder Image 1">
</div>
<div class="infoProd2">
<p class="nombreProd2">{{Itemname}}</p>
</div>
</div>
</div>
</a>
{{/each}}
</div>
<div class="owl-theme">
<div class="owl-controls">
<div class="custom-nav owl-nav"></div>
</div>
</div>
</div>
<script>
function loadScript(url, callback) {
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState) { // only required for IE <9
script.onreadystatechange = function() {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function() {
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript('https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', function() {
var owl = $("#owl-carousel");
owl.owlCarousel({
loop: false,
nav: true,
navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
margin: 20,
navContainer: '.newarrivals-section .custom-nav',
responsive: {
0: {
items: 2,
margin: 10,
},
767: {
items: 3,
margin: 10,
},
1200: {
items: 3,
margin: 10,
}
}
});
})
</script>
</div>
<!-- //New Arrival section ends -->
<div class="yournewgoto-main">
<h1 class="yournewgoto-main-header">{{youNewGoToHeader}}</h1>
<h2 class="yournewgoto-main-text">{{{youNewGoToText}}}</h2>
<img class="home-promo-image5" src="{{youNewGoToImage}}">
</img>
<a href="{{youNewGoToLink}}">
<button class="shop-all"> SHOP ALL </button>
</a>
</div>
<!-- //Best seller section starts-->
<div class="bestsellers-section">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-KGp8WJFXU6vCJ6Z7U6Yd8WCOxGUNnA0vrD+LoA5/8L1szSJ48QsJTwTvwT7GGFgySLjXV+iTHAflx/EU6rklqw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="headingsec">
<div class="headerslider">
<h1 class="new-arrivals-home-page">BEST SELLERS</h1>
<!-- <div class="customNavigation">
<a class="slidericon prev"><i class="icon-angle-left testing"></i></a>
<a class="slidericon next"><i class="icon-angle-right testing"></i></a>
</div> -->
</div>
<div class="owl-carousel owl-theme carouselstyle" id="owl-carousel2">
{{#each BestsellerArray}}
<a href="{{link}}">
<div class="card1232 item">
<div class="wrapper3">
<div id="f1_card" class="shadow">
<div class="imgProd2 ">
<img class="facets-item-cell-grid-link-image hover-hide" src="{{image}}" alt="Placeholder Image 1">
<img class="facets-item-cell-grid-link-image image-hover" src="{{hoverimage}}" alt="Placeholder Image 1">
<!-- <img class="facets-item-cell-grid-image img-swap" src="{{hoverimage}}" alt="Placeholder Image 2"> -->
</div>
</div>
<div class="infoProd2">
<p class="nombreProd2">{{Itemname}}</p>
</div>
</div>
</div>
</a>
{{/each}}
</div>
<div class="owl-theme">
<div class="owl-controls">
<div class="custom-nav owl-nav"></div>
</div>
</div>
</div>
<script>
function loadScript(url, callback) {
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState) { // only required for IE <9
script.onreadystatechange = function() {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function() {
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript('https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', function() {
var owl = $("#owl-carousel2");
owl.owlCarousel({
loop: false,
nav: true,
navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
margin: 20,
navContainer: '.bestsellers-section .custom-nav',
responsive: {
0: {
items: 2,
margin: 10,
},
767: {
items: 3,
margin: 10,
},
1200: {
items: 3,
margin: 10,
}
}
});
})
</script>
</div>
<!-- //Best seller section ends-->CSS
//Home page sliders (New arrivals and Best sellers) sections starts
.infoProd2{
text-align: center;
font-family: Gilroy Bold;
}
.newarrivals-section{
width: 100%;
display: block;
}
.home-banner-2{
width: 100%;
display: block;
}
.bestsellers-section{
width: 100%;
display: block;
}
//navigation slider1
.newarrivals-section {
position: relative;
.owl-theme {
.custom-nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
.owl-prev, .owl-next {
border: none;
height: 100%;
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
cursor: pointer;
z-index: 8;
i {
font-size: 2.5rem;
color: #cecece;
}
}
.owl-prev {
left: 0;
}
.owl-next {
right: 0;
}
}
}
}
//navigation slider 2
.bestsellers-section {
position: relative;
.owl-theme {
.custom-nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
.owl-prev, .owl-next {
border: none;
height: 100%;
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
cursor: pointer;
z-index: 8;
i {
font-size: 2.5rem;
color: #cecece;
}
}
.owl-prev {
left: 0;
}
.owl-next {
right: 0;
}
}
}
}
.new-arrivals-home-page{
color: #050505;
font-family: 'Bossa Black';
font-size: 2.667rem;
text-decoration: none;
line-height: 1.2;
padding-top: 20px;
letter-spacing: 0;
margin-top: 0;
margin-bottom: 10px;
text-transform: none;
}
//hover finctionality
.owl-carousel .imgProd2 .image-hover{
display: none;
}
.wrapper3:hover .image-hover{
object-fit:cover;
max-height:486px;
max-width: 486px;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.wrapper3:hover .hover-hide{
display: none;
}
.wrapper2:hover .image-hover{
object-fit:cover;
max-height:486px;
max-width: 486px;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.wrapper2:hover .hover-hide{
display: none;
}
.imgProd2{
align-items: center;
}
.imgProd2{
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
}
.imgProd2 img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
//Home page sliders (New arrivals and Best sellers) sections endsJavascript entry point file of extension:
define(
'JJ.homepage.homepage'
, [
'Home.View'
]
, function (
HomeView
)
{
'use strict';
return {
mountToApp: function mountToApp (container)
{
_.extend(HomeView.prototype, {
getContext: _.wrap(HomeView.prototype.getContext, function (fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
context.personalImage=SC.CONFIGURATION.homepage.takeitpersonal.Links[0].personalImage;
context.personalHeader=SC.CONFIGURATION.homepage.takeitpersonal.Links[0].personalHeader;
context.personalText=SC.CONFIGURATION.homepage.takeitpersonal.Links[0].personalText;
context.learnmorelink=SC.CONFIGURATION.homepage.takeitpersonal.Links[0].learnmorelink;
context.youNewGoToImage = SC.CONFIGURATION.homepage.yourNewGoTo.Links[0].youNewGoToImage;
context.youNewGoToLink = SC.CONFIGURATION.homepage.yourNewGoTo.Links[0].youNewGoToLink;
context.youNewGoToHeader = SC.CONFIGURATION.homepage.yourNewGoTo.Links[0].youNewGoToHeader;
context.youNewGoToText = SC.CONFIGURATION.homepage.yourNewGoTo.Links[0].youNewGoToText;
context.image=SC.CONFIGURATION.homepage.Links[0];
context.NewArriv_slidearray = SC.CONFIGURATION.homepage.newseller.Links
context.BestsellerArray = SC.CONFIGURATION.homepage.bestseller.Links
console.log(context);
return context;
})
});
}
};
});