# 17. 1. Ẩn Infinite scroll trigger (ok)

![](https://1113999984-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M84NwP_L_qEsBHOa2xo%2F-MSb9yU5vHZBXgBURPL6%2F-MSbJoBr5di_R8g3ioww%2FScreenshot_4.jpg?alt=media\&token=1cbd27c5-9320-41e7-8eae-18630204d385)

C:\xampp\htdocs\test\wp-content\plugins\plugin-name\admin\js\wpf-themplate\_ct.js

```
ShowHide: function () {
			$( '#' + WPF.prefix + 'lightbox_container' ).on( 'change', '.' + WPF.prefix + 'changed input,.' + WPF.prefix + 'changed select', function () {
				var $container, slide = true;
				if ( $( this ).prop( 'name' ) === 'pagination_type' ) {
					if ( $( this ).val() === 'infinity_auto' ) {
						$( '.wpf_lightbox_row.wpf_infinity_buffer' ).show();
					} else {
						$( '.wpf_lightbox_row.wpf_infinity_buffer' ).hide();
					}
				}
			});
			// $('.'+WPF.prefix +'changed input:checked,.'+WPF.prefix +'changed option:selected').trigger('change');
		}
```

C:\xampp\htdocs\test\wp-content\plugins\plugin-name\admin\js\wpf-admin\_ct.js

```
var openLightBox = function (e, title, content, $class, $top) {
    	e.preventDefault();
    	var $uniqid = 'wpf_' + Math.random().toString(36).substr(2, 9);
    	var $lightbox = '<div id="' + $uniqid + '" class="wpf_admin_lightbox wpf_interface">' +
	      '<div class="wpf_lightbox_title">' + title + '</div>' +
	      '<a href="#" class="wpf_close_lightbox">×</a>' +
	      '<div id="wpf_ct_lightbox_container">' +
	      '<div class="wpf_lightbox_inner">' + content + '</div>' +
	      '</div>' +
	      '</div>' +
      '<div class="wpf_overlay"></div>';
      $('body').append($lightbox);
      if(!$top){
        $top = 100;
      }
      if($class){
        $('#' + $uniqid).addClass($class);
      }
      $.event.trigger("WPF.openlightbox",[e,$uniqid]);
      $('#' + $uniqid).nextAll('.wpf_overlay').show();
      $('#' + $uniqid).show().css('top', getDocHeight()).animate({
          top: $top
      }, 800);
    }
```

C:\xampp\htdocs\test\wp-content\plugins\plugin-name\includes\class-wpf-form\_ct.php

```
private function add_fields($data = array()) {
    $layouts = array(
      'vertical' => __('Vertical Layout', 'wpf'),
      'horizontal' => __('Horizontal Layout', 'wpf')
    );
    $pagination = array(
        'pagination' => __('Standard Pagination', 'wpf'),
        'infinity_auto' => __('Infinite Scroll', 'wpf'),
        'infinity' => __('Load More', 'wpf')
    );
    ?>
      <div class="wpf_lightbox_row">
        <div class="wpf_lightbox_label"><label for="wpf_name"><?php _e('Form Title', 'wpf'); ?></label></div>
        <div class="wpf_lightbox_input">
          <input id="wpf_name" class="wpf_towidth" type="text" value="<?php echo !empty($data['name']) ? $data['name'] : '' ?>" name="name" />
        </div>
      </div>
      <div class="wpf_lightbox_row ">
        <div class="wpf_lightbox_label"><?php _e('Layout', 'wpf'); ?></div>
        <div class="wpf_lightbox_input wpf_grid wpf_ct_changed">
          <?php foreach ($layouts as $id => $ch): ?>
            <input id="wpf_<?php echo $id ?>" type="radio" value="<?php echo $id; ?>" name="type" <?php if ((!$data && $id === 'vertical' ) || ( isset($data['type']) && $data['type'] == $id )): ?>checked="checked"<?php endif; ?>/>
            <label title="<?php echo $ch ?>" for="wpf_<?php echo $id ?>" class="wpf_grid_<?php echo $id; ?>"></label>
          <?php endforeach; ?>
        </div>
      </div>
      <div class="wpf_lightbox_row">
        <div class="wpf_lightbox_label"><label for="wpf_empty_fields"><?php _e('Empty Fields', 'wpf'); ?></label></div>
        <div class="wpf_lightbox_input">
          <input <?php if ((!isset($data['empty']) && empty($data)) || !empty($data['empty'])): ?>checked="checked"<?php endif; ?> type="checkbox" name="empty" value="1" id="wpf_empty_fields"/>
          <label for="wpf_empty_fields"><?php _e('Do not show field if empty', 'wpf') ?></label>
        </div>
      </div>
      <div class="wpf_lightbox_row">
        <div class="wpf_lightbox_label"><label for="wpf_sort_fields"><?php _e('Product Sorting', 'wpf'); ?></label></div>
        <div class="wpf_lightbox_input">
          <input <?php if (!empty($data['sort'])): ?>checked="checked"<?php endif; ?> type="checkbox" name="sort" value="1" id="wpf_sort_fields"/>
          <label for="wpf_sort_fields"><?php _e('Hide product sorting', 'wpf') ?></label>
        </div>
      </div>
      <div class="wpf_lightbox_row">
        <div class="wpf_lightbox_label"><label for="wpf_result_fields"><?php _e('Product Count', 'wpf'); ?></label></div>
        <div class="wpf_lightbox_input">
          <input <?php if (!empty($data['result'])): ?>checked="checked"<?php endif; ?>  type="checkbox" name="result" value="1" id="wpf_result_fields"/>
          <label for="wpf_result_fields"><?php _e('Hide result product count', 'wpf') ?></label>
        </div>
      </div>
      <div class="wpf_lightbox_row">
        <div class="wpf_lightbox_label"><label for="wpf_out_of_stock_fields"><?php _e('Out of Stock', 'wpf'); ?></label></div>
        <div class="wpf_lightbox_input">
          <input <?php if (!empty($data['out_of_stock'])): ?>checked="checked"<?php endif; ?> type="checkbox" name="out_of_stock" value="1" id="wpf_out_of_stock_fields"/>
          <label for="wpf_out_of_stock_fields"><?php _e('Do not show out of stock products', 'wpf') ?></label>
        </div>
      </div>
      <div class="wpf_lightbox_row wpf_ct_changed">
        <div class="wpf_lightbox_label"><label for="wpf_pagination_fields"><?php _e('Pagination', 'wpf'); ?></label></div>
        <div class="wpf_lightbox_input">
          <input <?php if (!empty($data['pagination'])): ?>checked="checked"<?php endif; ?> type="checkbox" name="pagination" value="1" id="wpf_pagination_fields"/>
          <label for="wpf_pagination_fields"><?php _e('Hide Pagination', 'wpf') ?></label>
        </div>
      </div>
      <div class="wpf_lightbox_row wpf_infinity wpf_ct_changed">
        <div class="wpf_lightbox_label"><label for="wpf_pagination_type_fields"><?php _e('Pagination Option', 'wpf'); ?></label></div>
        <div class="wpf_lightbox_input">
          <?php foreach ($pagination as $k => $v): ?>
            <label for="wpf_<?php echo $k ?>_type_fields">
              <input <?php if ((isset($data['pagination_type']) && $data['pagination_type'] === $k) || (empty($data['pagination_type']) && $k === 'pagination')): ?>checked="checked"<?php endif; ?> type="radio" name="pagination_type" value="<?php echo $k ?>" id="wpf_<?php echo $k ?>_type_fields"/><?php echo $v ?>
            </label>
          <?php endforeach; ?>
        </div>
      </div>
      <div class="wpf_lightbox_row wpf_infinity_buffer">
        <div class="wpf_lightbox_label"><label for="wpf_pagination_type_fields">&nbsp;</label></div>
        <div class="wpf_lightbox_input">
          <input type="text" name="infinitybuffer" value="<?php echo! empty( $data['infinitybuffer'] ) ? esc_attr( $data['infinitybuffer'] ) : '' ?>" id="wpf_infinity_buffer_fields" /> <?php _e( 'Infinite scroll trigger point (px)' ) ?><br><small><?php _e( 'Default is 300, higher number means infinite scroll will trigger earlier.' ) ?></small>
        </div>
      </div>
      <div class="wpf_lightbox_row">
        <div class="wpf_lightbox_label"><label for="wpf_posts_per_page_fields"><?php _e('Products Per Page', 'wpf'); ?></label></div>
        <div class="wpf_lightbox_input">
            <input type="text" name="posts_per_page" value="<?php echo!empty($data['posts_per_page']) ? intval($data['posts_per_page']) : '' ?>" id="wpf_posts_per_page_fields"/>
        </div>
      </div>
      <div class="wpf_lightbox_row">
        <div class="wpf_lightbox_label"><label for="wpf_group_fields"><?php _e('Toggle Field Groups', 'wpf'); ?></label></div>
        <div class="wpf_lightbox_input">
          <input <?php if (!empty($data['group'])): ?>checked="checked"<?php endif; ?> type="checkbox" name="group" value="1" id="wpf_group_fields"/>
          <label for="wpf_group_fields"><?php _e('Allow field groups toggle-able', 'wpf') ?></label>
        </div>
      </div>
      <div class="wpf_lightbox_row wpf_result_page_wrapper">
        <div class="wpf_lightbox_label"><label><?php _e('Reset Button', 'wpf'); ?></label></div>
        <div class="wpf_lightbox_input">
          <ul>
            <li>
              <input id="wpf_bottom_reset_button" type="radio" value="bottom" name="reset_button" <?php if ( !empty( $data['reset_button'] ) && 'bottom' === $data['reset_button'] ): ?>checked="checked"<?php endif; ?>>
              <label for="wpf_bottom_reset_button"><?php _e( 'Add reset button at bottom', 'wpf' ); ?></label>
            </li>
            <li>
              <input id="wpf_group_reset_button" type="radio" value="group" name="reset_button" <?php if ( !empty( $data['reset_button'] ) && 'group' === $data['reset_button'] ): ?>checked="checked"<?php endif; ?>>
              <label for="wpf_group_reset_button"><?php _e( 'Add reset button at every field group', 'wpf' ); ?></label>
            </li>
            <li>
              <input id="wpf_no_reset_button" type="radio" value="no" name="reset_button" <?php if ( empty( $data['reset_button'] ) || (!empty( $data['reset_button'] ) && 'no' === $data['reset_button']) ): ?>checked="checked"<?php endif; ?>>
              <label for="wpf_no_reset_button"><?php _e( 'No reset button', 'wpf' ); ?></label>
            </li>
          </ul>
        </div>
      </div>
    <?php
  }
```
