Halo para member WeddingPress!

Hari ini kami dengan bangga mengumumkan pembaruan besar untuk salah satu toolkit favorit kita, WeddingPress Custom Nama Tamu (WDPCNT). Berdasarkan masukan dan analisis mendalam, kami telah menulis ulang skrip ini dari awal untuk memberikan Anda alat yang tidak hanya lebih kuat, tetapi juga jauh lebih aman dan fleksibel untuk memberikan sentuhan personal pada setiap undangan digital yang Anda buat.

Mengapa Update Diperlukan? Perbandingan Langsung dengan Versi Lama

Untuk memahami sepenuhnya lompatan kualitas pada versi terbaru, mari kita bandingkan secara langsung fitur-fiturnya dengan versi lama yang mendasar.

Perbandingan Script Lama vs. Script Baru

Manfaat Utama: Lebih dari Sekadar Nama 💌

Dengan beralih ke versi terbaru, Anda tidak hanya menambahkan sebuah fitur, tetapi juga meningkatkan kualitas dan pengalaman undangan digital Anda secara keseluruhan. Berikut adalah keuntungan signifikan yang bisa langsung Anda rasakan:

• Personalisasi yang Hangat dan Berkesan

Setiap tamu akan disambut dengan namanya sendiri secara jelas dan instan. Ini menciptakan kesan pertama yang hangat, eksklusif, dan sangat personal. Tamu akan merasa benar-benar dihargai karena undangan tersebut terasa dibuat khusus untuk mereka, bukan sekadar pesan massal.

• Efisiensi Waktu dan Tenaga yang Luar Biasa

Ucapkan selamat tinggal pada pekerjaan repetitif. Anda tidak perlu lagi membuat puluhan halaman web terpisah untuk setiap tamu. Cukup kelola satu halaman utama, dan biarkan skrip yang bekerja. Satu halaman kini dapat melayani ratusan penerima, di mana setiap personalisasi dikendalikan hanya dengan menyesuaikan link URL yang Anda bagikan.

• Integrasi Mudah dengan Tampilan Profesional

Skrip ini dirancang untuk kemudahan. Anda bisa mengintegrasikannya ke situs web mana pun hanya dengan menyalin kode dan menambahkan class CSS sederhana pada teks target. Tidak diperlukan pengetahuan backend, server, atau database yang rumit. Adanya fitur dinamis ini secara otomatis akan memberikan kesan modern dan profesional pada undangan digital Anda.

• Fleksibel, Aman, dan Andal

Kebebasan ada di tangan Anda. Anda bisa mengatur sendiri parameter URL yang ingin digunakan. Yang terpenting, skrip ini menjaga keutuhan markup HTML dan style CSS yang sudah Anda buat. Dibangun dengan praktik keamanan modern, ia juga melindungi situs Anda dari risiko XSS, memastikan data dan pengunjung tetap aman.

Panduan Implementasi dan Kode Final 🛠️

• Salin Kode Final: Salin seluruh blok kode di bawah ini.
• Tempel di Website Anda: Letakkan kode tersebut tepat sebelum tag penutup </body> di file HTML Anda.
• Siapkan Elemen HTML: Pastikan Anda memiliki elemen dengan class dan teks yang cocok dengan pengaturan di config. Contoh: <h1 class="namatamu">Tamu Undangan</h1>.

Contoh HTML:

<h1 class="namatamu">Tamu Undangan</h1>
<h1 class="namatamu">Kepada Yth. <span>Tamu Undangan</span></h1>

• Buat & Bagikan Link Personal:

Buat link unik untuk setiap tamu dengan menambahkan parameter di akhir URL.

Untuk tamu "Budi": https://undangan-anda.com?to=Budi

Untuk tamu "Andi & Keluarga": https://undangan-anda.com?to=Andi%20%26%20Keluarga

Bagikan link yang sudah dipersonalisasi ini kepada masing-masing tamu.

Kode Final WDPCNT (Siap Digunakan)

<script>
    /*!
WeddingPress Custom Nama Tamu (WDPCNT)
============================================

Description: 
WeddingPress Custom Nama Tamu (WDPCNT) adalah script JavaScript yang digunakan untuk mengganti teks "Tamu Undangan" pada elemen dengan class `namatamu` berdasarkan parameter yang ada di URL. 
Script ini mendukung beberapa parameter seperti `to`, `dear`, dan `kepada` untuk menyesuaikan nama penerima undangan.

Author: Andy dari WeddingPress
Website: https://weddingpress.net
Version: 1.1 (2025/03/01)
License: Anda diizinkan menggunakan script ini pada website Anda dan proyek klien. Tidak diperbolehkan menjual, membagikan, menempatkan codenya ditemplate yang dijual atau mendistribusikan ulang tanpa izin.
Copyright: © 2025 WeddingPress. All rights reserved.

Note:
Pastikan untuk teks 'Tamu Undangan' css classesnya sudah terisi: 'namatamu'
 */

(function () {
  'use strict';

  // =================================================================
  // KONFIGURASI ⚙️
  // =================================================================
  const config = {
    selector: '.namatamu',
    urlParams: ['to', 'dear', 'kepada'],
    defaultText: 'Tamu Undangan'
  };
  // =================================================================

  /**
   * Mengambil nama tamu dari URL.
   * Dibuat tetap simpel untuk keamanan & keandalan, karena URLSearchParams
   * sudah menangani semua decoding (+, %20, dll) sesuai standar.
   */
  function getRecipientName(params, keys) {
    for (const key of keys) {
      const value = params.get(key);
      if (value && value.trim()) {
        return value.trim();
      }
    }
    return '';
  }

  /**
   * "Membersihkan" string agar aman digunakan di dalam Regular Expression.
   * Mencegah error jika placeholder berisi karakter spesial Regex.
   */
  function escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
  }

  /**
   * Fungsi rekursif untuk mencari dan mengganti konten teks
   * tanpa merusak elemen HTML di sekitarnya.
   */
  function replaceTextInNode(node, searchValue, replaceValue) {
    if (node.nodeType === 1 || node.nodeType === 11) { // Element or Document Fragment
      node.childNodes.forEach(child => {
        if (child.nodeType === 3) { // Text node
          // Gunakan escapeRegExp untuk memastikan searchValue aman.
          const safeSearchValue = escapeRegExp(searchValue);
          const regex = new RegExp(safeSearchValue, 'gi');
          child.textContent = child.textContent.replace(regex, replaceValue);
        } else {
          replaceTextInNode(child, searchValue, replaceValue);
        }
      });
    }
  }


  window.addEventListener('DOMContentLoaded', () => {
    const params = new URLSearchParams(window.location.search);
    const recipient = getRecipientName(params, config.urlParams);
    const targets = document.querySelectorAll(config.selector);

    if (targets.length === 0) {
      console.warn(`WDPCNT: Tidak ditemukan elemen dengan selector '${config.selector}'.`);
      return;
    }

    targets.forEach(element => {
      if (recipient) {
        replaceTextInNode(element, config.defaultText, recipient);
      } else {
        if (!element.textContent.trim()) {
          element.textContent = config.defaultText;
        }
      }
    });
  });

})();
</script>

Penjelasan Toolkit (Konfigurasi) ⚙️

Inti dari kemudahan penggunaan skrip ini terletak pada blok config di bagian atas kode. Anda bisa dengan mudah mengubah perilaku skrip dengan mengedit beberapa baris ini tanpa menyentuh logika utamanya.

const config = {
  // Target: Di mana nama tamu akan ditampilkan?
  selector: '.namatamu',
  
  // Kata Kunci URL: Kata apa yang dicari di URL?
  urlParams: ['to', 'dear', 'kepada', 'guest'],
  
  // Teks Placeholder: Teks apa yang akan diganti?
  defaultText: 'Tamu Undangan'
};

• selector: Ini adalah "penanda" CSS. Skrip akan mencari elemen HTML yang memiliki class ini sebagai wadah untuk menampilkan nama tamu.
• urlParams: Ini adalah daftar "kata kunci" yang akan dicari skrip di alamat URL. Urutan penulisan menentukan prioritas (misalnya, to akan dicek lebih dulu dari dear).
• defaultText: Ini adalah teks placeholder di dalam HTML Anda yang akan ditemukan dan diganti oleh skrip. Teks ini juga akan digunakan sebagai cadangan jika elemen target Anda kosong dan tidak ada nama tamu di URL.

Kami sangat merekomendasikan Anda untuk segera beralih menggunakan versi terbaru ini. WDPCNT yang baru bukan lagi sekadar skrip sederhana, melainkan sebuah toolkit profesional yang akan membuat undangan digital Anda lebih personal, aman, dan mengesankan.