Jump to content
antylopa

Problem z sformatowaniem opisu

Recommended Posts

W podstawowym szablonie PrestaShop 1.7.4.4 podczas opisywania towaru w zakładce PODSUMOWANIE, czyli tej co wyświetla się po prawej stronie zdjęcia, mam problem z odstępami pomiędzy wyrazami. Chcę uzyskać efekt równej pionowej linii opisu w każdej z linijek . Zobrazuję na przykładzie o co mi chodzi:
Producent        xxx
Model               xxx
Wielkość          xxx
Kolor                xxx
Tak być powinno niestety xxx pomimo zapisywania w kodzie źródłowym nie "trzymają" zadanego odstępu i następuje przesunięcie tekstu. .

Share this post


Link to post
Share on other sites

Opisujesz to w treści czy masz jakąś tabelkę? Trzeba sformatować zapewne daną sekcję w stylach css. 

Share this post


Link to post
Share on other sites

Przepraszam, że się nie odzywałem ale koniec roku i remanent z tym związany...

Tak wygląda mój przykładowy skrócony opis produktu:

<p class="opis">producent                     <span>KARINO</span></p>
<p class="opis">model                           <span> 2758/005-P rudy</span></p>
<p class="opis">cholewka                       <span>skóra, środek wykończony skórą </span></p>
<p class="opis">wkładka                         <span>skóra</span></p>
<p class="opis">wysokość obcasa       <span> 6 cm</span></p>
<p class="opis">wielkość                        <span> typowa</span></p>
<p></p>

Share this post


Link to post
Share on other sites

np tak:

    .opis{
        display: flex;
        justify-content: space-between;
    }

 

Share this post


Link to post
Share on other sites

Dzięki za podpowiedź :)

Proszę Cię napisz mi dwie linijki tekstu posługując się podanym przeze mnie przykładzie opisu, bo moja wiedza w tym zakresie niestety kuleje...  

Share this post


Link to post
Share on other sites

Dodałem, niestety nic to nie zmieniło :(

W załączniku 1 przesyłam zrzut ekranu przedstawiający wprowadzony tekst oraz tak jak on wygląda w kodzie źródłowym. W drugim załączniku to co widać w sklepie.

1.jpg

2.jpg

Share this post


Link to post
Share on other sites
Posted (edited)

Cache wyczyszczony, niestety nic to nie dało. Poprawnie wpisany opis trzymający równą pionową linię po prawej stronie, w kodzie źródłowym się "rozjeżdża" i tak właśnie wyświetlany jest na sklepie.

Żeby nie było niejasności, podany kod wpisałem do pliku /themes/classic/assets/css/custom.css

Edited by antylopa (see edit history)

Share this post


Link to post
Share on other sites

opis się nie rozjeżdża, etykiety są wyrównane do lewej, a sam opis do prawej,

jak ma być inaczej to spróbuj w ten sposób:

w opisie produktu umieść kod tak jak w przykładzie

<p class="opis"><span class="etykieta">producent marka</span><span>KARINO</span></p>

 

w plik custom.css dodaj


.opis{
    display: flex;
}

.opis .etykieta {
    width: 200px;
}

 

jak 200px za mało lub za dużo to zmień wartość na inną

Share this post


Link to post
Share on other sites

Niestety efekt byle jaki. Lewa strona pozostaje tak jak potrzeba, prawa zaś wyrównuje do prawej strony, co powoduje, że odstępy są zbyt duże. 

Obawiam się, że temat jest nie do przeskoczenia z uwagi, że poprzez sklep wystawiam aukcje na Allegro. Gdyby chodziło o sam sklep skorzystałbym z tabeli i byłoby po sprawie. Tutaj dochodzi to co może przejść na Allegro, stąd problem.

Niemniej jednak zauważyłem, że po wpisaniu tekstu i jego podglądu kodu źródłowego, dosyć szybko mogę ręcznie skorygować ostateczny wygląd widząc w kodzie źródłowym jak będzie wyświetlany w sklepie.  

Share this post


Link to post
Share on other sites

Po namyśle doszedłem do wniosku, że można by ustawić stałą ilość spacji w każdej linijce. Skoro odstęp pomiędzy słowem "producent" a kolejnym ma wynosić np. 16 spacji, to w drugiej linijce po słowie "model" powinno być 20 spacji (słowo krótsze o 4 litery od słowa "producent"). 

Share this post


Link to post
Share on other sites

Dodawanie spacji to jest jakieś rozwiązanie, tylko trochę bez sensu. Odpowiedz sobie na pytanie ile spacji potrzeba na literkę np "w", a ile na literkę "i". Nie używasz w sklepie czcionki monotypicznej.

Masz dużo czasu i lubisz liczyć spacje to możesz w ten sposób to zrobić.

 

 

Możesz osiągnąć "równy" efekt po stronie sklepu np. w ten sposób:

1. usuń zbędne znaki odstępu z opisu.
    
    To jest fragment kodu z twojej strony:
    <p class="opis">inne &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wyjątkowo lekkie i wygodne</span></p>
    
    doprowadź go postaci:
    <p class="opis">inne<span>wyjątkowo lekkie i wygodne</span></p>
    
    lub jak w poprzednim przykładzie do postaci - da to większe możliwości formatowania:
    
    <p class="opis"><span class="etykieta">inne</span><span>wyjątkowo lekkie i wygodne</span></p>
    
2. dodaj do css kod formatujący np:

    z poprzedniego przykładu,

 

lub:

.opis{
    display: flex;
    justify-content: space-between;
}
    
.opis span {
    width: 300px;
}


W szablonach allegro była i chyba dalej jest możliwość korzystania z własnych styli css

 

Share this post


Link to post
Share on other sites

próbowałem różnych kombinacji, efekt przedstawiam chronologicznie

pierwsza kombinacja to schowek01, schowek02, schowek03

druga kombinacja to schowek04, schowek05, schowek06

za każdym razem jedną kolumnę mam formatowaną do lewej, drugą zaś do prawej strony, a nie o to mi chodzi

specjalnie zostawiłem trzy ostatnie linijki kodu źródłowego, których nie zmieniałem, po to, by pokazać, że o taki efekt końcowy mi chodzi 

 

 Schowek02.thumb.jpg.e83f2a50f36b7cc6d3e4a2ef5f584097.jpg

 

 

Schowek01.thumb.jpg.d686a4a46e7b79cc71a9ad66291f279e.jpg

 

Schowek03.jpg

Schowek04.jpg

Schowek05.jpg

Schowek06.jpg

Share this post


Link to post
Share on other sites

Jest coś takiego jak cache, po każdej zmianie w css wyczyść, albo wyłącz optymalizacje.

Dopiero po tym zobaczysz zmiany

 

 

Share this post


Link to post
Share on other sites

coś z tego będzie :)

na chwilę obecną wygląda to tak jak na screenie

 dobrze byłoby, żeby zmniejszył się odstęp pomiędzy kolumnami, próbowałem zmieniać wartość width, ale nie osiągnąłem pożądanego efektu

01.jpg

Share this post


Link to post
Share on other sites

Tak czytajac wszystkie rozwiazania... ok, fajne, ppwinno zadzialac itp. Wszystko niby fajnie, ale czy ktos pomyslal i sprawdzil jak to bedzie wygladalo w responsive? Czyli np. Na tel?

Ja bym raczej posilil sie tutaj kolumnami bootstrampa. Szybko, prosto i przede wszystkim responsywnie

Share this post


Link to post
Share on other sites

Sposób dobry, w responsive wygląda tak jak trzeba, problem w tym, że nie przechodzi to tak jak powinno przez mój program do synchronizacji z Allegro. Wystawiając ze sklepu na Allegro mam w każdej z linijek zlewający się ze sobą tekst.

Na chwilę obecną zadowolony jestem, że dosyć szybko mogę ręcznie poprawić opis korzystając z podglądu w kodzie źródłowym.

Share this post


Link to post
Share on other sites
13 hours ago, stone62 said:

gdzie tego szukać?

 

 

a gdzie masz te znaki zapytania? :)

Share this post


Link to post
Share on other sites
14 hours ago, stone62 said:

pytasz czy sobie odpowiadasz? jak pisalem wczesniej zmien w tekstach, tam gdzie wystepuje znak zapytania na myslnik. zakladam, ze teksty byly kopiowane z jakis innych zrodel i to jest blad kodowania tekstow. jezlei po stronie panelu w tych tekstach nie wystepuja znaki zapytania tylko myslniki to musisz je albo przepisac, albo zmienic czcionke, bo w tej ten znak nie wystepuje

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More