Widget Flash Sale untuk Blogger Support Untuk Tamplate Toko Online Blogspot Tata Letak Responsive

Salam Ngerapik Blog, bagaimana kabar hari ini blog teman teman blogger semuanya, apakah masih full index google apa sudah merosot anjlok 😅? Kalau saya ya pasti anjlok..hehehe😂

Saat ini saya lagi mencoba mempercantik dan memperganteng Blog Toko Bedoeit Online Pangkalpinang saja teman teman!, terpikir juga membuat code untuk Flash Sale yang tampil produknya langsung dari pilihan Label Produk. Setidaknya tampilannya untuk Laptop, Desktop sudah lumayan. dan di Handphone juga tidak semeraut meskipun cuma nampak satu produk..ckckck. Lumayanlah untuk di share ke teman teman Blog Ngerapik ini.

Penempatannya mudah kok tinggal copy dan tempel code HTML dibawah ini di kotak TATA LETAK blog sobat blogger. Langsung saja Cekidot Wae.,

gambar merupakan hasil tangkapan layar dari toko bedoeit online

Saya bagi menjadi 3 kotak code ya biar gak semeraut saat di tempel di kotak tata letaknya. Untuk penerapannya code kotak 1 diatas, code kotak 2 dibawah kotak 1 dan terakhir code kotak 3 dibawah kotak 2.

Kode bagian Kotak 1:

</> Kotak 1

Kode bagian Kotak 2:

</> Kotak 2 CSS

/* CSS KARTU PRODUK */
.fs-card {
  background: #fff;
  border-radius: 8px;
  width: 160px;
  flex: 0 0 160px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.fs-card-tag {
  position: absolute;
  top: 5px;
  left: 5px;
  background: #008bca;
  color: #fff;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
}
.fs-card-img {
  width: 100%;
  height: 110px;
  object-fit: contain;
  margin-bottom: 8px;
}
.fs-card-title {
  font-size: 12px;
  color: #333;
  line-height: 1.4;
  height: 34px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 5px;
}
.fs-card-price {
  font-size: 14px;
  font-weight: bold;
  color: #f53d2d;
  margin-bottom: 8px;
}
.fs-card-btn {
  background: transparent;
  border: 1px solid #f53d2d;
  color: #f53d2d;
  text-align: center;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 11px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.2s;
}
.fs-card-btn:hover {
  background: #f53d2d;
  color: #fff;
}
</style>

Kode bagian Kotak 3:

</> Kotak 3 Script

// Penampung internal untuk menggabungkan hasil produk dari kedua fungsi callback
let semuaProdukGabungan = [];
let jumlahCallbackDiterima = 0;

function loadFlashSaleProducts() {
  semuaProdukGabungan = [];
  jumlahCallbackDiterima = 0;

// Panggilan Feed ke-1: Sentra Komputer
  const script1 = document.createElement('script');
  script1.src = `${BLOG_URL}/feeds/posts/default/-/${encodeURIComponent("Sentra Komputer")}?alt=json-in-script&max-results=${MAX_PER_LABEL}&callback=ambilDataSentra`;
  document.body.appendChild(script1);

// Panggilan Feed ke-2: Elsan Komputer
  const script2 = document.createElement('script');
  script2.src = `${BLOG_URL}/feeds/posts/default/-/${encodeURIComponent("Elsan Komputer")}?alt=json-in-script&max-results=${MAX_PER_LABEL}&callback=ambilDataElsan`;
  document.body.appendChild(script2);
}

// Fungsi penerima data untuk label Sentra Komputer
function ambilDataSentra(json) {
  prosesDataFeed(json);
}

// Fungsi penerima data untuk label Elsan Komputer
function ambilDataElsan(json) {
  prosesDataFeed(json);
}

// Mengolah data mentah Blogger menjadi susunan objek produk
function prosesDataFeed(json) {
  jumlahCallbackDiterima++;

if (json.feed && json.feed.entry) {
    json.feed.entry.forEach(entry => {
      const title = entry.title.$t;
      
      let postUrl = "#";
      if (entry.link) {
        for (let i = 0; i < entry.link.length; i++) {
          if (entry.link[i].rel === 'alternate') { postUrl = entry.link[i].href; break; }
        }
      }

let imgUrl = "https://placeholder.com";
      if (entry.media$thumbnail) {
        imgUrl = entry.media$thumbnail.url.replace('/s72-c/', '/s300/');
      } else if (entry.content && entry.content.$t.includes('<img')) {
        const div = document.createElement('div');
        div.innerHTML = entry.content.$t;
        const img = div.querySelector('img');
        if (img) imgUrl = img.src;
      }

let price = "Rp Hubungi Kami";
      if (entry.content || entry.summary) {
        const contentText = entry.content ? entry.content.$t : entry.summary.$t;
        const priceMatch = contentText.match(/Rp\s?[0-9.]+/i);
        if (priceMatch) { price = priceMatch[0]; }
      }

// Masukkan ke daftar gabungan
      semuaProdukGabungan.push({ title, postUrl, imgUrl, price });
    });
  }

// Jika kedua proses panggilan label sudah selesai, langsung cetak hasilnya ke HTML
  if (jumlahCallbackDiterima === 2) {
    tampilkanSemuaProduk();
  }
}

// Mencetak produk yang sudah digabung ke dalam layout widget
function tampilkanSemuaProduk() {
  const container = document.getElementById('flash-sale-products-list');
  if (!container) return;
  container.innerHTML = '';

if (semuaProdukGabungan.length === 0) {
    container.innerHTML = '<div class="fs-loading">Tidak ada produk ditemukan dari label Sentra Komputer atau Elsan Komputer.</div>';
    return;
  }

// Tampilkan seluruh produk satu per satu
  semuaProdukGabungan.forEach(prod => {
    const cardHtml = `
      <div class="fs-card">
        <span class="fs-card-tag">Pilihan Produk</span>
        <img class="fs-card-img" src="${prod.imgUrl}" alt="${prod.title}">
        <div>
          <div class="fs-card-title">${prod.title}</div>
          <div class="fs-card-price">${prod.price}</div>
        </div>
        <a href="${prod.postUrl}" class="fs-card-btn">Beli sekarang</a>
      </div>
    `;
    container.innerHTML += cardHtml;
  });
}

function startCountdown(durationInHours) {
  let targetTime = localStorage.getItem('fs_target_time_classic_v2');
  if (!targetTime || new Date().getTime() > targetTime) {
    targetTime = new Date().getTime() + (durationInHours * 60 * 60 * 1000);
    localStorage.setItem('fs_target_time_classic_v2', targetTime);
  }

setInterval(() => {
    const now = new Date().getTime();
    const distance = targetTime - now;
    if (distance < 0) { localStorage.removeItem('fs_target_time_classic_v2'); return; }

const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById('fs-hours').innerText = hours.toString().padStart(2, '0');
    document.getElementById('fs-mins').innerText = minutes.toString().padStart(2, '0');
    document.getElementById('fs-secs').innerText = seconds.toString().padStart(2, '0');
  }, 1000);
}

window.onload = () => {
  loadFlashSaleProducts();
  startCountdown(15); 
};
</script>

NB:

Ganti const MAX_PER_LABEL = 4; // Jumlah produk maksimal yang diambil dari tiap label (Total menjadi 8 produk) sesuai keinginan sobat blogger
// Ganti Panggilan Feed Label ke-1: Sentra Komputer
const script1 = document.createElement('script');
script1.src = `${BLOG_URL}/feeds/posts/default/-/${encodeURIComponent("Sentra Komputer")}?alt=json-in-script&max-results=${MAX_PER_LABEL}&callback=ambilDataSentra`;
document.body.appendChild(script1);
// Panggilan Feed Label ke-2: Elsan Komputer
const script2 = document.createElement('script');
script2.src = `${BLOG_URL}/feeds/posts/default/-/${encodeURIComponent("Elsan Komputer")}?alt=json-in-script&max-results=${MAX_PER_LABEL}&callback=ambilDataElsan`;
document.body.appendChild(script2);

Demikianlah artikel singkat saya kali ini tentang "Widget Flash Sale untuk Blogger Support Untuk Tamplate Toko Online Blogspot Tata Letak Responsive" semoga dapat bermanfaat serta dapat diaplikasikan pada blog toko online sobat blogger juga semuanya. Selamat mencoba untuk mempercantik dan memperganteng blog teman teman semua. Salam Ngerapik Blog.

Widget Flash Sale untuk Blogger Support Untuk Tamplate Toko Online Blogspot Tata Letak Responsive

Posting Komentar

Formulir Kontak