0

i work on a handicrafts auction website, so there is a special auction countdown (javascript timer) for each product, the timer work well for each product when i display the product details page

but when using foreach; it doesn't display except for the last product; and in the place of first product timer!!

you can check the result and the auction finish of each product enter image description here

enter image description here here is my blade code

@extends('layouts.main_layout')
@section('content')
<div class="RecentAuction">
    <div class="container">
      <div class="RecentAuction-content">
        <h2 class="p-2">Recent Auctions</h2>
        <div class="row">
           @foreach($products as $product)
            <div class="col-3 col-3 mb-4 mt-4">
                <div class="card">
                    <div id="countdown" class="timer text-center">
                        {{-- timer here --}}
                    </div>
                    <a href="{{route('product.details', $product->id) }}">
                        <img src="{{asset('/HandicraftsAuction/image/wool.jpg')}}" class="card-img-top">
                    </a>
                    <div class="card-body">
                        <h5 class="text-center">{{$product->title}}</h5>
                        <div class="d-flex justify-content-between">
                            <span>MaxBid: {{$product->orderNowPrice}}$</span>
                        </div>
                        {{-- complement here --}}
                    </div>
                </div>
            </div>
           @endforeach
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
    var seconds = {!! json_encode($product->remainingTime(), JSON_HEX_TAG) !!};
    function timer() {
        var days        = Math.floor(seconds/24/60/60);
        var hoursLeft   = Math.floor((seconds) - (days*86400));
        var hours       = Math.floor(hoursLeft/3600);
        var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
        var minutes     = Math.floor(minutesLeft/60);
        var remainingSeconds = seconds % 60;
        function pad(n) {
            return (n < 10 ? "0" + n : n);
        }
        document.getElementById('countdown').innerHTML = pad(days) + ":" + pad(hours) + ":" 
            + pad(minutes) + ":" + pad(remainingSeconds);
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Expired";
            location.reload();
        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('timer()', 1000);
</script>
@endsection

i think the problem is in passing laravel to javascript as js can't manipulate dynamic div content counter for each product using #id. however, using class instead doesn't make sense also!.

entesar
  • 929
  • 1
  • 8
  • 12
  • You are accessing `$product` outside the `foreach` loop – SuperDJ Dec 03 '21 at 18:56
  • No the accessing is inside for each – entesar Dec 03 '21 at 19:03
  • is this `var seconds = {!! json_encode($product->remainingTime(), JSON_HEX_TAG) !!};` inside the `foreach` loop? – SuperDJ Dec 03 '21 at 19:06
  • considering to be, as countdown id is inside! however i tried to move it inside foreach and it doesnt work – entesar Dec 03 '21 at 19:28
  • In JS you should only use unique ids https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page – SuperDJ Dec 03 '21 at 19:37
  • thanks all, the solution exists here https://stackoverflow.com/questions/31239280/showing-countdown-timer-on-each-foreach – entesar Dec 03 '21 at 20:19
  • Does this answer your question? [Showing countdown timer on each foreach](https://stackoverflow.com/questions/31239280/showing-countdown-timer-on-each-foreach) – SuperDJ Dec 03 '21 at 20:51
  • yes, it solves my day, you can then customize the 5minuts to your timer – entesar Dec 04 '21 at 03:33

0 Answers0