@if(!empty($pageDataParts))
        @foreach ($pageDataParts as $pd)
            @if($pd['name'] == 'newline')
                <div class="col-md-12 p-3">&nbsp;</div>
            @else
            <div class="col-md-3 col-sm-6 p-2 col-xs-6 text-center">
                <a href="{{ $pd['url'] }}" class="text-decoration-none text-black">
                    <div class="card-wraptocenter" style="">
                        <div class="wraptocenter-margin">
                            <div class="wraptocenter"><img alt="..." style="max-width:100%; max-height:100%;"  data-src="{{ $pd['image'] }}" src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-2.jpg" onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-2.jpg&quot;" class="lazy"></div>
                        </div>
                        <p class="text-center mt-4 prod-title-3line">{{ $pd['name'] }} </p>
                        @if(isset($pd['price']))
                            <p class="text-center m-0 text-danger "><b>${{ number_format($pd['price'],2) }}</b></p>
                        @endif
                    </div>
                </a>
            </div>
            @endif
        @endforeach
    @endif

    <script>


            var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

            if ("IntersectionObserver" in window) {
              var lazyImageObserver = new IntersectionObserver(function(entries) {
                entries.forEach(function(entry) {
                  if (entry.isIntersecting) {
                    var lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                  }
                });
              });

              lazyImages.forEach(function(lazyImage) {
                lazyImageObserver.observe(lazyImage);
              });
            }

    </script>