Přeskočit na hlavní obsah

WordPress integrace

Navod na integraci rezervacniho systemu do WordPressu.

Moznosti integrace​

1. Blok Vlastni HTML (nejjednodussi)​

  1. Upravte stranku kde chcete rezervacni formular
  2. Pridejte blok Vlastni HTML
  3. Vlozte embed kod:
<iframe
  src="https://zarezervujto.cz/vas-projekt-slug"
  width="100%"
  height="700"
  frameborder="0"
  style="border: none; border-radius: 12px;"
></iframe>

2. Shortcode​

Pridejte do souboru functions.php vasi sablony:

function zarezervujto_shortcode($atts) {
    $atts = shortcode_atts([
        'slug' => '',
        'height' => '700'
    ], $atts);

    if (empty($atts['slug'])) {
        return '<p>Chyba: Zadejte slug projektu</p>';
    }

    return sprintf(
        '<iframe src="https://zarezervujto.cz/%s" width="100%%" height="%spx" frameborder="0" style="border: none; border-radius: 12px;"></iframe>',
        esc_attr($atts['slug']),
        esc_attr($atts['height'])
    );
}
add_shortcode('zarezervujto', 'zarezervujto_shortcode');

Pouziti v editoru:

[zarezervujto slug="vas-projekt-slug" height="700"]

3. Elementor widget​

Pro Elementor pouzijte widget HTML a vlozte embed kod.

4. Gutenberg blok​

Pro vlastni Gutenberg blok vytvorte plugin:

<?php
/**
 * Plugin Name: Zarezervujto Block
 * Description: Gutenberg blok pro rezervacni system
 * Version: 1.0.0
 */

function zarezervujto_block_init() {
    register_block_type(__DIR__ . '/build');
}
add_action('init', 'zarezervujto_block_init');

Reseni problemu​

Widget se nezobrazuje​

Pricina: WordPress muze blokovat iframe z bezpecnostnich duvodu.

Reseni: Pridejte do functions.php:

function allow_zarezervujto_iframe($content) {
    return str_replace(
        '<iframe src="https://zarezervujto.cz',
        '<iframe loading="lazy" src="https://zarezervujto.cz',
        $content
    );
}
add_filter('the_content', 'allow_zarezervujto_iframe');

Widget ma spatnou vysku​

Reseni: Upravte CSS:

/* Pridejte do Vzhled > Upravit CSS */
.wp-block-html iframe {
    min-height: 700px;
}

@media (max-width: 768px) {
    .wp-block-html iframe {
        min-height: 600px;
    }
}

Konflikty s tema​

Nektera temata mohou zpusobit problemy se styly. Pridejte:

.zarezervujto-container {
    all: initial;
}

.zarezervujto-container iframe {
    width: 100%;
    height: 700px;
    border: none;
    border-radius: 12px;
}

A obalte iframe:

<div class="zarezervujto-container">
  <iframe src="https://zarezervujto.cz/vas-projekt-slug"></iframe>
</div>

WooCommerce integrace​

Pro integraci s WooCommerce (napr. pridani rezervace jako produktu):

1. Vytvorte produkt "Rezervace"​

  1. Pridejte novy produkt
  2. Nastavte cenu na 0 Kc
  3. V popisu vlozte embed kod

2. Webhook pro potvrzeni platby​

Nastavte webhook v WooCommerce pro upozorneni pri dokonceni objednavky:

add_action('woocommerce_order_status_completed', function($order_id) {
    $order = wc_get_order($order_id);

    // Poslat do Zarezervujto API
    wp_remote_post('https://api.zarezervujto.cz/api/v1/vas-projekt/reservations', [
        'headers' => [
            'X-API-Key' => 'vas_api_klic',
            'Content-Type' => 'application/json'
        ],
        'body' => json_encode([
            'email' => $order->get_billing_email(),
            'firstName' => $order->get_billing_first_name(),
            'lastName' => $order->get_billing_last_name(),
            'phone' => $order->get_billing_phone(),
            // ... dalsi data z objednavky
        ])
    ]);
});

Cachovani​

Pokud pouzivate cachovaci plugin (WP Super Cache, W3 Total Cache), vylucte stranku s rezervacnim formularaem z cache:

WP Super Cache​

Pridejte do nastaveni:

/rezervace/
/booking/

W3 Total Cache​

V Page Cache → Never cache pages pridejte URL stranky.

Bezpecnost​

CSP hlavicky​

Pokud pouzivate Content Security Policy, pridejte:

frame-src https://zarezervujto.cz;

CORS​

Nase API automaticky povoluje pozadavky z vasich domen. Pokud mate problemy, kontaktujte podporu.