From 7a9b9bb2a6fe9e761b765e4de2a42ab17d6da4b6 Mon Sep 17 00:00:00 2001
From: devansh bawari <devansh.bawari419@webkul.com>
Date: Tue, 3 Aug 2021 18:11:35 +0530
Subject: [PATCH] Dynamic Lazy Loading For Advertisement Images

---
 .../advertisement-four.blade.php              | 45 ++++++++++++++-----
 .../advertisement-three.blade.php             | 33 +++++++++++---
 .../advertisement-two.blade.php               | 25 ++++++++---
 3 files changed, 80 insertions(+), 23 deletions(-)

diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-four.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-four.blade.php
index 1e08d457f..6722f1850 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-four.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-four.blade.php
@@ -1,6 +1,7 @@
 @php
     $isRendered = false;
     $advertisementFour = null;
+    $isLazyLoad = ! isset($lazyload) ? true : ( $lazyload ? true : false );
 @endphp
 
 @if ($velocityMetaData && $velocityMetaData->advertisement)
@@ -21,27 +22,39 @@
             <div class="row">
                 @if ( isset($advertisementFour[0]))
                     <a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-4 col-12 no-padding" aria-label="Advertisement">
-                        <img class="col-12 lazyload" data-src="{{ asset('/storage/' . $advertisementFour[0]) }}" alt="" />
+                        <img
+                            class="col-12 {{ $isLazyLoad ? 'lazyload' : '' }}"
+                            @if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementFour[0]) }}" @endif
+                            data-src="{{ asset('/storage/' . $advertisementFour[0]) }}" alt="" />
                     </a>
                 @endif
 
                 <div class="col-lg-4 col-12 offers-ct-panel">
                     @if ( isset($advertisementFour[1]))
                         <a @if (isset($two)) href="{{ $two }}" @endif class="row col-12 remove-padding-margin" aria-label="Advertisement">
-                            <img class="col-12 offers-ct-top lazyload" data-src="{{ asset('/storage/' . $advertisementFour[1]) }}" alt="" />
+                            <img
+                                class="col-12 offers-ct-top {{ $isLazyLoad ? 'lazyload' : '' }}"
+                                @if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementFour[1]) }}" @endif
+                                data-src="{{ asset('/storage/' . $advertisementFour[1]) }}" alt="" />
                         </a>
                     @endif
 
                     @if ( isset($advertisementFour[2]))
                         <a @if (isset($three)) href="{{ $three }}" @endif class="row col-12 remove-padding-margin" aria-label="Advertisement">
-                            <img class="col-12 offers-ct-bottom lazyload" data-src="{{ asset('/storage/' . $advertisementFour[2]) }}" alt="" />
+                            <img
+                                class="col-12 offers-ct-bottom {{ $isLazyLoad ? 'lazyload' : '' }}"
+                                @if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementFour[2]) }}" @endif
+                                data-src="{{ asset('/storage/' . $advertisementFour[2]) }}" alt="" />
                         </a>
                     @endif
                 </div>
 
                 @if ( isset($advertisementFour[3]))
                     <a @if (isset($four)) href="{{ $four }}" @endif class="col-lg-4 col-12 no-padding" aria-label="Advertisement">
-                        <img class="col-12 lazyload" data-src="{{ asset('/storage/' . $advertisementFour[3]) }}" alt="" />
+                        <img
+                            class="col-12 {{ $isLazyLoad ? 'lazyload' : '' }}"
+                            @if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementFour[3]) }}" @endif
+                            data-src="{{ asset('/storage/' . $advertisementFour[3]) }}" alt="" />
                     </a>
                 @endif
             </div>
@@ -53,23 +66,35 @@
     <div class="container-fluid advertisement-four-container">
         <div class="row">
             <div class="col-lg-4 col-12 advertisement-container-block no-padding">
-                <a @if (isset($one)) href="{{ $one }}" @endif aria-label="Advertisement">
-                    <img class="col-12 lazyload" data-src="{{ asset('/themes/velocity/assets/images/big-sale-banner.webp') }}" alt="" />
+                <a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-4 col-12 no-padding" aria-label="Advertisement">
+                    <img
+                        class="col-12 {{ $isLazyLoad ? 'lazyload' : '' }}"
+                        @if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/big-sale-banner.webp') }}" @endif
+                        data-src="{{ asset('/themes/velocity/assets/images/big-sale-banner.webp') }}" alt="" />
                 </a>
             </div>
 
             <div class="col-lg-4 col-12 advertisement-container-block offers-ct-panel">
                 <a @if (isset($two)) href="{{ $two }}" @endif class="row col-12 remove-padding-margin" aria-label="Advertisement">
-                    <img class="col-12 offers-ct-top lazyload" data-src="{{ asset('/themes/velocity/assets/images/seasons.webp') }}" alt="" />
+                    <img
+                        class="col-12 offers-ct-top {{ $isLazyLoad ? 'lazyload' : '' }}"
+                        @if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/seasons.webp') }}" @endif
+                        data-src="{{ asset('/themes/velocity/assets/images/seasons.webp') }}" alt="" />
                 </a>
                 <a @if (isset($three)) href="{{ $three }}" @endif class="row col-12 remove-padding-margin" aria-label="Advertisement">
-                    <img class="col-12 offers-ct-bottom lazyload" data-src="{{ asset('/themes/velocity/assets/images/deals.webp') }}" alt="" />
+                    <img
+                        class="col-12 offers-ct-bottom {{ $isLazyLoad ? 'lazyload' : '' }}"
+                        @if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/deals.webp') }}" @endif
+                        data-src="{{ asset('/themes/velocity/assets/images/deals.webp') }}" alt="" />
                 </a>
             </div>
 
             <div class="col-lg-4 col-12 advertisement-container-block no-padding">
-                <a @if (isset($four)) href="{{ $four }}" @endif aria-label="Advertisement">
-                    <img class="col-12 lazyload" data-src="{{ asset('/themes/velocity/assets/images/kids.webp') }}" alt="" />
+                <a @if (isset($four)) href="{{ $four }}" @endif class="col-lg-4 col-12 no-padding" aria-label="Advertisement">
+                    <img
+                        class="col-12 {{ $isLazyLoad ? 'lazyload' : '' }}"
+                        @if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/kids.webp') }}" @endif
+                        data-src="{{ asset('/themes/velocity/assets/images/kids.webp') }}" alt="" />
                 </a>
             </div>
         </div>
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-three.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-three.blade.php
index 964ad2989..8cb6f5964 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-three.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-three.blade.php
@@ -1,12 +1,13 @@
 @php
     $isRendered = false;
     $advertisementThree = null;
+    $isLazyLoad = ! isset($lazyload) ? true : ( $lazyload ? true : false );
 @endphp
 
 @if ($velocityMetaData && $velocityMetaData->advertisement)
     @php
         $advertisement = json_decode($velocityMetaData->advertisement, true);
-        
+
         if (isset($advertisement[3]) && is_array($advertisement[3])) {
             $advertisementThree = array_values(array_filter($advertisement[3]));
         }
@@ -21,19 +22,28 @@
             <div class="row">
                 @if ( isset($advertisementThree[0]))
                     <a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-6 col-md-12 no-padding">
-                        <img data-src="{{ asset('/storage/' . $advertisementThree[0]) }}" class="full-width lazyload" alt="" />
+                        <img
+                            class="full-width {{ $isLazyLoad ? 'lazyload' : '' }}"
+                            @if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementThree[0]) }}" @endif
+                            data-src="{{ asset('/storage/' . $advertisementThree[0]) }}" alt="" />
                     </a>
                 @endif
 
                 <div class="col-lg-6 col-md-12 second-panel">
                     @if ( isset($advertisementThree[1]))
                         <a @if (isset($two)) href="{{ $two }}" @endif class="row top-container">
-                            <img data-src="{{ asset('/storage/' . $advertisementThree[1]) }}" class="col-12 pr0 lazyload" alt="" />
+                            <img
+                                class="col-12 pr0 {{ $isLazyLoad ? 'lazyload' : '' }}"
+                                @if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementThree[1]) }}" @endif
+                                data-src="{{ asset('/storage/' . $advertisementThree[1]) }}" alt="" />
                         </a>
                     @endif
                     @if ( isset($advertisementThree[2]))
                         <a @if (isset($three)) href="{{ $three }}" @endif class="row bottom-container">
-                            <img data-src="{{ asset('/storage/' . $advertisementThree[2]) }}" class="col-12 pr0 lazyload" alt="" />
+                            <img
+                                class="col-12 pr0 {{ $isLazyLoad ? 'lazyload' : '' }}"
+                                @if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementThree[2]) }}" @endif
+                                data-src="{{ asset('/storage/' . $advertisementThree[2]) }}" alt="" />
                         </a>
                     @endif
                 </div>
@@ -46,15 +56,24 @@
     <div class="container-fluid advertisement-three-container">
         <div class="row">
             <a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-6 col-md-12 no-padding">
-                <img data-src="{{ asset('/themes/velocity/assets/images/headphones.webp') }}" class="full-width lazyload" alt="" />
+                <img
+                    class="full-width {{ $isLazyLoad ? 'lazyload' : '' }}"
+                    @if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/headphones.webp') }}" @endif
+                    data-src="{{ asset('/themes/velocity/assets/images/headphones.webp') }}" alt="" />
             </a>
 
             <div class="col-lg-6 col-md-12 second-panel">
                 <a @if (isset($two)) href="{{ $two }}" @endif class="row top-container">
-                    <img data-src="{{ asset('/themes/velocity/assets/images/watch.webp') }}" class="col-12 pr0 lazyload" alt="" />
+                    <img
+                        class="col-12 pr0 {{ $isLazyLoad ? 'lazyload' : '' }}"
+                        @if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/watch.webp') }}" @endif
+                        data-src="{{ asset('/themes/velocity/assets/images/watch.webp') }}" alt="" />
                 </a>
                 <a @if (isset($three)) href="{{ $three }}" @endif class="row bottom-container">
-                    <img data-src="{{ asset('/themes/velocity/assets/images/kids-2.webp') }}" class="col-12 pr0 lazyload" alt="" />
+                    <img
+                        class="col-12 pr0 {{ $isLazyLoad ? 'lazyload' : '' }}"
+                        @if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/kids-2.webp') }}" @endif
+                        data-src="{{ asset('/themes/velocity/assets/images/kids-2.webp') }}" alt="" />
                 </a>
             </div>
         </div>
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-two.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-two.blade.php
index fbb88d695..04f32098e 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-two.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-two.blade.php
@@ -1,12 +1,13 @@
 @php
     $isRendered = false;
     $advertisementTwo = null;
+    $isLazyLoad = ! isset($lazyload) ? true : ( $lazyload ? true : false );
 @endphp
 
 @if ($velocityMetaData && $velocityMetaData->advertisement)
     @php
         $advertisement = json_decode($velocityMetaData->advertisement, true);
-        
+
         if (isset($advertisement[2]) && is_array($advertisement[2])) {
             $advertisementTwo = array_values(array_filter($advertisement[2]));
         }
@@ -21,13 +22,19 @@
             <div class="row">
                 @if ( isset($advertisementTwo[0]))
                     <a class="col-lg-9 col-md-12 no-padding">
-                        <img data-src="{{ asset('/storage/' . $advertisementTwo[0]) }}" class="lazyload" alt="" />
+                        <img
+                            class="{{ $isLazyLoad ? 'lazyload' : '' }}"
+                            @if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementTwo[0]) }}" @endif
+                            data-src="{{ asset('/storage/' . $advertisementTwo[0]) }}" alt="" />
                     </a>
                 @endif
-                
+
                 @if ( isset($advertisementTwo[1]))
                     <a class="col-lg-3 col-md-12 pr0">
-                        <img data-src="{{ asset('/storage/' . $advertisementTwo[1]) }}" class="lazyload" alt="" />
+                        <img
+                            class="{{ $isLazyLoad ? 'lazyload' : '' }}"
+                            @if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementTwo[1]) }}" @endif
+                            data-src="{{ asset('/storage/' . $advertisementTwo[1]) }}" alt="" />
                     </a>
                 @endif
             </div>
@@ -39,11 +46,17 @@
     <div class="container-fluid advertisement-two-container">
         <div class="row">
             <a class="col-lg-9 col-md-12 no-padding">
-                <img data-src="{{ asset('/themes/velocity/assets/images/toster.webp') }}" class="lazyload" alt="" />
+                <img
+                    class="{{ $isLazyLoad ? 'lazyload' : '' }}"
+                    @if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/toster.webp') }}" @endif
+                    data-src="{{ asset('/themes/velocity/assets/images/toster.webp') }}" alt="" />
             </a>
 
             <a class="col-lg-3 col-md-12 pr0">
-                <img data-src="{{ asset('/themes/velocity/assets/images/trimmer.webp') }}" class="lazyload" alt="" />
+                <img
+                    class="{{ $isLazyLoad ? 'lazyload' : '' }}"
+                    @if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/trimmer.webp') }}" @endif
+                    data-src="{{ asset('/themes/velocity/assets/images/trimmer.webp') }}" alt="" />
             </a>
         </div>
     </div>