Drop-down košík vo woocommerce šablóne

Pri tvorbe mojej poslednej šablóny s podporou woocommerce som do hlavičky potreboval umiestniť vysúvací prvok, ktorý sa po kliknutí rozbalí a v ňom sa zobrazia položky nákupného košíka.  Po neúspešnom hladaní plugina, ktorý by to dokázal som sa rozhodol tento nakódovať si to sám.

Takže ako budeme postupovať. Najprv si budeme musieť vytvoriť niekoľko riadkový html kód, ktorý samozrejme doplníme CSS kódom, ktorý nám dodá dizajn a nakoniec to zakončime krátkym javascripom. Položky nákupného košíka budeme volať pomocou súboru mini-cart.php, ktorý je súčasťou inštalácie woocommerce. Takže poďme na to.

Súbor mini-cart.php nájdete v adresári /plugins/woocommerce/templates/cart/ ak ešte nemáte predpripravenú tému pre woocommerce skopírujte si celý obsah zložky templates do svojej šablóny. Tak aby sa súbor mini-cart.php nachádzal  šablóna/cart/mini-cart.php. Tento súbor budeme neskor volať pomocou funkcie include.

Ideme na písanie html kódu. Ja som potreboval vysúvací košík v hlavičke webu takže môj kód som umiestnil do header.php.

[codesyntax lang=”div”]

<nav>
  <ul>
    <li id="kosik">
<img src="/images/kosik.jpg"  class="kosik"  alt="<?php bloginfo('name'); ?>" />
<a id="kosik-vysuvac" href="#">
       <?php echo sprintf (_n( '%d item', '%d items', WC()->cart->cart_contents_count ), WC()->cart->cart_contents_count ); ?> - <?php echo WC()->cart->get_cart_total(); ?> <span><i class="fa fa-chevron-down"></i></span>
      </a>
<div id="kosik-obsah">
       <?php include (TEMPLATEPATH . '/cart/mini-cart.php'); ?>
      </div>        
 </li>
  </ul>
</nav>

[/codesyntax]

Teraz ideme na CSS kód. Kód umiestníte do súboru style.css.

[codesyntax lang=”div”]

.kosik {
  width: 40px;
  height: 40px;
  margin-left: 30px;
  margin-right: 10px;
  display:inline-block;  
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  background: #fff;
  border-bottom: 1px solid #fff;
  border-radius: 3px;   
  display:inline-block;
  width:300px; 
}

nav li {
  float: left;  
          
}

nav #kosik {
  
  box-shadow: 1px 0 0 #fff;
  display:inline-block ;
  width:300px  
}

nav #kosik-vysuvac,
nav #signup a {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 30px;
  line-height: 25px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: none;
  color: #444;  
}

nav #signup a {
  border-radius: 0 3px 3px 0;
  font-size:15px;
  padding: 3px 17px;
  height: 30px;
}

nav #kosik-vysuvac {
  border-radius: 3px 0 0 3px;
}

nav #kosik-vysuvac:hover,
nav #kosik .active,
nav #signup a:hover {
  background: #fff;
}

nav #kosik-obsah {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999999;    
  background: #fff;
  background-image: linear-gradient(top, #fff, #eee);  
  padding: 15px;
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  border-radius: 3px 0 3px 3px;
  height:auto;
  overflow: visible;
}

nav li #kosik-obsah {
  right: 0;  
  height:auto; 
  z-index: 999999; 
  border-bottom: solid 1px #eee;
}



/*--------------------*/


nav ul p{width:60%; float:right; margin-bottom:5px;}

nav ul #kosik-obsah li{
  border-bottom: solid 1px #a2a2a2;
  margin-bottom:5px;
  background: #ececec;
  padding-top:10px
}
nav ul #kosik-obsah span.amount {margin:5px; color:#ec1f1f; font-size:13px; float:right}

.zobrazit-kosik, .zaplatit { font-size:13px; float:left; 
  border-radius: 3px; 
  color: #ffffff;
  padding: 3px 5px 3px 5px;
  text-decoration: none;
  margin: 0p 3px;
  }
.zobrazit-kosik {background: #ff2929;
  background-image: -webkit-linear-gradient(top, #ff2929, #db2929);
  background-image: -moz-linear-gradient(top, #ff2929, #db2929);
  background-image: -ms-linear-gradient(top, #ff2929, #db2929);
  background-image: -o-linear-gradient(top, #ff2929, #db2929);
  background-image: linear-gradient(to bottom, #ff2929, #db2929);
  
  }
.zaplatit {background: #2b9cff;
  background-image: -webkit-linear-gradient(top, #2b9cff, #2978d9);
  background-image: -moz-linear-gradient(top, #2b9cff, #2978d9);
  background-image: -ms-linear-gradient(top, #2b9cff, #2978d9);
  background-image: -o-linear-gradient(top, #2b9cff, #2978d9);
  background-image: linear-gradient(to bottom, #2b9cff, #2978d9);  
  }

[/codesyntax]

Ako posledný nasleduje javascript, ktorý dodáva celému prvku funkčnosť, pomocou funkcie .click. Tento kód treba umiestniť do vašej šablóny napríklad medzi tagy <head></head> v hlavičke. Kód musí začínať <script> a končiť </script> ináč nebude fungovať.

[codesyntax lang=”div” capitalize=”no”]

<script>
$(document).ready(function(){
  $('#kosik-vysuvac').click(function(){
    $(this).next('#kosik-obsah').slideToggle();
    $(this).toggleClass('active');          
    
    if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
      else $(this).find('span').html('&#x25BC;')
    })
});

</script>

[/codesyntax]