[MODERNIZACJA] Dynamiczne tabelki na stronie produktu

a mniej więcej wygląda to tak: (na razie faza początkowa beta)

Odnośnik widoczny tylko dla zalogowanych użytkowników - Zarejestruj się

w tych tabelkach oczywiście umiścić można wszystko np komentarze użytkowników, zakupione razem, złóż zestaw, złóż komplet, zadaj pytanie o produkt itd
narazie tak wstępnie zrobiłem tą tabelke, jak wam się spodoba to piszcie to napisze jak to połączyć ze sklepem kqs (bardzo prosto, około 60sekund i wszystko zintegrowane)

teraz nie będzie wszystko nawalone na stronie tylko elegancko ułożone

Ciekawe rozwiązanie.

można część wrzucić w tabelki a np "INNI KLIENCI KUPILI RÓWNIEŻ" pozostawić widoczne ?

wszystko można tam wrzucić, dowolnie konfigurować, dowolna kolorystyka tabelek, już kupiłem testowo 2 produkty i zobacz efekt w "inni klienci kupili także"

Dobre.. Podoba mi sie to..

Fajna sprawa z tymi tabelkami

Super sprawa, koejne nower możliwości sklepu. Gratki

Super !!!
Ale jak to zrobić ?

INSTRUKCJA INSTALACJI TABELEK DYNAMICZNYCH

1. Ściągnij ten plik Odnośnik widoczny tylko dla zalogowanych użytkowników - Zarejestruj się i wypakuj ten pliczek na serwerze tam gdzie masz sklep

2 wklej to do Ustawienia/Konfiguracja/Pozycjonowanie, czyli znaczniki META

Kod: Odnośnik widoczny tylko dla zalogowanych użytkowników - Zarejestruj się

<script type="text/javascript" src="tabpane.js"></script>

3. Ściągnij ten plik Odnośnik widoczny tylko dla zalogowanych użytkowników - Zarejestruj się i wypakuj ten pliczek na serwerze tam gdzie masz sklep w katalogu img

4. Dodaj poniższy kod do swojego pliku zewnętrznego styli css, lub jeżeli nie masz zewnętrznego pliku css to przejdź do punktu 5

Kod: Odnośnik widoczny tylko dla zalogowanych użytkowników - Zarejestruj się

/* ----------------------TABELKI W PRODUKCIE ------------------------------*/
.dynamic-tab-pane-control a:hover {background: transparent;}

.dynamic-tab-pane-control.tab-pane {
   position:relative;
   left:0px; /*odleglosc lewej krawedzi*/
   right:0px; /*odleglosc prawej krawedzi*/
   height:auto; /*wysokosc komorki z zawartoscia*/
   width:100%; /* szerokosc dla IE bug */
   margin-right:0px; /* margines prawy na tlo*/
}

.dynamic-tab-pane-control .tab-row .tab {
   width:100px;
   height:41px;
   background-image:url( "img/tabpane/tab.png" );
   position:relative;
   top:0;
   display:inline;
   float:left;
   overflow:hidden;
   cursor:Default;
   margin:0px 0px 0px 0px;
   padding:0px 0px 0px 0px;
   border:0;
   z-index:1;
   font:10px Arial;
   white-space:nowrap;
   text-align:center;
}

.dynamic-tab-pane-control .tab-row .tab.selected {
   width:100px !important;
   height:41px !important;
   background-image:url( "img/tabpane/tab.active.png" ) !important;
   background-repeat:no-repeat;
   color:#2333333 !important;
   border-bottom-width:0;
   z-index:3;
   padding:0px 0 0px 0;
   margin:0px 0px 0px 0px;
   top:0px;
   font:10px Arial;
}

.dynamic-tab-pane-control .tab-row .tab a { /*parametry przyciskow*/
   font:10px Arial;
   color:#333333;
   position:relative;
   top:8px; /*odleglosc od gornej krawedzi*/
   text-decoration:none;
   font-weight:bold;
   cursor:default;
}

.dynamic-tab-pane-control .tab-row .tab.hover {
   font:10px Arial;
   width:100px;
   height:41px;
   color:#333333;
   background-image:url( "img/tabpane/tab.hover.png" );
   background-repeat:no-repeat;
}

.dynamic-tab-pane-control .tab-page { /*parametry komorki z zawartoscia*/
   clear:both;
   border:0;
   background:#FFFFFF;
   z-index:2;
   position:relative;
   top:0px;
   font:11px Verdana;
   color:#444444;
   padding:5px 5px 5px 5px; /*przestrzen miedzy obramowaniem a textem w komorce z zawartoscia*/
   
   filter:         progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffcfcfe, EndColorStr=#fff4f3ee, GradientType=0)
               progid:DXImageTransform.Microsoft.Shadow(Color=#ff919899, Strength=2, Direction=135);
}

.dynamic-tab-pane-control .tab-row {
   z-index:1;
   white-space:nowrap;
}

.tab {
   font-size:10px;
}


5. Jeśli nie masz zewnętrznego pliku css to wklej poniższy kod do Ustawienia/Konfiguracja/Pozycjonowanie, czyli znaczniki META

Kod: Odnośnik widoczny tylko dla zalogowanych użytkowników - Zarejestruj się

<style type="text/css">
/* ----------------------TABELKI W PRODUKCIE ------------------------------*/
.dynamic-tab-pane-control a:hover {background: transparent;}

.dynamic-tab-pane-control.tab-pane {
   position:relative;
   left:0px; /*odleglosc lewej krawedzi*/
   right:0px; /*odleglosc prawej krawedzi*/
   height:auto; /*wysokosc komorki z zawartoscia*/
   width:100%; /* szerokosc dla IE bug */
   margin-right:0px; /* margines prawy na tlo*/
}

.dynamic-tab-pane-control .tab-row .tab {
   width:100px;
   height:41px;
   background-image:url( "img/tabpane/tab.png" );
   position:relative;
   top:0;
   display:inline;
   float:left;
   overflow:hidden;
   cursor:Default;
   margin:0px 0px 0px 0px;
   padding:0px 0px 0px 0px;
   border:0;
   z-index:1;
   font:10px Arial;
   white-space:nowrap;
   text-align:center;
}

.dynamic-tab-pane-control .tab-row .tab.selected {
   width:100px !important;
   height:41px !important;
   background-image:url( "img/tabpane/tab.active.png" ) !important;
   background-repeat:no-repeat;
   color:#2333333 !important;
   border-bottom-width:0;
   z-index:3;
   padding:0px 0 0px 0;
   margin:0px 0px 0px 0px;
   top:0px;
   font:10px Arial;
}

.dynamic-tab-pane-control .tab-row .tab a { /*parametry przyciskow*/
   font:10px Arial;
   color:#333333;
   position:relative;
   top:8px; /*odleglosc od gornej krawedzi*/
   text-decoration:none;
   font-weight:bold;
   cursor:default;
}

.dynamic-tab-pane-control .tab-row .tab.hover {
   font:10px Arial;
   width:100px;
   height:41px;
   color:#333333;
   background-image:url( "img/tabpane/tab.hover.png" );
   background-repeat:no-repeat;
}

.dynamic-tab-pane-control .tab-page { /*parametry komorki z zawartoscia*/
   clear:both;
   border:0;
   background:#FFFFFF;
   z-index:2;
   position:relative;
   top:0px;
   font:11px Verdana;
   color:#444444;
   padding:5px 5px 5px 5px; /*przestrzen miedzy obramowaniem a textem w komorce z zawartoscia*/
   
   filter:         progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffcfcfe, EndColorStr=#fff4f3ee, GradientType=0)
               progid:DXImageTransform.Microsoft.Shadow(Color=#ff919899, Strength=2, Direction=135);
}

.dynamic-tab-pane-control .tab-row {
   z-index:1;
   white-space:nowrap;
}

.tab {
   font-size:10px;
}
</style>


6. Następnie przejdź do szablon graficzny/strona produktu/strona produktu i na samym końcu dodaj

Kod: Odnośnik widoczny tylko dla zalogowanych użytkowników - Zarejestruj się

<center>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="border-left:1px solid #D0D0D0; border-right:1px solid #D0D0D0; border-bottom: 3px solid #D0D0D0;">
<div class="tab-pane" id="tabPane1" style="background-image: url(img/tabpane/tab.bg.png); background-position: top; background-repeat: repeat-x; width: 100%;">
<script type="text/javascript">
tp1 = new WebFXTabPane( document.getElementById( "tabPane1" ) );
</script>
   <div class="tab-page" id="tabPage1">
      <h2 class="tab">OPIS<BR>PRODUKTU</h2>
      <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage1" ) );</script>
      {OPIS_PRODUKTU}
   </div>
   <div class="tab-page" id="tabPage2">
      <h2 class="tab">OPINIE O<br>PRODUKCIE</h2>
      <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage2" ) );</script>
      {DODAJ_KOMENTARZ}{KOMENTARZE}
   </div>
   <div class="tab-page" id="tabPage3">
      <h2 class="tab">GWARANCJA<BR>I ZWROTY</h2>
      <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage3" ) );</script>
      gwarancja ble ble ble...      
   </div>
   <div class="tab-page" id="tabPage4">
      <h2 class="tab">INNI KLIENCI<br>KUPILI RÓWNIEŻ</h2>
      <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage4" ) );</script>
      {ZAKUPIONE_RAZEM}   
   </div>      
   <div class="tab-page" id="tabPage5">
      <h2 class="tab"><div style="margin-top:5px;">WYSYŁKA</div></h2>
      <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage5" ) );</script>
      wysyłka ble ble ble...      
   </div>   
   <div class="tab-page" id="tabPage6">
      <h2 class="tab"><div style="margin-top:5px;">RATY</div></h2>
      <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage6" ) );</script>
      <center>
      <iframe frameborder="0" width="640" height="1700" src="http://www.zagiel.com.pl/kalkulator/jak_kupic.html"></iframe>
      </center>
   </div>
   <div class="tab-page" id="tabPage7">
      <h2 class="tab">ZAPYTAJ O<br>PRODUKT</h2>
      <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage7" ) );</script>
      <center>{ZAPYTANIE_FORMULARZ}</center>
   </div>
</div>
</td>
</tr>
</table>
</center>


oczywiście pewnie nie zmieści Wam się tyle tabelek obok siebie to można pousuwać te które się chce czyli między <div class="tab-page" id="tabPage"> i </div>
np jeśli nie chcesz tabelki wysyłka to usuń ten kod

Kod: Odnośnik widoczny tylko dla zalogowanych użytkowników - Zarejestruj się

   <div class="tab-page" id="tabPage5">
      <h2 class="tab"><div style="margin-top:5px;">WYSYŁKA</div></h2>
      <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage5" ) );</script>
      wysyłka ble ble ble...      
   </div>


należy pamiętać aby id="tabPage" były ponumerowane po kolei

no i to by było na tyle