Skip to content

Commit c86f228

Browse files
php-cuongphp-cuong
committed
initial commit
1 parent 95eecf8 commit c86f228

File tree

11 files changed

+566
-0
lines changed

11 files changed

+566
-0
lines changed

‎Override/Catalog/Block/Product/ImageBuilder.php‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<?php
2+
/**
3+
* GiaPhuGroup Co., Ltd.
4+
*
5+
* NOTICE OF LICENSE
6+
*
7+
* This source file is subject to the GiaPhuGroup.com license that is
8+
* available through the world-wide-web at this URL:
9+
* https://www.giaphugroup.com/LICENSE.txt
10+
*
11+
* DISCLAIMER
12+
*
13+
* Do not edit or add to this file if you wish to upgrade this extension to newer
14+
* version in the future.
15+
*
16+
* @category PHPCuong
17+
* @package PHPCuong_LazyLoadingImage
18+
* @copyright Copyright (c) 2019-2020 GiaPhuGroup Co., Ltd. All rights reserved. (http://www.giaphugroup.com/)
19+
* @license https://www.giaphugroup.com/LICENSE.txt
20+
*/
21+
22+
namespace PHPCuong\LazyLoadingImage\Override\Catalog\Block\Product;
23+
24+
class ImageBuilder extends \Magento\Catalog\Block\Product\ImageBuilder
25+
{
26+
/**
27+
* Create image block
28+
*
29+
* @return \Magento\Catalog\Block\Product\Image
30+
*/
31+
public function create()
32+
{
33+
/** @var \Magento\Catalog\Model\Product\Configuration\Item\Option\OptionInterface $simpleOption */
34+
$simpleOption = $this->product->getOptionById('simple_product');
35+
36+
if ($simpleOption !== null) {
37+
$optionProduct = $simpleOption->getProduct();
38+
$this->setProduct($optionProduct);
39+
}
40+
41+
/** @var \Magento\Catalog\Helper\Image $helper */
42+
$helper = $this->helperFactory->create()
43+
->init($this->product, $this->imageId);
44+
45+
$template = $helper->getFrame()
46+
? 'PHPCuong_LazyLoadingImage::product/image.phtml'
47+
: 'PHPCuong_LazyLoadingImage::product/image_with_borders.phtml';
48+
49+
try {
50+
$imagesize = $helper->getResizedImageInfo();
51+
} catch (NotLoadInfoImageException $exception) {
52+
$imagesize = [$helper->getWidth(), $helper->getHeight()];
53+
}
54+
55+
$data = [
56+
'data' => [
57+
'template' => $template,
58+
'image_url' => $helper->getUrl(),
59+
'width' => $helper->getWidth(),
60+
'height' => $helper->getHeight(),
61+
'label' => $helper->getLabel(),
62+
'ratio' => $this->getRatio($helper),
63+
'custom_attributes' => $this->getCustomAttributes(),
64+
'resized_image_width' => $imagesize[0],
65+
'resized_image_height' => $imagesize[1],
66+
'product_id' => $this->product->getId()
67+
],
68+
];
69+
70+
return $this->imageFactory->create($data);
71+
}
72+
}

‎etc/frontend/di.xml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* GiaPhuGroup Co., Ltd.
5+
*
6+
* NOTICE OF LICENSE
7+
*
8+
* This source file is subject to the GiaPhuGroup.com license that is
9+
* available through the world-wide-web at this URL:
10+
* https://www.giaphugroup.com/LICENSE.txt
11+
*
12+
* DISCLAIMER
13+
*
14+
* Do not edit or add to this file if you wish to upgrade this extension to newer
15+
* version in the future.
16+
*
17+
* @category PHPCuong
18+
* @package PHPCuong_LazyLoadingImage
19+
* @copyright Copyright (c) 2019-2020 GiaPhuGroup Co., Ltd. All rights reserved. (http://www.giaphugroup.com/)
20+
* @license https://www.giaphugroup.com/LICENSE.txt
21+
*/
22+
-->
23+
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
24+
<preference for="Magento\Catalog\Block\Product\ImageBuilder" type="PHPCuong\LazyLoadingImage\Override\Catalog\Block\Product\ImageBuilder" />
25+
</config>

‎etc/module.xml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* GiaPhuGroup Co., Ltd.
5+
*
6+
* NOTICE OF LICENSE
7+
*
8+
* This source file is subject to the GiaPhuGroup.com license that is
9+
* available through the world-wide-web at this URL:
10+
* https://www.giaphugroup.com/LICENSE.txt
11+
*
12+
* DISCLAIMER
13+
*
14+
* Do not edit or add to this file if you wish to upgrade this extension to newer
15+
* version in the future.
16+
*
17+
* @category PHPCuong
18+
* @package PHPCuong_LazyLoadingImage
19+
* @copyright Copyright (c) 2019-2020 GiaPhuGroup Co., Ltd. All rights reserved. (http://www.giaphugroup.com/)
20+
* @license https://www.giaphugroup.com/LICENSE.txt
21+
*/
22+
-->
23+
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
24+
<module name="PHPCuong_LazyLoadingImage" setup_version="2.1.0" />
25+
</config>

‎registration.php‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<?php
2+
/**
3+
* GiaPhuGroup Co., Ltd.
4+
*
5+
* NOTICE OF LICENSE
6+
*
7+
* This source file is subject to the GiaPhuGroup.com license that is
8+
* available through the world-wide-web at this URL:
9+
* https://www.giaphugroup.com/LICENSE.txt
10+
*
11+
* DISCLAIMER
12+
*
13+
* Do not edit or add to this file if you wish to upgrade this extension to newer
14+
* version in the future.
15+
*
16+
* @category PHPCuong
17+
* @package PHPCuong_CarouselLazyload
18+
* @copyright Copyright (c) 2019-2020 GiaPhuGroup Co., Ltd. All rights reserved. (http://www.giaphugroup.com/)
19+
* @license https://www.giaphugroup.com/LICENSE.txt
20+
*/
21+
22+
\Magento\Framework\Component\ComponentRegistrar::register(
23+
\Magento\Framework\Component\ComponentRegistrar::MODULE,
24+
'PHPCuong_LazyLoadingImage',
25+
__DIR__
26+
);

‎view/frontend/layout/default.xml‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* GiaPhuGroup Co., Ltd.
5+
*
6+
* NOTICE OF LICENSE
7+
*
8+
* This source file is subject to the GiaPhuGroup.com license that is
9+
* available through the world-wide-web at this URL:
10+
* https://www.giaphugroup.com/LICENSE.txt
11+
*
12+
* DISCLAIMER
13+
*
14+
* Do not edit or add to this file if you wish to upgrade this extension to newer
15+
* version in the future.
16+
*
17+
* @category PHPCuong
18+
* @package PHPCuong_LazyLoadingImage
19+
* @copyright Copyright (c) 2019-2020 GiaPhuGroup Co., Ltd. All rights reserved. (http://www.giaphugroup.com/)
20+
* @license https://www.giaphugroup.com/LICENSE.txt
21+
*/
22+
-->
23+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
24+
<body>
25+
<referenceContainer name="before.body.end">
26+
<block class="Magento\Framework\View\Element\Template" name="phpcuong_lazyloadingimage" template="PHPCuong_LazyLoadingImage::lazyloadingimage.phtml" />
27+
</referenceContainer>
28+
</body>
29+
</page>

‎view/frontend/templates/lazyloadingimage.phtml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<?php
2+
/**
3+
* GiaPhuGroup Co., Ltd.
4+
*
5+
* NOTICE OF LICENSE
6+
*
7+
* This source file is subject to the GiaPhuGroup.com license that is
8+
* available through the world-wide-web at this URL:
9+
* https://www.giaphugroup.com/LICENSE.txt
10+
*
11+
* DISCLAIMER
12+
*
13+
* Do not edit or add to this file if you wish to upgrade this extension to newer
14+
* version in the future.
15+
*
16+
* @category PHPCuong
17+
* @package PHPCuong_LazyLoadingImage
18+
* @copyright Copyright (c) 2019-2020 GiaPhuGroup Co., Ltd. All rights reserved. (http://www.giaphugroup.com/)
19+
* @license https://www.giaphugroup.com/LICENSE.txt
20+
*/
21+
?>
22+
<?php /** @var $block \Magento\Framework\View\Element\Template */ ?>
23+
<script type="text/javascript">
24+
require(['jquery', 'PHPCuong_LazyLoadingImage/js/lazy-loading-image'], function($) {
25+
$('img.lazy-loading').lazyLoadingImage({
26+
effect: 'fadeIn',
27+
effectspeed: 1000,
28+
imageloader: '<?= /* @escapeNotVerified */ $block->getViewFileUrl('PHPCuong_LazyLoadingImage::images/Loading.gif') ?>'
29+
});
30+
});
31+
</script>

‎view/frontend/templates/product/image.phtml‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<?php
2+
/**
3+
* GiaPhuGroup Co., Ltd.
4+
*
5+
* NOTICE OF LICENSE
6+
*
7+
* This source file is subject to the GiaPhuGroup.com license that is
8+
* available through the world-wide-web at this URL:
9+
* https://www.giaphugroup.com/LICENSE.txt
10+
*
11+
* DISCLAIMER
12+
*
13+
* Do not edit or add to this file if you wish to upgrade this extension to newer
14+
* version in the future.
15+
*
16+
* @category PHPCuong
17+
* @package PHPCuong_LazyLoadingImage
18+
* @copyright Copyright (c) 2019-2020 GiaPhuGroup Co., Ltd. All rights reserved. (http://www.giaphugroup.com/)
19+
* @license https://www.giaphugroup.com/LICENSE.txt
20+
*/
21+
?>
22+
<?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>
23+
24+
<img class="photo image lazy-loading"
25+
<?= /* @escapeNotVerified */ $block->getCustomAttributes() ?>
26+
data-original="<?php /* @escapeNotVerified */ echo $block->getImageUrl(); ?>"
27+
src="<?= /* @escapeNotVerified */ $block->getViewFileUrl('PHPCuong_LazyLoadingImage::images/Loading.gif') ?>"
28+
width="<?= /* @escapeNotVerified */ $block->getWidth() ?>"
29+
height="<?= /* @escapeNotVerified */ $block->getHeight() ?>"
30+
alt="<?= /* @escapeNotVerified */ $block->stripTags($block->getLabel(), null, true) ?>" />

‎view/frontend/templates/product/image_with_borders.phtml‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<?php
2+
/**
3+
* GiaPhuGroup Co., Ltd.
4+
*
5+
* NOTICE OF LICENSE
6+
*
7+
* This source file is subject to the GiaPhuGroup.com license that is
8+
* available through the world-wide-web at this URL:
9+
* https://www.giaphugroup.com/LICENSE.txt
10+
*
11+
* DISCLAIMER
12+
*
13+
* Do not edit or add to this file if you wish to upgrade this extension to newer
14+
* version in the future.
15+
*
16+
* @category PHPCuong
17+
* @package PHPCuong_LazyLoadingImage
18+
* @copyright Copyright (c) 2019-2020 GiaPhuGroup Co., Ltd. All rights reserved. (http://www.giaphugroup.com/)
19+
* @license https://www.giaphugroup.com/LICENSE.txt
20+
*/
21+
?>
22+
<?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>
23+
24+
<span class="product-image-container"
25+
style="width:<?= /* @escapeNotVerified */ $block->getWidth() ?>px;">
26+
<span class="product-image-wrapper"
27+
style="padding-bottom: <?= /* @escapeNotVerified */ ($block->getRatio() * 100) ?>%;">
28+
<img class="product-image-photo lazy-loading"
29+
<?= /* @escapeNotVerified */ $block->getCustomAttributes() ?>
30+
data-original="<?php /* @escapeNotVerified */ echo $block->getImageUrl(); ?>"
31+
src="<?= /* @escapeNotVerified */ $block->getViewFileUrl('PHPCuong_LazyLoadingImage::images/Loading.gif') ?>"
32+
width="<?= /* @escapeNotVerified */ $block->getResizedImageWidth() ?>"
33+
height="<?= /* @escapeNotVerified */ $block->getResizedImageHeight() ?>"
34+
alt="<?= /* @escapeNotVerified */ $block->stripTags($block->getLabel(), null, true) ?>"/></span>
35+
</span>

‎view/frontend/web/css/_module.less‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
& when (@media-common = true) {
2+
img[src*="Loader.gif"] {
3+
opacity: 0;
4+
visibility: hidden;
5+
height: auto;
6+
}
7+
.lazy {
8+
opacity: 1;
9+
-webkit-transition: opacity 0.8s;
10+
-moz-transition: opacity 0.8s;
11+
-ms-transition: opacity 0.8s;
12+
-o-transition: opacity 0.8s;
13+
transition: opacity 0.8s;
14+
visibility: visible;
15+
}
16+
}
17+
18+
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
19+
html {
20+
&.ie8, &.ie9, &.ie10, &.ie11 {
21+
height: auto;
22+
}
23+
}
24+
}

‎view/frontend/web/images/Loading.gif‎

53.8 KB
Loading

0 commit comments

Comments
 (0)