templates/uniqskills/catalogue/landing_new/landing.html.twig line 1

Open in your IDE?
  1. {% extends '/uniqskills/layout.html.twig' %}
  3. {% block meta %}
  4.     {% if course.metaTitle is not empty %}
  5.         <meta name="title" content="{{ course.metaTitle }}">
  6.     {% endif %}
  7.     {% if course.metaDescription is not empty %}
  8.         <meta name="description" content="{{ course.metaDescription }}">
  9.     {% endif %}
  10. {% endblock %}
  11. {#{% if app.request.locale == 'en' %}#}
  12. {#    {% block title %}#}
  13. {#        {{ course.name }} - UniqSkills#}
  14. {#    {% endblock %}#}
  15. {#{% endif %}#}
  17. {% block customcss %}
  18.     <style>
  19.         body {
  20.             font-size: 16px !important;
  21.         }
  23.         @media (max-width: 767px) {
  24.             .fabs {
  25.                 bottom: 150px;
  26.             }
  27.         }
  28.     </style>
  29.     <link rel="stylesheet" href="/uniqskills/new_landing/stylesheets/main.css?v=1.23">
  30. {% endblock %}
  32. {% block content %}
  33.     {# --- Type of price, default NET ---  #}
  34.     {% set typeParam = app.request.query.get('apivalue') %}
  35.     {% if typeParam is not empty and (typeParam == 'netto' or typeParam == 'brutto') %}
  36.         {% set initialType = typeParam %}
  37.     {% else %}
  38.         {% set initialType = 'netto' %}
  39.     {% endif %}
  40.     {# --- END OF: Type of price, default NET ---  #}
  43.     {% if preview == true %}
  44.         <div class="landing-preview-info">
  45.             LANDING PREVIEW
  46.         </div>
  47.     {% endif %}
  48.     {% if app.request.locale == "es" %}
  49.         <div style="margin-bottom:0px;" class="single-course__bannerSM" id="smb_3798"></div>
  50.     {% endif %}
  51.     {% for module in landing.modules %}
  52.         {% if module.showModule == true %}
  53.             {% if module.type == 'promotionBar' %}
  54.                 {% include 'uniqskills/catalogue/landing_new/landing_partials/promotionBar.html.twig' %}
  55.             {% elseif module.type == 'courseTitle' %}
  56.                 {% include 'uniqskills/catalogue/landing_new/landing_partials/courseTitle.html.twig' %}
  57.             {% elseif module.type == 'basicDescription' and module.descriptionCheckboxes is defined %}
  58.                 {% include 'uniqskills/catalogue/landing_new/landing_partials/basicDescription.html.twig' %}
  59.             {% elseif module.type == 'description' %}
  60.                 {% include 'uniqskills/catalogue/landing_new/landing_partials/description.html.twig' %}
  61.             {% elseif module.type == 'finishCourse' and module.json is defined  %}
  62.                 {% include 'uniqskills/catalogue/landing_new/landing_partials/finishCourse.html.twig' %}
  63.             {% elseif module.type == 'courseContent' and module.points is defined %}
  64.                 {% include 'uniqskills/catalogue/landing_new/landing_partials/courseContent.html.twig' %}
  65.             {% elseif module.type == 'courseProgram' %}
  66.                 {% include 'uniqskills/catalogue/landing_new/landing_partials/courseProgram.html.twig' %}
  67.             {% elseif module.type == 'tutors' and module.tutorsList is defined %}
  68.                 {% include 'uniqskills/catalogue/landing_new/landing_partials/tutors.html.twig' %}
  69.             {% elseif module.type == 'teaching' and module.json is defined  %}
  70.                 {#{% include 'uniqskills/catalogue/landing_partials/teaching.html.twig' %}#}
  71.             {% elseif module.type == 'payment' %}
  72.                 {% include 'uniqskills/catalogue/landing_new/landing_partials/payment.html.twig' %}
  73.             {% elseif module.type == 'faq' and module.list is defined %}
  74.                 {% include 'uniqskills/catalogue/landing_new/landing_partials/faq.html.twig' %}
  75.             {% elseif module.type == 'contact' %}
  76.                 {% include 'uniqskills/catalogue/landing_new/landing_partials/contact.html.twig' %}
  77.             {% elseif module.type == 'clearHtmlSection' %}
  78.                 <section class="clearHtml">
  79.                     <a name="{{ module.type }}-{{ module.id }}"></a>
  80.                     <div class="container">
  81.                         <div class="row">
  82.                             <div class="col">
  83.                                 {{ include(template_from_string(module.text|raw)) }}
  84.                             </div>
  85.                         </div>
  86.                     </div>
  87.                 </section>
  88.             {% endif %}
  89.         {% endif %}
  90.     {% endfor %}
  91. {% if suggestedCourses|length > 0 %}
  92.     {% include 'uniqskills/catalogue/landing_new/landing_partials/forYou.html.twig' %}
  93. {% endif %}
  95. <a href="{{ referer }}"
  96.    class="button button--autoWidth button-blueBorder toCategories"
  97.    style="margin-left: 0;">
  98.     >> {{ 'uniqskills.landing.toCategories'|trans }} <<
  99. </a>
  103. {% endblock %}
  105. {% block customjs %}
  107.     {% if app.environment == 'dev' %}
  108.         <script src="{{ asset('uniqskills/new_landing/js/faq.js') }}"></script>
  109.         <script src="{{ asset('uniqskills/new_landing/js/header.js') }}"></script>
  110.         <script src="{{ asset('uniqskills/new_landing/js/courseprogram.js') }}"></script>
  111.         <script src="{{ asset('uniqskills/new_landing/js/subscriptions.js') }}"></script>
  112.         <script src="{{ asset('uniqskills/new_landing/js/popper.min.js') }}"></script>
  113.         <script src="{{ asset('uniqskills/new_landing/js/bootstrap.min.js') }}"></script>
  114.     {% elseif app.environment == 'prod' %}
  115.         <script src="{{ asset('uniqskills/new_landing/js/dist/all.js?ver=1.1') }}" defer></script>
  116.     {% endif %}
  118.     <script>
  119.         window.dataLayer = window.dataLayer || [];
  120.         window.dataLayer.push({
  121.             'course': {{ course.id }}
  122.         });
  124.         /**
  125.          * Set icon container height in rowIncludes section on mobile screens
  126.          * */
  127.         function setRowIconHeight() {
  128.             var windowWidth = window.innerWidth;
  129.             var iconsBack = document.querySelectorAll('.rowIconBack');
  131.             if( windowWidth <= 575 ) {
  133.                 for( var i = 0; i < iconsBack.length; i++ ) {
  134.                     var backHeight = iconsBack[i].offsetHeight;
  135.                     var frontHeight = iconsBack[i].previousElementSibling.offsetHeight;
  137.                     if( backHeight >= frontHeight ) {
  138.                         iconsBack[i].parentNode.style.height = backHeight + 'px';
  139.                     } else {
  140.                         iconsBack[i].parentNode.style.height = frontHeight + 'px';
  141.                     }
  142.                 }
  144.             }
  146.         }
  148.         /**
  149.          * Rotate icon container in rowincludes section on icon click on mobile screens
  150.          * */
  151.         function flipIconCards() {
  152.             var windowWidth = window.innerWidth;
  153.             var icons = document.querySelectorAll('.bgs--small-xs');
  154.             var cardIconContainers = document.querySelectorAll('.rowIncludes__oneRow');
  155.             var activeIconContainer;
  157.             if( windowWidth <= 575 ) {
  158.                 for (var icon of icons) {
  159.                     icon.addEventListener('click', function () {
  161.                         activeIconContainer = this.closest('.rowIncludes__oneRow');
  163.                         // Remove class hover-manual from all elements .rowIncludes__oneRow
  164.                         for (var cardContainer of cardIconContainers) {
  165.                             cardContainer.classList.remove('hover-manual');
  166.                         }
  168.                         // Add class hover-manual to parent element who has class rowIncludes__oneRow
  169.                         this.closest('.rowIncludes__oneRow').classList.add('hover-manual');
  171.                     });
  172.                 }
  174.                 // Remove class hover-manual when user click outside active icon container
  175.                 document.addEventListener('click', function(e) {
  177.                     if( activeIconContainer !== undefined && !activeIconContainer.contains(e.target) && typeof(activeIconContainer) !== 'undefined' ) {
  179.                         for (var cardContainer of cardIconContainers) {
  180.                             cardContainer.classList.remove('hover-manual');
  181.                         }
  183.                     }
  185.                 });
  187.             }
  188.         }
  192.         /*
  193.         *  Hides pulsing Tap icon in rowincludes section after 10 seconds when the section is visible
  194.         * */
  195.         function hideTapIcon() {
  196.             var windowWidth = window.innerWidth;
  198.             if( windowWidth <= 575 ) {
  200.                 // this is the target which is observed
  201.                 var target = document.querySelector('section.rowIncludes');
  203.                 // configure the intersection observer instance
  204.                 var intersectionObserverOptions = {
  205.                     root: null,
  206.                     rootMargin: '150px',
  207.                     threshold: 1.0
  208.                 };
  210.                 var observer = new IntersectionObserver(onIntersection, intersectionObserverOptions);
  212.                 // provide the observer with a target
  213.                 observer.observe(target);
  215.                 function onIntersection(entries) {
  216.                     entries.forEach(function (entry) {
  218.                         target.classList.toggle('visible', entry.intersectionRatio > 0);
  220.                         // Are we in viewport?
  221.                         if (entry.intersectionRatio > 0) {
  223.                             setTimeout(function () {
  225.                                 document.querySelector('.rowIncludes__tap-icon').classList.add('rowIncludes__tap-icon--none');
  227.                             }, 10000)
  228.                         }
  229.                     });
  230.                 }
  231.             }
  232.         }
  234.     </script>
  236.     <script>
  237.         $(document).ready(function () {
  238.             const openedModules = sessionStorage.getItem('openedModules');
  240.             if (openedModules)
  241.             {
  242.                 openedModules.split(',').forEach(element => $(`#${element}`).show());
  243.                 sessionStorage.removeItem('openedModules');
  244.             }
  246.             $('body').on('click', '.sm-download', function (e) {
  247.                 sendDownloadEvent();
  248.             });
  250.             $('body').on('click', function(){
  252.                 if ($('#vimeoVideoModalIframe').length > 0)
  253.                 {
  254.                     $('#vimeoVideoModalIframe').attr('src','');
  256.                     $('.modal').on('hide.bs.modal', function(){
  257.                         if ($('#vimeoVideoModalIframe').contents().find('.renderSuccessModal').length > 0)
  258.                         {
  259.                             const visibleModules = $('.rowCourseProgram__module__elements:not(:hidden)')
  260.                                 .map(function() {return this.id}).toArray().join();
  262.                             if (visibleModules)
  263.                             {
  264.                                 sessionStorage.setItem('openedModules', visibleModules);
  265.                             }
  267.                             location.reload();
  268.                         }
  269.                     });
  270.                 }
  271.             });
  273.             $('.showFreeLessonVimeo').on('click', function () {
  274.                 var urlVimeo = $(this).attr('data-vimeoUrl');
  275.                 $('#freeVideoModalIframe').attr('src', urlVimeo);
  276.                 $('#freeVideoModal').modal();
  277.             })
  279.             if ($(window).width() <= 768)
  280.             {
  281.                 if ($('.iconArrowFreeLession').find('img').length > 0) $('.iconArrowFreeLession').find('img').attr('src', '/icons/arrow-down.svg');
  282.             }
  284.             $('.titleFreeLessonBox').on('click', function(){
  285.                 $('.freeLessonInCourse').slideToggle('400', function(){
  286.                     if ($(this).is(':visible')){
  287.                         $('.iconArrowFreeLession').find('img').attr('src', '/icons/arrow-up.svg');
  288.                     } else {
  289.                         $('.iconArrowFreeLession').find('img').attr('src', '/icons/arrow-down.svg');
  290.                     }
  291.                 });
  292.             });
  295.             $('.freeAccessModalVimeo').click(function () {
  296.                 if ($(this).hasClass('sm-download'))
  297.                 {
  298.                     sendDownloadEvent();
  299.                 }
  301.                 var currentUrl = $(this).data('free');
  302.                 if ($(this).data('temporary') == true)
  303.                 {
  304.                     currentUrl = currentUrl.replace('vimeo.', 'player.vimeo.');
  305.                     currentUrl = currentUrl.replace('.com/', '.com/video/');
  306.                     $('#vimeoVideoModalIframe').attr('src', currentUrl);
  307.                     $('#vimeoVideoModal').modal();
  308.                 }
  309.                 else
  310.                 {
  311.                     var urlLogin = $(this).data('login');
  312.                         url = window.location.origin,
  313.                         videoUrl = currentUrl.split('com/'),
  314.                         videoNumber =  videoUrl[1];
  316.                     $('#vimeoVideoModalIframe').attr('src', url + urlLogin + '?modalVideo=' + videoNumber + '&modalCourse=' + {{ course.id }});
  317.                     $('#vimeoVideoModal').modal();
  318.                 }
  319.                 return false;
  320.             });
  322.             function sendDownloadEvent() {
  323.                 console.log('clickowanie');
  324.                 $.ajax({
  325.                     type: 'POST',
  326.                     url: '{{ path('fmUniqskillsSalesManagoDownload', {'course': course.id}) }}',
  327.                     success: function (data) {
  328.                         // handle success
  329.                     },
  330.                     error: function (error) {
  331.                         console.error(error);
  332.                     }
  333.                 });
  334.             }
  336.             $('.freeAccessModalPdf').click(function () {
  337.                 var urlLogin = $(this).data('login'),
  338.                     url = window.location.origin;
  340.                 $('#vimeoVideoModalIframe').attr('src', url + urlLogin + '?modalPdf=1');
  341.                 $('#vimeoVideoModal').modal();
  343.                 return false;
  344.             });
  346.             $('.menu-link-scroll').click(function (e) {
  348.                 var width = $(window).width();
  350.                 var offsetAdd = 0;
  351.                 if(width < 768)
  352.                 {
  353.                     offsetAdd = -15;
  354.                 }
  356.                 e.preventDefault();
  357.                 var id = $(this).data('link');
  358.                 $('html,body').animate({
  359.                     scrollTop: ($('a[name="' + id + '"]').offset().top - 80 - offsetAdd)
  360.                 }, 1000);
  361.             });
  363.             // $('#recipeCarousel').carousel({
  364.             //     interval: 10000
  365.             // });
  367.             $('.carousel .carousel-item').each(function () {
  368.                 var minPerSlide = 3;
  369.                 var next = $(this).next();
  370.                 if (!next.length) {
  371.                     next = $(this).siblings(':first');
  372.                 }
  373.                 next.children(':first-child').clone().appendTo($(this));
  375.                 for (var i = 0; i < minPerSlide; i++) {
  376.                     next = next.next();
  377.                     if (!next.length) {
  378.                         next = $(this).siblings(':first');
  379.                     }
  381.                     next.children(':first-child').clone().appendTo($(this));
  382.                 }
  383.             });
  385.             var courseTitleVer2 = $('.rowHeader');
  386.             var courseTitleVer3 = $('.rowHeader-mobile-image');
  388.             $(window).on("resize", function (e) {
  389.                 checkScreenSize(courseTitleVer2);
  390.                 checkScreenSize(courseTitleVer3);
  391.             });
  393.             checkScreenSize(courseTitleVer2);
  394.             checkScreenSize(courseTitleVer3);
  396.             function checkScreenSize(element) {
  397.                 var newWindowWidth = $(window).width();
  399.                 element.each(function () {
  400.                     var courseTitleImage = $(this).data('image');
  401.                     var courseTitleBackground = $(this).data('background');
  402.                     var courseTitleBackgroundMobile = $(this).data('background-mobile');
  404.                     if (courseTitleImage === 'image') {
  405.                         if (newWindowWidth <= 768) {
  406.                             $(this).css({
  407.                                 'background': "url('" + courseTitleBackgroundMobile + "')",
  408.                                 'background-size': '100%',
  409.                                 'background-repeat': 'no-repeat'
  410.                             });
  411.                         } else {
  412.                             $(this).css({
  413.                                 'background': "url('" + courseTitleBackground + "')",
  414.                                 'background-position': 'right top',
  415.                                 'background-repeat': 'no-repeat',
  416.                                 'background-size': 'cover',
  417.                             });
  418.                         }
  419.                     }
  420.                 });
  421.             }
  423.             // Show less description
  424.             function showMore2() {
  425.                 var windowWidth = $(window).width();
  426.                 var content = $(".rowDescription__short-desc");
  427.                 var readMoreButton = $(".rowDescription__read-more");
  428.                 var readMoreText = readMoreButton.data('read-more');
  429.                 var readLessText = readMoreButton.data('read-less');
  430.                 var anchorSection = $('section.rowDescription__normal > a[name]');
  432.                 if( windowWidth < 768 ) {
  435.                     readMoreButton.on('click', function(e) {
  436.                         e.preventDefault();
  438.                         if(content.hasClass('active')) {
  439.                             content.removeClass('rowDescription__short-desc--normal');
  440.                             content.removeClass('active');
  442.                             setTimeout(function() {
  443.                                 $('html,body').animate({
  444.                                     scrollTop: anchorSection.offset().top - 120
  445.                                 }, 1000);
  446.                             }, 70);
  448.                             readMoreButton.text(readMoreText);
  449.                         } else {
  450.                             content.addClass('active');
  451.                             content.addClass('rowDescription__short-desc--normal');
  453.                             readMoreButton.text(readLessText);
  454.                         }
  455.                     });
  456.                 }
  457.             }
  459.             showMore2();
  462.             // Highlight menu link in 2Menu
  463.             function highlightMenuLink() {
  464.                 var lastId = "";
  465.                 var helperHeight = 58;
  467.                 if( $(window).width() <= 768) {
  468.                     helperHeight = 43;
  469.                 }
  471.                 var menuItems = $('.second-menu-slider').find('a');
  472.                 var topMenuHeight = $('.second-menu-slider').outerHeight() + helperHeight;
  473.                 var menuOffsetTop = $('.second-menu-slider').offset().top;
  475.                 // scrollItems - list of links with internal anchors
  476.                 var scrollItems = menuItems.map( function() {
  477.                     var idSelector = $(this).attr('href');
  478.                     idSelector = idSelector.replace(/^#/, '');
  479.                     var itemAnchor = $('a[name='+idSelector+']');
  481.                     if(itemAnchor.length) { return itemAnchor; }
  482.                 });
  484.                 var fromTop = $(this).scrollTop() + topMenuHeight;
  485.                 var cur = scrollItems.map(function(){
  486.                     if ($(this).offset().top < fromTop) {
  487.                         return this;
  488.                     }
  489.                 });
  490.                 cur = cur[cur.length-1];
  491.                 var id = cur && cur.length ? cur[0].name : "";
  494.                 if (fromTop > menuOffsetTop && lastId !== id) {
  495.                     lastId = id;
  497.                     menuItems.removeClass('active-menu-link');
  498.                     var currentItemMenu = menuItems.filter('[href=\\#'+id+']')[0];
  500.                     currentItemMenu.classList.add('active-menu-link');
  501.                 }
  502.             }
  504.             // Sticky menu
  506.             var secondMenu = $('.rowHeader__textRow__linkAndPrice');
  507.             var secondMenuPosition = secondMenu.offset().top;
  509.             $(window).scroll(function() {
  510.                 var currentPosition = $(window).scrollTop();
  512.                 if( currentPosition >=  secondMenuPosition) {
  513.                     secondMenu.addClass('rowHeader__textRow__linkAndPrice--fixed')
  514.                 } else {
  515.                     secondMenu.removeClass('rowHeader__textRow__linkAndPrice--fixed');
  516.                 }
  518.                 hideTapIcon();
  519.                 highlightMenuLink();
  520.             });
  522.             // Tutors slider
  524.             $('.tutors-slider').slick({
  525.                 slidesToShow: {% if app.request.locale == 'en' %}2{% else %}3{% endif %},
  526.                 slidesToScroll: {% if app.request.locale == 'en' %}2{% else %}3{% endif %},
  527.                 infinite: true,
  528.                 autoplay: false,
  529.                 arrows: false,
  530.                 dots: true,
  531.                 responsive: [
  532.                     {
  533.                         breakpoint: 992,
  534.                         settings: {
  535.                             slidesToShow: 2,
  536.                             slidesToScroll: 2,
  537.                         }
  538.                     },
  539.                     {
  540.                         breakpoint: 768,
  541.                         settings: {
  542.                             slidesToShow: 1,
  543.                             slidesToScroll: 1,
  544.                             variableWidth: true,
  545.                         }
  546.                     }
  547.                 ]
  548.             });
  550.             $('.suggestedCurses__slider').slick({
  551.                 slidesToShow: 3,
  552.                 slidesToScroll: 3,
  553.                 infinite: true,
  554.                 autoplay: false,
  555.                 arrows: false,
  556.                 dots: true,
  557.                 responsive: [
  558.                     {
  559.                         breakpoint: 992,
  560.                         settings: {
  561.                             slidesToShow: 2,
  562.                             slidesToScroll: 2,
  563.                         }
  564.                     },
  565.                     {
  566.                         breakpoint: 768,
  567.                         settings: {
  568.                             slidesToShow: 1,
  569.                             slidesToScroll: 1,
  570.                             variableWidth: true,
  571.                         }
  572.                     }
  573.                 ]
  574.             });
  576.             $('.second-menu-slider').slick({
  577.                 slidesToShow: 5,
  578.                 slidesToScroll: 1,
  579.                 infinite: false,
  580.                 autoplay: false,
  581.                 arrows: true,
  582.                 prevArrow: '<i class="fa fa-angle-left" aria-hidden="true"></i>',
  583.                 nextArrow: '<i class="fa fa-angle-right" aria-hidden="true"></i>',
  584.                 responsive: [
  585.                     {
  586.                         breakpoint: 1199,
  587.                         settings: {
  588.                             slidesToShow: 5,
  589.                             slidesToScroll: 1,
  590.                         }
  591.                     },
  592.                     {
  593.                         breakpoint: 768,
  594.                         settings: {
  595.                             slidesToShow: 4,
  596.                             slidesToScroll: 1,
  597.                             arrows: true
  598.                         }
  599.                     }
  600.                 ]
  601.             });
  604.             setRowIconHeight();
  605.             flipIconCards();
  607.         });
  609.         $(window).on('resize', function() {
  610.             setRowIconHeight();
  611.         });
  613.     </script>
  615.     {% if landing.landing.customScripts is not empty %}
  616.         <script>
  617.             {{ landing.landing.customScripts|raw }}
  618.         </script>
  619.     {% endif %}
  620. {% endblock %}