Hide br tags inside wheel button for centering
Deploy to Development and Production / deploy (push) Successful in 5s Details

This commit is contained in:
Mark Poljanšek 2025-11-20 22:44:54 +01:00
parent c6ece6e5cb
commit 8d8213ceaf
3 changed files with 142 additions and 1479 deletions

856
README.md
View File

@ -1,748 +1,154 @@
# Wheel of Fortune Plugin # Wheel of Fortune za WooCommerce (Kolo Sreče)
Test posodobitve za preverjanje Gitea workflow. **Wheel of Fortune** je napreden WordPress/WooCommerce vtičnik, ki omogoča gamifikacijo spletne trgovine. Kupcem omogoča, da z nakupom določenih izdelkov pridobijo "vrtljaje" (spins) in zavrtijo kolo sreče za priboritev nagrad (popusti, kuponi, fizična darila ali sporočila).
# Wheel of Fortune - WordPress Plugin Vtičnik podpira več različnih koles, napredno upravljanje verjetnosti, samodejno ustvarjanje WooCommerce kuponov, pošiljanje e-poštnih obvestil (SMTP) in dnevne nagrade (Cron job).
Vtičnik "Kolo Sreče" (Wheel of Fortune) omogoča uporabnikom vrtenje kolesa za nagrade. Povezan je z WooCommerce za dodeljevanje spinov ob nakupu izdelkov. ## 🚀 Glavne funkcionalnosti
## Funkcionalnosti * **Več koles:** Ustvarite lahko neomejeno število različnih koles za različne priložnosti.
* **Povezava z WooCommerce:** Določite, kateri izdelki prinašajo vrtljaje in koliko.
* **Napredne nagrade:**
* Avtomatsko ustvarjanje kuponov za popuste (odstotni popust).
* Fizične nagrade.
* "Poskusi znova" (Try Again) polja.
* Nastavljanje verjetnosti dobitka (uteženo).
* **Uporabniški račun:** Beleženje zgodovine vrtljajev in preostalih vrtljajev za vsakega uporabnika.
* **Dnevni vrtljaji:** Možnost nastavitve, da vsak uporabnik prejme 1 brezplačen vrtljaj vsakih 24 ur.
* **E-poštna obvestila:** Integriran SMTP klient za zanesljivo pošiljanje obvestil o nagradah.
* **Diagnostika:** Orodje za testiranje generiranja kuponov in pošiljanja e-pošte.
- Prikaz interaktivnega kolesa sreče preko kratke kode [wheel_of_fortune] ---
- Povezava z WooCommerce za dodeljevanje spinov ob nakupu izdelkov
- Upravljanje z nagradami, verjetnostmi in barvami
- Statistika vrtljajev in zadetkov
## Namestitev ## 📂 Struktura map in datotek
1. Prenesite datoteke vtičnika v mapo `/wp-content/plugins/wheel-of-fortune/` Spodaj je podroben opis vseh datotek v projektu in njihov namen.
2. Aktivirajte vtičnik preko menija 'Vtičniki' v WordPress skrbniški plošči
3. Nastavite vtičnik preko menija 'Kolo sreče' v skrbniški plošči
## Uporaba ### root (koren mape)
* **`wheel-of-fortune.php`**:
* Glavna datoteka vtičnika.
* Inicializira vtičnik, registrira 'hooks' (akcije in filtre).
* Ustvari in posodablja podatkovne baze (`dbDelta`).
* Registrira REST API endpoint (`/wp-json/wheel-of-fortune/v1/spin`) za varno izvedbo vrtljaja.
* Obravnava logiko dodeljevanja spinov ob zaključku WooCommerce naročila (`woocommerce_order_status_completed`).
* Vsebuje logiko za pošiljanje e-pošte in generiranje SVG kolesa.
### Osnovna uporaba ### `/admin` (Administracija)
Vsebuje logiko za backend vmesnik v WP Adminu.
Vstavite kratko kodo `[wheel_of_fortune]` na katerokoli stran ali prispevek, kjer želite prikazati kolo sreče. * **`coupon-test.php`**:
* Diagnostično orodje. Preizkusi 4 različne metode ustvarjanja WooCommerce kuponov (API, programsko, DB insert), da najde tisto, ki deluje na strežniku, in jo shrani kot privzeto.
* **`wheels-page.php`**:
* Prikazuje seznam vseh ustvarjenih koles.
* Omogoča dodajanje novih koles in brisanje obstoječih.
* **`edit-wheel-page.php`**:
* Glavni urejevalnik za posamezno kolo.
* Upravljanje nagrad (CRUD): dodajanje, urejanje, verjetnosti, barve, template e-pošte.
* Povezovanje WooCommerce izdelkov s tem kolesom (koliko spinov prinese izdelek).
* **`settings-page.php`**:
* Globalne nastavitve: SMTP podatki, Cron nastavitve za dnevne spine, "cooldown" čas.
* Vsebuje orodja za ročno dodajanje spinov in testiranje e-pošte.
* **`stats-page.php`**:
* Analitika: Kdo je vrtel, kaj je zadel, kdaj.
* Filtriranje uporabnikov glede na preostale spine.
* **`users-page.php`**:
* Pregled uporabnikov in njihovih spinov.
* Možnost ročnega resetiranja ali dodajanja spinov specifičnemu uporabniku.
* **`partials/prize-form-fields.php`**:
* HTML delček (partial) za obrazec nagrade, ki se uporablja pri dodajanju in urejanju, da se koda ne podvaja.
* **`js/admin.js`**:
* jQuery skripte za admin vmesnik (odpiranje modalov, AJAX klici za shranjevanje nagrad, testiranje e-pošte).
* **`js/wheel.js`** (Admin preview):
* Skripta za animacijo kolesa v predogledu v administraciji.
### Parametri kratke kode ### `/assets` (Sredstva)
Datoteke, ki se nalagajo na frontend-u (in delno v adminu za stilizacijo).
Kratka koda sprejme naslednje parametre: * **`css/admin.css`**:
* Stili za WP Admin (kartice, tabele, gumbi, postavitev urejevalnika).
* **`css/wheel.css`**:
* CSS za izgled kolesa na spletni strani.
* Vsebuje animacije (utripanje lučk), senčenje (SVG filtri) in odzivnost (responsive design) za mobilne naprave.
* **`js/wheel.js`**:
* **Glavna frontend logika.**
* Komunicira z REST API-jem za pridobitev rezultata vrtljaja (rezultat se določi na strežniku, ne v brskalniku zaradi varnosti).
* Izvaja animacijo vrtenja (easing functions) in prikaže "popup" z rezultatom.
- `size`: Velikost kolesa (možnosti: `small`, `medium`, `large`, privzeto: `medium`) ### `/languages`
- `theme`: Tema kolesa (možnosti: `light`, `dark`, privzeto: `light`) * **`wheel-of-fortune.pot`**:
- `scale`: Dodatno prilagajanje velikosti (možnosti: `scale-90`, `scale-80`, `scale-70`, `scale-60`, `scale-50`, privzeto: prazen) * Predloga za prevajanje vtičnika v druge jezike (npr. v slovenščino).
#### Primeri ### `/public`
* **`shortcode-template.php`**:
* HTML predloga, ki se izpiše, ko na stran vstavite `[wheel_of_fortune]`. Vsebuje kontejner za SVG kolo in gumb za vrtenje.
### `/templates`
* **`wheel.php`**:
* Alternativna ali starejša PHP predloga za generiranje SVG strukture (gradienti, filtri).
* **`emails/default-prize-email.html`**:
* HTML predloga za e-poštno sporočilo, ki ga prejme uporabnik ob zadetku. Vsebuje "placeholders" kot so `{user_name}`, `{prize_name}`, itd.
---
## 🗄️ Podatkovna baza
Vtičnik ustvari naslednje tabele v bazi:
1. `wp_wof_wheels`: Seznam koles.
2. `wp_wheel_prizes`: Nagrade povezane s kolesi (verjetnost, tip nagrade).
3. `wp_wheel_spins`: Stanje spinov za vsakega uporabnika (ločeno po kolesih).
4. `wp_wheel_log`: Zgodovina vseh vrtljajev (log).
5. `wp_wheel_of_fortune_products`: Povezovalna tabela med WC izdelki in kolesi.
---
## 🛠️ Navodila za uporabo
### 1. Namestitev in Aktivacija
1. Naložite mapo `wheel-of-fortune` v mapo `wp-content/plugins/` ali namestite preko ZIP datoteke v WP Adminu.
2. Aktivirajte vtičnik. Ob aktivaciji se bodo ustvarile potrebne tabele.
### 2. Ustvarjanje Kolesa
1. Pojdite na **Wheels of Fortune > Wheels**.
2. Vnesite ime kolesa in kliknite "Add New Wheel".
3. Kliknite na ime kolesa ali "Edit" za urejanje.
### 3. Dodajanje Nagrad (Prizes)
V urejevalniku kolesa:
1. Kliknite "Add New Prize".
2. Izpolnite podatke:
* **Probability:** Verjetnost med 0 in 1 (npr. 0.1 je 10%). *Pomembno: Vsota vseh verjetnosti naj bo 1.*
* **Is Discount?:** Če označite, vpišite odstotek. Sistem bo avtomatsko generiral unikatno kodo kupona.
* **Is Try Again?:** Če uporabnik ne zadene ničesar, a lahko vrti ponovno.
3. Shranite nagrado.
### 4. Povezava z Izdelki (Kako do spinov?)
Na isti strani urejanja kolesa (spodaj):
1. V sekciji "Produkti & spini" izberite WooCommerce izdelek.
2. Določite "Število spinov na nakup" (npr. 1).
3. Kliknite "Dodaj". Ko kupec kupi ta izdelek (status naročila: Completed/Processing), bo prejel spine.
### 5. Prikaz na spletni strani
Na katerokoli stran ali prispevek dodajte shortcode:
``` ```
[wheel_of_fortune] [wheel_of_fortune id="1"]
[wheel_of_fortune size="large" theme="dark"]
[wheel_of_fortune size="medium" theme="light" scale="scale-80"]
``` ```
*Zamenjajte `1` z ID-jem vašega kolesa.*
## Vsebina ### 6. Nastavitve SMTP in Dnevni Spin
1. [Namen vtičnika](#namen-vtičnika) Pojdite na **Wheels of Fortune > Settings**:
2. [Ključne funkcionalnosti](#ključne-funkcionalnosti) * **SMTP:** Vnesite podatke vašega mail strežnika za zanesljivo dostavo nagrad.
3. [Tehnični opis](#tehnični-opis) * **Daily Spin:** Izberite kolo, ki se uporablja za dnevne nagrade. Uporabniki bodo avtomatsko prejeli 1 spin vsakih 24h za to kolo.
4. [Logika delovanja](#logika-delovanja) * **Coupon Test:** Če se kuponi ne generirajo, zaženite "Testiraj ustvarjanje kuponov" in shranite delujočo metodo.
5. [Administratorske nastavitve](#administratorske-nastavitve)
6. [Kratka koda](#kratka-koda)
7. [Varnost in integracije](#varnost-in-integracije)
8. [Možne razširitve](#možne-razširitve)
9. [Implementacija kolesa](#implementacija-kolesa)
10. [Namestitev in uporaba](#namestitev-in-uporaba)
## Namen vtičnika ---
Vtičnik »Kolo Sreče« omogoča obiskovalcem spletne strani, da zavrtijo interaktivno kolo in prejmejo naključno nagrado. Vrtljaji so vezani na nakupe določenih izdelkov in uporabniške račune, kar omogoča gamificirano izkušnjo zvestobe in nagrajevanja. ## ⚠️ Pomembna opozorila
## Ključne funkcionalnosti * **DEBUG mode:** V datoteki `wheel-of-fortune.php` je konstanta `WHEEL_OF_FORTUNE_DEBUG` nastavljena na `true`. Za produkcijo jo nastavite na `false`, da ne polnite `debug.log` datoteke.
* **Varnost:** Vtičnik uporablja "Nonce" preverjanje za vse AJAX in REST klice, zato je varen pred CSRF napadi.
* **Login:** Kolo se prikaže samo prijavljenim uporabnikom. Neprijavljeni vidijo obvestilo za prijavo.
- 🎯 Naključni izbor nagrade ob vrtenju kolesa ---
- 🔐 Vezava spinov (vrtljajev) na uporabniški račun
- 🛒 Samodejna dodelitev spinov ob nakupu določenih izdelkov
- 🧠 Nastavljive nagrade in verjetnosti zadetkov
- 📊 Spremljanje števila preostalih spinov
- 🎛️ Kratka koda za vključitev kolesa kjerkoli v WordPress vsebino
- 📬 Email obvestila ob zadetkih (opcijsko)
- 📈 Administratorska statistika: število zadetkov, porabljenih spinov ipd.
## Tehnični opis **Avtor:** Mark Poljansek
**Verzija:** 1.0.1
### Arhitektura
- WordPress Plugin: zgrajen po WordPress standardih (object-oriented, namespacing, varnostni hooki)
- Frontend: JavaScript za animacijo kolesa, AJAX za komunikacijo z backendom
- Backend: PHP (WP REST API), povezano z WP uporabniki in WooCommerce naročili
- Baza podatkov: uporaba wp_usermeta, lastne tabele wp_wheel_spins in wp_wheel_prizes
### Tabele podatkovne baze
#### wp_wheel_spins
| Polje | Tip | Opis |
|-------|-----|------|
| id | INT | Primarni ključ |
| user_id | INT | ID uporabnika (WordPress) |
| spins_available | INT | Število razpoložljivih spinov |
| last_spin_date | DATETIME | Datum zadnjega vrtenja |
#### wp_wheel_prizes
| Polje | Tip | Opis |
|-------|-----|------|
| id | INT | Primarni ključ |
| name | VARCHAR(255) | Ime nagrade |
| description | TEXT | Opis nagrade |
| probability | FLOAT | Verjetnost zadetka (0-1) |
| color | VARCHAR(20) | Barva segmenta (HEX ali RGB) |
| is_active | TINYINT | Ali je nagrada aktivna |
| image_url | VARCHAR(255) | URL do slike nagrade (opcijsko) |
#### wp_wheel_log
| Polje | Tip | Opis |
|-------|-----|------|
| id | INT | Primarni ključ |
| user_id | INT | ID uporabnika |
| prize_id | INT | ID zadete nagrade |
| spin_date | DATETIME | Datum in čas vrtenja |
| redeemed | TINYINT | Ali je nagrada unovčena |
## Logika delovanja
### Podeljevanje spinov
Ob zaključenem nakupu določenega izdelka (npr. ID = 123), WooCommerce hook (woocommerce_order_status_completed) sproži funkcijo za dodelitev spinov.
```php
function assign_spins_on_purchase($order_id) {
$order = wc_get_order($order_id);
foreach ($order->get_items() as $item) {
$product_id = $item->get_product_id();
$spin_products = get_option('wheel_spin_products', array());
if (array_key_exists($product_id, $spin_products)) {
$user_id = $order->get_user_id();
$current_spins = get_user_meta($user_id, '_wheel_spins', true) ?: 0;
$new_spins = $current_spins + $spin_products[$product_id];
update_user_meta($user_id, '_wheel_spins', $new_spins);
// Posodobi tudi v tabeli wp_wheel_spins
global $wpdb;
$table_name = $wpdb->prefix . 'wheel_spins';
$existing = $wpdb->get_var($wpdb->prepare(
"SELECT id FROM $table_name WHERE user_id = %d",
$user_id
));
if ($existing) {
$wpdb->update(
$table_name,
array('spins_available' => $new_spins),
array('user_id' => $user_id)
);
} else {
$wpdb->insert(
$table_name,
array(
'user_id' => $user_id,
'spins_available' => $new_spins,
'last_spin_date' => current_time('mysql')
)
);
}
}
}
}
add_action('woocommerce_order_status_completed', 'assign_spins_on_purchase');
```
### Vrtenje kolesa
1. Uporabnik klikne gumb "Zavrti"
2. JS animira kolo (CSS transformacija)
3. Medtem AJAX zahteva iz strežnika rezultat
4. PHP backend izbere nagrado glede na verjetnosti
5. Backend zabeleži zadetek, zmanjša število spinov
```php
// REST API endpoint za vrtenje kolesa
function spin_wheel_endpoint() {
register_rest_route('wheel-of-fortune/v1', '/spin', array(
'methods' => 'POST',
'callback' => 'process_wheel_spin',
'permission_callback' => function() {
return is_user_logged_in();
}
));
}
add_action('rest_api_init', 'spin_wheel_endpoint');
function process_wheel_spin($request) {
$user_id = get_current_user_id();
$spins = get_user_meta($user_id, '_wheel_spins', true) ?: 0;
if ($spins <= 0) {
return new WP_Error('no_spins', 'Nimate več razpoložljivih vrtljajev', array('status' => 403));
}
// Preveri časovni interval med vrtljaji
global $wpdb;
$table_name = $wpdb->prefix . 'wheel_spins';
$last_spin = $wpdb->get_var($wpdb->prepare(
"SELECT last_spin_date FROM $table_name WHERE user_id = %d",
$user_id
));
$cooldown_minutes = get_option('wheel_cooldown_minutes', 0);
if ($cooldown_minutes > 0 && $last_spin) {
$time_diff = (strtotime(current_time('mysql')) - strtotime($last_spin)) / 60;
if ($time_diff < $cooldown_minutes) {
return new WP_Error(
'cooldown',
sprintf('Počakajte še %d minut pred naslednjim vrtenjem', ceil($cooldown_minutes - $time_diff)),
array('status' => 403)
);
}
}
// Izberi nagrado glede na verjetnosti
$prize = select_random_prize($prizes);
// Posodobi število spinov
update_user_meta($user_id, '_wheel_spins', $spins - 1);
// Posodobi tabelo wp_wheel_spins
$wpdb->update(
$table_name,
array(
'spins_available' => $spins - 1,
'last_spin_date' => current_time('mysql')
),
array('user_id' => $user_id)
);
// Zabeleži zadetek
$log_table = $wpdb->prefix . 'wheel_log';
$wpdb->insert(
$log_table,
array(
'user_id' => $user_id,
'prize_id' => $prize['id'],
'spin_date' => current_time('mysql'),
'redeemed' => 0
)
);
// Pošlji email obvestilo (če je vključeno)
if (get_option('wheel_send_emails', false)) {
send_prize_email($user_id, $prize);
}
return array(
'success' => true,
'prize' => $prize,
'remaining_spins' => $spins - 1,
'degree' => calculate_prize_degree($prize['id'], $prizes)
);
}
function calculate_prize_degree($prize_id, $prizes) {
// Izračunaj stopinje za animacijo kolesa
$prize_index = 0;
foreach ($prizes as $index => $prize) {
if ($prize['id'] == $prize_id) {
$prize_index = $index;
break;
}
}
$segment_size = 360 / count($prizes);
$degree = 360 - ($prize_index * $segment_size + $segment_size / 2);
// Dodaj naključno odstopanje znotraj segmenta
$degree += mt_rand(-($segment_size / 4), $segment_size / 4);
// Dodaj še nekaj obratov
$degree += 360 * 5;
return $degree;
}
```
## Administratorske nastavitve
- 📦 Seznam izdelkov, ki podeljujejo spin (ID + št. spinov)
- 🎁 Nastavitev nagrad (ime, opis, slika, verjetnost, barva)
- 🗳️ Max. spinov na uporabnika
- 🕒 Časovna omejitev (1 spin na X minut)
- 🔧 Reset spinov / bonus kampanje
- 📧 Nastavitve email obvestil
```php
function wheel_admin_menu() {
add_menu_page(
'Kolo Sreče',
'Kolo Sreče',
'manage_options',
'wheel-of-fortune',
'wheel_settings_page',
'dashicons-marker',
30
);
add_submenu_page(
'wheel-of-fortune',
'Nastavitve',
'Nastavitve',
'manage_options',
'wheel-of-fortune',
'wheel_settings_page'
);
add_submenu_page(
'wheel-of-fortune',
'Nagrade',
'Nagrade',
'manage_options',
'wheel-prizes',
'wheel_prizes_page'
);
add_submenu_page(
'wheel-of-fortune',
'Statistika',
'Statistika',
'manage_options',
'wheel-stats',
'wheel_stats_page'
);
}
add_action('admin_menu', 'wheel_admin_menu');
```
## Kratka koda
Kolo lahko prikažemo kjerkoli s pomočjo:
```
[wheel_of_fortune]
```
Možne opcije:
```
[wheel_of_fortune size="large" theme="dark"]
```
Implementacija kratke kode:
```php
function wheel_shortcode($atts) {
$atts = shortcode_atts(array(
'size' => 'medium', // small, medium, large
'theme' => 'light', // light, dark
), $atts);
// Preveri, če je uporabnik prijavljen
if (!is_user_logged_in()) {
return '<div class="wheel-login-required">Za sodelovanje v nagradni igri se morate <a href="' . wp_login_url(get_permalink()) . '">prijaviti</a>.</div>';
}
// Preveri, če ima uporabnik na voljo spine
$user_id = get_current_user_id();
$spins = get_user_meta($user_id, '_wheel_spins', true) ?: 0;
if ($spins <= 0) {
return '<div class="wheel-no-spins">Trenutno nimate razpoložljivih vrtljajev. Kupite izdelke za pridobitev novih vrtljajev.</div>';
}
// Naloži potrebne skripte in stile
wp_enqueue_style('wheel-of-fortune-css', plugin_dir_url(__FILE__) . 'assets/css/wheel.css');
wp_enqueue_script('wheel-of-fortune-js', plugin_dir_url(__FILE__) . 'assets/js/wheel.js', array('jquery'), '1.0', true);
wp_localize_script('wheel-of-fortune-js', 'wheelSettings', array(
'ajaxUrl' => rest_url('wheel-of-fortune/v1/spin'),
'nonce' => wp_create_nonce('wp_rest'),
'prizes' => get_wheel_prizes(),
'remainingSpins' => $spins
));
// Vrni HTML za kolo
ob_start();
include plugin_dir_path(__FILE__) . 'templates/wheel.php';
return ob_get_clean();
}
add_shortcode('wheel_of_fortune', 'wheel_shortcode');
```
## Varnost in integracije
- CSRF zaščita za AJAX klice (WordPress nonce)
- Preverjanje uporabniške prijave
- Integracija z WooCommerce
- Možna integracija z emailing sistemom (npr. MailPoet, Sendinblue)
- Preverjanje vlog in pravic uporabnikov
- Sanitizacija vnosov in validacija podatkov
## Možne razširitve
- 🎟️ Shranjevanje zgodovine zadetkov (WP tabelo wp_wheel_log)
- 🏆 Leaderboard: največ zadetkov / spinov
- 🔗 Integracija z zvestobnim sistemom (CLIP)
- 📱 Mobilna verzija (PWA)
- 🔔 Push obvestila za bonus spin
- 📊 Napredna analitika in poročila
- 🌐 Večjezična podpora
## Implementacija kolesa
Glede na priloženo sliko, bo kolo implementirano kot interaktivna SVG ali Canvas komponenta z naslednjimi lastnostmi:
### Struktura kolesa
- Kolo je razdeljeno na več segmentov (8-12)
- Vsak segment ima svojo barvo (modra, rdeča, siva)
- Segmenti vsebujejo besedilo z nagrado
- Kazalec na vrhu označuje zmagovalni segment
### CSS in JS implementacija
```css
.wheel-container {
position: relative;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.wheel {
width: 100%;
height: auto;
transform-origin: center;
transition: transform 5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.wheel-pointer {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
z-index: 10;
}
.wheel-segment {
transform-origin: center;
}
.wheel-segment-blue {
fill: #5DADE2;
}
.wheel-segment-red {
fill: #E74C3C;
}
.wheel-segment-gray {
fill: #D5D8DC;
}
.wheel-text {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
fill: white;
text-anchor: middle;
}
.wheel-button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #E74C3C;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.wheel-button:disabled {
background-color: #D5D8DC;
cursor: not-allowed;
}
.wheel-spins-counter {
text-align: center;
margin-top: 10px;
font-size: 16px;
}
.wheel-result {
text-align: center;
margin-top: 20px;
padding: 15px;
border-radius: 5px;
display: none;
}
.wheel-result.win {
background-color: #D5F5E3;
border: 1px solid #2ECC71;
}
```
```javascript
jQuery(document).ready(function($) {
var wheel = $('.wheel');
var button = $('.wheel-button');
var result = $('.wheel-result');
var spinning = false;
button.on('click', function() {
if (spinning) return;
spinning = true;
button.prop('disabled', true);
result.hide();
$.ajax({
url: wheelSettings.ajaxUrl,
method: 'POST',
beforeSend: function(xhr) {
xhr.setRequestHeader('X-WP-Nonce', wheelSettings.nonce);
},
success: function(response) {
if (response.success) {
// Animiraj kolo
wheel.css({
'transform': 'rotate(' + response.degree + 'deg)'
});
// Posodobi števec spinov
$('.wheel-spins-counter span').text(response.remaining_spins);
// Prikaži rezultat po končani animaciji
setTimeout(function() {
result.html('<h3>Čestitamo!</h3><p>Zadeli ste: ' + response.prize.name + '</p>');
result.addClass('win').show();
spinning = false;
if (response.remaining_spins > 0) {
button.prop('disabled', false);
}
}, 5500);
}
},
error: function(xhr) {
var errorMsg = 'Prišlo je do napake.';
if (xhr.responseJSON && xhr.responseJSON.message) {
errorMsg = xhr.responseJSON.message;
}
result.html('<p>' + errorMsg + '</p>');
result.removeClass('win').show();
spinning = false;
button.prop('disabled', false);
}
});
});
});
```
### SVG implementacija kolesa
```php
function generate_wheel_svg($prizes) {
$num_prizes = count($prizes);
$angle = 360 / $num_prizes;
$svg = '<svg viewBox="0 0 500 500" class="wheel">';
// Center point
$cx = 250;
$cy = 250;
$radius = 240;
// Generate segments
for ($i = 0; $i < $num_prizes; $i++) {
$prize = $prizes[$i];
$start_angle = $i * $angle;
$end_angle = ($i + 1) * $angle;
$start_rad = deg2rad($start_angle);
$end_rad = deg2rad($end_angle);
$x1 = $cx + $radius * cos($start_rad);
$y1 = $cy + $radius * sin($start_rad);
$x2 = $cx + $radius * cos($end_rad);
$y2 = $cy + $radius * sin($end_rad);
// Determine if the arc should be drawn as a large arc
$large_arc = $end_angle - $start_angle > 180 ? 1 : 0;
// Create the path for the segment
$path = "M{$cx},{$cy} L{$x1},{$y1} A{$radius},{$radius} 0 {$large_arc},1 {$x2},{$y2} Z";
// Determine the color class
$color_class = '';
switch ($prize['color']) {
case 'blue':
$color_class = 'wheel-segment-blue';
break;
case 'red':
$color_class = 'wheel-segment-red';
break;
default:
$color_class = 'wheel-segment-gray';
}
$svg .= "<path d='{$path}' class='wheel-segment {$color_class}' />";
// Add text to the segment
$text_angle = $start_angle + ($angle / 2);
$text_rad = deg2rad($text_angle);
$text_x = $cx + ($radius * 0.75) * cos($text_rad);
$text_y = $cy + ($radius * 0.75) * sin($text_rad);
// Rotate text to be readable
$text_rotate = $text_angle;
if ($text_angle > 90 && $text_angle < 270) {
$text_rotate += 180;
}
$svg .= "<text x='{$text_x}' y='{$text_y}' class='wheel-text' transform='rotate({$text_rotate}, {$text_x}, {$text_y})'>{$prize['name']}</text>";
}
// Add center circle
$svg .= "<circle cx='{$cx}' cy='{$cy}' r='50' fill='white' />";
$svg .= '</svg>';
return $svg;
}
```
## Namestitev in uporaba
### Namestitev vtičnika
1. Prenesite ZIP datoteko vtičnika
2. V WordPress administratorski plošči pojdite na "Vtičniki" > "Dodaj nov"
3. Kliknite "Naloži vtičnik" in izberite preneseno ZIP datoteko
4. Aktivirajte vtičnik
### Konfiguracija
1. V administratorski plošči pojdite na "Kolo Sreče" > "Nastavitve"
2. Konfigurirajte izdelke, ki podeljujejo spine
3. Nastavite časovne omejitve in druge možnosti
### Dodajanje nagrad
1. Pojdite na "Kolo Sreče" > "Nagrade"
2. Dodajte nove nagrade z imenom, opisom, verjetnostjo in barvo
3. Zagotovite, da skupna vsota verjetnosti ne presega 1.0
### Prikaz kolesa na strani
Dodajte kratko kodo `[wheel_of_fortune]` na želeno stran ali prispevek.
Za prilagoditev videza uporabite dodatne parametre:
```
[wheel_of_fortune size="large" theme="dark"]
```
### Prilagajanje velikosti kolesa
Če želite dodatno prilagoditi velikost kolesa, da bo vse prišlo na zaslon, lahko uporabite parameter `scale`:
- `scale-90`: Zmanjša kolo na 90% privzete velikosti
- `scale-80`: Zmanjša kolo na 80% privzete velikosti
- `scale-70`: Zmanjša kolo na 70% privzete velikosti
- `scale-60`: Zmanjša kolo na 60% privzete velikosti
- `scale-50`: Zmanjša kolo na 50% privzete velikosti
Primer: `[wheel_of_fortune scale="scale-70"]`
### Dodeljevanje spinov uporabnikom
Spine lahko uporabnikom dodelite na naslednje načine:
1. **Avtomatsko ob nakupu**: Nastavite število spinov za posamezne izdelke v nastavitvah vtičnika
2. **Ročno**: Uporabite stran "Uporabniki" v meniju "Kolo sreče" za ročno dodeljevanje spinov
## Nastavitve
### Splošne nastavitve
- **Zahtevaj prijavo**: Če je omogočeno, morajo biti uporabniki prijavljeni za vrtenje kolesa
- **Dovoli samo en spin na dan**: Če je omogočeno, lahko uporabniki zavrtijo kolo samo enkrat na dan
- **Pošlji e-pošto ob zmagi**: Če je omogočeno, se uporabniku pošlje e-pošta ob zmagi
### Nagrade
Upravljajte z nagradami, ki jih lahko uporabniki zadanejo:
- **Ime**: Ime nagrade
- **Opis**: Opis nagrade
- **Verjetnost**: Verjetnost, da uporabnik zadane to nagrado (v odstotkih)
- **Barva**: Barva segmenta na kolesu
- **Aktivna**: Ali je nagrada aktivna
### Izdelki
Nastavite število spinov, ki jih uporabnik prejme ob nakupu določenih izdelkov:
1. Vnesite ID izdelka
2. Nastavite število spinov
3. Kliknite "Dodaj izdelek"
## Statistika
Spremljajte statistiko vrtljajev in zadetkov:
- **Skupno število vrtljajev**: Skupno število vrtljajev vseh uporabnikov
- **Zadetki po nagradah**: Število zadetkov za vsako nagrado
- **Uporabniki z največ vrtljaji**: Seznam uporabnikov z največ vrtljaji
## Razvijalcem
### Filtri
Vtičnik ponuja naslednje filtre za prilagajanje:
- `wheel_of_fortune_prizes`: Prilagodite seznam nagrad
- `wheel_of_fortune_spin_result`: Prilagodite rezultat vrtljaja
- `wheel_of_fortune_email_content`: Prilagodite vsebino e-pošte ob zmagi
### Akcije
Vtičnik ponuja naslednje akcije:
- `wheel_of_fortune_before_spin`: Izvede se pred vrtljajem
- `wheel_of_fortune_after_spin`: Izvede se po vrtljaju
- `wheel_of_fortune_prize_won`: Izvede se, ko uporabnik zadane nagrado
## Pogosta vprašanja
### Kolo se ne prikaže na strani
Preverite naslednje:
1. Ali je kratka koda pravilno vstavljena?
2. Ali so nagrade nastavljene in aktivne?
3. Ali je uporabnik prijavljen (če je to zahtevano)?
4. Ali ima uporabnik na voljo spine?
5. Poskusite zmanjšati velikost kolesa z uporabo parametra `scale`: `[wheel_of_fortune scale="scale-80"]`
### Uporabnik ne prejme spinov ob nakupu
Preverite naslednje:
1. Ali je WooCommerce aktiviran?
2. Ali je izdelek pravilno nastavljen v nastavitvah vtičnika?
3. Ali je naročilo označeno kot "Zaključeno"?
## Podpora
Za podporo nas kontaktirajte na support@example.com

View File

@ -322,6 +322,11 @@
appearance: none; appearance: none;
} }
/* Prevent accidental <br> tags inside the button from breaking centering */
.wheel-button br {
display: none;
}
/* Button hover effect */ /* Button hover effect */
.wheel-button:hover { .wheel-button:hover {
transform: translateY(-2px) scale(1.04); transform: translateY(-2px) scale(1.04);

View File

@ -1,755 +1,3 @@
"./README.md" :
"""
# Wheel of Fortune Plugin
Test posodobitve za preverjanje Gitea workflow.
# Wheel of Fortune - WordPress Plugin
Vtičnik "Kolo Sreče" (Wheel of Fortune) omogoča uporabnikom vrtenje kolesa za nagrade. Povezan je z WooCommerce za dodeljevanje spinov ob nakupu izdelkov.
## Funkcionalnosti
- Prikaz interaktivnega kolesa sreče preko kratke kode [wheel_of_fortune]
- Povezava z WooCommerce za dodeljevanje spinov ob nakupu izdelkov
- Upravljanje z nagradami, verjetnostmi in barvami
- Statistika vrtljajev in zadetkov
## Namestitev
1. Prenesite datoteke vtičnika v mapo `/wp-content/plugins/wheel-of-fortune/`
2. Aktivirajte vtičnik preko menija 'Vtičniki' v WordPress skrbniški plošči
3. Nastavite vtičnik preko menija 'Kolo sreče' v skrbniški plošči
## Uporaba
### Osnovna uporaba
Vstavite kratko kodo `[wheel_of_fortune]` na katerokoli stran ali prispevek, kjer želite prikazati kolo sreče.
### Parametri kratke kode
Kratka koda sprejme naslednje parametre:
- `size`: Velikost kolesa (možnosti: `small`, `medium`, `large`, privzeto: `medium`)
- `theme`: Tema kolesa (možnosti: `light`, `dark`, privzeto: `light`)
- `scale`: Dodatno prilagajanje velikosti (možnosti: `scale-90`, `scale-80`, `scale-70`, `scale-60`, `scale-50`, privzeto: prazen)
#### Primeri
```
[wheel_of_fortune]
[wheel_of_fortune size="large" theme="dark"]
[wheel_of_fortune size="medium" theme="light" scale="scale-80"]
```
## Vsebina
1. [Namen vtičnika](#namen-vtičnika)
2. [Ključne funkcionalnosti](#ključne-funkcionalnosti)
3. [Tehnični opis](#tehnični-opis)
4. [Logika delovanja](#logika-delovanja)
5. [Administratorske nastavitve](#administratorske-nastavitve)
6. [Kratka koda](#kratka-koda)
7. [Varnost in integracije](#varnost-in-integracije)
8. [Možne razširitve](#možne-razširitve)
9. [Implementacija kolesa](#implementacija-kolesa)
10. [Namestitev in uporaba](#namestitev-in-uporaba)
## Namen vtičnika
Vtičnik »Kolo Sreče« omogoča obiskovalcem spletne strani, da zavrtijo interaktivno kolo in prejmejo naključno nagrado. Vrtljaji so vezani na nakupe določenih izdelkov in uporabniške račune, kar omogoča gamificirano izkušnjo zvestobe in nagrajevanja.
## Ključne funkcionalnosti
- 🎯 Naključni izbor nagrade ob vrtenju kolesa
- 🔐 Vezava spinov (vrtljajev) na uporabniški račun
- 🛒 Samodejna dodelitev spinov ob nakupu določenih izdelkov
- 🧠 Nastavljive nagrade in verjetnosti zadetkov
- 📊 Spremljanje števila preostalih spinov
- 🎛️ Kratka koda za vključitev kolesa kjerkoli v WordPress vsebino
- 📬 Email obvestila ob zadetkih (opcijsko)
- 📈 Administratorska statistika: število zadetkov, porabljenih spinov ipd.
## Tehnični opis
### Arhitektura
- WordPress Plugin: zgrajen po WordPress standardih (object-oriented, namespacing, varnostni hooki)
- Frontend: JavaScript za animacijo kolesa, AJAX za komunikacijo z backendom
- Backend: PHP (WP REST API), povezano z WP uporabniki in WooCommerce naročili
- Baza podatkov: uporaba wp_usermeta, lastne tabele wp_wheel_spins in wp_wheel_prizes
### Tabele podatkovne baze
#### wp_wheel_spins
| Polje | Tip | Opis |
|-------|-----|------|
| id | INT | Primarni ključ |
| user_id | INT | ID uporabnika (WordPress) |
| spins_available | INT | Število razpoložljivih spinov |
| last_spin_date | DATETIME | Datum zadnjega vrtenja |
#### wp_wheel_prizes
| Polje | Tip | Opis |
|-------|-----|------|
| id | INT | Primarni ključ |
| name | VARCHAR(255) | Ime nagrade |
| description | TEXT | Opis nagrade |
| probability | FLOAT | Verjetnost zadetka (0-1) |
| color | VARCHAR(20) | Barva segmenta (HEX ali RGB) |
| is_active | TINYINT | Ali je nagrada aktivna |
| image_url | VARCHAR(255) | URL do slike nagrade (opcijsko) |
#### wp_wheel_log
| Polje | Tip | Opis |
|-------|-----|------|
| id | INT | Primarni ključ |
| user_id | INT | ID uporabnika |
| prize_id | INT | ID zadete nagrade |
| spin_date | DATETIME | Datum in čas vrtenja |
| redeemed | TINYINT | Ali je nagrada unovčena |
## Logika delovanja
### Podeljevanje spinov
Ob zaključenem nakupu določenega izdelka (npr. ID = 123), WooCommerce hook (woocommerce_order_status_completed) sproži funkcijo za dodelitev spinov.
```php
function assign_spins_on_purchase($order_id) {
$order = wc_get_order($order_id);
foreach ($order->get_items() as $item) {
$product_id = $item->get_product_id();
$spin_products = get_option('wheel_spin_products', array());
if (array_key_exists($product_id, $spin_products)) {
$user_id = $order->get_user_id();
$current_spins = get_user_meta($user_id, '_wheel_spins', true) ?: 0;
$new_spins = $current_spins + $spin_products[$product_id];
update_user_meta($user_id, '_wheel_spins', $new_spins);
// Posodobi tudi v tabeli wp_wheel_spins
global $wpdb;
$table_name = $wpdb->prefix . 'wheel_spins';
$existing = $wpdb->get_var($wpdb->prepare(
"SELECT id FROM $table_name WHERE user_id = %d",
$user_id
));
if ($existing) {
$wpdb->update(
$table_name,
array('spins_available' => $new_spins),
array('user_id' => $user_id)
);
} else {
$wpdb->insert(
$table_name,
array(
'user_id' => $user_id,
'spins_available' => $new_spins,
'last_spin_date' => current_time('mysql')
)
);
}
}
}
}
add_action('woocommerce_order_status_completed', 'assign_spins_on_purchase');
```
### Vrtenje kolesa
1. Uporabnik klikne gumb "Zavrti"
2. JS animira kolo (CSS transformacija)
3. Medtem AJAX zahteva iz strežnika rezultat
4. PHP backend izbere nagrado glede na verjetnosti
5. Backend zabeleži zadetek, zmanjša število spinov
```php
// REST API endpoint za vrtenje kolesa
function spin_wheel_endpoint() {
register_rest_route('wheel-of-fortune/v1', '/spin', array(
'methods' => 'POST',
'callback' => 'process_wheel_spin',
'permission_callback' => function() {
return is_user_logged_in();
}
));
}
add_action('rest_api_init', 'spin_wheel_endpoint');
function process_wheel_spin($request) {
$user_id = get_current_user_id();
$spins = get_user_meta($user_id, '_wheel_spins', true) ?: 0;
if ($spins <= 0) {
return new WP_Error('no_spins', 'Nimate več razpoložljivih vrtljajev', array('status' => 403));
}
// Preveri časovni interval med vrtljaji
global $wpdb;
$table_name = $wpdb->prefix . 'wheel_spins';
$last_spin = $wpdb->get_var($wpdb->prepare(
"SELECT last_spin_date FROM $table_name WHERE user_id = %d",
$user_id
));
$cooldown_minutes = get_option('wheel_cooldown_minutes', 0);
if ($cooldown_minutes > 0 && $last_spin) {
$time_diff = (strtotime(current_time('mysql')) - strtotime($last_spin)) / 60;
if ($time_diff < $cooldown_minutes) {
return new WP_Error(
'cooldown',
sprintf('Počakajte še %d minut pred naslednjim vrtenjem', ceil($cooldown_minutes - $time_diff)),
array('status' => 403)
);
}
}
// Izberi nagrado glede na verjetnosti
$prize = select_random_prize($prizes);
// Posodobi število spinov
update_user_meta($user_id, '_wheel_spins', $spins - 1);
// Posodobi tabelo wp_wheel_spins
$wpdb->update(
$table_name,
array(
'spins_available' => $spins - 1,
'last_spin_date' => current_time('mysql')
),
array('user_id' => $user_id)
);
// Zabeleži zadetek
$log_table = $wpdb->prefix . 'wheel_log';
$wpdb->insert(
$log_table,
array(
'user_id' => $user_id,
'prize_id' => $prize['id'],
'spin_date' => current_time('mysql'),
'redeemed' => 0
)
);
// Pošlji email obvestilo (če je vključeno)
if (get_option('wheel_send_emails', false)) {
send_prize_email($user_id, $prize);
}
return array(
'success' => true,
'prize' => $prize,
'remaining_spins' => $spins - 1,
'degree' => calculate_prize_degree($prize['id'], $prizes)
);
}
function calculate_prize_degree($prize_id, $prizes) {
// Izračunaj stopinje za animacijo kolesa
$prize_index = 0;
foreach ($prizes as $index => $prize) {
if ($prize['id'] == $prize_id) {
$prize_index = $index;
break;
}
}
$segment_size = 360 / count($prizes);
$degree = 360 - ($prize_index * $segment_size + $segment_size / 2);
// Dodaj naključno odstopanje znotraj segmenta
$degree += mt_rand(-($segment_size / 4), $segment_size / 4);
// Dodaj še nekaj obratov
$degree += 360 * 5;
return $degree;
}
```
## Administratorske nastavitve
- 📦 Seznam izdelkov, ki podeljujejo spin (ID + št. spinov)
- 🎁 Nastavitev nagrad (ime, opis, slika, verjetnost, barva)
- 🗳️ Max. spinov na uporabnika
- 🕒 Časovna omejitev (1 spin na X minut)
- 🔧 Reset spinov / bonus kampanje
- 📧 Nastavitve email obvestil
```php
function wheel_admin_menu() {
add_menu_page(
'Kolo Sreče',
'Kolo Sreče',
'manage_options',
'wheel-of-fortune',
'wheel_settings_page',
'dashicons-marker',
30
);
add_submenu_page(
'wheel-of-fortune',
'Nastavitve',
'Nastavitve',
'manage_options',
'wheel-of-fortune',
'wheel_settings_page'
);
add_submenu_page(
'wheel-of-fortune',
'Nagrade',
'Nagrade',
'manage_options',
'wheel-prizes',
'wheel_prizes_page'
);
add_submenu_page(
'wheel-of-fortune',
'Statistika',
'Statistika',
'manage_options',
'wheel-stats',
'wheel_stats_page'
);
}
add_action('admin_menu', 'wheel_admin_menu');
```
## Kratka koda
Kolo lahko prikažemo kjerkoli s pomočjo:
```
[wheel_of_fortune]
```
Možne opcije:
```
[wheel_of_fortune size="large" theme="dark"]
```
Implementacija kratke kode:
```php
function wheel_shortcode($atts) {
$atts = shortcode_atts(array(
'size' => 'medium', // small, medium, large
'theme' => 'light', // light, dark
), $atts);
// Preveri, če je uporabnik prijavljen
if (!is_user_logged_in()) {
return '<div class="wheel-login-required">Za sodelovanje v nagradni igri se morate <a href="' . wp_login_url(get_permalink()) . '">prijaviti</a>.</div>';
}
// Preveri, če ima uporabnik na voljo spine
$user_id = get_current_user_id();
$spins = get_user_meta($user_id, '_wheel_spins', true) ?: 0;
if ($spins <= 0) {
return '<div class="wheel-no-spins">Trenutno nimate razpoložljivih vrtljajev. Kupite izdelke za pridobitev novih vrtljajev.</div>';
}
// Naloži potrebne skripte in stile
wp_enqueue_style('wheel-of-fortune-css', plugin_dir_url(__FILE__) . 'assets/css/wheel.css');
wp_enqueue_script('wheel-of-fortune-js', plugin_dir_url(__FILE__) . 'assets/js/wheel.js', array('jquery'), '1.0', true);
wp_localize_script('wheel-of-fortune-js', 'wheelSettings', array(
'ajaxUrl' => rest_url('wheel-of-fortune/v1/spin'),
'nonce' => wp_create_nonce('wp_rest'),
'prizes' => get_wheel_prizes(),
'remainingSpins' => $spins
));
// Vrni HTML za kolo
ob_start();
include plugin_dir_path(__FILE__) . 'templates/wheel.php';
return ob_get_clean();
}
add_shortcode('wheel_of_fortune', 'wheel_shortcode');
```
## Varnost in integracije
- CSRF zaščita za AJAX klice (WordPress nonce)
- Preverjanje uporabniške prijave
- Integracija z WooCommerce
- Možna integracija z emailing sistemom (npr. MailPoet, Sendinblue)
- Preverjanje vlog in pravic uporabnikov
- Sanitizacija vnosov in validacija podatkov
## Možne razširitve
- 🎟️ Shranjevanje zgodovine zadetkov (WP tabelo wp_wheel_log)
- 🏆 Leaderboard: največ zadetkov / spinov
- 🔗 Integracija z zvestobnim sistemom (CLIP)
- 📱 Mobilna verzija (PWA)
- 🔔 Push obvestila za bonus spin
- 📊 Napredna analitika in poročila
- 🌐 Večjezična podpora
## Implementacija kolesa
Glede na priloženo sliko, bo kolo implementirano kot interaktivna SVG ali Canvas komponenta z naslednjimi lastnostmi:
### Struktura kolesa
- Kolo je razdeljeno na več segmentov (8-12)
- Vsak segment ima svojo barvo (modra, rdeča, siva)
- Segmenti vsebujejo besedilo z nagrado
- Kazalec na vrhu označuje zmagovalni segment
### CSS in JS implementacija
```css
.wheel-container {
position: relative;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.wheel {
width: 100%;
height: auto;
transform-origin: center;
transition: transform 5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.wheel-pointer {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
z-index: 10;
}
.wheel-segment {
transform-origin: center;
}
.wheel-segment-blue {
fill: #5DADE2;
}
.wheel-segment-red {
fill: #E74C3C;
}
.wheel-segment-gray {
fill: #D5D8DC;
}
.wheel-text {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
fill: white;
text-anchor: middle;
}
.wheel-button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #E74C3C;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.wheel-button:disabled {
background-color: #D5D8DC;
cursor: not-allowed;
}
.wheel-spins-counter {
text-align: center;
margin-top: 10px;
font-size: 16px;
}
.wheel-result {
text-align: center;
margin-top: 20px;
padding: 15px;
border-radius: 5px;
display: none;
}
.wheel-result.win {
background-color: #D5F5E3;
border: 1px solid #2ECC71;
}
```
```javascript
jQuery(document).ready(function($) {
var wheel = $('.wheel');
var button = $('.wheel-button');
var result = $('.wheel-result');
var spinning = false;
button.on('click', function() {
if (spinning) return;
spinning = true;
button.prop('disabled', true);
result.hide();
$.ajax({
url: wheelSettings.ajaxUrl,
method: 'POST',
beforeSend: function(xhr) {
xhr.setRequestHeader('X-WP-Nonce', wheelSettings.nonce);
},
success: function(response) {
if (response.success) {
// Animiraj kolo
wheel.css({
'transform': 'rotate(' + response.degree + 'deg)'
});
// Posodobi števec spinov
$('.wheel-spins-counter span').text(response.remaining_spins);
// Prikaži rezultat po končani animaciji
setTimeout(function() {
result.html('<h3>Čestitamo!</h3><p>Zadeli ste: ' + response.prize.name + '</p>');
result.addClass('win').show();
spinning = false;
if (response.remaining_spins > 0) {
button.prop('disabled', false);
}
}, 5500);
}
},
error: function(xhr) {
var errorMsg = 'Prišlo je do napake.';
if (xhr.responseJSON && xhr.responseJSON.message) {
errorMsg = xhr.responseJSON.message;
}
result.html('<p>' + errorMsg + '</p>');
result.removeClass('win').show();
spinning = false;
button.prop('disabled', false);
}
});
});
});
```
### SVG implementacija kolesa
```php
function generate_wheel_svg($prizes) {
$num_prizes = count($prizes);
$angle = 360 / $num_prizes;
$svg = '<svg viewBox="0 0 500 500" class="wheel">';
// Center point
$cx = 250;
$cy = 250;
$radius = 240;
// Generate segments
for ($i = 0; $i < $num_prizes; $i++) {
$prize = $prizes[$i];
$start_angle = $i * $angle;
$end_angle = ($i + 1) * $angle;
$start_rad = deg2rad($start_angle);
$end_rad = deg2rad($end_angle);
$x1 = $cx + $radius * cos($start_rad);
$y1 = $cy + $radius * sin($start_rad);
$x2 = $cx + $radius * cos($end_rad);
$y2 = $cy + $radius * sin($end_rad);
// Determine if the arc should be drawn as a large arc
$large_arc = $end_angle - $start_angle > 180 ? 1 : 0;
// Create the path for the segment
$path = "M{$cx},{$cy} L{$x1},{$y1} A{$radius},{$radius} 0 {$large_arc},1 {$x2},{$y2} Z";
// Determine the color class
$color_class = '';
switch ($prize['color']) {
case 'blue':
$color_class = 'wheel-segment-blue';
break;
case 'red':
$color_class = 'wheel-segment-red';
break;
default:
$color_class = 'wheel-segment-gray';
}
$svg .= "<path d='{$path}' class='wheel-segment {$color_class}' />";
// Add text to the segment
$text_angle = $start_angle + ($angle / 2);
$text_rad = deg2rad($text_angle);
$text_x = $cx + ($radius * 0.75) * cos($text_rad);
$text_y = $cy + ($radius * 0.75) * sin($text_rad);
// Rotate text to be readable
$text_rotate = $text_angle;
if ($text_angle > 90 && $text_angle < 270) {
$text_rotate += 180;
}
$svg .= "<text x='{$text_x}' y='{$text_y}' class='wheel-text' transform='rotate({$text_rotate}, {$text_x}, {$text_y})'>{$prize['name']}</text>";
}
// Add center circle
$svg .= "<circle cx='{$cx}' cy='{$cy}' r='50' fill='white' />";
$svg .= '</svg>';
return $svg;
}
```
## Namestitev in uporaba
### Namestitev vtičnika
1. Prenesite ZIP datoteko vtičnika
2. V WordPress administratorski plošči pojdite na "Vtičniki" > "Dodaj nov"
3. Kliknite "Naloži vtičnik" in izberite preneseno ZIP datoteko
4. Aktivirajte vtičnik
### Konfiguracija
1. V administratorski plošči pojdite na "Kolo Sreče" > "Nastavitve"
2. Konfigurirajte izdelke, ki podeljujejo spine
3. Nastavite časovne omejitve in druge možnosti
### Dodajanje nagrad
1. Pojdite na "Kolo Sreče" > "Nagrade"
2. Dodajte nove nagrade z imenom, opisom, verjetnostjo in barvo
3. Zagotovite, da skupna vsota verjetnosti ne presega 1.0
### Prikaz kolesa na strani
Dodajte kratko kodo `[wheel_of_fortune]` na želeno stran ali prispevek.
Za prilagoditev videza uporabite dodatne parametre:
```
[wheel_of_fortune size="large" theme="dark"]
```
### Prilagajanje velikosti kolesa
Če želite dodatno prilagoditi velikost kolesa, da bo vse prišlo na zaslon, lahko uporabite parameter `scale`:
- `scale-90`: Zmanjša kolo na 90% privzete velikosti
- `scale-80`: Zmanjša kolo na 80% privzete velikosti
- `scale-70`: Zmanjša kolo na 70% privzete velikosti
- `scale-60`: Zmanjša kolo na 60% privzete velikosti
- `scale-50`: Zmanjša kolo na 50% privzete velikosti
Primer: `[wheel_of_fortune scale="scale-70"]`
### Dodeljevanje spinov uporabnikom
Spine lahko uporabnikom dodelite na naslednje načine:
1. **Avtomatsko ob nakupu**: Nastavite število spinov za posamezne izdelke v nastavitvah vtičnika
2. **Ročno**: Uporabite stran "Uporabniki" v meniju "Kolo sreče" za ročno dodeljevanje spinov
## Nastavitve
### Splošne nastavitve
- **Zahtevaj prijavo**: Če je omogočeno, morajo biti uporabniki prijavljeni za vrtenje kolesa
- **Dovoli samo en spin na dan**: Če je omogočeno, lahko uporabniki zavrtijo kolo samo enkrat na dan
- **Pošlji e-pošto ob zmagi**: Če je omogočeno, se uporabniku pošlje e-pošta ob zmagi
### Nagrade
Upravljajte z nagradami, ki jih lahko uporabniki zadanejo:
- **Ime**: Ime nagrade
- **Opis**: Opis nagrade
- **Verjetnost**: Verjetnost, da uporabnik zadane to nagrado (v odstotkih)
- **Barva**: Barva segmenta na kolesu
- **Aktivna**: Ali je nagrada aktivna
### Izdelki
Nastavite število spinov, ki jih uporabnik prejme ob nakupu določenih izdelkov:
1. Vnesite ID izdelka
2. Nastavite število spinov
3. Kliknite "Dodaj izdelek"
## Statistika
Spremljajte statistiko vrtljajev in zadetkov:
- **Skupno število vrtljajev**: Skupno število vrtljajev vseh uporabnikov
- **Zadetki po nagradah**: Število zadetkov za vsako nagrado
- **Uporabniki z največ vrtljaji**: Seznam uporabnikov z največ vrtljaji
## Razvijalcem
### Filtri
Vtičnik ponuja naslednje filtre za prilagajanje:
- `wheel_of_fortune_prizes`: Prilagodite seznam nagrad
- `wheel_of_fortune_spin_result`: Prilagodite rezultat vrtljaja
- `wheel_of_fortune_email_content`: Prilagodite vsebino e-pošte ob zmagi
### Akcije
Vtičnik ponuja naslednje akcije:
- `wheel_of_fortune_before_spin`: Izvede se pred vrtljajem
- `wheel_of_fortune_after_spin`: Izvede se po vrtljaju
- `wheel_of_fortune_prize_won`: Izvede se, ko uporabnik zadane nagrado
## Pogosta vprašanja
### Kolo se ne prikaže na strani
Preverite naslednje:
1. Ali je kratka koda pravilno vstavljena?
2. Ali so nagrade nastavljene in aktivne?
3. Ali je uporabnik prijavljen (če je to zahtevano)?
4. Ali ima uporabnik na voljo spine?
5. Poskusite zmanjšati velikost kolesa z uporabo parametra `scale`: `[wheel_of_fortune scale="scale-80"]`
### Uporabnik ne prejme spinov ob nakupu
Preverite naslednje:
1. Ali je WooCommerce aktiviran?
2. Ali je izdelek pravilno nastavljen v nastavitvah vtičnika?
3. Ali je naročilo označeno kot "Zaključeno"?
## Podpora
Za podporo nas kontaktirajte na support@example.com """
"./admin/coupon-test.php" : "./admin/coupon-test.php" :
""" """
<?php <?php
@ -4311,7 +3559,7 @@ $wheels = $wpdb->get_results("SELECT * FROM $wheels_table ORDER BY id ASC", ARRA
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
padding: 0 40px; padding: 0 40px !important;
background: linear-gradient(135deg, #ff00c4, #00dfe9); background: linear-gradient(135deg, #ff00c4, #00dfe9);
color: #fff; color: #fff;
border: none; border: none;
@ -4326,7 +3574,10 @@ $wheels = $wpdb->get_results("SELECT * FROM $wheels_table ORDER BY id ASC", ARRA
height: 56px; height: 56px;
min-width: 140px; min-width: 140px;
letter-spacing: 2px; letter-spacing: 2px;
line-height: 1 !important;
text-shadow: 0 2px 8px #000, 0 0 10px #0cf101; text-shadow: 0 2px 8px #000, 0 0 10px #0cf101;
-webkit-appearance: none;
appearance: none;
} }
/* Button hover effect */ /* Button hover effect */
@ -4641,7 +3892,8 @@ $wheels = $wpdb->get_results("SELECT * FROM $wheels_table ORDER BY id ASC", ARRA
.wheel-container.scale-50 { .wheel-container.scale-50 {
transform: scale(0.5); transform: scale(0.5);
} """ }
"""
"./assets/js/wheel.js" : "./assets/js/wheel.js" :