init

wp-content/themes/flatsome/inc/extensions/flatsome-infinite-scroll/class-flatsome-infinite-scroll.php

@@ -0,0 +1,147 @@
+<?php
+/**
+ * Flatsome Infinite scroll extension
+ *
+ * @author     UX Themes
+ * @category   Extension
+ * @package    Flatsome/Extensions
+ * @since      3.5.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Class Flatsome_Infinite_Scroll
+ */
+class Flatsome_Infinite_Scroll {
+
+	/**
+	 * Version number
+	 *
+	 * @var string
+	 */
+	private $version;
+
+	/**
+	 * Holds loader type selected from theme settings.
+	 * ex. button, spinner, image, etc.
+	 *
+	 * @var string
+	 */
+	private $loader_type;
+
+	/**
+	 * Holds category list style from theme settings.
+	 * ex. grid, list, masonry
+	 *
+	 * @var string
+	 */
+	private $list_style;
+
+	/**
+	 * Static instance
+	 *
+	 * @var object
+	 */
+	private static $instance;
+
+	/**
+	 * Flatsome_Infinite_Scroll constructor.
+	 */
+	private function __construct() {
+		$theme         = wp_get_theme( get_template() );
+		$this->version = $theme->get( 'Version' );
+
+		add_action( 'init', array( $this, 'init' ) );
+	}
+
+	/**
+	 * Initializes the extension object and returns its instance
+	 *
+	 * @return object The extension object instance
+	 */
+	public static function get_instance() {
+		if ( ! isset( self::$instance ) ) {
+			self::$instance = new self();
+		}
+
+		return self::$instance;
+	}
+
+	/**
+	 * Initialize extension
+	 */
+	public function init() {
+		if ( is_admin() ) {
+			return;
+		} // Disable for admin
+
+		$this->loader_type = get_theme_mod( 'infinite_scroll_loader_type', 'spinner' );
+		$this->list_style  = get_theme_mod( 'category_grid_style', 'grid' );
+
+		add_action( 'wp_enqueue_scripts', array( $this, 'add_scripts' ), 99 );
+		add_action( 'woocommerce_after_shop_loop', array( $this, 'add_page_loader' ), 20 );
+		add_action( 'wp_head', array( $this, 'add_css' ), 110 );
+	}
+
+	/**
+	 * Add extension scripts
+	 */
+	public function add_scripts() {
+		global $extensions_uri;
+		wp_enqueue_script( 'flatsome-infinite-scroll-js', get_template_directory_uri() . '/assets/libs/infinite-scroll.pkgd.min.js', array( 'jquery', 'flatsome-js' ), '4.0.1', true );
+		wp_enqueue_script( 'flatsome-infinite-scroll', $extensions_uri . '/flatsome-infinite-scroll/flatsome-infinite-scroll.js', array( 'jquery', 'flatsome-js' ), $this->version, true );
+
+		$params = array(
+			'scroll_threshold' => 400,
+			'fade_in_duration' => 300,
+			'type'             => $this->loader_type,
+			'list_style'       => $this->list_style,
+			'history'          => 'push',
+		);
+
+		wp_localize_script( 'flatsome-infinite-scroll', 'flatsome_infinite_scroll', apply_filters( 'flatsome_infinite_scroll_params', $params ) );
+	}
+
+	/**
+	 *  Adds page loader template
+	 */
+	public function add_page_loader() {
+		$this->get_template( $this->loader_type );
+	}
+
+	/**
+	 * Add extension CSS
+	 */
+	public function add_css() {
+		ob_start();
+		?>
+		<style id="infinite-scroll-css" type="text/css">
+			.page-load-status,
+			.archive .woocommerce-pagination {
+				display: none;
+			}
+		</style>
+		<?php
+		$css = ob_get_clean();
+		echo flatsome_minify_css( $css ); // @codingStandardsIgnoreLine
+	}
+
+	/**
+	 * Gets and includes loader template file specified by name.
+	 *
+	 * @param string $name Name of the template.
+	 */
+	private function get_template( $name ) {
+		global $extensions_url;
+		$template = $extensions_url . "/flatsome-infinite-scroll/templates/{$name}.php";
+		include $template;
+	}
+}
+
+/**
+ * Init Flatsome_Infinite_Scroll
+ */
+Flatsome_Infinite_Scroll::get_instance();

wp-content/themes/flatsome/inc/extensions/flatsome-infinite-scroll/flatsome-infinite-scroll.js

@@ -0,0 +1,90 @@
+/* global flatsome_infinite_scroll, Packery, ga */
+jQuery(document).ready(function () {
+  var container = jQuery('.shop-container .products')
+  var paginationNext = '.woocommerce-pagination li a.next'
+
+  if (container.length === 0 || jQuery(paginationNext).length === 0) {
+    return
+  }
+
+  var viewMoreButton = jQuery('button.view-more-button.products-archive')
+  var byButton = flatsome_infinite_scroll.type === 'button'
+  var isMasonry = flatsome_infinite_scroll.list_style === 'masonry'
+  // Set packery instance as outlayer when masonry is set.
+  var outlayer = isMasonry ? Packery.data(container[0]) : false
+
+  var $container = container.infiniteScroll({
+    path: paginationNext,
+    append: '.shop-container .product',
+    checkLastPage: true,
+    status: '.page-load-status',
+    hideNav: '.archive .woocommerce-pagination',
+    button: '.view-more-button',
+    history: flatsome_infinite_scroll.history,
+    historyTitle: true,
+    debug: false,
+    outlayer: outlayer,
+    scrollThreshold: parseInt(flatsome_infinite_scroll.scroll_threshold)
+  })
+
+  if (byButton) {
+    viewMoreButton.removeClass('hidden')
+    $container.infiniteScroll('option', {
+      scrollThreshold: false,
+      loadOnScroll: false
+    })
+  }
+
+  $container.on('load.infiniteScroll', function (event, response, path) {
+    flatsomeInfiniteScroll.attachBehaviors(response)
+  })
+
+  $container.on('request.infiniteScroll', function (event, path) {
+    if (byButton) viewMoreButton.addClass('loading')
+  })
+
+  $container.on('append.infiniteScroll', function (event, response, path, items) {
+    jQuery(document).trigger('flatsome-infiniteScroll-append', [response, path, items])
+    if (byButton) viewMoreButton.removeClass('loading')
+
+    // Fix Safari bug
+    jQuery(items).find('img').each(function (index, img) {
+      img.outerHTML = img.outerHTML
+    })
+
+    // Load fragments and init_handling_after_ajax for new items.
+    jQuery(document).trigger('yith_wcwl_reload_fragments')
+    jQuery(document).trigger('flatsome-equalize-box')
+
+    Flatsome.attach('lazy-load-images', container)
+    flatsomeInfiniteScroll.animateNewItems(items)
+
+    if (isMasonry) {
+      setTimeout(function () {
+        $container.imagesLoaded(function () {
+          $container.packery('layout')
+        })
+      }, 500)
+    }
+
+    if (window.ga && ga.loaded && typeof ga === 'function') {
+      var link = document.createElement('a')
+      link.href = path
+      ga('set', 'page', link.pathname)
+      ga('send', 'pageview')
+    }
+  })
+
+  var flatsomeInfiniteScroll = {
+    attachBehaviors: function (response) {
+      Flatsome.attach('quick-view', response)
+      Flatsome.attach('tooltips', response)
+      Flatsome.attach('add-qty', response)
+      Flatsome.attach('wishlist', response)
+    },
+    animateNewItems: function (items) {
+      if (isMasonry) return
+      jQuery(items).hide().fadeIn(parseInt(flatsome_infinite_scroll.fade_in_duration))
+    }
+  }
+})

wp-content/themes/flatsome/inc/extensions/flatsome-infinite-scroll/templates/button.php

@@ -0,0 +1,3 @@
+<p class="text-center">
+	<button class="view-more-button products-archive button primary hidden"><?php esc_html_e( 'View more', 'flatsome' ); ?></button>
+</p>

wp-content/themes/flatsome/inc/extensions/flatsome-infinite-scroll/templates/image.php

@@ -0,0 +1,9 @@
+<div class="page-load-status">
+	<div class="loader-image infinite-scroll-request text-center">
+		<?php if ( get_theme_mod( 'infinite_scroll_loader_img' ) ) : ?>
+		<img class="archive-img-loader" alt="" src="<?php echo set_url_scheme( get_theme_mod( 'infinite_scroll_loader_img' ) ) ?>"/>
+		<?php else : ?>
+		<p>No custom loader image set.</p>
+		<?php endif ?>
+	</div>
+</div>

wp-content/themes/flatsome/inc/extensions/flatsome-infinite-scroll/templates/spinner.php

@@ -0,0 +1,5 @@
+<div class="page-load-status">
+	<div class="loader-spinner infinite-scroll-request text-center">
+			<div class="loading-spin"></div>
+	</div>
+</div>