288 lines
8.2 KiB
Plaintext
288 lines
8.2 KiB
Plaintext
<div class="np-homepage-featured np-max-width">
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<div class="np-homepage-featured-text">
|
|
<div class="np-homepage-headline">
|
|
{{ homepage.featured_courses_headline }}
|
|
</div>
|
|
<div id="dvsnappay_hppform">
|
|
<!-- HTML is dynamically placed here -->
|
|
</div>
|
|
<input id="snappayhppform_response" name="snappayhppform_response" />
|
|
|
|
|
|
<button type="button" value="Submit" onclick="myclick()" class="button" style="border:none; background:transparent;">
|
|
Purchase access to a course!
|
|
<div id='mylink'></div>
|
|
</button>
|
|
|
|
|
|
<div id="dvsnappay_hppform">
|
|
</div>
|
|
<input src="https://stage.snappayglobal.com/Interop/HostedPaymentPage" id="snappayhppform_response" type="hidden" name="snappayhppform_response" />
|
|
<script type="text/javascript">
|
|
function myclick() {
|
|
var mylink = document.getElementById('mylink');
|
|
mylink.onclick = function () {
|
|
var t = document.createElement("script");
|
|
t.setAttribute("id", "snappay_hppform");
|
|
t.setAttribute("src", "https://stage.snappayglobal.com/Areas/Interop/Scripts/HPPForm.js");
|
|
t.setAttribute("data-target", "#snappayhppform_response");
|
|
t.setAttribute("data-callback", "submit_external_ecommerce");
|
|
t.setAttribute("data-accountid", "1003003518");
|
|
t.setAttribute("data-merchantid", "822200009000");
|
|
t.setAttribute("data-customerid", "100");
|
|
t.setAttribute("data-paymentmode", "CC");
|
|
t.setAttribute("data-transactionamount", "100");
|
|
t.setAttribute("data-currencycode", "USD");
|
|
t.setAttribute("data-firstname", "No one");
|
|
t.setAttribute("data-lastname", "Noooo One");
|
|
t.setAttribute("data-email", "Noone@none.com");
|
|
t.setAttribute("data-redirectionurl", "https://scintillasandbox.northpass.com/app");
|
|
t.setAttribute("data-snappayurl", "https://stage.snappayglobal.com/Interop/HostedPaymentPage");
|
|
document.getElementsByTagName("head")[0].appendChild(t);
|
|
return false;
|
|
}
|
|
document.getElementById('mylink').click();
|
|
}
|
|
</script>
|
|
<script>
|
|
var response = document.getElementById('snappayhppform_response');
|
|
</script>
|
|
<script type="text/javascript">
|
|
function submit_external_ecommerce() {
|
|
var result = $("#snappayhppform_response").val();
|
|
sessionStorage.setItem("snappayhpp_response", result);
|
|
sessionStorage.setItem("caller", "js");
|
|
|
|
var obj = JSON.parse(result);
|
|
var response = obj['response']
|
|
// var pgreturncode = response['pgreturncode']
|
|
// sessionStorage.setItem("returncode", pgreturncode)
|
|
var inside = JSON.parse(obj['response'])
|
|
console.log(inside)
|
|
sessionStorage.setItem("insidevals", inside)
|
|
var stringside = JSON.stringify(inside)
|
|
sessionStorage.setItem("stringside", stringside)
|
|
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
<div class="featured-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>
|
|
{% if items.size > 0 %}
|
|
{% assign featured_courses_count = 0 %}
|
|
<div class="featured-courses-wrapper">
|
|
<div class="featured-courses-slider">
|
|
{% for course in items %}
|
|
{% if course.properties.is_article_course %}
|
|
{% assign is_featured = false %}
|
|
|
|
{% for cat in course.categories %}
|
|
{% assign cat_name = cat.name | downcase %}
|
|
{% if cat_name == "featured" %}
|
|
{% assign is_featured = true %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if is_featured %}
|
|
{% assign featured_courses_count = featured_courses_count | plus: 1 %}
|
|
|
|
<div class="featured-course-slide" data-position="{{course.properties.course_position}}">
|
|
{% include "cards_article" with course %}
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
{% if featured_courses_count > 0 %}
|
|
<div class="featured-see-more-wrapper">
|
|
<a href="/app/articles">See more</a>
|
|
</div>
|
|
{% else %}
|
|
<div class="np-homepage-featured-empty">
|
|
<div class="np-zero-state-text">
|
|
Sorry! There is no Featured content at the moment. Be sure to check back here later.
|
|
</div>
|
|
<img
|
|
class="np-zero-state-courses"
|
|
alt="Sorry! There is no Featured content at the moment. Be sure to check back here later."
|
|
/>
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="np-homepage-featured-empty">
|
|
<div class="np-zero-state-text">
|
|
Sorry! There is no Featured content at the moment. Be sure to check back here later.
|
|
</div>
|
|
<img
|
|
class="np-zero-state-courses"
|
|
alt="Sorry! There is no Featured content at the moment. Be sure to check back here later."
|
|
/>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
window.addEventListener("load", (event) => {
|
|
var indexes = document.querySelectorAll(".featured-courses-slider .featured-course-slide");
|
|
var indexesArray = Array.from(indexes);
|
|
|
|
const sortByPosition = arr => {
|
|
const positionSorter = (a, b) => {
|
|
return a.dataset.position - b.dataset.position;
|
|
}
|
|
arr.sort(positionSorter);
|
|
};
|
|
|
|
sortByPosition(indexesArray);
|
|
|
|
document.querySelector(".featured-courses-slider").innerHTML = ""
|
|
|
|
indexesArray.forEach(e =>
|
|
document.querySelector(".featured-courses-slider").appendChild(e));
|
|
|
|
|
|
initFeaturedCoursesCarousel()
|
|
|
|
});
|
|
|
|
function initFeaturedCoursesCarousel() {
|
|
var featuredSlider = tns({
|
|
container: '.featured-courses-slider',
|
|
items: 1,
|
|
slideBy: 'page',
|
|
autoplay: false,
|
|
gutter: 8,
|
|
controls:true,
|
|
navPosition:"bottom",
|
|
loop: false,
|
|
mouseDrag: true,
|
|
speed: 500,
|
|
controlsContainer: document.querySelector('.featured-carousel-controls'),
|
|
responsive: {
|
|
600: {
|
|
items: 2,
|
|
},
|
|
768: {
|
|
items:3,
|
|
gutter: 16,
|
|
nav: false,
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
.featured-courses-wrapper {
|
|
margin: 0 -8px;
|
|
}
|
|
|
|
.np-homepage-featured {
|
|
padding: 0 16px;
|
|
margin-bottom:56px;
|
|
}
|
|
|
|
.np-homepage-featured-text {
|
|
padding: 0 0 32px;
|
|
text-align:left;
|
|
display:flex;
|
|
}
|
|
|
|
.np-homepage-featured-text .np-homepage-headline {
|
|
font-weight: 400;
|
|
font-size: 24px;
|
|
line-height: 32px;
|
|
color:#333;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.featured-carousel-controls {
|
|
align-self:flex-end;
|
|
display:flex;
|
|
}
|
|
|
|
.featured-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;
|
|
}
|
|
|
|
.featured-carousel-controls .carousel-control[aria-disabled='true'] {
|
|
opacity: 0.3;
|
|
cursor:default;
|
|
}
|
|
|
|
.featured-carousel-controls .carousel-control.next-arrow {
|
|
margin-right:0;
|
|
}
|
|
|
|
.featured-courses-slider {
|
|
display:flex;
|
|
}
|
|
|
|
.featured-course-slide {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.featured-course-slide .np-card {
|
|
margin:0 auto;
|
|
padding: 0;
|
|
height:100%;
|
|
}
|
|
|
|
.featured-course-slide .np-card-container {
|
|
height: 100%;
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.featured-see-more-wrapper {
|
|
display:flex;
|
|
justify-content:flex-end;
|
|
margin-top:8px;
|
|
}
|
|
|
|
.featured-see-more-wrapper a {
|
|
color:#3C228A;
|
|
}
|
|
|
|
@media (min-width:768px){
|
|
.np-homepage-featured-text {
|
|
flex-direction:row;
|
|
justify-content:space-between;
|
|
}
|
|
|
|
.np-homepage-featured-text .np-homepage-headline {
|
|
font-size: 32px;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.featured-see-more-wrapper {
|
|
margin-top:12px;
|
|
}
|
|
}
|
|
</style>
|