			
<!-- WordPress Shortcode Version -->
<?php
function leffahylly_app() {
ob_start(); ?>
<style>
.leffahylly-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; }
.leffahylly-card { background:#1c1c1c; color:#fff; border-radius:15px; padding:15px; text-align:center; }
.leffahylly-card img { width:100%; border-radius:10px; }
.leffahylly-card a { color:#00bfff; display:block; }
</style>
<div>
<input type="text" id="lh-search" placeholder="Hae elokuvaa..." />
<div class="leffahylly-grid" id="lh-movies"></div>
</div>
<script>
const TMDB_API_KEY = "PASTE_YOUR_TMDB_API_KEY_HERE";
const CACHE_KEY = "wp_movie_cache";
let cache = JSON.parse(localStorage.getItem(CACHE_KEY)||"{}");
const movies = ["Inception","Interstellar","The Dark Knight","Oppenheimer","Dune","Titanic","Gladiator","Avatar the Way of Water","Top Gun Maverick","Matrix"];
function saveCache(){ localStorage.setItem(CACHE_KEY, JSON.stringify(cache)); }
async function fetchMovie(title){
 if(cache[title]) return cache[title];
 try{
  const res = await fetch(`https://api.themoviedb.org/3/search/movie?api_key=${TMDB_API_KEY}&query=${encodeURIComponent(title)}`);
  const data = await res.json();
  if(!data.results?.length) return null;
  const m = data.results[0];
  const det = await fetch(`https://api.themoviedb.org/3/movie/${m.id}?api_key=${TMDB_API_KEY}`).then(r=>r.json());
  const result = {
    poster: m.poster_path ? `https://image.tmdb.org/t/p/w500${m.poster_path}`:null,
    imdb: det.imdb_id ? `https://www.imdb.com/title/${det.imdb_id}`:null
  };
  cache[title]=result; saveCache();
  return result;
 }catch{return null;}
}
const container = document.getElementById("lh-movies");
async function render(list){
 container.innerHTML="";
 for(const title of list){
  const data = await fetchMovie(title);
  const div = document.createElement("div");
  div.className="leffahylly-card";
  div.innerHTML=`
    <img src="${data?.poster || ''}">
    <h3>${title}</h3>
    <a href="${data?.imdb || '#'}" target="_blank">IMDb</a>
    <a href="https://www.leffafriikki.com/?s=${encodeURIComponent(title)}" target="_blank">Arvostelu</a>
  `;
  container.appendChild(div);
 }
}
render(movies);
</script>
<?php
return ob_get_clean();
}
add_shortcode('leffahylly', 'leffahylly_app');
?>

		
Jaa tämä:
