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;
}