Progress Upsell Bar

Motivační progress bary zobrazující zákazníkům, jak blízko jsou k dosažení cílů jako je doprava zdarma, slevy nebo dárky zdarma.

Co je Upsell Bar?

Progress Upsell Bar je rozšiřující modul, který zobrazuje progress bary (ukazatele pokroku) v košíku nebo na stránce pokladny.

Hlavní funkce:

Motivuje zákazníky k vyššímu nákupu
Zobrazuje pokrok směrem k dosažení cílů (doprava zdarma, slevy, dárky)
Podporuje více progress barů s různými cíli
Každý bar může mít více milníků (např. 500 Kč → doprava zdarma, 1000 Kč → 10% sleva, 2000 Kč → dárek)
Real-time AJAX aktualizace při změně košíku
Multi-currency podpora - automatická konverze cílových hodnot

Praktické příklady použití

Příklad 1: Doprava zdarma

"Přidej ještě za 250 Kč a máš dopravu zdarma!"

Příklad 2: Více milníků

Progress bar s 3 cíli:
- 500 Kč → Doprava zdarma
- 1000 Kč → 10% sleva
- 2000 Kč → Dárek zdarma

Příklad 3: Počet kusů

"Kup ještě 2 produkty a získej dárek zdarma!"

Jak aktivovat modul

WooCommerce → Discount Rules → Settings
Najděte sekci “Progress Upsell Bar”
Klikněte na “Add Upsell Bar”

Konfigurace Progress Baru

1. Základní nastavení

Type counting (Typ počítání)

Co: Určuje, co se bude počítat pro dosažení cíle.

Dostupné typy:

Cart subtotal in VAT - Mezisoučet košíku s DPH (před slevami)
Cart subtotal ex VAT - Mezisoučet košíku bez DPH (před slevami)
Cart Subtotal after discount in VAT - Mezisoučet po slevách s DPH
Cart Subtotal after discount ex VAT - Mezisoučet po slevách bez DPH
Items count - Počet položek v košíku (součet všech množství)
Cart weight - Celková váha košíku

Tip: Nejčastěji používané je Cart subtotal in VAT pro slevy a dopravy zdarma.

Display positions (Pozice zobrazení)

Co: Kde se progress bar zobrazí (multi-select, lze vybrat více pozic).

Dostupné pozice:

Stránka košíku:

Start of cart page - Na začátku stránky košíku
Before cart table - Před tabulkou košíku
After cart table - Za tabulkou košíku
End of cart page - Na konci stránky košíku

Stránka pokladny:

Start of checkout page - Na začátku pokladny
End of checkout page - Na konci pokladny

Tip: Doporučujeme Before cart table pro nejlepší viditelnost.

Confirmation message (Zpráva po dosažení všech cílů)

Co: Zpráva, která se zobrazí když zákazník dosáhne všech cílů.

Příklad:

"Skvělé, získal jsi všechny výhody pro svůj nákup!"

2. Nastavení cílů (Goals)

Každý progress bar může mít neomezený počet cílů. Cíle se zobrazují jako milníky na progress baru.

Goal label (Popisek cíle)

Krátký popisek zobrazený u ikony cíle.

Příklady:

“Doprava zdarma”
“10% sleva”
“Dárek zdarma”

Poznámka: Povinné pole.

Goal message (Zpráva cíle)

Motivační zpráva zobrazená když je cíl aktivní (ještě není dosažen).

Použití placeholderu:

{value} - Zbývající hodnota k dosažení cíle (automaticky formátováno)

Příklady:

"Přidej ještě za {value} a získáš dopravu zdarma!"
"Kup ještě {value} a získáš dárek zdarma!"

Tip: Pro Type counting = Items count se {value} zobrazí jako číslo (např. “3”), pro ostatní typy jako cena (např. “250 Kč”).

Goal value (Cílová hodnota)

Hodnota, kterou musí zákazník dosáhnout.

Příklady:

Pro Cart subtotal: 1000 (= 1000 Kč)
Pro Items count: 3 (= 3 položky)
Pro Cart weight: 5 (= 5 kg)

Poznámka: Povinné pole.

Goal icon (Ikona cíle)

Ikona zobrazená u cíle (v single módu i u milníku).

Dostupné ikony:

Shipping - Pro dopravu zdarma
Gift - Pro dárky
Discount - Pro slevy
No money - Pro cashback/kredity
Custom - Vlastní nahraný obrázek

Custom icon: Pokud vyberete Custom, zobrazí se pole pro nahrání vlastního obrázku (24×24 px doporučeno).

3. Conditional display (Podmíněné zobrazení)

Progress bar lze zobrazit jen při splnění určitých podmínek.

Enable conditional display

Zapnutí/vypnutí podmíněného zobrazení.

Když je vypnuto: Progress bar se zobrazí vždy. Když je zapnuto: Progress bar se zobrazí jen když jsou splněny podmínky.

Conditions (Podmínky)

Dostupné typy podmínek:

1. Date (Datum) Časové omezení zobrazení progress baru.

Příklad:

Typ: Date
Operátor: >= (od)
Hodnota: 2025-11-24

Výsledek: Progress bar se zobrazí od 24.11.2025 (Black Friday)

2. User role (Uživatelská role) Zobrazení jen pro určité role uživatelů.

Příklad:

Typ: User role
Operátor: Zahrnuje
Role: VIP, Premium

Výsledek: Progress bar jen pro VIP a Premium zákazníky

Logika podmínek:

Všechny podmínky musí být splněny (AND logika)

Vizuální nastavení (globální)

Background color (Barva pozadí)

Barva pozadí progress baru.

Default: #ffffff (bílá)

Text color (Barva textu)

Barva textu zprávy.

Tip: Ponechte prázdné pro výchozí barvu tématu

Icon color (Barva ikony)

Barva ikony u nedosažených cílů.

Default: #000000 (černá)

Icon color completed (Barva ikony dokončeno)

Barva ikony u dosažených cílů.

Default: #ffffff (bílá)

Remaining progressbar color (Barva zbývajícího progress baru)

Barva pozadí progress baru (neaktivní část).

Default: #eeeeee (světle šedá)

Current progressbar color (Barva aktuálního progress baru)

Barva aktivní části progress baru.

Default: #008B8B (tyrkysová)

Jak funguje progress bar

Single mode (1 cíl)

Když má progress bar jen 1 cíl, zobrazí se jako jednoduchý progress bar s ikonou a zprávou.

Příklad:

[Ikona] "Přidej ještě za 250 Kč a získáš dopravu zdarma!"
[████████░░] 75%

Multi mode (více cílů)

Když má progress bar více cílů, zobrazí se jako progress bar s milníky.

Příklad:

"Přidej ještě za 250 Kč a získáš dopravu zdarma!"

[████████░░|░░░░░░░░|░░░░░░░░]
   500 Kč    1000 Kč   2000 Kč
  Doprava   10% sleva  Dárek

AJAX aktualizace

Progress bar se automaticky aktualizuje při každé změně košíku:

Přidání produktu
Odebrání produktu
Změna množství
Změna dopravy
Aplikování kuponů

Animace:

Plynulá animace pokroku
Sekvenční animace milníků (0.6s delay mezi cíli)
Animace při dosažení cíle

Shortcode

Progress bar lze vložit do vlastní pozice pomocí shortcodu.

Základní použití

[wpify_progress_upsell_bar]

Zobrazí všechny nakonfigurované progress bary.

Konkrétní bar

[wpify_progress_upsell_bar id="0"]

Zobrazí jen progress bar s indexem 0 (první bar).

Tip: Indexy začínají od 0 (první bar = 0, druhý = 1, atd.).

→ Přehled všech shortcodes

Multi-currency podpora

Progress bar má vestavěnou podporu pro multi-currency pluginy.

Automatická konverze:

Cílové hodnoty (Goal value)
Zbývající hodnoty ({value})
Podmínky (cart subtotal, total)

Podporované pluginy:

WPML Multicurrency
YITH Multicurrency
Aelia Currency Switcher

Příklad:

Nastavený cíl v CZK: 1000 Kč
Při přepnutí na EUR (kurz 1:25): 40 EUR

Zpráva: "Buy for €10 more to get free shipping!" (automaticky přepočítáno)

Praktické příklady konfigurace

Příklad 1: Jednoduchá doprava zdarma

Konfigurace:

Type counting: Cart subtotal in VAT
Display positions: Before cart table

Goal 1:
- Label: "Doprava zdarma"
- Message: "Přidej ještě za {value} a získáš dopravu zdarma!"
- Value: 1000
- Icon: Shipping

Confirmation message: "Máš dopravu zdarma!"

Výsledek: Progress bar s jedním cílem zobrazující pokrok k 1000 Kč pro dopravu zdarma.

Příklad 2: Více milníků (doprava + sleva + dárek)

Konfigurace:

Type counting: Cart subtotal in VAT
Display positions: Before cart table

Goal 1:
- Label: "Doprava zdarma"
- Message: "Přidej ještě za {value} a získáš dopravu zdarma!"
- Value: 500
- Icon: Shipping

Goal 2:
- Label: "10% sleva"
- Message: "Přidej ještě za {value} a získáš 10% slevu!"
- Value: 1000
- Icon: Discount

Goal 3:
- Label: "Dárek zdarma"
- Message: "Přidej ještě za {value} a získáš dárek zdarma!"
- Value: 2000
- Icon: Gift

Confirmation message: "Skvělé, získal jsi všechny výhody!"

Výsledek: Progress bar se 3 milníky motivující k vyššímu nákupu.

Příklad 3: Počet kusů pro dárek

Konfigurace:

Type counting: Items count
Display positions: Before cart table

Goal 1:
- Label: "Dárek zdarma"
- Message: "Kup ještě {value} a získáš dárek zdarma!"
- Value: 5
- Icon: Gift

Confirmation message: "Získal jsi dárek zdarma!"

Výsledek: Progress bar zobrazující, kolik položek ještě potřebuje zákazník koupit.

Příklad 4: VIP progress bar (jen pro registrované)

Konfigurace:

Type counting: Cart subtotal in VAT
Display positions: Before cart table

Goal 1:
- Label: "VIP sleva 20%"
- Message: "Ještě {value} a získáš VIP slevu 20%!"
- Value: 3000
- Icon: Discount

Conditional display:
Enable conditional display: Yes
Conditions:
  - Type: User role
  - Compare: Zahrnuje
  - Roles: VIP, Premium

Výsledek: Progress bar se zobrazí jen VIP a Premium zákazníkům.

Příklad 5: Black Friday časově omezený

Konfigurace:

Type counting: Cart subtotal in VAT
Display positions: Before cart table

Goal 1:
- Label: "Black Friday sleva"
- Message: "Přidej ještě za {value} a získáš Black Friday slevu 30%!"
- Value: 2000
- Icon: Discount

Conditional display:
Enable conditional display: Yes
Conditions:
  - Type: Date
  - Compare: >= (od)
  - Date: 2025-11-24 00:00

  - Type: Date
  - Compare: <= (do)
  - Date: 2025-11-25 23:59

Výsledek: Progress bar se zobrazí jen během Black Friday (24.-25.11.2025).

Více progress barů najednou

Plugin podporuje neomezený počet progress barů.

Použití:

Různé cíle pro různé zákazníky (VIP, běžní)
Různé časové akce (Black Friday, Vánoce)
Různé pozice (košík vs. pokladna)

Příklad:

Bar 1: Doprava zdarma od 500 Kč (všichni zákazníci)
Bar 2: Extra VIP sleva od 2000 Kč (jen VIP)
Bar 3: Vánoční dárek od 1500 Kč (jen během prosince)

Poznámka: Všechny aktivní bary se zobrazí ve vybraných pozicích.

Často kladené otázky

Zobrazí se progress bar na produktové stránce?

Ne. Progress bar se zobrazuje jen na stránce košíku a pokladny (dle nastavení Display positions).

Pro zobrazení na produktové stránce použijte shortcode v page builderu nebo customizaci šablony.

Jak nastavit progress bar jen pro určité produkty?

Progress bar nemá filtr produktů (jako discount pravidla).

Workaround: Použijte podmínku Cart subtotal s minimální hodnotou odpovídající ceně produktů, které chcete motivovat.

Funguje progress bar s AJAX košíkem?

Ano. Progress bar používá WooCommerce fragments API pro real-time AJAX aktualizace.

Kompatibilní s:

WooCommerce AJAX košík
Side cart pluginy
Mini cart widgety

Jak se progress bar chová při více milnících?

Sekvenční zobrazování:

Nejdřív se zobrazí zpráva pro nejbližší nedosažený cíl
Při dosažení cíle se animace posune na další cíl
Když jsou dosaženy všechny cíle, zobrazí se Confirmation message

Animace:

Plynulé animace pokroku
0.6s delay mezi milníky při více změnách
Animace ikon při dosažení

Podporuje progress bar custom CSS?

Ano. Progress bar používá CSS proměnné pro snadnou customizaci.

Dostupné CSS proměnné:

:root {
  --wpify-upsell-bar-bg-color: #ffffff;
  --wpify-upsell-bar-text-color: inherit;
  --wpify-upsell-bar-icon-color: #000000;
  --wpify-upsell-bar-icon-color-completed: #ffffff;
  --wpify-upsell-bar-progress-color: #008B8B;
  --wpify-upsell-bar-remain-color: #eeeeee;
}

Custom CSS příklad:

.wpify-upsell-bar {
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

Jaký je rozdíl mezi single a multi mode?

Single mode (1 cíl):

Jednoduchý progress bar
Ikona zobrazena vlevo
Zpráva nad progress barem

Multi mode (více cílů):

Progress bar s milníky
Ikony u každého milníku
Zobrazení hodnot milníků
Labels pod ikonami

Poznámka: Plugin automaticky detekuje, kolik cílů má bar a přepne mezi módy.