Skip to content

J
joshine
Commit 68b3ed21 by lmf
Options

增加列表瀑布流加载数据

parent fc472e36
Showing with 436 additions and 0 deletions
app/code/Magetop/InfiniteScroll/Block/InfiniteScroll.php 0 → 100644
<?php
namespace Magetop\InfiniteScroll\Block;
/**
* Class InfiniteScroll
*
*/
class InfiniteScroll extends \Magento\Framework\View\Element\Template
{
/**
* InfiniteScroll constructor.
* @param \Magento\Framework\View\Element\Template\Context $context
* @param \Magento\Store\Model\StoreManagerInterface $storeManager
* @param array $data
*/
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
\Magento\Store\Model\StoreManagerInterface $storeManager,
array $data = []
) {
parent::__construct($context, $data);
$this->storeManager = $storeManager;
}
/**
* getLoadingImage
*
* @return mixed
*/
public function getMedia($img=null)
{
$urlMedia = $this->storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
if($img) return $urlMedia . $img;
return $urlMedia;
}
}
\ No newline at end of file
app/code/Magetop/InfiniteScroll/Block/System/Config/Form/Field/Info.php 0 → 100644
<?php
/**
* @Author Magetop Developers
* @package Magetop_InfiniteScroll
* @copyright Copyright (c) 2018 MAGETOP (https://www.magetop.com)
* @terms https://www.magetop.com/terms
* @license https://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
**/
namespace Magetop\InfiniteScroll\Block\System\Config\Form\Field;
use Magento\Framework\Data\Form\Element\AbstractElement;
/**
* Backend system config datetime field renderer
*/
class Info extends \Magento\Config\Block\System\Config\Form\Field
{
public function __construct(
\Magento\Backend\Block\Template\Context $context,
array $data = []
) {
parent::__construct($context, $data);
}
/**
* @param AbstractElement $element
* @return string
* @codeCoverageIgnore
*/
protected function _getElementHtml(AbstractElement $element)
{
$html = '<div style="background: #EF432E;padding: 10px;border-radius: 5px;text-align: center">
<a target="_blank" href="https://www.magetop.com/magento-extensions.html" style="color: #fff">Magetop - Marketplace Extensions</a>
</div>';
return $html;
}
}
\ No newline at end of file
app/code/Magetop/InfiniteScroll/Helper/Data.php 0 → 100644
<?php
namespace Magetop\InfiniteScroll\Helper;
class Data extends \Magento\Framework\App\Helper\AbstractHelper
{
/**
* @var array
*/
protected $configModule;
public function __construct(
\Magento\Framework\App\Helper\Context $context
)
{
parent::__construct($context);
$this->configModule = $this->getConfig(strtolower($this->_getModuleName()));
}
public function getConfig($cfg='')
{
if($cfg) return $this->scopeConfig->getValue( $cfg, \Magento\Store\Model\ScopeInterface::SCOPE_STORE );
return $this->scopeConfig;
}
public function getConfigModule($cfg='', $value=null)
{
$values = $this->configModule;
if( !$cfg ) return $values;
$config = explode('/', $cfg);
$end = count($config) - 1;
foreach ($config as $key => $vl) {
if( isset($values[$vl]) ){
if( $key == $end ) {
$value = $values[$vl];
}else {
$values = $values[$vl];
}
}
}
return $value;
}
}
\ No newline at end of file
app/code/Magetop/InfiniteScroll/composer.json 0 → 100644
{
"name": "magetop/infinitescroll",
"description": "Infinite scroll for magento 2 automatically loads product catalog without reloading the page.",
"type": "magento2-module",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"authors": [
{
"name": "Magetop",
"email": "support@magetop.com",
"homepage": "https://www.magetop.com",
"role": "Technical Support"
}
],
"autoload": {
"files": [
"registration.php"
],
"psr-4": {
"Magetop\\InfiniteScroll\\": ""
}
}
}
\ No newline at end of file
app/code/Magetop/InfiniteScroll/etc/acl.xml 0 → 100644
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
<acl>
<resources>
<resource id="Magento_Backend::admin">
<resource id="Magento_Backend::stores">
<resource id="Magento_Backend::stores_settings">
<resource id="Magento_Config::config">
<resource id="Magetop_InfiniteScroll::config" title="Infinite Scroll" />
</resource>
</resource>
</resource>
</resource>
</resources>
</acl>
</config>
app/code/Magetop/InfiniteScroll/etc/adminhtml/system.xml 0 → 100644
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="magetop" translate="label" sortOrder="1">
<label>Magetop.com</label>
</tab>
<section id="magetop_infinitescroll" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
<class>separator-top</class>
<label>Infinite Scroll Setting</label>
<tab>magetop</tab>
<resource>Magetop_InfiniteScroll::config</resource>
<group id="info" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
<frontend_model>Magetop\InfiniteScroll\Block\System\Config\Form\Field\Info</frontend_model>
</group>
<group id="general" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>General Settings</label>
<field id="enabled" translate="label comment" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Enabled</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
<field id="delay" translate="label comment" type="text" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Delay (ms)</label>
<comment><![CDATA[Delay value for scroll down. default: 600]]></comment>
</field>
<field id="content" translate="label comment" type="text" sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Content</label>
<comment><![CDATA[Selector for the element that surrounds the items you will be loading more of. (For Ex.= .classname/#id)]]></comment>
</field>
<field id="pagination" translate="label comment" type="text" sortOrder="4" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Pagination</label>
<comment><![CDATA[Selector for pagination. (For Ex.= .classname/#id)]]></comment>
</field>
<field id="next" translate="label comment" type="text" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Next</label>
<comment><![CDATA[Selector for the link to the next page. (For Ex.= .classname/#id)]]></comment>
</field>
<field id="item" translate="label comment" type="text" sortOrder="6" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Item</label>
<comment><![CDATA[Selector for all items you will receive. (For Ex.= .classname/#id)]]></comment>
</field>
<field id="loading_image" translate="label comment" type="image" sortOrder="25" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Loading Image placeholder :</label>
<comment>Allowed file types: jpg, jpeg, gif, png.</comment>
<backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
<upload_dir config="system/filesystem/media" scope_info="1">magetop/infinitescroll</upload_dir>
<base_url type="media" scope_info="1">magetop/infinitescroll</base_url>
</field>
<field id="loading_text" translate="label comment" type="text" sortOrder="8" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Loading Text</label>
</field>
<field id="done_text" translate="label comment" type="text" sortOrder="9" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Done Text</label>
</field>
<field id="load_more" translate="label comment" type="text" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Load More threshold</label>
<comment><![CDATA[When this page number is reached, a button to load more products will be shown instead of continue loading products automatically with the scroll (this could be useful to help the user to reach the footer). TIP: use a high number to disable this feature.]]></comment>
</field>
<field id="load_more_text" translate="label comment" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Load More button text</label>
<comment><![CDATA[Set an offset before page end from which the content will start to load. A high number will load the next page a long time before the user reaches the bottom of the screen.]]></comment>
</field>
</group>
</section>
</system>
</config>
app/code/Magetop/InfiniteScroll/etc/config.xml 0 → 100644
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
<default>
<magetop_infinitescroll>
<general>
<enabled>1</enabled>
<delay>600</delay>
<content>.main</content>
<pagination>.pages-items, .pager__list</pagination>
<next>.next</next>
<item>.product-item</item>
<loading_image/>
<loading_text><![CDATA[<em>Loading - please wait...</em>]]></loading_text>
<done_text><![CDATA[<em>You've reached the end of the item.</em>]]></done_text>
<load_more>3</load_more>
<load_more_text>Load more items</load_more_text>
</general>
</magetop_infinitescroll>
</default>
</config>
app/code/Magetop/InfiniteScroll/etc/module.xml 0 → 100644
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Magetop_InfiniteScroll" setup_version="1.0.0">
<sequence>
<module name="Magento_Catalog"/>
<module name="Magento_CatalogSearch"/>
<module name="Magento_LayeredNavigation" />
</sequence>
</module>
</config>
\ No newline at end of file
app/code/Magetop/InfiniteScroll/etc/routes.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin">
<route id="ajaxscroll" frontName="ajaxscroll">
<module name="Magetop_InfiniteScroll" />
</route>
</router>
</config>
\ No newline at end of file
app/code/Magetop/InfiniteScroll/registration.php 0 → 100644
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Magetop_InfiniteScroll',
__DIR__
);
app/code/Magetop/InfiniteScroll/view/frontend/layout/ajaxscroll.xml 0 → 100644
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="before.body.end">
<block class="Magetop\InfiniteScroll\Block\InfiniteScroll" name="infinite_scroll.block" template="Magetop_InfiniteScroll::infinitescroll.phtml" ifconfig="magetop_infinitescroll/general/enabled"/>
</referenceContainer>
</body>
</page>
app/code/Magetop/InfiniteScroll/view/frontend/layout/catalog_category_view.xml 0 → 100644
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="ajaxscroll"/>
</page>
\ No newline at end of file
app/code/Magetop/InfiniteScroll/view/frontend/layout/catalogsearch_advanced_result.xml 0 → 100644
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="ajaxscroll"/>
</page>
\ No newline at end of file
app/code/Magetop/InfiniteScroll/view/frontend/layout/catalogsearch_result_index.xml 0 → 100644
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="ajaxscroll"/>
</page>
\ No newline at end of file
app/code/Magetop/InfiniteScroll/view/frontend/requirejs-config.js 0 → 100644
var config = {
map: {
'*': {
infinitescroll: 'Magetop_InfiniteScroll/js/plugin/infinitescroll',
}
},
paths: {
'magetop/infinitescroll': 'Magetop_InfiniteScroll/js/plugin/infinitescroll',
},
shim: {
'magetop/infinitescroll': {
deps: ['jquery']
}
}
};
\ No newline at end of file
app/code/Magetop/InfiniteScroll/view/frontend/templates/infinitescroll.phtml 0 → 100644
<?php
$helper = $this->helper('Magetop\InfiniteScroll\Helper\Data');
$isEnabled = $helper->getConfigModule('general/enabled');
$delay = $helper->getConfigModule('general/delay');
$content = $helper->getConfigModule('general/content');
$pagination = $helper->getConfigModule('general/pagination');
$next = $helper->getConfigModule('general/next');
$item = $helper->getConfigModule('general/item');
$loadingText = $helper->getConfigModule('general/loading_text');
$doneText = $helper->getConfigModule('general/done_text');
$loadMore = $helper->getConfigModule('general/load_more');
$loadMoreText = $helper->getConfigModule('general/load_more_text');
$loadingImage = $helper->getConfigModule('general/loading_image');
$imgPath = 'magetop/infinitescroll/'.$loadingImage;
if ($loadingImage) {
$loadingImage = $block->getMedia($imgPath);
}else{
$loadingImage = $this->getViewFileUrl('images/loader-1.gif');
}
?>
<script type="text/javascript">
require(['jquery', 'magetop/infinitescroll'], function ($) {
"use strict";
$(document).ready(function () {
$('body').addClass('infinitescroll');
window.ias = $.ias({
container: "<?php echo $content;?>",
item: "<?php echo $item;?>",
pagination: "<?php echo $pagination;?>",
next: "<?php echo $next;?>",
delay: "<?php echo $delay;?>",
});
window.ias.extension(new IASSpinnerExtension({
src: "<?php echo $loadingImage; ?>",
html: '<div class="iass-spinner"><img src="{src}"/><span><?php echo $loadingText; ?></span></div>'
}));
window.ias.extension(new IASNoneLeftExtension({
text: "<?php echo $doneText;?>",
html: '<div class="ias-noneleft">{text}</div>'
}));
window.ias.extension(new IASTriggerExtension({
text:"<?php echo $loadMoreText ?>",
html:'<div class="ias-trigger ias-trigger-next"><button class="load-more"><?php echo $loadMoreText ?></button></div>',
textPrev:"<?php echo $loadMoreText ?>",
htmlPrev:'<div class="ias-trigger ias-trigger-prev"><button class="load-more"><?php echo $loadMoreText ?></button></div>',
offset:"<?php echo $loadMore ?>",
}));
window.ias.on('rendered', function(items){
$('body').trigger('contentUpdated');
$( "form[data-role='tocart-form']" ).catalogAddToCart();
});
});
});
</script>
\ No newline at end of file
app/code/Magetop/InfiniteScroll/view/frontend/web/css/source/_module.less 0 → 100644
& when (@media-common = true) {
.iass-spinner{
text-align: center;
font-size: 16px;
color: #333;
display: block;
}
.ias-noneleft{
text-align: center;
color: #333;
letter-spacing: 0px;
font-size: 14px;
font-weight: 400;
}
.iass-spinner img,
.ias-noneleft img{
display:inline-block;
margin-left:auto;
margin-right:auto;
}
.iass-spinner,
.ias-noneleft{
display: inline-block;
width: 100%;
}
.ias-trigger-next{
text-align: center;
cursor: pointer;
display: inline-block;
width: 100%;
}
.load-more{
font-size:15px;
border: none;
}
.load-more::hover{
background:#0491ff;
}
.ias-trigger-prev{
text-align: center;
cursor: pointer;
}
.iass-spinner img {
height: 40px;
width: 40px;
margin-bottom: 7px;
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment