norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Walmart Scintilla new templates and removed their category buttons from homepage.

Browse Source
This commit is contained in:
Norm Rasmussen
2025-07-22 14:15:20 -04:00
parent 3c137548f9
commit 0e039e4462
170 changed files with 824 additions and 7811 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Custom_Templates/customer_templates/Walmart Scintilla Prod/.DS_Store vendored Normal file
View File

Binary file not shown.

88
Custom_Templates/customer_templates/Walmart Scintilla Prod/_basic_group_homepage.html.liquid
View File

@ -2,28 +2,106 @@
<div class="row np-flex-center">
<div class="col-xs-12 col-sm-8">
{% include "basic_group_homepage_ongoing_training", items: catalog_courses %}
{% include "lps_in_progress" %}
</div>
<div class="col-xs-12 col-sm-3">
<div id="divContentbyProduct" class="content-by-product">
<div id="divWrapper" class="content-by-product">
<div id="divGetCertified" class="content-by-product">
<div class="left-content-title">
Get Certified
</div>
{% include "content_by_certificates" %}
</div>
<div style="display: flex;flex-direction: row-reverse;">
{% comment %} <div style="display: flex;flex-direction: row-reverse;">
<a id="seemorecertificates" >See more..</a>
</div>
<div id="divCalender" class="upcomongevents">
</div> {% endcomment %}
<div id="divEvents" class="content-by-product">
<div class="left-content-title">
Upcoming Events
</div>
{% include "content_by_bundles" %}
</div>
{% comment %} <div style="display: flex;flex-direction: row-reverse;">
<a id="seemoreevents" >See more..</a>
</div> {% endcomment %}
<div id="divCalender" class="upcomongevents">
<div class="left-content-title">
Available Events
</div>
{% include "calendar" %}
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
/*
console.log($("#divGetCertified").height())
console.log($("#divEvents").height())
if ($("#divGetCertified").height() <= "200") {
$("#seemorecertificates").css("display","none")
}
else
{
$("#divGetCertified").height("200");
$("#seemorecertificates").css("display","block")
}
if ($("#divEvents").height() <= 200) {
$("#seemoreevents").css("display","none")
}
else
{
$("#divEvents").height("200");
$("#seemoreevents").html("See more..");
}
$("#seemoreevents").click(function () {
if ($("#divEvents").height() == "200")
{
$("#divEvents").height("auto");
$("#seemoreevents").html("Show less..");
}
else
{
$("#divEvents").height("200");
$("#seemoreevents").html("See more..");
}
$("#divEvents").overflow("hidden");
});
$("#seemorecertificates").click(function () {
if ($("#divGetCertified").height() == "200")
{
$("#divGetCertified").height("auto");
$("#seemorecertificates").html("Show less..");
}
else
{
$("#divGetCertified").height("200");
$("#seemorecertificates").html("See more..");
}
$("#divGetCertified").overflow("hidden");
});
*/
});
</script>

27
Custom_Templates/customer_templates/Walmart Scintilla Prod/_basic_group_homepage_ongoing_training.html.liquid
View File

@ -16,7 +16,7 @@
{% if course.started? == false %}
{% assign new_courses_count = new_courses_count | plus: 1 %}
<div class="ongoing-course-slide">
{% include "cards_article" with course %}
{% include "cards_course" with course %}
</div>
{% endif %}
{% endfor %}
@ -283,32 +283,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
}
});
});
window.addEventListener("DOMContentLoaded", (event) => {
var ongoingSlider = tns({
container: '.ongoing-courses-slider3',
items: 1,
slideBy: 'page',
autoplay: false,
gutter: 8,
controls:false,
navPosition:"bottom",
loop: false,
mouseDrag: true,
speed: 500,
controlsContainer: document.querySelector('.ongoing-carousel-controls3'),
responsive: {
600: {
items: 2,
},
768: {
items:3,
gutter: 16,
controls:true
}
}
});
});
</script>

384
Custom_Templates/customer_templates/Walmart Scintilla Prod/_calendar.html.liquid Normal file
View File

@ -0,0 +1,384 @@
{% assign event = '' %}
{% if basic_3p_user %}
{% assign te = training_events.enrolled %}
{% else %}
{% assign te = training_events.available %}
{% endif %}
{% for training_event in te %}
{% assign event = event | append: training_event.title | append: ',' | append: training_event.sessions.first.day | append: ',' | append: training_event.sessions.first.month | append: ',' | append: training_event.sessions.first.year | append: ',' | append: training_event.sessions.first.id | append: '$$' %}
{% endfor %}
<div class="wrapper-cal">
<div class="calendar">
<div class="calendar-header">
<button id="prev" class="calendar-header-button"><i class="far fa-chevron-left"></i></button>
<span id="monthYear"></span>
<button id="next" class="calendar-header-button"><i class="far fa-chevron-right"></i></button>
</div>
<div class="day-names">
<div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>
</div>
<div class="calendar-grid" id="calendarGrid"></div>
<div class="calendar-footer">
<div class="agenda">
<div class="red-agenda"></div>
<div class="agenda-desc">Today</div>
</div>
<div class="agenda">
<div class="blue-agenda"></div>
<div class="agenda-desc">Upcoming Event</div>
</div>
<div id="divToday" class="divToday">Today</div>
</div>
</div>
<div class="event-info" id="eventInfo">
Select a date
</div>
</div>
<style>
.calendar-header-button {
background-color: #ebe8f3;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #3c228a;
cursor: pointer;
transition: opacity 0.2s;
border: none;
}
.divToday:hover {
cursor: pointer;
}
.divToday {
background-color: black;
color: white;
font-weight: 700;
padding: 7px;
border-radius: 10px;
align-items: center;
text-align: center;
border: 1px solid;
width: 100px;
align-self: center;
color: white;
}
.calendar-footer {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.agenda {
display: flex;
gap: 10px;
}
.red-agenda {
width: 15px;
height: 15px;
background-color: #bd0074;
border-radius: 50%;
}
.blue-agenda {
width: 15px;
height: 15px;
background-color: #B5ABD3;
border-radius: 50%;
}
.wrapper-cal {
display: flex;
justify-content: center;
align-items: center;
/* background-color: #f4f4f4; */
flex-direction: column;
}
.calendar {
background: #fff;
padding: 1.5rem;
border-radius: 16px;
border: 1px solid;
box-shadow: 1px 10px 20px 6px rgba(0, 0, 0, 0.1);
width: 100%;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.calendar-header span {
font-size: 1rem;
font-weight: bold;
color: #5f676e;
}
.day-names, .calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
}
.day-names div {
font-weight: 400;
color: #5f676e;
padding-bottom: 0.5rem;
font-size: 0.85rem;
}
.calendar-grid div {
padding: 0.7rem 0;
border-radius: 50%;
position: relative;
font-size: 0.9rem;
color: #222;
width: 40px;
height: 40px;
line-height: 36px;
margin: 2px auto;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #5f676e;
}
.agenda-desc {
font-weight: 400;
color: #5f676e;
}
.calendar-grid div:hover {
background: #8080802e;
color: #5f676e !important;
}
.other-month {
color: #ccc !important;
}
.fade-message {
animation: fadeSlideIn 0.4s ease both;
}
.today {
background-color: #bd0074;
color: #fff !important;
font-weight: 500;
}
.has-event {
background-color: #B5ABD3;
color: #fff !important;
font-weight: 500;
}
.today.has-event {
background-color: purple;
color: #fff !important;
font-weight: 500;
}
.event-info {
margin-top: 2rem;
background: #eee;
padding: 1rem;
border-radius: 8px;
font-size: 0.95rem;
text-align: center;
width: 100%;
/* min-height: 300px; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.event-card {
background: white;
padding: 1rem;
border-radius: 8px;
margin-bottom: 0.5rem;
text-align: left;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
width: 100%;
animation: fadeSlideIn 0.4s ease both;
}
.event-card h4 {
margin: 0 0 0.25rem;
}
.event-card .date {
color: #555;
font-size: 0.85rem;
margin-bottom: 0.5rem;
}
.event-card a {
display: inline-block;
margin-top: 0.5rem;
text-decoration: none;
color: white;
background: #007BFF;
padding: 0.4rem 0.8rem;
border-radius: 6px;
font-size: 0.85rem;
}
.selected-day {
outline: 2px solid #9C9C9C;
background: #8080802e;
color: #5f676e !important;
}
@keyframes fadeSlideIn {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
</style>
<script>
const rawEventData = "{{ event | strip_newlines }}";
const events = rawEventData
.split('$$')
.filter(e => e)
.map(item => {
const [title, day, month, year, id] = item.split(',');
return {
title: title.trim(),
day: parseInt(day),
month: month.trim(),
year: parseInt(year),
id: id.trim()
};
});
const monthYear = document.getElementById('monthYear');
const calendarGrid = document.getElementById('calendarGrid');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
const eventInfo = document.getElementById('eventInfo');
const divToday = document.getElementById('divToday');
let currentDate = new Date();
let selectedDayElement = null;
function renderCalendar(date) {
const year = date.getFullYear();
const month = date.getMonth();
const firstDayOfMonth = new Date(year, month, 1);
const startDay = firstDayOfMonth.getDay();
const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
const lastDatePrevMonth = new Date(year, month, 0).getDate();
const monthName = date.toLocaleString('en-US', { month: 'long' });
monthYear.textContent = `${monthName} ${year}`;
calendarGrid.innerHTML = '';
const today = new Date();
const isToday = (d) =>
d.getDate() === today.getDate() &&
d.getMonth() === today.getMonth() &&
d.getFullYear() === today.getFullYear();
for (let i = 0; i < 42; i++) {
const dayCell = document.createElement('div');
let dayNum, actualMonth = month, actualYear = year;
if (i < startDay) {
dayNum = lastDatePrevMonth - startDay + i + 1;
actualMonth = month - 1;
if (actualMonth < 0) {
actualMonth = 11;
actualYear -= 1;
}
dayCell.classList.add('other-month');
} else if (i >= startDay + lastDateOfMonth) {
dayNum = i - (startDay + lastDateOfMonth) + 1;
actualMonth = month + 1;
if (actualMonth > 11) {
actualMonth = 0;
actualYear += 1;
}
dayCell.classList.add('other-month');
} else {
dayNum = i - startDay + 1;
}
dayCell.textContent = dayNum;
const displayDate = new Date(actualYear, actualMonth, dayNum);
const displayMonthName = displayDate.toLocaleString('en-US', { month: 'long' });
const isTodayDate = isToday(displayDate);
const matchingEvents = events.filter(ev =>
ev.day === dayNum &&
ev.month === displayMonthName &&
ev.year === actualYear
);
if (isTodayDate) dayCell.classList.add('today');
if (matchingEvents.length > 0) dayCell.classList.add('has-event');
dayCell.addEventListener('click', () => {
if (selectedDayElement) {
selectedDayElement.classList.remove('selected-day');
}
dayCell.classList.add('selected-day');
selectedDayElement = dayCell;
renderEventInfo(displayDate, matchingEvents);
});
calendarGrid.appendChild(dayCell);
}
}
function renderEventInfo(dateObj, matchedEvents) {
if (matchedEvents.length === 0) {
eventInfo.innerHTML = `<p class="fade-message">No events for selected date</p>`;
return;
}
eventInfo.innerHTML = matchedEvents.map(ev => `
<div class="event-card">
<h4>${ev.title}</h4>
<div class="date">${ev.day} ${ev.month} ${ev.year}</div>
<a href="/app/training_sessions/${ev.id}">View</a>
</div>
`).join('');
}
divToday.addEventListener('click', () => {
currentDate = new Date();
renderCalendar(currentDate);
eventInfo.innerHTML = "Select a date";
});
prevBtn.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() - 1);
renderCalendar(currentDate);
eventInfo.innerHTML = "Select a date";
});
nextBtn.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() + 1);
renderCalendar(currentDate);
eventInfo.innerHTML = "Select a date";
});
renderCalendar(currentDate);
</script>

20
Custom_Templates/customer_templates/Walmart Scintilla Prod/_content_by_bundles.html.liquid
View File

@ -1,22 +1,30 @@
<div class="np-dashboard-resources">
{% assign bundle_counter = 0 %}
{% for item in catalog.items %}
<script>
console.log("{{ item.type }} {{ item.name }}");
</script>
{% if item.type == "bundle" %}
{% assign bundle_counter = bundle_counter | plus: 1 %}
<a href="{{ item.path }}" style="text-decoration: unset;">
<div class="content-catds">
<div class="content-catds-text">
{{ item.name }}
</div>
<div class="content-arrow"><i class="far fa-duotone fa-solid fa-greater-than"></i></div>
<div class="content-arrow"><i class="far fa-chevron-right"></i></div>
</div>
</a>
</a>
{% endif %}
{% endfor %}
{% if bundle_counter == 0 %}
<div class="content-catds">
<div class="content-catds-text">
Check Back Soon
</div>
</div>
{% endif %}
</div>
<style>
</style>
</style>

133
Custom_Templates/customer_templates/Walmart Scintilla Prod/_content_by_certificates.html.liquid
View File

@ -4,21 +4,67 @@
{% else %}
{% assign lpitems = learning_paths.available %}
{% endif %}
<div class="np-dashboard-resources">
{% assign lpcounter = 0 %}
{% assign fcounter = 0 %}
{% if basic_3p_user %}
{% for learning_path in lpitems %}
{% if learning_path.has_certificate? %}
<a href="app/learning_paths/{{learning_path.id}}" style="text-decoration: unset;">
<div class="content-catds">
<div class="content-catds-text">
{{ learning_path.name }}
</div>
<div class="content-arrow"><i class="far fa-chevron-right"></i></div>
</div>
</a>
{% assign has_certificate_category = false %}
{% for cat in learning_path.categories %}
{% if cat.name == "Certifications" %}
{% assign has_certificate_category = true %}
{% endif %}
{% endfor %}
{% if has_certificate_category == true %}
{% assign lpcounter = lpcounter | plus: 1 %}
<a href="app/learning_paths/{{learning_path.id}}" style="text-decoration: unset;" data-lpcat="Free Learning Path Basic User">
<div class="content-catds">
<div class="content-catds-text">
{{ learning_path.name }}
</div>
<div class="content-arrow"><i class="far fa-chevron-right"></i></div>
</div>
</a>
{% endif %}
{% endfor %}
</div>
{% for item in catalog.items %}
{% if item.type == "learning_path" %}
{% assign lpcounter = lpcounter | plus: 1 %}
<a href="{{ item.path }}" style="text-decoration: unset;" data-lpcat="LP to Purchase">
<div class="content-catds">
<div class="content-catds-text">
{{ item.name }}
</div>
<div class="content-arrow"><i class="far fa-chevron-right"></i></div>
</div>
</a>
{% endif %}
{% endfor %}
{% else %}
{% for learning_path in lpitems %}
{% if learning_path.has_certificate? == true %}
{% assign lpcounter = lpcounter | plus: 1 %}
<div class="">
<a href="app/learning_paths/{{learning_path.id}}" style="text-decoration: unset;" data-lpcat="Free Learning Path Non Basic user">
<div class="content-catds">
<div class="content-catds-text">
{{ learning_path.name }}
</div>
<div class="content-arrow"><i class="far fa-chevron-right"></i></div>
</div>
</a>
</div>
{% endif %}
{% endfor %}
{% endif %}
{% if lpcounter == 0 %}
<div class="np-dashboard-resources">
<div class="content-catds">
<div class="content-catds-text">
Check Back Soon
</div>
</div>
</div>
{% endif %}
<style>
.content-catds {
@ -60,68 +106,7 @@
display: flex;
align-items: center;
justify-content: center;
color: purple;
}
</style>
<script>
$(document).ready(function(){
if ($("#divContentbyProduct").height() < "300") {
$("#seemore").css("dispaly","none")
}
else
{
$("#divContentbyProduct").height("300");
$("#seemore").css("dispaly","none")
}
console.log($("#divGetCertified").height())
if ($("#divGetCertified").height() < 300) {
$("#seemorecertificates").css("display","none")
}
else
{
$("#divGetCertified").height("300");
$("#seemorecertificates").html("See more..");
}
$("#seemore").click(function () {
if ($("#divContentbyProduct").height() == "300")
{
$("#divContentbyProduct").height("auto");
$("#seemore").html("Show less..");
}
else
{
$("#divContentbyProduct").height("300");
$("#seemore").html("See more..");
}
$("#divContentbyProduct").overflow("hidden");
});
$("#seemorecertificates").click(function () {
if ($("#divGetCertified").height() == "300")
{
$("#divGetCertified").height("auto");
$("#seemorecertificates").html("Show less..");
}
else
{
$("#divGetCertified").height("300");
$("#seemorecertificates").html("See more..");
}
$("#divGetCertified").overflow("hidden");
});
});
</script>

58
Custom_Templates/customer_templates/Walmart Scintilla Prod/_header.html.liquid
View File

@ -60,7 +60,8 @@ Basic Sandbox Group UUID = 9f5c51a3-8e02-4b81-9e48-7ec3adff7c70
<div class="header-dropdown-container np-hidden-mobile">
<div class="dropdown-arrow"></div>
<div class="header-dropdown">
<a href="https://www.scintilla.com/apps">Scintilla</a>
<a href="https://learn.walmartdataventures.com/app">Home</a>
<a href="https://www.scintilla.com/apps">Scintilla Platform</a>
<a href="https://www.scintilla.com/shopperbehavior">Shopper Behavior</a>
<a href="https://www.scintilla.com/customerperception">Customer Perception</a>
<a href="https://www.scintilla.com/reportbuilder">Report Builder</a>
@ -103,13 +104,14 @@ Basic Sandbox Group UUID = 9f5c51a3-8e02-4b81-9e48-7ec3adff7c70
</div>
{% if current_person.signed_in? %}
{% if features.commerce? %}
<a class="np-hidden-mobile np-header-button np-header-button-cart" href="{% route cart %}">
<i class="np-header-button-icon far fa-shopping-cart"></i>
{% t.cart %}
{% commerce_cart_badge %}
</a>
{% if basic_3p_user %}
{% if features.commerce? %}
<a class="np-hidden-mobile np-header-button np-header-button-cart" href="{% route cart %}">
<i class="np-header-button-icon far fa-shopping-cart"></i>
{% t.cart %}
{% commerce_cart_badge %}
</a>
{% endif %}
{% endif %}
{% unless basic_3p_user %}
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
@ -154,6 +156,10 @@ Basic Sandbox Group UUID = 9f5c51a3-8e02-4b81-9e48-7ec3adff7c70
</div>
<nav class="np-header-avatar-tooltip-navigation">
<a class="np-header-avatar-tooltip-navigation-link" href="https://www.scintilla.com/profile">Profile</a>
{% if basic_3p_user %}
<a class="np-header-avatar-tooltip-navigation-link" href="/app/order_history">Order History</a>
{% endif %}
<a class="np-header-avatar-tooltip-navigation-link" href="https://www.scintilla.com/admin">Admin</a>
<a class="np-header-avatar-tooltip-navigation-link" href="https://www.scintilla.com/support">Support</a>
<a
@ -229,10 +235,46 @@ Basic Sandbox Group UUID = 9f5c51a3-8e02-4b81-9e48-7ec3adff7c70
</div>
{% include "messages" %}
<script>
$(document).ready(function(){
const observer = new MutationObserver(() => {
console.log("callback that runs when observer is triggered");
catbadge = document.querySelector('[data-test="cart-badge"]');
cartdiv = document.querySelector('.np-header-button-cart');
if(catbadge)
{
cartdiv.style.display='flex'
}
else
{
cartdiv.style.display='none'
}
});
// call `observe()`, passing it the element to observe, and the options object
if (document.querySelector(".commerce_cart_badge_root"))
{
observer.observe(document.querySelector(".commerce_cart_badge_root"), {
subtree: true,
childList: true,
});
}
})
</script>
<style>
.np-header-button-cart
{
display: none;
}
/* below is for Cart Button */
.np-header-button {
color: #333
}
.np-header-content {
max-width:1920px;

2
Custom_Templates/customer_templates/Walmart Scintilla Prod/_homepage_ongoing_training.html.liquid
View File

@ -17,7 +17,7 @@
{% if course.started? == false %}
{% assign new_courses_count = new_courses_count | plus: 1 %}
<div class="ongoing-course-slide">
{% include "cards_article" with course %}
{% include "cards_course" with course %}
</div>
{% endif %}
{% endif %}

20
Custom_Templates/customer_templates/Walmart Scintilla Prod/_learning_path_completed_banner.html.liquid
View File

@ -1,4 +1,22 @@
{% if learning_path.id == "fa4c61ac-e6cd-44dc-a8e0-9b95025968a5" %}
{% if learning_path.id == "09be81cb-923b-46c7-898a-c255383a34b0" %}
<div class="np-learning-path-completed-banner np-learning-path-banner" style="background-color: #DBD7EE">
<a class="np-learning-path-banner-image" style="width:30%; height:30%" onclick="downloadImage()">
<img style="width:100%; height:100%"
id="image"
src="http://i5.walmartimages.com/dfw/63925b23-77e5/k2-_a8c103a4-12ce-4392-92ef-0d8b571aab6e.v1.png" >
</a>
<div class="np-learning-path-banner-content" style="align-items: center; display: flex; flex-direction: column; justify-content: center;">
<h3 class="np-learning-path-banner-headline" style="color: #8F75DD; font-size: 25px; font-weight: 500; line-height: 25px; margin: 0 0 4px;">You earned it!</h3>
<p class="np-learning-path-banner-description" style="color: #1b3e4f; font-size: 20px; font-weight: 400; line-height: 20px; margin: 0 0 12px;">
Congratulations, you're Scintilla Basic Certified. Click the button below to add your accomplishment to LinkedIn!</p>
<div class="np-learning-path-banner-actions">
<a href="https://linkedin.com/profile/add/?startTask=Scintilla%20Basic%20Certification&name=Scintilla%20Basic%20Certification&organizationId=80427781&certUrl=https%3A%2F%2Flearn.walmartdataventures.com"
class="np-learning-path-banner-action np-learning-path-banner-action--primary">
Add to LinkedIn!</a>
</div>
</div>
</div>
{% elsif learning_path.id == "fa4c61ac-e6cd-44dc-a8e0-9b95025968a5" %}
<div class="np-learning-path-completed-banner np-learning-path-banner" style="background-color: #DBD7EE">
<a class="np-learning-path-banner-image" style="width:30%; height:30%" onclick="downloadImage()">
<img style="width:100%; height:100%"

165
Custom_Templates/customer_templates/Walmart Scintilla Prod/_lps_in_progress.html.liquid
View File

@ -1,36 +1,159 @@
<div class="np-homepage-featured" style="margin: 0px 40px;">
<div style="display:flex; flex-direction:column;">
<div class="np-section-header">Progress Tracker</div>
<div class="np-homepage-ongoing np-max-width" >
<div class="np-homepage-ongoing-text">
<div class="np-homepage-headline">
Progress Tracker
</div>
<div class="lp-carousel-controls np-hidden-mobile">
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
</div>
</div>
<div class="ongoing-courses-wrapper">
<div class="learning-path-progress-container">
<div class="row">
<div class="lp-courses-slider">
{% assign lps_in_progress_count = 0 %}
{% assign enrolled_learning_paths = learning_paths.available | sort: "progress" | reverse %}
{% assign enrolled_learning_paths = learning_paths.enrolled | sort: "progress" | reverse %}
{% for learning_path in enrolled_learning_paths %}
{% if learning_path.progress > 0 %}
{% assign lps_in_progress_count = lps_in_progress_count | plus: 1 %}
{% if lps_in_progress_count < 4 %}
<div class="col-xs-12 col-md-4">
{% include "cards_learning_path_progress" %}
</div>
{% endif %}
<div class="lp-course-slide">
{% include "cards_learning_path_progress" with learning_path %}
</div>
{% endif %}
{% endfor %}
{% if lps_in_progress_count > 0 %}
<div class="see-more-wrapper">
<a href="/app/dashboard" style="margin-top:24px;">See more</a>
</div>
{% endif %}
{% if lps_in_progress_count == 0 %}
</div>
{% if lps_in_progress_count == 0 %}
<div class="col-xs-12">
<div class="np-learning-paths-resources-container">
<div class="np-zero-state-text">
You don't have any learning Paths in progress.
You don't have any Certifications or Paths in progress.
</div>
<img class="np-zero-state-learning-paths" alt="" />
</div>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<style>
.np-max-width {
padding: 0px 40px;
}
.ongoing-courses-wrapper {
margin: 0 -8px;
}
.np-homepage-ongoing-text {
padding: 0 0 32px;
text-align:left;
display:flex;
}
.np-homepage-ongoing-text .np-homepage-headline {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color:#000000;
align-self: flex-start;
}
.lp-carousel-controls {
align-self:flex-end;
display:flex;
}
.lp-carousel-controls .carousel-control {
margin: 0 8px;
background-color: #ebe8f3;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #3c228a;
cursor: pointer;
transition:opacity 0.2s;
}
.lp-carousel-controls .carousel-control[aria-disabled='true'] {
opacity: 0.3;
cursor:default;
}
.lp-carousel-controls .carousel-control.next-arrow {
margin-right:0;
}
.lp-courses-slider {
display:flex;
}
.lp-course-slide {
margin-bottom: 12px;
}
.lp-course-slide .np-card {
margin:0 auto;
padding: 0;
height:100%;
}
.lp-course-slide .np-card-container {
height: 100%;
margin: 0 8px;
}
@media (min-width:768px){
.np-homepage-ongoing-text {
flex-direction:row;
justify-content:space-between;
}
.np-homepage-ongoing-text .np-homepage-headline {
font-size: 32px;
line-height: 40px;
}
}
</style>
<script>
window.addEventListener("DOMContentLoaded", (event) => {
var ongoingSlider = tns({
container: '.lp-courses-slider',
items: 1,
slideBy: 'page',
autoplay: false,
gutter: 8,
controls:false,
navPosition:"bottom",
loop: false,
mouseDrag: true,
speed: 500,
controlsContainer: document.querySelector('.lp-carousel-controls'),
responsive: {
600: {
items: 2,
},
768: {
items:3,
gutter: 16,
controls:true
}
}
});
});
</script>

14
Custom_Templates/customer_templates/Walmart Scintilla Prod/_nonbasic_group_users_homepage.html.liquid
View File

@ -4,7 +4,7 @@
<div class="col-xs-12 col-sm-8">
{% include "homepage_featured", items: catalog_courses %}
{% include "homepage_ongoing_training", items: catalog_courses %}
{% include "lps_in_progress" %}
</div>
<div class="col-xs-12 col-sm-3">
<div id="divContentbyProduct" class="content-by-product">
@ -14,10 +14,14 @@
</div>
{% include "content_by_certificates" %}
</div>
<div style="display: flex;flex-direction: row-reverse;">
<a id="seemorecertificates" >See more..</a>
</div>
</div>
</div>
<div id="divCalender" class="upcomongevents">
<div class="left-content-title">
Available Events
</div>
{% include "calendar" %}
</div>
</div>
</div>
</div>

4
Custom_Templates/customer_templates/Walmart Scintilla Prod/commerce_cart.html.liquid
View File

@ -5,7 +5,3 @@
</main>
{% include "footer" %}
<style>
.np-header-button {
color: #333
} </style>

16
Custom_Templates/customer_templates/Walmart Scintilla Prod/commerce_catalog.html.liquid
View File

@ -1,3 +1,19 @@
{% assign basic_3p_user = false %}
{% if current_person.groups.any? %}
{% for group in current_person.groups %}
{% assign group_name = group.name | downcase %}
{% if group_name contains "basic" %}
<script> console.log("This is a basic user!") </script>
{% assign basic_3p_user = true %}
{% endif %}
{% endfor %}
{% endif %}
{% if basic_3p_user %}
<script>
window.location.href="/app"
</script>
{% endif %}
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% include "sub_navigation" %}

62
Custom_Templates/customer_templates/Walmart Scintilla Prod/homepage.html.liquid
View File

@ -7,7 +7,8 @@
function showSurveyPopup() {
setTimeout(function() {
document.querySelector(".survey-popup-trigger").click()
if (document.querySelector(".survey-popup-trigger"))
document.querySelector(".survey-popup-trigger").click()
}, 500)
}
@ -107,15 +108,14 @@
<script> console.log("Homepage: This is a basic user!") </script>
{% assign enrolled_courses = courses.enrolled %}
{% include "basic_group_homepage", items: enrolled_courses %}
{% include "lps_in_progress" %}
{% else %}
<script> console.log("Homepage: This is a non-basic user!") </script>
{% include "sub_navigation" %}
{% include "nonbasic_group_users_homepage" %}
{% include "lps_in_progress" %}
{% include "homepage_topics" %}
{% comment %} {% include "homepage_topics" %} {% endcomment %}
{% endif %}
{% include "footer" %}
@ -209,39 +209,26 @@
<script>
if (window.location.pathname == "/app") {
document
.querySelector(".np-sub-navigation")
.classList
.add("homepage-nav")
document
.querySelector(".np-header")
.classList
.add("homepage-nav")
if (document.querySelector(".np-sub-navigation"))
document.querySelector(".np-sub-navigation").classList.add("homepage-nav")
if (document.querySelector(".np-header"))
document.querySelector(".np-header").classList.add("homepage-nav")
}
document.querySelector(".np-hidden-desktop .dropdown-arrow").addEventListener("click", function(e) {
if (e
.target
.parentElement
.classList
.contains("open")) {
e
.target
.parentElement
.classList
.remove("open")
} else {
e
.target
.parentElement
.classList
.add("open")
if (e.target.parentElement.classList.contains("open")) {
e.target.parentElement.classList.remove("open")
}
else {
e.target.parentElement.classList.add("open")
}
})
window.onload = function() {
var stickySubNav = document.querySelector('.np-sub-navigation');
var headerOffset = findOffset(stickySubNav);
if (stickySubNav)
headerOffset = findOffset(stickySubNav);
window.onscroll = function() {
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
@ -380,7 +367,7 @@
<style>
.np-homepage-ongoing {
margin-bottom:56px;
}
.left-content-title {
@ -388,18 +375,19 @@
padding-left: 20px;
line-height: 15px;
margin: 20px 0;
}
.content-by-product {
height: auto;
height: auto;
overflow: hidden;
}
.upcomongevents {
height: 350px;
height: auto;
overflow: hidden;
}
#seemore:hover, #seemorecertificates:hover {
#seemoreevents:hover, #seemorecertificates:hover {
cursor: pointer;
}
.np-homepage-hero {
@ -464,7 +452,7 @@
}
.np-homepage-row-wrapper {
margin-bottom: 56px;
}

10
Custom_Templates/customer_templates/Walmart Scintilla Prod/styles.css.liquid
View File

@ -333,8 +333,8 @@ a.np-card {
.np-card .np-image-wrapper .np-card-content-title {
color: #fff;
font-size: 24px;
line-height: 30px;
font-size: 20px;
line-height: 1.2;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
@ -379,8 +379,8 @@ a.np-card {
@media (min-width: 768px) {
.np-card .np-image-wrapper .np-card-content-title {
font-size: 28px;
line-height: 34px;
font-size: 20px;
line-height: 1.2;
}
}
@ -458,7 +458,7 @@ a.np-card {
}
.np-card-learning-path-progress .lp-progress-card-wrapper {
flex-direction: row;
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;