{"id":349,"date":"2019-06-29T01:55:00","date_gmt":"2019-06-29T01:55:00","guid":{"rendered":"https:\/\/gpsites.co\/niche\/?p=349"},"modified":"2019-06-29T01:55:00","modified_gmt":"2019-06-29T01:55:00","slug":"jak-powstal-sklep","status":"publish","type":"post","link":"https:\/\/thesilverings.com\/pl\/jak-powstal-sklep\/","title":{"rendered":"Sklep"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Zaawansowane funkcje Woocommerce w GeneratePress Premium 1.8 pozwoli\u0142y mi ujawni\u0107 kilka nowych niestandardowych funkcji i styl\u00f3w. Po odwiedzeniu strony sklepu zobaczysz kilka niestandardowych element\u00f3w i styl\u00f3w.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Nawigacja kategorii poni\u017cej tytu\u0142u wpisu<\/li><li>Prze\u0142\u0105czanie filtra poza kanw\u0105<\/li><li>Zmieniony pasek nawigacyjny<\/li><li>Minimalistyczna siatka sklepu z efektem dodania do koszyka po najechaniu kursorem<\/li><\/ul>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_74 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Spis tre\u015bci<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Prze\u0142\u0105czanie spisu tre\u015bci\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/thesilverings.com\/pl\/jak-powstal-sklep\/#Hook_Elements\" >Elementy haka<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/thesilverings.com\/pl\/jak-powstal-sklep\/#Hook_1_%E2%80%93_Woocommerce_Shop_Category_Menu\" >Hook #1 - Menu kategorii sklepu Woocommerce<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/thesilverings.com\/pl\/jak-powstal-sklep\/#Hook_2_%E2%80%93_Woo_Shop_Filter_and_Breadcrumb\" >Hook #2 - Filtr sklepu Woo i pasek strony<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/thesilverings.com\/pl\/jak-powstal-sklep\/#Woo_Shop_Filter\" >Filtr Woo Shop<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/thesilverings.com\/pl\/jak-powstal-sklep\/#Breadcrumb\" >Breadcrumb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/thesilverings.com\/pl\/jak-powstal-sklep\/#Positioning_and_styling_the_filter_and_breadcrumb\" >Pozycjonowanie i stylizacja filtra i paska nawigacyjnego<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/thesilverings.com\/pl\/jak-powstal-sklep\/#Custom_Post_Grid\" >Niestandardowa siatka post\u00f3w<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/thesilverings.com\/pl\/jak-powstal-sklep\/#Custom_CSS\" >Niestandardowy CSS<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/thesilverings.com\/pl\/jak-powstal-sklep\/#Reduced_grid_Gap\" >Zmniejszona luka sieciowa<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/thesilverings.com\/pl\/jak-powstal-sklep\/#Remove_Add_to_Cart_button_styling\" >Usu\u0144 stylizacj\u0119 przycisku Dodaj do koszyka<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/thesilverings.com\/pl\/jak-powstal-sklep\/#Show_Add_to_Cart_Hide_Price_on_Hover\" >Poka\u017c Dodaj do koszyka \/ Ukryj cen\u0119 po najechaniu kursorem<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hook_Elements\"><\/span>Elementy haka<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Niche u\u017cywa dw\u00f3ch GeneratePress Hook Elements. Mo\u017cesz przeczyta\u0107 <a href=\"https:\/\/docs.generatepress.com\/article\/hooks-element-overview\/\" rel=\"nofollow noopener\" target=\"_blank\">dokumenty do hak\u00f3w tutaj<\/a>. Sklep korzysta z dw\u00f3ch hak\u00f3w Elements.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Menu kategorii sklepu Woocommerce<\/li><li>Woo Shop Filter i Breadcrumb<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Regu\u0142y wy\u015bwietlania obu tych element\u00f3w s\u0105 ustawione na Archiwum produkt\u00f3w ( Sklep ) i Archiwum kategorii produkt\u00f3w.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hook_1_%E2%80%93_Woocommerce_Shop_Category_Menu\"><\/span>Hook #1 - Menu kategorii sklepu Woocommerce<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Aby u\u0142atwi\u0107 nawigacj\u0119 mi\u0119dzy kategoriami, nasz pierwszy hak dodaje proste menu kategorii do <strong>woocommerce_archive_description<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n$orderby = &#039;name&#039;;\n$order = &#039;asc&#039;;\n$hide_empty = true ;\n$cat_args = array(\n    &#039;orderby&#039;    =&gt; $orderby,\n    &#039;order&#039;      =&gt; $order,\n    &#039;hide_empty&#039; =&gt; $hide_empty,\n);\n \n$product_categories = get_terms( &#039;product_cat&#039;, $cat_args );\n \nif( !empty($product_categories) ){\n    echo &#039;\n \n&lt;ul class=&quot;woo-cat-nav&quot;&gt;&#039;;\n    foreach ($product_categories as $key =&gt; $category) {\n        echo &#039;\n \n&lt;li&gt;&#039;;\n        echo &#039;&lt;a href=&quot;&#039;.get_term_link($category).&#039;&quot; &gt;&#039;;\n        echo $category-&gt;name;\n        echo &#039;&lt;\/a&gt;&#039;;\n        echo &#039;&lt;\/li&gt;&#039;;\n    }\n    echo &#039;&lt;\/ul&gt;\n \n&#039;;\n}\n?&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Po prostu wy\u015bwietla list\u0119 wszystkich kategorii, kt\u00f3re zawieraj\u0105 produkt. Nast\u0119pnie u\u017cywamy CSS do stylizacji listy:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.woo-cat-nav {\n    list-style-type: none;\n    margin-left: 0;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    margin-bottom: 80px;\n}\n\n.woo-cat-nav li {\n    padding: 5px 0;\n    margin: 0 10px;\n    border-bottom: 1px solid #ccc;\n    font-size: 0.95em;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Poniewa\u017c ka\u017cdy z element\u00f3w listy jest linkiem, otrzymuj\u0105 one swoje kolory z kolor\u00f3w link\u00f3w, kt\u00f3re ustawili\u015bmy w konfiguratorze. Opr\u00f3cz koloru obramowania, kt\u00f3ry znajduje si\u0119 w powy\u017cszym CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hook_2_%E2%80%93_Woo_Shop_Filter_and_Breadcrumb\"><\/span>Hook #2 - Filtr sklepu Woo i pasek strony<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nast\u0119pnie dodajemy dwie funkcje do <code>woocommerce_before_shop_loop<\/code> hak. Pierwszy to niestandardowy <a href=\"https:\/\/docs.generatepress.com\/article\/off-canvas-panel-overview\/\" rel=\"nofollow noopener\" target=\"_blank\">Panel poza p\u0142\u00f3tnem<\/a> a drugi to Breadcrumb Woocommerce. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Woo_Shop_Filter\"><\/span>Filtr Woo Shop<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Pierwsz\u0105 funkcj\u0105 w naszym haku jest prosty HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span class=&quot;slideout-toggle woo-filter-toggle hide-on-mobile&quot;&gt;&lt;a href=&quot;#&quot;&gt;FILTR&lt;\/a&gt;&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>&lt;span&gt;<\/code> zawiera trzy klasy. Klasa<code> suwak-prze\u0142\u0105cznik<\/code> jest tym, czego wymaga GeneratePress, aby wywo\u0142a\u0107 otwarcie panelu off canvas. The <code>woo-filter-toggle<\/code> to nasza w\u0142asna klasa, kt\u00f3rej u\u017cywamy do stylizacji i pozycjonowania prze\u0142\u0105cznika. I na koniec <code>ukrycie na telefonie kom\u00f3rkowym<\/code>Jestem pewien, \u017ce mo\u017cesz dowiedzie\u0107 si\u0119, co to robi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aby pojawi\u0142 si\u0119 nasz prze\u0142\u0105cznik filtra woo, ustawili\u015bmy Customizer &gt; Layout &gt; Off Canvas Panel, aby wy\u015bwietla\u0142 si\u0119 na komputerach stacjonarnych i urz\u0105dzeniach mobilnych.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Teraz musimy usun\u0105\u0107 prze\u0142\u0105cznik z g\u0142\u00f3wnej nawigacji na pulpicie (jest to domy\u015blna lokalizacja), musimy go ukry\u0107 za pomoc\u0105 CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.main-navigation ul li.slideout-toggle {\n    display: none !important;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Breadcrumb\"><\/span>Breadcrumb<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Oto nasza druga funkcja, kt\u00f3ra dodaje nasz pasek nawigacyjny w linii z naszym prze\u0142\u0105cznikiem filtra:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span class=&quot;hide-on-mobile&quot;&gt;&lt;?php woocommerce_breadcrumb(); ?&gt;&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">U\u017cywa domy\u015blnej funkcji woocommerce. Aby nie wy\u015bwietla\u0142 si\u0119 dwa razy na stronie, wy\u0142\u0105czyli\u015bmy pozycj\u0119 okruszka motywu w Customizer &gt; Layout &gt; Woocommerce.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Positioning_and_styling_the_filter_and_breadcrumb\"><\/span>Pozycjonowanie i stylizacja filtra i paska nawigacyjnego<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Pozycjonowanie i stylizacja naszego toggle i breadcrumb wymaga tego CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.woo-filter-toggle,\n.woocommerce.archive .woocommerce-breadcrumb {\n    padding: 10px 0;\n    margin-right: 20px;\n    float: left;\n    font-size: 14px;\n    line-height: 20px;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Aby zrobi\u0107 miejsce dla naszego prze\u0142\u0105cznika filtra i breacrumb oraz aby zachowa\u0107 zgodno\u015b\u0107 styl\u00f3w, potrzebujemy troch\u0119 wi\u0119cej CSS. Najpierw przesuniemy liczb\u0119 produkt\u00f3w, a nast\u0119pnie nadamy styl selektorowi sortowania.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.woocommerce .woocommerce-result-count {\n    float: right;\n    margin-right: 20px;\n}\n\n.woocommerce-ordering select {\n    text-transform: wielkie litery;\n    max-width: 200px;\n    border: 0;\n}<\/code><\/pre>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Custom_Post_Grid\"><\/span>Niestandardowa siatka post\u00f3w<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wi\u0119kszo\u015b\u0107 stylizacji naszego sklepu zosta\u0142a ustawiona za pomoc\u0105 narz\u0119dzia Theme Customizer, od typografii i kolor\u00f3w po uk\u0142ad naszego sklepu i strony pojedynczego produktu. Ale aby doda\u0107 co\u015b bardziej wyj\u0105tkowego, zastosowano obowi\u0105zkow\u0105 magi\u0119 CSS Flint Skin. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Custom_CSS\"><\/span>Niestandardowy CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Przejd\u017amy przez ka\u017cd\u0105 ze zmian:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Reduced_grid_Gap\"><\/span>Zmniejszona luka sieciowa<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Nie, GeneratePress u\u017cywa CSS Grid dla sklepu, kt\u00f3ry jest bardzo prosty do zmniejszenia (lub zwi\u0119kszenia) odst\u0119pu mi\u0119dzy siatkami. Jest to stosowane do wszystkich responsywnych rozmiar\u00f3w.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.wc-columns-container .products,\n.woocommerce .related ul.products,\n.woocommerce .up-sells ul.products {\n    grid-gap: 20px;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Remove_Add_to_Cart_button_styling\"><\/span>Usu\u0144 stylizacj\u0119 przycisku Dodaj do koszyka<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Chcia\u0142em, aby nasz link dodawania do koszyka wygl\u0105da\u0142 normalnie, usuwaj\u0105c wype\u0142nienie i kolor t\u0142a oraz dziedzicz\u0105c kolor tekstu g\u0142\u00f3wnego.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.woocommerce ul.products li.product a.button {\n    padding: 5px 0;\n    color: inherit;\n    kolor t\u0142a: przezroczysty;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Show_Add_to_Cart_Hide_Price_on_Hover\"><\/span>Poka\u017c Dodaj do koszyka \/ Ukryj cen\u0119 po najechaniu kursorem<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">W widoku desktopowym mo\u017cemy sobie pozwoli\u0107 na ukrycie opcji dodawania do koszyka. My\u015bl\u0119, \u017ce wygl\u0105da to lepiej ni\u017c strona pe\u0142na przycisk\u00f3w. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (min-width: 768px) {\n\n    .woocommerce ul.products li.product a.button {\n        transform: translateY(0);\n        width: 100%;\n        opacity: 0;\n        transition: all 0.4s;\n    }\n\n    .woocommerce ul.products li.product:hover a.button,\n    .woocommerce ul.products li.product:hover .price {\n        transform: translateY(calc(-100% - 10px));\n        opacity: 1;\n    }\n\n    .woocommerce ul.products li.product .price {\n        opacity: 1;\n        transition: all 0.4s;\n    }\n\n    .woocommerce ul.products li.product:hover .price {\n        opacity: 0;\n        transform: translateY(calc(-100% - 10px));\n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>Zaawansowane funkcje Woocommerce w GeneratePress Premium 1.8 pozwoli\u0142y mi ujawni\u0107 kilka nowych niestandardowych funkcji i styl\u00f3w. Po odwiedzeniu strony sklepu zobaczysz kilka niestandardowych element\u00f3w i styl\u00f3w. Nawigacja kategorii ... <\/p>\n<p class=\"read-more-container\"><a title=\"Sklep\" class=\"read-more button\" href=\"https:\/\/thesilverings.com\/pl\/jak-powstal-sklep\/#more-349\" aria-label=\"Przeczytaj wi\u0119cej o The Shop\">Czytaj dalej<\/a><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-349","post","type-post","status-publish","format-standard","hentry","category-uncategorized","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/thesilverings.com\/pl\/wp-json\/wp\/v2\/posts\/349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thesilverings.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thesilverings.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thesilverings.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thesilverings.com\/pl\/wp-json\/wp\/v2\/comments?post=349"}],"version-history":[{"count":0,"href":"https:\/\/thesilverings.com\/pl\/wp-json\/wp\/v2\/posts\/349\/revisions"}],"wp:attachment":[{"href":"https:\/\/thesilverings.com\/pl\/wp-json\/wp\/v2\/media?parent=349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thesilverings.com\/pl\/wp-json\/wp\/v2\/categories?post=349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thesilverings.com\/pl\/wp-json\/wp\/v2\/tags?post=349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}