Estoy usando Laravel 5.8 y quiero crear un sistema emergente para que los administradores puedan agregar imágenes personalizadas y texto personalizado, y luego en la hoja, debe aparecer una ventana emergente basada en esa información.
Aquí está la estructura de la tabla de popups :
1 id Primary bigint(20) 2 datep varchar(191) 3 title varchar(191) 4 linkp varchar(191) 5 text varchar(191) 6 image_path varchar(191) 7 created_at timestamp 8 updated_at timestampY esta es la parte Javascript de la ventana emergente:
<script> $(document).ready(function(){ let popup_shown = false; let cookies = document.cookie.split('; '); for( let i=0; i<cookies.length; i++ ){ cookie = cookies[i].split('='); if( cookie[0] == 'oly12_reg_ext2_popup_shown' ) popup_shown = true; } if( !popup_shown ){ Swal.fire({ html: '<a href="#"><img style="width: 100%;" src="{{ URL::to('/') }}/popup.jpg"></a>', showConfirmButton: false }); document.cookie = "oly12_reg_ext2_popup_shown=1; path=/"; } }); </script>Pero ahora el problema es que no sé cómo mezclar Laravel y Javascript para mostrar los mensajes emergentes.
Por ejemplo, debería verse como algo como esto como ejemplo:
@if(count($popups)>0) $(document).ready(function(){ let popup_shown = false; let cookies = document.cookie.split('; '); for( let i=0; i<cookies.length; i++ ){ cookie = cookies[i].split('='); if( cookie[0] == 'oly12_reg_ext2_popup_shown' ) popup_shown = true; } if( !popup_shown ){ @foreach($popups as $popup) Swal.fire({ html: '<a href="{{ $popup->linkp }}"><img style="width: 100%;" src="{{ URL::to($popup->image_path) }}"></a>', @endforeach @endifPero esto obviamente está mal.
Entonces, la pregunta es, ¿cómo puedo mostrar los resultados recuperados de Laravel de la base de datos en un código Javascript?
Dentro de su controlador, puede pasar los datos emergentes a una variable y pasarlos a la vista así,
Dentro del controlador;
$output = ""; $popups = PopUp::all(); if($popups->count() > 0) { foreach($popups as $popup) { $output .=' <a href=" '.$popup->linkp.' "><img src=" '. URL::to($popup->image_path).' " style="width: 100%;"></a>'; } json_encode($output)Luego, dentro de su vista de hoja javascript,
@section('scripts') <script> $(document).ready(function(){ let popup_shown = false; let cookies = document.cookie.split('; '); for( let i=0; i<cookies.length; i++ ){ cookie = cookies[i].split('='); if( cookie[0] == 'oly12_reg_ext2_popup_shown' ) popup_shown = true; } if( !popup_shown ){ var popup_data = '{{!! $output !!}}' Swal.fire({ html:popup_data }); } </script> @endsection