Open FREE units in a Popup from Course Curriculum

Last updated on by

In this tip you can open “Free” units in a popup right from the course curriculum. Refer to below image for reference :

1. Go to WP Admin -> Plugins -> Editor -> WPLMS Customizer -> customizer_class.php
2. Add following line in _construct function :

PHP Code:
For wplms version lesser than  2.0 .

add_filter('wplms_course_curriculum_free_access',array($this,'wplms_custom_course_curriculum_free_access'),10,3);

For wplms version 2.0 or above : 

add_filter('wplms_curriculum_course_lesson',array($this,'wplms_custom_course_curriculum_free_access_2'),10,3);

 

3. Add Following function in class :

PHP Code:
For wplms version lesser than  2.0 .

function wplms_custom_course_curriculum_free_access($html,$lesson,$free){
            if(vibe_validate($free))
                $html ='<a href="'.get_permalink($lesson).'" class="ajax_unit">'.get_the_title($lesson).(vibe_validate($free)?'<span>'.__('FREE','vibe').'</span>':'').'</a>';
            return $html;
        }

For wplms version 2.0 or above : 

function wplms_custom_course_curriculum_free_access_2($html,$lesson,$course_id){
    $free=get_post_meta($lesson,'vibe_free',true);
    if(vibe_validate($free))
      $html ='<a href="'.get_permalink($lesson).'" class="ajax_unit">'.get_the_title($lesson).(vibe_validate($free)?'<span>'.__('FREE','vibe').'</span>':'').'</a>';
    return $html;
}

4. Add the following code in WPLMS Customizer -> custom.js file : (requires FTP)

Code:
jQuery(document).ready(function(){
   jQuery('.ajax_unit').magnificPopup({
          type: 'ajax',
        alignTop: true,
        fixedContentPos: true,
        fixedBgPos: true,
        overflowY: 'auto',
        closeBtnInside: true,
        preloader: false,
        midClick: true,
        removalDelay: 300,
        mainClass: 'my-mfp-zoom-in',
        callbacks: {
          parseAjax: function(mfpResponse) {
             mfpResponse.data = jQuery(mfpResponse.data).find('.unit_wrap');
          },
          ajaxContentAdded: function() {
             // jQuery('video,audio').mediaelementplayer();
              jQuery('.fitvids').fitVids();
              jQuery('.tip').tooltip();
              jQuery('.nav-tabs li:first a').tab('show');
              jQuery('.nav-tabs li a').click(function(event){
                  event.preventDefault();
                jQuery(this).tab('show');
              });
          }
        }
    });
});

5. Add following CSS code in WP Admin ->Apperance -> Customizer -> CUSTOM CSS

Code:
.mfp-ajax-holder .mfp-content{max-width:720px;}

 

6. You may also require changing : WP Admin -> Plugins -> Editor -> WPLMS Customizer -> wplms_customizer.php

PHP Code:

wp_enqueue_script( 'wplms-customizer-js', plugins_url( 'js/custom.js' , __FILE__ ));

to

PHP Code:

wp_enqueue_script( 'wplms-customizer-js', plugins_url( 'js/custom.js' , __FILE__ ),array('magnific-js','bp-course-js'),'1.0.0',true);

 

 

Tested with WPLMS Version 3.9.8

add_filter('wplms_curriculum_course_lesson','wplms_custom_course_curriculum_free_access_2',999,3);

function wplms_custom_course_curriculum_free_access_2($html,$lesson,$course_id){
$free=get_post_meta($lesson,'vibe_free',true);
if(vibe_validate($free))
$html ='<a href="'.get_permalink($lesson).'" class="ajax_unit">'.get_the_title($lesson).(vibe_validate($free)?'<span>'.__('FREE','vibe').'</span>':'').'</a>';

?>
<script>
jQuery(document).ready(function(){
jQuery('.ajax_unit').magnificPopup({
type: 'ajax',
alignTop: true,
fixedContentPos: true,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in',
callbacks: {
parseAjax: function(mfpResponse) {
mfpResponse.data = jQuery(mfpResponse.data).find('.unit_wrap');
},
ajaxContentAdded: function() {
// jQuery('video,audio').mediaelementplayer();
jQuery('.fitvids').fitVids();
jQuery('.tip').tooltip();
jQuery('.nav-tabs li:first a').tab('show');
jQuery('.nav-tabs li a').click(function(event){
event.preventDefault();
jQuery(this).tab('show');
});
}
}
});
});
</script>

<style>

.mfp-ajax-holder .mfp-content{max-width:720px;}

</style>

<?php

return $html;

}