{"id":5806,"date":"2021-01-15T20:12:56","date_gmt":"2021-01-15T20:12:56","guid":{"rendered":"https:\/\/musilda.cz\/?p=5806"},"modified":"2021-01-15T20:12:56","modified_gmt":"2021-01-15T20:12:56","slug":"zobrazeni-obchodnich-podminek-v-popup-okne","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/zobrazeni-obchodnich-podminek-v-popup-okne\/","title":{"rendered":"Zobrazen\u00ed obchodn\u00edch podm\u00ednek v popup okn\u011b"},"content":{"rendered":"\n

Detail obchodn\u00edch podm\u00ednek se v pokladn\u011b zobraz\u00ed v rozbalovac\u00edm boxu. Uk\u00e1\u017eeme si, jak zobrazit podm\u00ednky v popup okn\u011b. <\/p>\n\n\n\n

Dnes to nebude o k\u00f3du, i kdy\u017e by nebylo slo\u017eit\u00e9 takov\u00fd popup ud\u011blat, viz. https:\/\/codepen.io\/4him\/pen\/GQgEGy<\/a>, ale budeme tak\u00e9 jednou trochu l\u00edn\u00ed a s\u00e1hneme po pluginu. <\/s><\/p>\n\n\n\n

Nakonec jsem zm\u011bnil n\u00e1zor, proto\u017ee pluginy, jen\u017e jsem m\u011bl na mysli pou\u017e\u00edvaj\u00ed jQuery a posledn\u00ed dobou m\u00e1m tendenci tuto knihovnu sp\u00ed\u0161e eliminovat. Pluginy uvedu na konci.<\/p>\n\n\n\n

Postup pro vytvo\u0159en\u00ed popupu pro obchodn\u00ed podm\u00ednky je jednoduch\u00fd, ale mus\u00edme za\u010d\u00edt \u00fapravou k\u00f3du WooCommerce.<\/p>\n\n\n\n

1. Odstran\u00edme box s obsahem podm\u00ednek<\/h2>\n\n\n\n

Proto\u017ee se n\u00e1m po kliknut\u00ed na odkaz na podm\u00ednky, rozbal\u00ed \u0161ed\u011b podbarven\u00fd box, mus\u00edme jej odstranit. <\/p>\n\n\n\n

Sta\u010d\u00ed jednoduch\u00e9 odebr\u00e1n\u00ed akce:<\/p>\n\n\n\n

remove_action(\u00a0'woocommerce_checkout_terms_and_conditions',\u00a0'wc_terms_and_conditions_page_content',\u00a030\u00a0);<\/pre>\n\n\n\n

2. Zm\u011bn\u00edme html k\u00f3d obsahu odkazu<\/h2>\n\n\n\n

P\u0159iprav\u00edme si funkci, s upraven\u00fdm html<\/p>\n\n\n\n

function\u00a0custom_terms_link(){\n\n\u00a0\u00a0\u00a0\u00a0$link\u00a0=\u00a0'<a\u00a0href=\"#\"\u00a0class=\"woocommerce-terms-and-conditions-link\"\u00a0id=\"woocommerce-terms-and-conditions-link\">'\u00a0.\u00a0__(\u00a0'terms\u00a0and\u00a0conditions',\u00a0'woocommerce'\u00a0)\u00a0.\u00a0'<\/a>';\n\n\u00a0\u00a0\u00a0\u00a0echo\u00a0sprintf(\u00a0__(\u00a0'I\u00a0have\u00a0read\u00a0and\u00a0agree\u00a0to\u00a0the\u00a0website\u00a0%s',\u00a0'woocommerce'\u00a0),\u00a0$link\u00a0);\n\n}<\/pre>\n\n\n\n

D\u016fle\u017eit\u00e9 je pou\u017eit\u00ed origin\u00e1ln\u00edch \u0159et\u011bzc\u016f WooCommerce, a\u0165 nerozbijete ji\u017e hotov\u00e9 p\u0159eklady.<\/p>\n\n\n\n

Jako druh\u00fd krok mus\u00edme tuto funkci p\u0159idat do \u0161ablony pro obchodn\u00ed podm\u00ednky. Ve va\u0161\u00ed aktivn\u00ed \u0161ablon\u011b vytvo\u0159\u00edte slo\u017eku woocommerce\/checkout a do n\u00ed zkop\u00edrujtete soubor terms.php. <\/p>\n\n\n\n

V n\u011bm najdete funkci wc_terms_and_conditions_checkbox_text() a nahrad\u00edte ji novou funkc\u00ed custom_tems_link(). <\/p>\n\n\n\n

3. Vytvo\u0159en\u00ed popupu<\/h2>\n\n\n\n

Obsah str\u00e1nky Obchodn\u00ed podm\u00ednky, kter\u00fd se na\u010d\u00edtal do \u0161ed\u00e9ho boxu nyn\u00ed p\u0159esuneme do skryt\u00e9ho divu a pou\u017eijeme jej pro popup.<\/p>\n\n\n\n

add_action(\u00a0'wp_footer',\u00a0'checkout_terms_popup'\u00a0);\nfunction\u00a0checkout_terms_popup()\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0if(\u00a0is_checkout()\u00a0)\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$terms_page_id\u00a0=\u00a0wc_terms_and_conditions_page_id();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(\u00a0!\u00a0$terms_page_id\u00a0)\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$page\u00a0=\u00a0get_post(\u00a0$terms_page_id\u00a0);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(\u00a0$page\u00a0&&\u00a0'publish'\u00a0===\u00a0$page->post_status\u00a0&&\u00a0$page->post_content\u00a0&&\u00a0!\u00a0has_shortcode(\u00a0$page->post_content,\u00a0'woocommerce_checkout'\u00a0)\u00a0)\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$html\u00a0=\u00a0'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0id=\"popupBox\"\u00a0class=\"white_content\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1\u00a0style=\"display:inline-block;\u00a0float:left\">'\u00a0.\u00a0$page->post_title\u00a0.\u00a0'<\/h1>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a\u00a0href=\"#\"\u00a0id=\"popupBoxClose\"\u00a0class=\"textright\u00a0close\">X<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p\u00a0style=\"clear:\u00a0both\"><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'\u00a0.\u00a0wp_kses_post(\u00a0wc_format_content(\u00a0$page->post_content\u00a0)\u00a0)\u00a0.\u00a0'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0id=\"popupBackground\"\u00a0class=\"black_overlay\"><\/div>';\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo\u00a0$html;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n}<\/pre>\n\n\n\n

4. P\u0159id\u00e1me tro\u0161ku css a javascriptu<\/h2>\n\n\n\n

Do \u0161ablony si p\u0159id\u00e1me css a js soubor pomoc\u00ed enqueue:<\/p>\n\n\n\n

wp_enqueue_style(\u00a0'terms-popup',\u00a0get_stylesheet_directory_uri()\u00a0.\u00a0'\/css\/terms-popup.css',\u00a0array(),\u00a0'126'\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script(\u00a0'terms-popup',\u00a0get_stylesheet_directory_uri()\u00a0.\u00a0'\/js\/terms-popup.js',\u00a0array('jquery'),\u00a0'132',\u00a0true);<\/pre>\n\n\n\n

Do js souboru vlo\u017e\u00edme n\u00e1sleduj\u00edc\u00ed k\u00f3d:<\/p>\n\n\n\n

document.addEventListener(\u00a0'click',\u00a0function(\u00a0event\u00a0){\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0var\u00a0targetId\u00a0=\u00a0event.target.getAttribute('id');\n\n\u00a0\u00a0\u00a0\u00a0if\u00a0(\u00a0targetId\u00a0==\u00a0'woocommerce-terms-and-conditions-link'\u00a0)\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0event.preventDefault();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var\u00a0topOffset\u00a0=\u00a0window.scrollY;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById(\u00a0'popupBox').style.top\u00a0=\u00a0topOffset\u00a0+\u00a0'px';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById(\u00a0'popupBox').style.display\u00a0=\u00a0'block';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById(\u00a0'popupBackground').style.display\u00a0=\u00a0'block';\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0if\u00a0(\u00a0targetId\u00a0==\u00a0'popupBoxClose'\u00a0)\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0event.preventDefault();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById(\u00a0'popupBox').style.display\u00a0=\u00a0'none';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById(\u00a0'popupBackground').style.display\u00a0=\u00a0'none';\n\u00a0\u00a0\u00a0\u00a0}\n\n});\u00a0\u00a0<\/pre>\n\n\n\n

a do css si p\u0159id\u00e1me trochu styl\u016f, aby se popup spr\u00e1vn\u011b zobrazoval:<\/p>\n\n\n\n

body{\u00a0position:relative;\u00a0}\n.black_overlay\u00a0{\n\u00a0\u00a0\u00a0\u00a0display:\u00a0none;\n\u00a0\u00a0\u00a0\u00a0position:\u00a0absolute;\n\u00a0\u00a0\u00a0\u00a0top:\u00a00%;\n\u00a0\u00a0\u00a0\u00a0left:\u00a00%;\n\u00a0\u00a0\u00a0\u00a0width:\u00a0100%;\n\u00a0\u00a0\u00a0\u00a0height:\u00a0100%;\n\u00a0\u00a0\u00a0\u00a0background-color:\u00a0black;\n\u00a0\u00a0\u00a0\u00a0z-index:1001;\n\u00a0\u00a0\u00a0\u00a0-moz-opacity:\u00a00.7;\n\u00a0\u00a0\u00a0\u00a0opacity:.70;\n\u00a0\u00a0\u00a0\u00a0filter:\u00a0alpha(opacity=70);\n}\n.white_content\u00a0{\n\u00a0\u00a0\u00a0\u00a0display:\u00a0none;\n\u00a0\u00a0\u00a0\u00a0position:\u00a0absolute;\n\u00a0\u00a0\u00a0\u00a0top:\u00a025%;\n\u00a0\u00a0\u00a0\u00a0left:\u00a025%;\n\u00a0\u00a0\u00a0\u00a0width:\u00a050%;\n\u00a0\u00a0\u00a0\u00a0height:\u00a0500px;\n\u00a0\u00a0\u00a0\u00a0padding:\u00a016px;\n\u00a0\u00a0\u00a0\u00a0border:\u00a02px\u00a0solid\u00a0black;\n\u00a0\u00a0\u00a0\u00a0background-color:\u00a0white;\n\u00a0\u00a0\u00a0\u00a0z-index:1002;\n\u00a0\u00a0\u00a0\u00a0overflow:\u00a0scroll;\n\u00a0\u00a0\u00a0\u00a0margin-top:50px;\n}\n.textright\u00a0{\n\u00a0\u00a0\u00a0\u00a0float:\u00a0right;\n}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n.close\u00a0{\n\u00a0\u00a0\u00a0\u00a0background:\u00a0#606061;\n\u00a0\u00a0\u00a0\u00a0color:\u00a0#FFFFFF;\n\u00a0\u00a0\u00a0\u00a0line-height:\u00a025px;\n\u00a0\u00a0\u00a0\u00a0position:\u00a0absolute;\n\u00a0\u00a0\u00a0\u00a0right:\u00a015px;\n\u00a0\u00a0\u00a0\u00a0text-align:\u00a0center;\n\u00a0\u00a0\u00a0\u00a0top:\u00a010px;\n\u00a0\u00a0\u00a0\u00a0width:\u00a030px;\n\u00a0\u00a0\u00a0\u00a0text-decoration:\u00a0none;\n\u00a0\u00a0\u00a0\u00a0font-weight:\u00a0bold;\n\u00a0\u00a0\u00a0\u00a0font-size:\u00a01.1em;\n\u00a0\u00a0\u00a0\u00a0color:\u00a0white;\n\u00a0\u00a0\u00a0\u00a0-webkit-border-radius:\u00a012px;\n\u00a0\u00a0\u00a0\u00a0-moz-border-radius:\u00a012px;\n\u00a0\u00a0\u00a0\u00a0border-radius:\u00a012px;\n\u00a0\u00a0\u00a0\u00a0-moz-box-shadow:\u00a02px\u00a02px\u00a03px\u00a0#000;\n\u00a0\u00a0\u00a0\u00a0-webkit-box-shadow:\u00a02px\u00a02px\u00a03px\u00a0#000;\n\u00a0\u00a0\u00a0\u00a0box-shadow:\u00a02px\u00a02px\u00a03px\u00a0#000;\n}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/pre>\n\n\n\n

Styly si samoz\u0159ejm\u011b m\u016f\u017eeme upravit tak, aby to co nejv\u00edce korespondovalo s designem \u0161ablony a m\u00e1me hotovo. <\/p>\n\n\n\n

Po kliknut\u00ed na obchodn\u00ed podm\u00ednky se zobraz\u00ed popup s obchodn\u00edmi podm\u00ednkami.<\/p>\n\n\n\n

5. Pluginy pro vytvo\u0159en\u00ed poupu<\/h2>\n\n\n\n

Na za\u010d\u00e1tku jsem psal o pluginech, kter\u00e9 popup vytvo\u0159\u00ed. P\u0159esto\u017ee se jedn\u00e1 o pom\u011brn\u011b jednoduchou \u00fapravu, \u0159ada lid\u00ed rad\u011bji s\u00e1hne po pluginu, tak\u017ee zde jsou dva, kter\u00e9 jsou zdarma na WordPress.org.<\/p>\n\n\n\n

Terms and Conditions Popup for WooCommerce<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Sta\u017een\u00ed pluginu<\/a><\/p>\n\n\n\n

WooCommerce Checkout Terms Conditions Popup<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Sta\u017een\u00ed pluginu<\/a><\/p>\n\n\n\n

6. Z\u00e1v\u011br<\/h2>\n\n\n\n

Jak vid\u00edte, upravit \u0161ablonu tak, aby se zobrazovaly obchodn\u00ed podm\u00ednky v popupu nen\u00ed v\u016fbec slo\u017eit\u00e9. Sta\u010d\u00ed trochu k\u00f3du a jeden css a jeden js soubor. Rozhodn\u011b lep\u0161\u00ed, ne\u017e cp\u00e1t do WordPressu dal\u0161\u00ed pluginy. <\/p>\n\n\n\n

Souvisej\u00edc\u00ed \u010dl\u00e1nky<\/p>\n\n\n\n