Admin — Katalog produktů

Embed kód pro Shoptet

Host URL:
Vložte do pole itemprop="about" na stránce v Shoptetu.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&family=Oswald:wght@700&family=Bebas+Neue&family=Anton&family=Teko:wght@700&family=Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://www.netfotbal.cz/css/style.css">

<div class="content-to-migrate">
<nav class="step-indicator">
        <button class="step-btn active" data-step="1"><span class="step-num">1</span> Sestavit</button>
        <button class="step-btn" data-step="2"><span class="step-num">2</span> Personalizace</button>
        <button class="step-btn" data-step="3"><span class="step-num">3</span> Souhrn</button>
    </nav>
<div class="container-configurator">

        <!-- ============ STEP 1 ============ -->
        <div id="step-1" class="step-panel active">
            <div class="step1-intro">
                <h2>Sestavte si sadu</h2>
                <p>Vyberte značku a poté dres, trenýrky a stulpny.</p>
            </div>
            <div class="brand-picker" id="brand-picker">
                <div class="brand-option selected" data-brand="adidas">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/2/20/Adidas_Logo.svg" alt="Adidas" class="brand-logo">
                    <span class="brand-name">Adidas</span>
                </div>
                <div class="brand-option" data-brand="nike">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/Logo_NIKE.svg" alt="Nike" class="brand-logo">
                    <span class="brand-name">Nike</span>
                </div>
            </div>
            <div id="kit-grid" class="kit-grid">
                <!-- Cards rendered by JS -->
            </div>
            <div class="nav-buttons step1-nav">
                <div class="step1-price-summary" id="step1-price-summary"></div>
                <button class="btn btn-primary" id="btn-next-1">Pokračovat: Hráči →</button>
            </div>
        </div>

        <!-- ============ STEP 2 ============ -->
        <div id="step-2" class="step-panel">

            <!-- FONT PICKER -->
            <div class="step2-global">
                <div class="font-picker-header">
                    <span class="radio-label">Styl písma potisku:</span>
                    <input type="text" id="font-preview-text" class="font-preview-input" value="NOVÁK" maxlength="10" placeholder="Náhled textu">
                </div>
                <div class="font-picker" id="font-picker">
                    <div class="font-option selected" data-font="Oswald">
                        <span class="font-preview" style="font-family:'Oswald',sans-serif;">NOVÁK</span>
                        <span class="font-name">Oswald</span>
                    </div>
                    <div class="font-option" data-font="Bebas Neue">
                        <span class="font-preview" style="font-family:'Bebas Neue',sans-serif;">NOVÁK</span>
                        <span class="font-name">Bebas Neue</span>
                    </div>
                    <div class="font-option" data-font="Anton">
                        <span class="font-preview" style="font-family:'Anton',sans-serif;">NOVÁK</span>
                        <span class="font-name">Anton</span>
                    </div>
                    <div class="font-option" data-font="Teko">
                        <span class="font-preview" style="font-family:'Teko',sans-serif;">NOVÁK</span>
                        <span class="font-name">Teko</span>
                    </div>
                    <div class="font-option" data-font="Russo One">
                        <span class="font-preview" style="font-family:'Russo One',sans-serif;">NOVÁK</span>
                        <span class="font-name">Russo One</span>
                    </div>
                </div>
            </div>

            <!-- POTISK SECTION -->
            <div class="step2-print-section">
                <h3 class="print-section-title">Potisk</h3>

                <!-- Název klubu -->
                <div class="print-option-row">
                    <label class="print-option-check"><input type="checkbox" id="print-clubname-enable"> Potisk názvu klubu <span class="logo-price-tag">+30 Kč/ks</span></label>
                    <div class="print-clubname-body" id="print-clubname-body" style="display:none;">
                        <div class="print-clubname-input-wrap">
                            <label class="print-clubname-label">Název:</label>
                            <input type="text" id="print-clubname-text" class="print-clubname-input" maxlength="20" placeholder="FC PŘÍKLAD" value="">
                        </div>
                    </div>
                </div>

                <!-- Jméno hráče -->
                <div class="print-option-row">
                    <label class="print-option-check"><input type="checkbox" id="print-playername-enable"> Potisk jména hráče <span class="logo-price-tag">+20 Kč/ks</span></label>
                </div>

                <!-- Číslo hráče -->
                <div class="print-option-row">
                    <label class="print-option-check"><input type="checkbox" id="print-playernumber-enable"> Potisk čísla hráče <span class="logo-price-tag">+30 Kč/ks</span></label>
                    <div class="print-number-body" id="print-number-body" style="display:none;">
                        <div class="logo-where">
                            <label><input type="checkbox" id="number-on-jersey" checked> Na dresy</label>
                            <label><input type="checkbox" id="number-on-shorts"> Na trenýrky</label>
                        </div>
                    </div>
                </div>

                <!-- Logo -->
                <div class="print-option-row">
                    <label class="print-option-check"><input type="checkbox" id="logo-enable"> Potisk loga klubu</label>
                    <div class="logo-section-body" id="logo-section-body" style="display:none;">
                        <div class="logo-where">
                            <label><input type="checkbox" id="logo-on-jersey" checked> Na dresy <span class="logo-price-tag">+50 Kč/ks</span></label>
                            <label><input type="checkbox" id="logo-on-shorts"> Na trenýrky <span class="logo-price-tag">+30 Kč/ks</span></label>
                        </div>
                        <div class="logo-upload-area">
                            <div id="logo-upload-content"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- DRESY -->
            <div class="order-section" data-cat="jersey">
                <div class="order-section-header">
                    <h2 id="order-title-jersey">Dresy</h2>
                    <span class="order-count" id="order-count-jersey"></span>
                    <span class="order-section-total" id="order-total-jersey"></span>
                </div>
                <div class="players-table-wrap">
                    <table class="players-table">
                        <thead>
                        <tr></tr>
                        </thead>
                        <tbody id="order-tbody-jersey"></tbody>
                    </table>
                </div>
                <div class="table-actions"></div>
            </div>

            <!-- TRENÝRKY -->
            <div class="order-section" data-cat="shorts">
                <div class="order-section-header">
                    <h2 id="order-title-shorts">Trenýrky</h2>
                    <span class="order-count" id="order-count-shorts"></span>
                    <span class="order-section-total" id="order-total-shorts"></span>
                </div>
                <div class="players-table-wrap">
                    <table class="players-table">
                        <thead>
                        <tr></tr>
                        </thead>
                        <tbody id="order-tbody-shorts"></tbody>
                    </table>
                </div>
                <div class="table-actions"></div>
            </div>

            <!-- STULPNY -->
            <div class="order-section" data-cat="socks">
                <div class="order-section-header">
                    <h2 id="order-title-socks">Stulpny</h2>
                    <span class="order-count" id="order-count-socks"></span>
                    <span class="order-section-total" id="order-total-socks"></span>
                </div>
                <div class="players-table-wrap">
                    <table class="players-table">
                        <thead>
                        <tr></tr>
                        </thead>
                        <tbody id="order-tbody-socks"></tbody>
                    </table>
                </div>
                <div class="table-actions"></div>
            </div>

            <div class="nav-buttons step2-nav">
                <div class="step2-order-total" id="step2-order-total"></div>
                <div class="step2-nav-btns">
                    <button class="btn btn-secondary" id="btn-back-2">← Zpět</button>
                    <button class="btn btn-primary" id="btn-next-2">Pokračovat: Souhrn →</button>
                </div>
            </div>
        </div>

        <!-- ============ STEP 3 ============ -->
        <div id="step-3" class="step-panel">
            <div class="error-banner"></div>

            <div class="summary-section">
                <h2>Vybraná sada</h2>
                <div id="kit-preview" class="kit-preview">
                    <!-- Rendered by JS -->
                </div>
            </div>

            <div class="summary-section">
                <h2>Objednávka</h2>
                <div id="order-summary-detail"></div>
            </div>

            <div class="summary-section">
                <h2>Přehled velikostí</h2>
                <div id="size-breakdown" class="size-breakdown"></div>
            </div>

            <div class="summary-section">
                <h2>Cenová kalkulace</h2>
                <div id="pricing-summary" class="pricing-summary"></div>
            </div>

            <div class="summary-section">
                <h3>Údaje o klubu</h3>
                <div class="club-details">
                    <div class="field">
                        <label for="club-name">Název klubu</label>
                        <input type="text" id="club-name" placeholder="FC Příklad">
                    </div>
                    <div class="field">
                        <label for="club-contact">Kontaktní osoba</label>
                        <input type="text" id="club-contact" placeholder="Jan Novák">
                    </div>
                    <div class="field">
                        <label for="club-email">E-mail</label>
                        <input type="email" id="club-email" placeholder="jan@priklad.cz">
                    </div>
                    <div class="field full-width">
                        <label for="club-note">Poznámka</label>
                        <textarea id="club-note" placeholder="Poznámka k objednávce..."></textarea>
                    </div>
                </div>
            </div>

            <div class="nav-buttons">
                <button class="btn btn-secondary" id="btn-back-3">← Zpět na hráče</button>
                <button class="btn btn-primary" id="btn-submit">✓ Odeslat objednávku</button>
            </div>
        </div>

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://www.netfotbal.cz/js/app.js"></script>
Katalog produktů — Editor

Množstevní slevy

Importovat JSON

Výsledný kits.json

Embed kód pro Shoptet
