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.
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
WooCommerce Checkout Terms Conditions Popup
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
