Zobrazení obchodních podmínek v popup okně

Detail obchodních podmínek se v pokladně zobrazí v rozbalovacím boxu. Ukážeme si, jak zobrazit podmínky v popup okně.

Dnes to nebude o kódu, i když by nebylo složité takový popup udělat, viz. https://codepen.io/4him/pen/GQgEGy, ale budeme také jednou trochu líní a sáhneme po pluginu.

Nakonec jsem změnil názor, protože pluginy, jenž jsem měl na mysli používají jQuery a poslední dobou mám tendenci tuto knihovnu spíše eliminovat. Pluginy uvedu na konci.

Postup pro vytvoření popupu pro obchodní podmínky je jednoduchý, ale musíme začít úpravou kódu WooCommerce.

1. Odstraníme box s obsahem podmínek

Protože se nám po kliknutí na odkaz na podmínky, rozbalí šedě podbarvený box, musíme jej odstranit.

Stačí jednoduché odebrání akce:

remove_action( 'woocommerce_checkout_terms_and_conditions', 'wc_terms_and_conditions_page_content', 30 );

2. Změníme html kód obsahu odkazu

Připravíme si funkci, s upraveným html

function custom_terms_link(){

    $link = '<a href="#" class="woocommerce-terms-and-conditions-link" id="woocommerce-terms-and-conditions-link">' . __( 'terms and conditions', 'woocommerce' ) . '</a>';

    echo sprintf( __( 'I have read and agree to the website %s', 'woocommerce' ), $link );

}

Důležité je použití originálních řetězců WooCommerce, ať nerozbijete již hotové překlady.

Jako druhý krok musíme tuto funkci přidat do šablony pro obchodní podmínky. Ve vaší aktivní šabloně vytvoříte složku woocommerce/checkout a do ní zkopírujtete soubor terms.php.

V něm najdete funkci wc_terms_and_conditions_checkbox_text() a nahradíte ji novou funkcí custom_tems_link().

3. Vytvoření popupu

Obsah stránky Obchodní podmínky, který se načítal do šedého boxu nyní přesuneme do skrytého divu a použijeme jej pro popup.

add_action( 'wp_footer', 'checkout_terms_popup' );
function checkout_terms_popup() {

    if( is_checkout() ) {
        $terms_page_id = wc_terms_and_conditions_page_id();

        if ( ! $terms_page_id ) {
            return;
        }

        $page = get_post( $terms_page_id );

        if ( $page && 'publish' === $page->post_status && $page->post_content && ! has_shortcode( $page->post_content, 'woocommerce_checkout' ) ) {
            
            $html = '
                <div id="popupBox" class="white_content">
                    <h1 style="display:inline-block; float:left">' . $page->post_title . '</h1>
                    <a href="#" id="popupBoxClose" class="textright close">X</a>
                    <p style="clear: both"></p>
                    ' . wp_kses_post( wc_format_content( $page->post_content ) ) . '
                </div>
                <div id="popupBackground" class="black_overlay"></div>';
    
                    echo $html;

        }
    }
}

4. Přidáme trošku css a javascriptu

Do šablony si přidáme css a js soubor pomocí enqueue:

wp_enqueue_style( 'terms-popup', get_stylesheet_directory_uri() . '/css/terms-popup.css', array(), '126' );
    wp_enqueue_script( 'terms-popup', get_stylesheet_directory_uri() . '/js/terms-popup.js', array('jquery'), '132', true);

Do js souboru vložíme následující kód:

document.addEventListener( 'click', function( event ){
    
    var targetId = event.target.getAttribute('id');

    if ( targetId == 'woocommerce-terms-and-conditions-link' ) {
        event.preventDefault();

        var topOffset = window.scrollY;

        document.getElementById( 'popupBox').style.top = topOffset + 'px';
        document.getElementById( 'popupBox').style.display = 'block';
        document.getElementById( 'popupBackground').style.display = 'block';
    }
    if ( targetId == 'popupBoxClose' ) {
        event.preventDefault();
        document.getElementById( 'popupBox').style.display = 'none';
        document.getElementById( 'popupBackground').style.display = 'none';
    }

});  

a do css si přidáme trochu stylů, aby se popup správně zobrazoval:

body{ position:relative; }
.black_overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.7;
    opacity:.70;
    filter: alpha(opacity=70);
}
.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 500px;
    padding: 16px;
    border: 2px solid black;
    background-color: white;
    z-index:1002;
    overflow: scroll;
    margin-top:50px;
}
.textright {
    float: right;
}               
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 15px;
    text-align: center;
    top: 10px;
    width: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    color: white;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 2px 2px 3px #000;
    -webkit-box-shadow: 2px 2px 3px #000;
    box-shadow: 2px 2px 3px #000;
}               

Styly si samozřejmě můžeme upravit tak, aby to co nejvíce korespondovalo s designem šablony a máme hotovo.

Čtěte  Jak odstranit řazení produktů ve WooCommerce

Po kliknutí na obchodní podmínky se zobrazí popup s obchodními podmínkami.

5. Pluginy pro vytvoření poupu

Na začátku jsem psal o pluginech, které popup vytvoří. Přestože se jedná o poměrně jednoduchou úpravu, řada lidí raději sáhne po pluginu, takže zde jsou dva, které jsou zdarma na WordPress.org.

Terms and Conditions Popup for WooCommerce

Stažení pluginu

WooCommerce Checkout Terms Conditions Popup

Stažení pluginu

6. Závěr

Jak vidíte, upravit šablonu tak, aby se zobrazovaly obchodní podmínky v popupu není vůbec složité. Stačí trochu kódu a jeden css a jeden js soubor. Rozhodně lepší, než cpát do WordPressu další pluginy.

Související články

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Související články

Přidejte komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Chcete mít přehled o dění ve světě WordPressu?

Přímo do vašeho emailu

Pravidelný přehled o novinkách, trendech a událostech, které se točí kolem WordPressu. Souhrn toho nejzajímavějšího od nás i ze zahraničí.