Igor Majan Freelencer - Tvorba web stránok
Úvod > Blog > E-shop

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
.
01001010011000010010000001101010011000010010000001100100011001010110100101101110011001010010000001001101011101010111010001110100011001010111001000100001

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]

 

Podobné články

credit card computer

Woocommerce platobná brána zadarmo (Stripe)

Svojpomocne ste si vytvorili e-shop cez woocommerce a chceli by ste si do objednávkového procesu implementovať…

nahlad1

Woocommerce základné nastavenie 2. časť

V tomto návode pokračovať v nastaveniach woocommerce, takže návod nadväzuje na ten predchádzajúci woocommerce základné nastavenie…

naj wo pluginy

Najlepšie woocommerce pluginy pre váš obchod

Woocommerce má množstvo skvelých pluginov, ktoré z neho robia plnohodnotný internetový obchod. Preto sme zostavili…

Nerobiť fušerinu Čakanie na Godota Žiadne jamostvá Kvalita ne-stojí málo Svoj piesoček
Žiadne jamostvá Kvalita ne-stojí málo Svoj piesoček Nerobiť fušerinu Čakanie na Godota