1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

ROZWIĄZANE Responsywne tabele

Dyskusja w 'Zmiana wyglądu sklepu i edycja zaawansowana' rozpoczęta przez użytkownika michalhockey, 3 Kwiecień 2015.

  1. michalhockey

    michalhockey Opiekun

    Wiadomości:
    174
    Docenione treści:
    44
    Witam,

    mam na każdej karcie produktu tabele, jednak kiepsko się prezentują przy przeglądaniu sklepu w urządzeniach mobilnych (tabele są rozjechane i nie chcą się przesuwać). Sprawę rozwiązałem - problem tylko gdzie mogę wpisać ten skrypt

    <script>
    $('table').wrap("<div class='rwd-table'></div>");
    </script>

    dzięki któremu każda tabela zostanie owinięta tym divem :), ręczne owijanie kilkaset stron jest zbyt czasochłonne jak można to zrobić znacznie szybciej :) Próbowałem w sekcji "Integracje własne"

    Pozdrawiam serdecznie
    Michał Korcz
     
    michalhockey, 3 Kwiecień 2015
    #1
  2. koczyA

    koczyA Zaglądacz

    Wiadomości:
    11
    Docenione treści:
    0
    W konfiguracji sklepu czyli tam gdzie masz konfiguracja, potem wygląd, aktywny styl graficzny po lewej stronie znajdziesz 2 opcje:
    własny styl CSS i własny styl JS. Kiedyś doklejałem tam jakieś kody jak był problem z wyświetlaniem cen itp. więc zapewne tu musisz dodać swój skrypt i CSS.

    Znalazłem coś takiego: kliknij tutaj
    Zrób sobie kopie skórki i pogrzeb testowo.
     
    koczyA, 3 Kwiecień 2015
    #2
  3. michalhockey

    michalhockey Opiekun

    Wiadomości:
    174
    Docenione treści:
    44
    Hej,

    właśnie z tej strony korzystałem. Ale skrypt z tej strony nie działa, gdy wkleję go do sekcji "Własny styl JS".


    EDIT.

    Po wstawieniu tego skryptu rozjezdza się proces składania zamówienia (między innymi nie widać przycisku "zamawiam i płacę"). Chyba sobie odpuszczę bo jeszcze wszystko zepsuję :)
     
    Ostatnia modyfikacja: 3 Kwiecień 2015
    michalhockey, 3 Kwiecień 2015
    #3
  4. koczyA

    koczyA Zaglądacz

    Wiadomości:
    11
    Docenione treści:
    0
    A CSS stworzyłeś? Musisz zadeklarować klasę w CSS i później się do niej odwołać, czyli raczej będzie trzeba w każdej tabeli osobno. Poczekaj, może ktoś się jeszcze wypowie w tym temacie, bo ja tylko grzebię w tym tyle co jak modyfikuję coś.
     
    koczyA, 3 Kwiecień 2015
    #4
  5. michalhockey

    michalhockey Opiekun

    Wiadomości:
    174
    Docenione treści:
    44
    Stworzyłem. Generalnie działa jeśli ręcznie ustawię tabelki w każdej karcie produktu - ale jeśli wkleję skrypt który ma pokryć każdą tabelkę w divie to rozwala to funkcjonowanie sklepu. Opcja z ręcznym ustawianiem chyba jedynie wejdzie w grę chyba, że można tak napisać skrypt, żeby pokrywał tabelki w divie tylko w kartach produktu :) Dzięki @koczyA za zainteresowanie!
     
    michalhockey, 3 Kwiecień 2015
    #5
    koczyA lubi to.
  6. michalhockey

    michalhockey Opiekun

    Wiadomości:
    174
    Docenione treści:
    44
    Chyba się nie doczekam na odpowiedź od home...
     
    michalhockey, 16 Kwiecień 2015
    #6
  7. Grzesiek

    Grzesiek Centrum Pomocy home.pl

    Wiadomości:
    3 660
    Docenione treści:
    333
    @michalhockey podpowiedź w temacie wskazał @koczyA. Staramy się z @Mariusz konsultować i zdobywać dodatkowe informacje, ale czasami trzeba liczyć też na pomoc innych użytkowników. W usłudze Click Web korzystałem testowo z takiego skryptu na tabelę responsywną. Widzę, że działa także w sklepie. Sprawdź czy taka responsywność wystarczy Ci:

    Kod:
    <div class="divTable">
<div class="headRow">
<div class="divCell" align="center">Customer ID</div>
<div class="divCell">Customer Name</div>
<div class="divCell">Customer Address</div>
</div>
<div class="divRow">
<div class="divCell">001</div>
<div class="divCell">002</div>
<div class="divCell">003</div>
</div>
<div class="divRow">
<div class="divCell">xxx</div>
<div class="divCell">yyy</div>
<div class="divCell">www</div>
</div>
<div class="divRow">
<div class="divCell">ttt</div>
<div class="divCell">uuu</div>
<div class="divCell">Mkkk</div>
</div>
</div>


<style type="text/css">
.divTable
{
display: table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
/* border-collapse:separate;*/
}
.divRow
{
display:table-row;
width:auto;
}
.divCell

{
float:left;/*fix for buggy browsers*/
display:table-column;
width:200px;
background-color:#ccc;
}
</style>
</form>
    Pierwszy fragment odpowiada za samą tabelę i zawartość, drugi za jej budowę, czyli wspomniany CSS.

    Tabelę wklejasz w opisie produktu, w edytorze jest dostępny przycisk Widok --> Kod źródłowy (patrz załącznik - screen). Klasę CSS możesz dodać w Konfiguracja --> Wygląd --> Aktywny styl graficzny --> Własny CSS. Zapewne pojawią się drobne błędy, skasuj to co podświetli się na czerwono i zapisz zmiany.
     

    Załączone pliki:

    Grzesiek, 16 Kwiecień 2015
    #7

Poleć forum znajomym