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

Backedup supplier's templates. GSU tests.

Browse Source
This commit is contained in:
Norm Rasmussen
2024-10-25 16:17:46 -04:00
parent 3626ead591
commit d93059e8c0
25 changed files with 803 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Custom_Templates/customer_templates/Gainsight University/catalog.html.liquid
View File

@ -1,6 +1,7 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% include "sub_navigation" %}
<script> console.log('The catalog.html.liquid file has been loaded successfully.') </script>
<main class="np-main np-catalog np-subpage-container np-max-width">
<div class="np-catalog-header-wrapper">
<div class="np-catalog-header">

3
Custom_Templates/customer_templates/Gainsight University/commerce_catalog.html.liquid
View File

@ -1,6 +1,7 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% include "sub_navigation" %}
<script> console.log('The commerce_catalog.html.liquid file has been loaded successfully.') </script>
<main class="np-main np-catalog np-subpage-container np-max-width">
<div class="np-catalog-header-wrapper">
<div class="np-catalog-header">
@ -29,7 +30,7 @@
<li>Adoption Explorer</li>
<li>Designing Effective Surveys</li>
</ul>
<span>Need assistance? Contact <a href="mailto:training@gainsight.com">training@gainsight.com</a></span>
</div>
</div>

54
Custom_Templates/customer_templates/Walmart Supplier Prod/_analysis-and-reporting-carousel.html.liquid
View File

@ -1,10 +1,29 @@
<div class="carousel-wrapper">
<div class="carousel-heading">Analysis and Reporting</div>
<div class="carousel-filter-wrapper" id="carousel-filter-wrapper-analysis">
<div class="filter-container">
<div class="filter" id="filterToggleAnalysis">Filter</div>
</div>
<div class="filter-content" id="filterContentAnalysis">
<div class="filter-option">
<input class="filter-checkbox" type="checkbox" id="a-not-started">
<label class="filter-name">Not Started</label>
</div>
<div class="filter-option">
<input class="filter-checkbox" type="checkbox" id="a-in-progress">
<label class="filter-name">In Progress</label>
</div>
<div class="filter-option">
<input class="filter-checkbox" type="checkbox" id="a-completed">
<label class="filter-name">Completed</label>
</div>
</div>
</div>
<div class="analysis-and-reporting-carousel">
{% for course in courses.in_catalog %}
{% for category in course.categories %}
{% if category.name == 'Analysis and Reporting' %}
<div class="carousel-cards-container">
<div class="carousel-cards-container analysis-courses" progress="{% if course.progress == 100 %}completed{% elsif course.progress == 0 %}not-started{% else %}in-progress{% endif %}">
{% include 'cards_course' %}
</div>
{% endif %}
@ -20,13 +39,13 @@
</style>
<script>
$(document).ready(function(){
$(document).ready(function() {
$(".analysis-and-reporting-carousel").slick({
slidesToShow: 3,
cssEase: 'linear',
prevArrow: '<i class="fal fa-chevron-left"></i>',
nextArrow: '<i class="fal fa-chevron-right"></i>',
prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
infinite: false,
responsive: [
{
@ -45,6 +64,31 @@ $(document).ready(function(){
}
}
]
});
});
document.getElementById("filterToggleAnalysis").addEventListener("click", function() {
const filterWrapper = document.querySelector('#carousel-filter-wrapper-analysis');
filterWrapper.classList.toggle("filter-active");
});
function filterCardsAnalysis() {
const selectedFilters = Array.from(document.querySelectorAll('#filterContentAnalysis .filter-checkbox:checked')).map(checkbox => checkbox.id.replace('a-', ''));
const cards = document.querySelectorAll('.analysis-courses');
$(".analysis-and-reporting-carousel").slick('slickUnfilter');
if (selectedFilters.length === 0) {
$(".analysis-and-reporting-carousel").slick('slickUnfilter');
} else {
$(".analysis-and-reporting-carousel").slick('slickFilter', function(index, element) {
const cardProgress = element.getAttribute('progress');
return selectedFilters.includes(cardProgress);
});
}
}
document.querySelectorAll('#filterContentAnalysis .filter-checkbox').forEach(checkbox => {
checkbox.addEventListener('change', filterCardsAnalysis);
});
});
</script>

3
Custom_Templates/customer_templates/Walmart Supplier Prod/_cards_course.html.liquid
View File

@ -4,7 +4,8 @@
{% assign skip_course_page = true %}
{% endif %}
{% endfor %}
<div class="card-course">
<div class="card-course" progress="{% if course.progress == 100 %}completed{% elsif course.progress == 0 %}not-started{% else %}in-progress{% endif %}">
<div class="np-card-container">
{% if course.ribbon %}
<div class="np-card-ribbon">

4
Custom_Templates/customer_templates/Walmart Supplier Prod/_cards_learning_path.html.liquid
View File

@ -1,4 +1,6 @@
<div class="np-card np-no-horizontal-padding lp-card" {% for category in learning_path.categories %}{% if category.name == 'Grow Program' %}prioritise = 'true'{% endif %}{% endfor %}>
<div class="np-card np-no-horizontal-padding lp-card" {% for category in learning_path.categories %}{% if category.name == 'Grow Program' %}prioritise = 'true'{% endif %}{% endfor %} categories="{% for category in learning_path.categories %}{{category.name}},{% endfor %}"
progress="{% if learning_path.progress > 0 and learning_path.progress < 100 %}in-progress{% elsif learning_path.progress == 100 %}completed{% else %}not-started{% endif %}"
>
<div class="np-card-container">
<div class="np-learning-path">
<img

34
Custom_Templates/customer_templates/Walmart Supplier Prod/_catalog_categories.html.liquid
View File

@ -1,8 +1,8 @@
{% assign available_categories = "Ethics and Compliance,Item 360,Getting Paid,Modulars and Assortments,Onboarding,Packaging and Labeling,Replenishment,Retail Basics,Transportation" %}
{% assign available_categories = "Ethics and Compliance,Item Creation,Getting Paid,Merchandising,Onboarding,Packaging and Labeling,Replenishment,Retail Basics,Transportation" %}
<div class="catalog-categories-container">
<div class="text-container">
<div class="text-heading text-center">
Start you learning journey below.
Start your learning journey below.
</div>
</div>
@ -59,15 +59,15 @@
const categoryCards = document.querySelectorAll('.category-card');
const images = [
{name: 'Ethics and Compliance', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Ethics_and_Compliance.png"},
{name: 'Getting Paid', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Getting_Paid.png"},
{name: 'Item 360', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Item_360.png"},
{name: 'Modulars and Assortments', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Modulars_and_Assortments.png"},
{name: 'Onboarding', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Onboarding.png"},
{name: 'Packaging and Labeling', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Packaging_and_Labeling.png"},
{name: 'Replenishment', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Replinishment.png"},
{name: 'Retail Basics', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Retail_Basics.png"},
{name: 'Transportation', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Transportation.png"}
]
{name: 'Item Creation', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Item_Creation.png"},
{name: 'Merchandising', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Merchandising.png"},
{name: 'Transportation', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Transportation.png"},
{name: 'Packaging and Labeling', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Packaging_and_Labeling.png"},
{name: 'Getting Paid', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Getting_Paid.png"},
{name: 'Replenishment', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Replinishment.png"},
];
function addCategoryCardImage() {
categoryCards.forEach((card) => {
@ -82,7 +82,23 @@
});
}
function sortCategoryCards() {
const wrapper = document.querySelector('.category-links-wrapper');
const sortedCards = Array.from(categoryCards).sort((a, b) => {
const aIndex = images.findIndex(img => img.name === a.id);
const bIndex = images.findIndex(img => img.name === b.id);
return aIndex - bIndex;
});
wrapper.innerHTML = '';
sortedCards.forEach(card => {
wrapper.appendChild(card);
});
}
addEventListener("DOMContentLoaded", (event) => {
addCategoryCardImage();
sortCategoryCards();
});
</script>

21
Custom_Templates/customer_templates/Walmart Supplier Prod/_courses_help_doc.html.liquid Normal file
View File

@ -0,0 +1,21 @@
{% if courses.in_catalog.any? %}
<div class="np-catalog-courses row row-with-thumbnails">
{% for course in courses.in_catalog %}
{% for category in course.categories %}
{% if category.name == 'HelpDoc' %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content card-course-container">
{% include "cards_course" with course %}
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.catalog,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% include "courses_zero_state", message: message %}
{% endif %}

51
Custom_Templates/customer_templates/Walmart Supplier Prod/_getting-started-carousel.html.liquid
View File

@ -1,10 +1,29 @@
<div class="carousel-wrapper">
<div class="carousel-heading">Getting Started</div>
<div class="carousel-filter-wrapper">
<div class="filter-container">
<div class="filter" id="filterToggle">Filter</div>
</div>
<div class="filter-content" id="filterContent">
<div class="filter-option">
<input class="filter-checkbox" type="checkbox" id="gs-not-started">
<label class="filter-name">Not Started</label>
</div>
<div class="filter-option">
<input class="filter-checkbox" type="checkbox" id="gs-in-progress">
<label class="filter-name">In Progress</label>
</div>
<div class="filter-option">
<input class="filter-checkbox" type="checkbox" id="gs-completed">
<label class="filter-name">Completed</label>
</div>
</div>
</div>
<div class="getting-started-carousel">
{% for course in courses.in_catalog %}
{% for category in course.categories %}
{% if category.name == 'Getting Started' %}
<div class="carousel-cards-container">
<div class="carousel-cards-container gettin-started-courses" progress="{% if course.progress == 100 %}completed{% elsif course.progress == 0 %}not-started{% else %}in-progress{% endif %}">
{% include 'cards_course' %}
</div>
{% endif %}
@ -20,8 +39,7 @@
</style>
<script>
$(document).ready(function(){
$(document).ready(function() {
$(".getting-started-carousel").slick({
slidesToShow: 3,
cssEase: 'linear',
@ -45,6 +63,31 @@ $(document).ready(function(){
}
}
]
});
});
document.getElementById("filterToggle").addEventListener("click", function() {
const filterWrapper = document.querySelector('.carousel-filter-wrapper');
filterWrapper.classList.toggle("filter-active");
});
function filterCards() {
const selectedFilters = Array.from(document.querySelectorAll('.filter-checkbox:checked')).map(checkbox => checkbox.id.replace('gs-', ''));
const cards = document.querySelectorAll('.gettin-started-courses');
$(".getting-started-carousel").slick('slickUnfilter');
if (selectedFilters.length === 0) {
$(".getting-started-carousel").slick('slickUnfilter');
} else {
$(".getting-started-carousel").slick('slickFilter', function(index, element) {
const cardProgress = element.getAttribute('progress');
return selectedFilters.includes(cardProgress);
});
}
}
document.querySelectorAll('#filterContent .filter-checkbox').forEach(checkbox => {
checkbox.addEventListener('change', filterCards);
});
});
</script>

79
Custom_Templates/customer_templates/Walmart Supplier Prod/_grow-with-walmart-zero-state.html.liquid Normal file
View File

File diff suppressed because one or more lines are too long

109
Custom_Templates/customer_templates/Walmart Supplier Prod/_grow_with_walmart_banners.html.liquid Normal file
View File

@ -0,0 +1,109 @@
{% if us_user_grow or us_user_supplier %}
<div class="banner-wrapper">
<div class="banner-container">
<div class="banner-image-wrapper">
<img src="https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Banners/GWW+Logo.png" alt="" class="banner-img">
<div class="deatils-container">
<div class="banner-descirption text-center">Email <span class="bold-text">supplierdevelopment@walmart.com</span></div>
<div class="banner-descirption text-center">for additional support.</div>
</div>
</div>
<div class="banner-content-container">
<div class="banner-descirption">
If you are a U.S. based supplier wanting to sell your product in our U.S. stores, clubs, or online marketplace, <span class="bold-text">Grow With Walmart</span> will help prepare you for success.
</div>
<div class="banner-descirption">
Learn foundational business skills in our Business Fundamentals and Advanced Business pathways. Explore the skills necessary for a successful experience working with Walmart in our Retail Ready Capabilities and Walmart Ways of Working pathways.
</div>
</div>
</div>
</div>
{% elsif mexico_user %}
<div class="banner-wrapper">
<div class="banner-container">
<div class="banner-image-wrapper">
<img src="https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Banners/Crece-con-Walmart-Blanco.png" alt="" class="banner-img">
<div class="deatils-container">
<div class="banner-descirption text-center">Correo electrónico <span class="bold-text">contacto@crececonwalmart.com</span></div>
<div class="banner-descirption text-center">para soporte adicional.</div>
</div>
</div>
<div class="banner-content-container">
<div class="banner-descirption">
Crece con Walmart es un programa de desarrollo de proveedores que tiene como objetivo trabajar con personas que lideran micro, pequeñas y medianas empresas en México para ampliar sus capacidades empresariales y digitales.
</div>
<div class="banner-descirption">
Por medio de módulos de aprendizaje autogestionado, sesiones grupales en vivo y mentorías uno a uno, se busca apoyar a empresarias y empresarios para fortalecer sus capacidades y habilidades de venta en línea.
</div>
<div class="banner-descirption">
Crece con Walmart te permite desarrollar, aprender y conectar para, juntos, hacer que tu negocio llegue al siguiente nivel.
</div>
</div>
</div>
</div>
{% elsif india_user %}
<div class="banner-wrapper">
<div class="banner-container">
<div class="banner-image-wrapper">
<img src="https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Banners/Vriddhi+Logo.png" alt="" class="banner-img">
<div class="deatils-container">
<div class="banner-descirption text-center">Email <span class="bold-text">contactus@walmartvriddhi.org</span></div>
<div class="banner-descirption text-center">for additional support.</div>
</div>
</div>
<div class="banner-content-container">
<div class="banner-descirption">
Walmart Vriddhi is a supplier development program that aims to work with 50,000 Micro, Small and Medium Enterprises (MSMEs) in India to expand their domestic capabilities.
</div>
<div class="banner-descirption">
The program offers the opportunity to develop through on-demand learning and personalized mentoring. Participants also have support onboarding to Flipkart Marketplace.
</div>
</div>
</div>
</div>
{% endif %}
<style>
.banner-wrapper {
background: #13244c;
padding: 20px;
border-radius: 10px;
}
.banner-img {
width: 100%;
}
.banner-container {
display: flex;
align-items: center;
gap: 40px;
background: #041e42;
padding: 20px;
border-radius: 10px;
}
.text-center {
text-align: center;
}
.banner-descirption {
font-size: 20px;
}
.bold-text {
font-weight: 700;
}
.deatils-container {
display: flex;
flex-direction: column;
align-items: center;
}
.banner-image-wrapper {
width: 40%;
display: flex;
flex-direction: column;
gap: 30px;
}
.banner-content-container {
width: 60%;
display: flex;
flex-direction: column;
gap: 30px;
}
</style>

43
Custom_Templates/customer_templates/Walmart Supplier Prod/_header.html.liquid
View File

@ -1,3 +1,23 @@
{% assign us_user_grow = false %}
{% assign us_user_supplier = false %}
{% assign india_user = false %}
{% assign mexico_user = false %}
{% for group in current_person.groups %}
{% if group.name == 'Grow With Walmart' %}
{% assign us_user_grow = true %}
{% endif %}
{% if group.name == 'Supplier Academy' %}
{% assign us_user_supplier = true %}
{% endif %}
{% if group.name == 'Walmart Vriddhi' %}
{% assign india_user = true %}
{% endif %}
{% if group.name == 'Crece con Walmart' %}
{% assign mexico_user = true %}
{% endif %}
{% endfor %}
<header class="np-header np-header-color">
<div class="np-header-content">
{% if current_school.logo_url %}
@ -30,28 +50,21 @@
</li>
{% endfor %}
<li class= "np-header-desktop-nav-item">
<div
<a
class="np-header-desktop-nav-link np-header-font-color header-dropdown-link"
href="/app/grow-with-walmart-catalog"
>
Grow With Walmart
<div class="header-dropdown-container">
<a href="/app/learning_paths/bcd127cf-0eb7-455f-9631-bc95e5b33e6d" class="header-dropdown-option">Crece Con Walmart</a>
<a href="/app/learning_paths/eab19d79-6aa4-4ff5-857e-ee925c0bb8f1" class="header-dropdown-option">Grow With Walmart</a>
<a href="/app/learning_paths/117f2bd2-02d1-4ee2-9290-29683362fd58" class="header-dropdown-option">Walmart Vriddhi</a>
</div>
</div>
</li>
<li class= "np-header-desktop-nav-item">
<a
href="#"
class="np-header-desktop-nav-link np-header-font-color"
>
Blog
{% comment %} <div class="header-dropdown-container">
<a href="/app/catalog?filter[category_uuid][in][]=e4926581-2db7-48c8-b49f-e000d57de393&search_terms=" class="header-dropdown-option">Crece Con Walmart</a>
<a href="/app/catalog?filter[category_uuid][in][]=84a3a9b7-84f1-4bdd-8ebe-9c3d17b28ae2&search_terms=" class="header-dropdown-option">Grow With Walmart</a>
<a href="/app/catalog?filter[category_uuid][in][]=004c3e9e-1830-4a35-9537-e65e2fad8d43&search_terms=" class="header-dropdown-option">Walmart Vriddhi</a>
</div> {% endcomment %}
</a>
</li>
<li class= "np-header-desktop-nav-item">
<a
href="#"
href="mailto:supplierdevelopment@walmart.com "
class="np-header-desktop-nav-link np-header-font-color"
>
Contact

112
Custom_Templates/customer_templates/Walmart Supplier Prod/_lp_filters.html.liquid Normal file
View File

@ -0,0 +1,112 @@
<div class="lp-filter-wrapper">
<div class="filter-container">
<div class="filter" id="filterToggle">Filter</div>
</div>
<div class="filter-content" id="filterContent">
<div class="filter-option">
<input class="filter-checkbox" type="checkbox" id="not-started">
<label class="filter-name" >Not Started</label>
</div>
<div class="filter-option">
<input class="filter-checkbox" type="checkbox" id="in-progress">
<label class="filter-name" >In Progress</label>
</div>
<div class="filter-option">
<input class="filter-checkbox" type="checkbox" id="completed">
<label class="filter-name" >Completed</label>
</div>
</div>
</div>
<style>
.lp-filter-wrapper {
position: relative;
width: 100%;
color: #000;
border-radius: 4px;
display: flex;
justify-content: end;
margin-bottom: 20px;
}
.filter-checkbox {
width: 20px;
height: 20px;
}
.filter-container {
position: relative;
}
.filter {
background-color: #d9dfe2;
padding: 10px 20px;
cursor: pointer;
width: 100%;
text-align: center;
border-radius: 4px;
color: #305263;
font-size: 14px;
font-weight: 700;;
}
.filter-content {
position: absolute;
top: 100%;
width: 250px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
display: none;
flex-direction: column;
gap: 10px;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, width 0.4s ease;
z-index: 111;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 5px;
margin-top: 5px;
}
.filter-option {
padding: 10px;
display: flex;
align-items: end;
gap: 10px;
}
.filter-active .filter-content {
display: flex;
max-height: 500px;
width: 250px;
}
</style>
<script>
document.getElementById("filterToggle").addEventListener("click", function() {
const filterWrapper = document.querySelector('.lp-filter-wrapper');
filterWrapper.classList.toggle("filter-active");
});
function filterCards() {
const selectedCategories = Array.from(document.querySelectorAll('.filter-checkbox:checked')).map(checkbox => checkbox.id);
const cards = document.querySelectorAll('.np-card');
if (selectedCategories.length === 0) {
cards.forEach(card => card.style.display = 'block');
} else {
cards.forEach(card => {
const cardCategories = card.getAttribute('progress').split(',');
const isVisible = selectedCategories.some(category => cardCategories.includes(category));
card.style.display = isVisible ? 'block' : 'none';
});
}
}
document.querySelectorAll('.filter-checkbox').forEach(checkbox => {
checkbox.addEventListener('change', filterCards);
});
</script>

54
Custom_Templates/customer_templates/Walmart Supplier Prod/_merchandising-carousel.html.liquid
View File

@ -1,10 +1,29 @@
<div class="carousel-wrapper">
<div class="carousel-heading">Merchandising</div>
<div class="carousel-filter-wrapper" id="carousel-filter-wrapper-merchandising">
<div class="filter-container">
<div class="filter" id="filterToggleMerchandising">Filter</div>
</div>
<div class="filter-content" id="filterContentMerchandising">
<div class="filter-option">
<input class="filter-checkbox" type="checkbox" id="m-not-started">
<label class="filter-name">Not Started</label>
</div>
<div class="filter-option">
<input class="filter-checkbox" type="checkbox" id="m-in-progress">
<label class="filter-name">In Progress</label>
</div>
<div class="filter-option">
<input class="filter-checkbox" type="checkbox" id="m-completed">
<label class="filter-name">Completed</label>
</div>
</div>
</div>
<div class="merchandising-carousel">
{% for course in courses.in_catalog %}
{% for category in course.categories %}
{% if category.name == 'Merchandising' %}
<div class="carousel-cards-container">
<div class="carousel-cards-container merchandising-courses" progress="{% if course.progress == 100 %}completed{% elsif course.progress == 0 %}not-started{% else %}in-progress{% endif %}">
{% include 'cards_course' %}
</div>
{% endif %}
@ -20,13 +39,13 @@
</style>
<script>
$(document).ready(function(){
$(document).ready(function() {
$(".merchandising-carousel").slick({
slidesToShow: 3,
cssEase: 'linear',
prevArrow: '<i class="fal fa-chevron-left"></i>',
nextArrow: '<i class="fal fa-chevron-right"></i>',
prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
infinite: false,
responsive: [
{
@ -45,6 +64,31 @@ $(document).ready(function(){
}
}
]
});
});
document.getElementById("filterToggleMerchandising").addEventListener("click", function() {
const filterWrapper = document.querySelector('#carousel-filter-wrapper-merchandising');
filterWrapper.classList.toggle("filter-active");
});
function filterCards1() {
const selectedFilters = Array.from(document.querySelectorAll('#filterContentMerchandising .filter-checkbox:checked')).map(checkbox => checkbox.id.replace('m-', ''));
const cards = document.querySelectorAll('.merchandising-courses');
$(".merchandising-carousel").slick('slickUnfilter');
if (selectedFilters.length === 0) {
$(".merchandising-carousel").slick('slickUnfilter');
} else {
$(".merchandising-carousel").slick('slickFilter', function(index, element) {
const cardProgress = element.getAttribute('progress');
return selectedFilters.includes(cardProgress);
});
}
}
document.querySelectorAll('#filterContentMerchandising .filter-checkbox').forEach(checkbox => {
checkbox.addEventListener('change', filterCards1);
});
});
</script>

13
Custom_Templates/customer_templates/Walmart Supplier Prod/_sub_navigation.html.liquid
View File

@ -14,6 +14,12 @@
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div>
<div id="helpDocs" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
<a class="np-sub-navigation-content-item-link" href="/app/courses/a891fcb0-ed3a-4851-8e64-0f4f0b602c2d">
Help Docs
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div>
</div>
{% comment %}
<div id="navBlog" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
@ -30,13 +36,14 @@
<script>
const url = window.location.pathname;
const navBlogBtn = document.querySelector('#navBlog');
const navHelpDocBtn = document.querySelector('#helpDocs');
if (url === '/app/blog') {
navBlogBtn.classList.add('np-sub-navigation-content-item-active');
navBlogBtn.classList.remove('np-sub-navigation-content-item-inactive');
} else if (url === '') {
navBlogBtn.classList.add('np-sub-navigation-content-item-active');
navBlogBtn.classList.remove('np-sub-navigation-content-item-inactive');
} else if (url === '/app/help-docs') {
navHelpDocBtn.classList.add('np-sub-navigation-content-item-active');
navHelpDocBtn.classList.remove('np-sub-navigation-content-item-inactive');
}
</script>

61
Custom_Templates/customer_templates/Walmart Supplier Prod/_welcome_section.html.liquid Normal file
View File

@ -0,0 +1,61 @@
<div class="welcome-section-container">
<div class="welcome-section-wrapper">
<div class="introduction">
No matter where you are in your journey, Supplier Academy is your source for
everything you need to build a strong, lasting relationship with Walmart.
</div>
<div class="get-started">
<div class="heading">Here’s how to get started:</div>
<ul class="get-started-list">
<li class="get-started-item">
<span class="get-started-item-heading">New to Walmart?</span>
Check out the Grow With Walmart programs!
</li>
<li class="get-started-item">
<span class="get-started-item-heading">Seasoned supplier?</span>
Explore the categories below to hone your skills and grow your business.
</li>
<li class="get-started-item">
<span class="get-started-item-heading">Have system-specific questions?</span>
Visit our Help Docs directory.
</li>
</ul>
</div>
</div>
</div>
<style>
.welcome-section-container {
background: #13244c;
padding: 20px;
display: flex;
border-radius: 10px;
}
.welcome-section-wrapper {
background: #041e42;
padding: 20px;
border-radius: 10px;
}
.get-started {
margin-top: 40px;
}
.introduction {
color: #fff;
font-size: 30px;
font-weight: 600;
text-align: center;
}
.heading {
color: #fff;
font-size: 30px;
font-weight: 600;
}
.get-started-item-heading {
color: #fff;
font-size: 20px;
font-weight: 600;
}
.get-started-item {
font-size: 20px;
}
</style>

10
Custom_Templates/customer_templates/Walmart Supplier Prod/_widget_course_progress.html.liquid
View File

@ -10,8 +10,8 @@
</div>
</div>
<div class="progress-card-wrapper">
<div class="progress-card">
{% if courses.enrolled.any? %}
{% if courses.enrolled.any? %}
<div class="progress-card">
{% assign countComplete = 0 %}
{% assign countInProgress = 0 %}
{% assign countNotStarted = 0 %}
@ -56,6 +56,7 @@
%}
</li>
</ul>
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.index,
@ -64,7 +65,6 @@
{% endcapture %}
{% include "courses_zero_state", message: message %}
{% endif %}
</div>
</div>
@ -74,9 +74,11 @@
background: {{ background_color }};
padding: 0;
display: flex;
margin-bottom: 2.187rem;
width: 100%;
}
.progress-card-wrapper {
margin-bottom: 2.187rem;
}
.progress-circle-list {
padding: 0;
list-style-type: none !important;

3
Custom_Templates/customer_templates/Walmart Supplier Prod/blog.html.liquid
View File

@ -4,8 +4,7 @@
<main class="np-main np-catalog np-subpage-container np-max-width">
<div class="np-catalog-header-wrapper">
<div class="np-catalog-header">
<div class="np-resource-title">Blogs</div>
<div class="np-resource-subtitle"></div>
<div class="np-resource-title">Blog</div>
</div>
</div>
{% include "courses_blogs" %}

24
Custom_Templates/customer_templates/Walmart Supplier Prod/dashboard.html.liquid
View File

@ -30,13 +30,17 @@
<main class="np-main np-dashboard np-subpage-container np-max-width" style='background: #041e42;'>
<div class="row np-flex-center">
<div class="col-xs-12 col-md-8">
{% if features.learning_paths? %}
<div class="heading-container">
<div class="carousel-heading">
{% t shared.learning_paths %}
</div>
</div>
{% include "learning_paths_index", items: learning_paths.enrolled %}
{% comment %} {% if courses_in_progress %}
{% include 'in-progress-carousel' %}
{% endif %} {% endcomment %}
{% if getting_started_courses %}
{% include 'getting-started-carousel' %}
{% endif %}
{% if merchandising_courses %}
{% include 'merchandising-carousel' %}
{% endif %}
{% if analysis_and_reporting_courses %}
{% include 'analysis-and-reporting-carousel' %}
{% endif %}
</div>
<div class="np-grid-spacing col-xs-12 col-md-4 progress-section">
@ -52,7 +56,7 @@
</div>
</div>
<div class="row dashboard-section-courses">
{% comment %} <div class="row dashboard-section-courses">
<div class="col-xs-12">
{% if courses_in_progress %}
{% include 'in-progress-carousel' %}
@ -66,9 +70,9 @@
{% if analysis_and_reporting_courses %}
{% include 'analysis-and-reporting-carousel' %}
{% endif %}
{% comment %} {% include "training_events_index" %} {% endcomment %}
{% include "training_events_index" %}
</div>
</div>
</div> {% endcomment %}
</main>

41
Custom_Templates/customer_templates/Walmart Supplier Prod/grow-with-walmart-catalog.html.liquid Normal file
View File

@ -0,0 +1,41 @@
{% include "header" %}
{% include "sub_navigation" %}
<main class="np-main np-catalog np-subpage-container np-max-width">
{% include 'grow_with_walmart_banners' %}
<div class="lps-wrapper">
{% for learning_path in learning_paths.enrolled %}
{% for category in learning_path.categories %}
{% if us_user_grow %}
{% if category.name == 'Grow With Walmart' %}
{% include "cards_learning_path" %}
{% endif %}
{% elsif us_user_supplier %}
{% unless category.name == 'Walmart Vriddhi' or category.name == 'Crece con Walmart' %}
{% include "cards_learning_path" %}
{% endunless %}
{% elsif india_user %}
{% if category.name == 'Walmart Vriddhi' %}
{% include "cards_learning_path" %}
{% endif %}
{% elsif mexico_user %}
{% if category.name == 'Crece con Walmart' %}
{% include "cards_learning_path" %}
{% endif %}
{% endif %}
{% endfor %}
{% endfor %}
{% if us_user_grow == false and us_user_supplier == false and india_user == false and mexico_user == false %}
{% capture message %}
{% t shared.zero_state.courses.catalog,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% include "grow-with-walmart-zero-state", message: message %}
{% endif %}
</div>
</main>
{% include "footer" %}

23
Custom_Templates/customer_templates/Walmart Supplier Prod/grow_with_walmart_catalog.html.liquid Normal file
View File

@ -0,0 +1,23 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% include "sub_navigation" %}
<main class="np-main np-catalog np-subpage-container np-max-width">
<div class="np-catalog-header-wrapper">
<div class="np-catalog-header">
<div class="np-resource-title">{{ catalog.headline }}</div>
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
</div>
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
{% if courses.in_catalog.any? %}
{%
include "filter_dropdown",
filters: courses.filters,
key: "category_uuid",
label: label
%}
{% endif %}
</div>
{% include "courses_catalog" %}
</main>
{% include "footer" %}

12
Custom_Templates/customer_templates/Walmart Supplier Prod/help-docs.html.liquid Normal file
View File

@ -0,0 +1,12 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% include "sub_navigation" %}
<main class="np-main np-catalog np-subpage-container np-max-width">
<div class="np-catalog-header-wrapper">
<div class="np-catalog-header">
<div class="np-resource-title">Help Docs</div>
</div>
</div>
{% include "courses_help_doc" %}
</main>
{% include "footer" %}

3
Custom_Templates/customer_templates/Walmart Supplier Prod/homepage.html.liquid
View File

@ -12,6 +12,9 @@
{% comment %} <section>
{% include 'feature_learning_paths' %}
</section> {% endcomment %}
<section>
{% include 'welcome_section' %}
</section>
<section>
{% include 'catalog_categories' %}
</section>

13
Custom_Templates/customer_templates/Walmart Supplier Prod/learning_paths.html.liquid
View File

@ -2,11 +2,14 @@
{% include "sub_navigation" %}
<main class="np-main np-learning-paths np-subpage-container np-max-width">
<div class="np-learning-paths-main">
<div class="np-resource-title">
{% t shared.learning_paths %}
</div>
<div class="np-resource-subtitle">
{% t .subtitle %}
<div class="lp-heading-container">
<div class="np-resource-title">
{% t shared.learning_paths %}
</div>
<div class="np-resource-subtitle">
{% t .subtitle %}
</div>
{% include 'lp_filters' %}
</div>
{% include "learning_paths_index", items: learning_paths.available %}
</div>

84
Custom_Templates/customer_templates/Walmart Supplier Prod/styles.css.liquid
View File

@ -153,6 +153,7 @@ section {
}
.card-course {
margin: 10px;
height: 100%;
}
.button-course {
background: #041141;
@ -178,6 +179,7 @@ section {
}
.slick-slider {
position: initial !important;
margin-bottom: 30px;
}
.slick-arrow {
position: absolute;
@ -213,3 +215,85 @@ section {
.np-zero-state-text {
color: #fff;
}
.np-learning-path-outline-name {
color: #fff;
}
.slick-track {
display: flex !important;
}
.slick-slide {
height: auto !important;
}
.carousel-filter-wrapper {
position: relative;
width: 100%;
color: #000;
border-radius: 4px;
display: flex;
justify-content: start;
margin-top: 20px;
}
.filter-checkbox {
width: 20px;
height: 20px;
}
.filter-container {
position: relative;
}
.filter {
background-color: #d9dfe2;
padding: 10px 20px;
cursor: pointer;
width: 100%;
text-align: center;
border-radius: 4px;
color: #305263;
font-size: 14px;
font-weight: 700;;
}
.filter-content {
position: absolute;
top: 100%;
width: 250px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
display: none;
flex-direction: column;
gap: 10px;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, width 0.4s ease;
z-index: 111;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 5px;
margin-top: 5px;
}
.filter-option {
padding: 10px;
display: flex;
align-items: end;
gap: 10px;
}
.filter-active .filter-content {
display: flex;
max-height: 500px;
width: 250px;
}
.card-course-container {
margin-bottom: 20px;
}
.np-card-ribbon {
padding: 5px;
}
.lps-wrapper {
margin-top: 40px;
}
.np-footer-support-help, .np-footer-support-item {
color: #fff;
}

13
Todos.md
View File

@ -437,3 +437,16 @@ Run lighthouse on anthology templates and find list of things that need to be im
- [X] WSGC - Remove Learning Paths from Footer in post-new hire
- [ ] Cin7 - Change the employee catalog filters to allow for other categories in a section called "Other"
New Commerce Catalog -
Filter option doesn't work anymore - is also broken if you try to upload old templates. Bug with filter.
icon changes
Icon on cards for course vs learning path
Once on v3, catalog needs to be moved commerce_catalog
new catalog has both learning paths, ilts, and courses.
Walmart Supplier -
Help Articles - land on first activity, everyone will be enrolled via Group:
https://supplieracademy.northpass.com/courses/a891fcb0-ed3a-4851-8e64-0f4f0b602c2d/activities/2571c2cb-2fc7-4b11-a8b9-fd72d5fa6adf