ROZWIĄZANE Responsywne tabele

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

 

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.

 

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ę

 

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

 

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!

 

Chyba się nie doczekam na odpowiedź od home...

 

@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:

Code:

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