Opencart 2.2.0.0 Kategorisel Ürün Tabbed Mega Menu Modulu

Herkese merhaba arkadaşlar bu akşam sizlerle birlikte opencart 2.2 versiyonları için kategorisel ürün modunu düzenleyerek ten sol mega menü, tarzında bir görünüme sahip eklentinin kurulumunu ve kullanımının geleceğiz. Bu eklenti Normalde arkadaşlar örneğin opencart en son eklenen ürünler gibi görünüme sahip bir arayüzü bulunmaktaydı. Bu akşam yapmış olduğu çalışma neticesi de sol veyahut sağ tarafa eklendiği zamanda sağa yada sola açılır şekilde ürünlerin bir panel içerisinde gözükmesini sağlayacaktır. Opencartın Default temasında yapmış olduğum test sonuncusunda sonucunda herhangi bir soruna rastlanmamıştır. Eklenti sürümü opencart 2.2 sağlıklı bir şekilde çalışabilmektedir.



https://youtu.be/zp8tXZnB6Mw



KAYNAK | | İNDİR : E-TİCARETDERSLERİ


Opencart 2.2.0.0 Kategorisel Ürün Tab Mega Menu Modulu Kurulumu

Şimdi arkadaşlarım kurulumundan biraz bahsetmek gerekirse normal O pankart modellerinin kurulumu ile alakalı olaraktan hiçbir farkı yoktur. Sitemizden indirmiş olduğunuz arşiv dosyasını açıp içerisindeki katalog ve admin klasörlerini sitemizin kurulu olduğu ana dizini atıyoruz. Ardından sitemizin admin paneline giriş yapıp sonrasında ise sol taraftaki eklentiler modüller sekmesine tıklayın açılan sayfada kategorisel ürünler modülü kuruyoruz. Kurulum tamamlandıktan sonra sol tarafında bulunan düzenle butonuna tıklıyoruz. Açılan sayfada bizi eklentinin ayarlar bölümü karşılamaktadır. Burada istediğimiz kategoriyi seçip yine istediğimiz kadar ürün görüntülenmesi için adet miktarına girip eklenti durumunun açık olarak işaretleyip kaydediyoruz. Yine sol taraftaki bölümler kısmından açılan sayfada hangi bölümde gösterilmesini istiyorsak o güveni bölümünü düzenliyoruz yine açılan sayfada modül ekle butonuna tıklıyoruz ve eklentinin gözükmesini istediğimiz kompozisyon ve sıralamasını seçip kaydımızı yapıyoruz bu eklenti Münir tarzında olduğu için sol de da sağ tarafı seçmenizi tavsiye ederim.

Not : Eğer tab görünümünde sorun yaşıyorsanız aşağıdaki düzenemeyi yapınız.

Dosyamızı Açalım : caalog/view/theme/default/template/module/

productcategory.tpl

içeriğini aşağıdaki kod ile değiştir.

<style>


/*  bhoechie tab */
div.bhoechie-tab-container{
  z-index: 10;
  background-color: #ffffff;
  padding: 0 !important;
  border-radius: 4px;
  -moz-border-radius: 4px;
  border:1px solid #ddd;
  margin-top: 20px;
  margin-left: 1px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-clip: padding-box;
  opacity: 0.97;
  filter: alpha(opacity=97);
  width:98%;
}

 
div.bhoechie-tab-menu{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}
div.bhoechie-tab-menu div.list-group{
  margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a{
  margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a .glyphicon,
div.bhoechie-tab-menu div.list-group>a .fa {
  color: #5A55A3;
}
div.bhoechie-tab-menu div.list-group>a:first-child{
  border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a:last-child{
  border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a.active,
div.bhoechie-tab-menu div.list-group>a.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.active .fa{
  background-color: #5A55A3;
  background-image: #5A55A3;
  color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.active:after{
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  border-left: 0;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  border-left: 10px solid #5A55A3;
}

div.bhoechie-tab-content{
  background-color: #ffffff;
  /* border: 1px solid #eeeeee; */
  padding-left: 20px;
  padding-top: 10px;
}

div.bhoechie-tab div.bhoechie-tab-content:not(.active){
  display: none;
}

</style>
<script type="text/javascript"> 

$(document).ready(function() {
    $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
        e.preventDefault();
        $(this).siblings('a.active').removeClass("active")  ;
        $(this).addClass("active");
        var index = $(this).index();
        $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
        $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
    });
});
</script>

<div class="container">
	<div class="row">
        <div class="col-lg-5 col-md-5 col-sm-8 col-xs-9 bhoechie-tab-container">
            <div class="col-lg-3 col-md-4 col-sm-4 col-xs-4 bhoechie-tab-menu"   style="width:25%;">
              <div class="list-group" >
			  
			  <?php foreach ($categories as $category) { ?>
                 

 <a href="#" class="list-group-item text-center">
                 <h4><img src="<?php echo  $category['thumbx']; ?>" alt="<?php echo $category['name'];  ?>"></h4><br/><?php echo $category['name']; ?>
                </a>
 
				<?php } ?>
              </div>
            </div>
			 <?php foreach ($categories as $category) { ?>
			 
            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bhoechie-tab">
                <!-- flight section -->
			
				
                <div class="bhoechie-tab-content active">
				 
                    <center>
              
					
  
 
<div class="row">
  <?php foreach ($category['products'] as $product) { ?>
  <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="product-thumb transition">
      <div class="image"><a href="<?php echo  $product['href']; ?>"><img src="<?php echo  $product['thumb']; ?>" alt="<?php echo $product['name']; ?>"  title="<?php echo $product['name']; ?>" class="img-responsive"  /></a></div>
      <div>
        <h4><a href="<?php echo $product['href'];  ?>"><?php echo $product['name']; ?></a></h4>
        
        <?php if ($product['rating']) { ?>
        <div class="rating">
          <?php for ($i = 1; $i <= 5; $i++) { ?>
          <?php if ($product['rating'] < $i) { ?>
          <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
          <?php } else { ?>
          <span class="fa fa-stack"><i class="fa fa-star  fa-stack-2x"></i><i class="fa fa-star-o  fa-stack-2x"></i></span>
          <?php } ?>
          <?php } ?>
        </div>
        <?php } ?>
        <?php if ($product['price']) { ?>
        <p class="price">
          <?php if (!$product['special']) { ?>
          <?php echo $product['price']; ?>
          <?php } else { ?>
          <span class="price-new"><?php echo  $product['special']; ?></span> <span  class="price-old"><?php echo $product['price']; ?></span>
          <?php } ?>
          <?php if ($product['tax']) { ?>
          <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
          <?php } ?>
        </p>
        <?php } ?>
      </div>
      <div class="button-group">
        <button type="button" onclick="cart.add('<?php echo  $product['product_id']; ?>');"><i class="fa  fa-shopping-cart"></i> <span class="hidden-xs hidden-sm  hidden-md"><?php echo $button_cart;  ?></span></button>
        <button type="button" data-toggle="tooltip" title="<?php  echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo  $product['product_id']; ?>');"><i class="fa  fa-heart"></i></button>
        <button type="button" data-toggle="tooltip" title="<?php  echo $button_compare; ?>" onclick="compare.add('<?php echo  $product['product_id']; ?>');"><i class="fa  fa-exchange"></i></button>
      </div>
    </div>
  </div>
  <?php } ?>
</div>
 

 

																												

                    </center>
				
		 
                </div>
				  
                <!-- train section -->
              
            </div>
			<?php } ?>
        </div>
  </div>
</div>

<script>
$(document).ready(function(){
    $(".bhoechie-tab-menu div.list-group a:first").trigger('click');
    //$(".bhoechie-tab-menu div.list-group > a.list-group-item").hover(function(){$(this).trigger('click');}  );
});
</script>