• Cs-Cart Türkiye Destek ve Paylaşım Sitemize Hoş Geldiniz
  • Yeni Temamızla Daha işlevsel Sizlerleyiz.
  • Öneri ve Dileklerinizi Mesajla iİetiniz.
Hoşgeldiniz.! Lütfen Giriş Yap yada Üye Ol


Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5
Eklenti Eklenti olmadan CS-CART sekmeleri oluşturma .
#1
Rainbow 
Merhaba

Eklenti olmadan  CS-CART sekmeleri oluşturma .

Sınıf adı ile 16-grid "tab_container"
1. Create ve sırasıyla üç best seller adlı blokları,
özel ürün ve sınıf adı "tab1 tab_content", "tab2 tab_content" ve "tab3 tab_content" ile sıcak fırsatlar oluşturun.

wv3B8z.png

2. ( O ızgara için ) İçine ,bir html bloğu oluşturmak ve bu içinde böyle kodlamaları yazmak

Kod:
 

<ul class="tabs">
<li id="tab1" class="active"><a>Best Seller</a></li>
<li id="tab2"><a>Special products</a></li>
<li id="tab3"><a>Hot deals</a></li>
</ul>

Eğer ızgara içinde oluşturmak için hangi blok sınıf adının kimliği ile dahil.

wv3BBv.png

3. ve ,kafa etiketi içinde index.tpl js komut dosyası içerir ,

Kod:
<script>
$(document).ready(function() {

$(".tab_content").hide();
$(".tab_content:first").show();

$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("id");
$("."+activeTab).fadeIn();
});
});

</script>

4. ve ,Styles.css aşağıdaki css

Kod:
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
height: 31px;
line-height: 31px;
font-weight: bold;
background:url("images/tabbg.png") no-repeat scroll right 8px transparent;
overflow: hidden;
position: relative;
}
ul.tabs li a{
margin: 0 15px;
padding: 7px 10px;
font: 18px/18px MalgunGothic;
text-transform: uppercase;}
ul.tabs li:last-child{
background:none;}
ul.tabs li:hover a,ul.tabs li.active a,ul.tabs li.active:hover a{
background: #F3F1F1;
color: #E35973;
text-decoration:none;
}
ul.tabs li.active a{
color:#e35973;}
.tab_container {
clear: both;
float: left;
width: 100%;
}
.tab_container h1{
display:none;}
.tab_content {
padding: 0px;
font-size: 1.2em;
display: none;
}


5. NOT.Html blok ve diğer bloklar hem "tab_container" olarak sınıf adı ile aynı grid olması gerektiğini

6. Çıktı ekran görüntüsü.

wzNz97.jpg

NOT : Deneme hayır .
İstek yardım !!!
Yazılımda dosya yerleri ,  hangi kodlar nerede , nereye yazılacak vs gibi
( Resimli ve yazı ile açıklamalı anlatım yapılması )


Kolay gelsin.
 
Cevap
#2
bu nedir ? google translate'den copy paste mı yaptınız ? aslında resimler falan gayet açık fakat sıfır html css js ile bunun anlaşılması zor olacaktır.

birinci maddedeki şekilde her şeyi yapınız.tabs dediği şey html block'tur. içerisine 2. maddedeki kodları. 3. maddedeki kodları ekleyin.
dördüncü maddedeki kodları <style> kodlar </style> içerisine alarak yine aynı yere ekleyin.

ekstra style.css index.tpl vs. düzenlemeye gerek yok.
1. maddedeki hot deals vs. dedikleri de products block'tur. içlerine kafanıza göre yeniler en çok satanlar ya da manuel ürün ekleme yapabilirsiniz.
---
ya da şu şekilde yapabilirsiniz.
ekteki index_tabs 'ı static_templates klasörüne
tabber.tpl 'yi wrappers içerisine atarak tasarımı da ekteki resimler gibi yapabilirsiniz. bu da benim geliştirdiğim tab zabazingosu.

kolaylıklar.


Ek Dosyalar
.gz   weblen.net.tar.gz (Dosya Boyutu: 71.15 KB / İndirme Sayısı: 15)
XMLBotu ürünleri otomatik ekle | CsCart Payu Ödeme Sistemi
| Havale ile Ödeme Eklenti | Eklentisiz AnaSayfa Sekmesi yap
cs-cart->n11 api senkronizasyonu ve fazlası weblen.net/shop adresinde
 
Cevap
#3
Ben işi biraz kolaylaştırıp görünümü şıklaştırayım tablar için bir html-smarty blok oluşturup içini alttaki gibi doldurun
<ul class="tabs">
<li id="tab1" class="active"><a>Vitrin</a></li>
<li id="tab2"><a>İndirimdekiler</a></li>
<li id="tab3"><a>Yeniler</a></li>
<li id="tab4"><a>İlgi Çekenler</a></li>
<li id="tab5"><a>Kampanyalar</a></li>
</ul>
<script>
$(document).ready(function() {

$(".tab_content").hide();
$(".tab_content:first").show();

$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("id");
$("."+activeTab).fadeIn();
});
});

</script>
<style>
ul.tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
ul.tabs li {
float: left;
font-weight: bold;
margin: 0 .5em 0 0;
}
ul.tabs li a{
position: relative;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0,0,0,.4);
}
ul.tabs a:hover,
ul.tabs a:hover::after,
ul.tabs a:focus,
ul.tabs a:focus::after {
background: #AFD4FF;
}
ul.tabs a:focus {
outline: 0;
}
ul.tabs a::after {
content:'';
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: 1em;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
transform: skew(10deg);
border-radius: 0 5px 0 0;
}
ul.tabs current a,
ul.tabs current a::after {
background: #fff;
z-index: 3;
}

#content {
background: #fff;
padding: 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}


ul.tabs li.active a{
color:#FF0000;}
.tab_container {
clear: both;
float: left;
width: 100%;
}</style>

kodların en üstünde tab1 den tab5 e kadar olan bölümü kendinize göre düzenleyin istiyorsanız eksiltin yada arttırın.
sonra bu tablarda görünmesini istediğiniz blokların user defined css alanlarına tab1 tab_content ... şeklinde bloklarınız oluşturun konunun başında resimlerde gösterildiği gibi. Sonrada sizi bu anlatımın en başındakinden daha şık bir tab karşılar tikmar.com daki gibi... kolay gelsin
 
Cevap
#4
Merhaba
Güzel olmuş .

ÖNERİDİR , üst menüdeki gibi fare üzerine gelince ürünlerin gösterimi ( geçişli ) olursa daha güzel olur .
Üst menüdeki uygun kodlar bulunup , kullanılarak çözüm getirelebilir .
Kolay gelsin .
Sağlıcakla Kalın .

QXEl5Z.gif
 
Cevap
#5
Merhaba,
Benim gönderdiğim dosyalarla işlemini yapanlar index_tabs.tpl dosyasının sonuna ;

{literal}
<script>
$(function(){$(".cm-js").hover(function(){$(this).click();});});
</script>
{/literal}

eklediklerinde üzerine gelindiğinde açılacak hali almış olacaktır.

Diğer anlatıma göre yapmak isteyenler de ilgili kodlardaki
<code>$("ul.tabs li").click(function() { </code>
satırını
<code>$("ul.tabs li").hover(function() {</code> olarak değiştirebilirler.
XMLBotu ürünleri otomatik ekle | CsCart Payu Ödeme Sistemi
| Havale ile Ödeme Eklenti | Eklentisiz AnaSayfa Sekmesi yap
cs-cart->n11 api senkronizasyonu ve fazlası weblen.net/shop adresinde
 
Cevap
#6
Merhaba,
responsive kullanıcıları için index_tabs.tpl 'i güncelledim. şu şekilde değiştirebilirsiniz
Kod:
<script type="text/javascript" src="//XXXXXXXXXXXX.com/js/tygh/tabs.js?ver=4.2.2"/></script>

<style>.ty-tabs ul li, .ty-tabs ul li.active {ldelim} padding: 0px; {rdelim}

</style>

<div class="ty-tabs cm-j-tabs clearfix" style="margin-top:0px !important;">

  <ul class="ty-tabs__list">

    <li id="populars" class="ty-tabs__item cm-js cm-active active">

      <a class="ty-tabs__a">Popüler Ürünler</a>

    </li>

    <li id="campaigns" class="ty-tabs__item cm-js">

      <a class="ty-tabs__a">İndirimdekiler</a>

    </li>

    <li id="hots" class="ty-tabs__item cm-js">

      <a class="ty-tabs__a">Yeniler</a>

    </li>

    <li id="rated" class="ty-tabs__item cm-js">

      <a class="ty-tabs__a">Beğenilenler</a>

    </li>

    <li id="campaigns" class="ty-tabs__item cm-js">

      <a class="ty-tabs__a">Kampanyalar</a>

    </li>

    

  </ul>

</div>
XMLBotu ürünleri otomatik ekle | CsCart Payu Ödeme Sistemi
| Havale ile Ödeme Eklenti | Eklentisiz AnaSayfa Sekmesi yap
cs-cart->n11 api senkronizasyonu ve fazlası weblen.net/shop adresinde
 
Cevap
  


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  cs-cart iyzico ödeme eklentisi sakurt 5 741 31.08.2019, 05:29
Son Yorum: morpheus
  Bilgi:  Hiçbir eklenti kullanmadan mağazamızı facebook a entegre edelim morpheus 2 1,536 22.04.2019, 20:47
Son Yorum: istanbul
  Bilgi:  CS-Cart & Multi-Satıcı 4.9.3 globalburo 0 890 07.02.2019, 22:28
Son Yorum: globalburo
  Bilgi:  CS-Cart & Multi-Satıcı 4.9.2 globalburo 0 900 22.11.2018, 22:14
Son Yorum: globalburo
  Bilgi:  CS-Cart & Multi-Vendor 4.9.1 Çıktı globalburo 2 2,028 15.10.2018, 11:22
Son Yorum: beyaznevresim

Hızlı Menü:


Tarama: 1 Ziyaretçi