Edytor treści z podziałem na sekcje

Edytor treści z sekcjami to nowoczesne narzędzie, które umożliwia tworzenie atrakcyjnych i czytelnych opisów produktów bez potrzeby znajomości języka HTML. Obecnie funkcjonalność ta dostępna jest na karcie edycji produktu, gdzie pozwala w prosty sposób przygotować opisy z gotowych bloków sekcyjnych takich jak teksty, zdjęcia czy wideo. W najbliższym czasie planujemy rozszerzyć działanie edytora również na inne obszary systemu, w tym na strony informacyjne (CMS), blogi oraz aktualności, aby zapewnić jeszcze większą spójność i wygodę zarządzania treścią w Twoim sklepie.

W ramach rozbudowy edytora sekcyjnego wprowadziliśmy możliwość dodawania gotowych, predefiniowanych sekcji opisu. Dzięki temu możesz w prosty sposób budować atrakcyjne wizualnie i logicznie uporządkowane treści. Każda z dostępnych sekcji posiada określoną strukturę oraz dostosowany zestaw opcji edycyjnych. Poniżej znajduje się lista wszystkich dostępnych sekcji:

• Zdjęcie z lewej, opis z prawej

• Opis z lewej, zdjęcie z prawej

• Dwa opisy obok siebie

• Dwa zdjęcia obok siebie

• Pojedynczy Tekst

• Pojedyncze Zdjęcie

• Video

• Dowolna sekcja

Ekran edycji opisu towaru w panelu administracyjnym został podzielony na cztery zakładki: Podgląd, Edycja, Edycja zaawansowana oraz Historia zmian. Każda z nich oferuje inny zakres możliwości, odpowiadając na potrzeby zarówno mniej, jak i bardziej zaawansowanych użytkowników.

Podgląd

Dodatkowy tryb podglądu, który umożliwia użytkownikowi sprawdzenie, jak aktualnie opracowana treść będzie prezentować się na karcie edycji towaru niezależnie od tego, czy korzysta z trybu Edycji, czy trybu Edycji zaawansowanej. Kluczowe jest to, że podgląd działa bez potrzeby zapisywania zmian i wystarczy, że użytkownik uzupełni treść w edytorze, a następnie przełączy się na tryb podglądu, aby w sposób wizualny ocenić wygląd opisu. To rozwiązanie pozwala na bieżąco weryfikować formatowanie, układ sekcji oraz poprawność wprowadzonych danych.

Edycja

Edycja to domyślny sposób wprowadzania i modyfikowania opisów w oparciu o edytor wizualny TinyMCE. Umożliwia on użytkownikowi pracę w trybie WYSIWYG („What You See Is What You Get”), co oznacza, że formatowanie i układ treści są natychmiast widoczne podczas edycji. Edytor ten wspiera gotowe układy sekcji, predefiniowane style oraz intuicyjny interfejs oparty na paskach narzędziowych z podziałem na funkcjonalność standardową i zaawansowaną, w zależności od typu sekcji.

Dostępne sekcje znajdziesz na początku tego artykułu .

Podgląd w sklepie

Podgląd w sklepie to funkcja dostępna w trybie Edycji opisu produktu, która pozwala sprawdzić, jak Twój opis będzie wyglądał na stronie sklepu zanim jeszcze zapiszesz wprowadzone zmiany.

Po kliknięciu przycisku Podgląd w sklepie możesz zobaczyć przygotowaną treść w dokładnie takiej formie, w jakiej zostanie zaprezentowana klientom w sklepie internetowym.

Edycja zaawansowana

Edycja zaawansowana to tryb przeznaczony dla użytkowników, którzy chcą mieć pełną kontrolę nad kodem HTML opisu produktu bez automatycznych konwersji i uproszczeń typowych dla edytorów wizualnych. To idealne miejsce dla osób bardziej zaawansowanych, które samodzielnie tworzą lub modyfikują kod, korzystając z własnych stylów, klas czy struktur.

W tym trybie dostępny jest nowoczesny edytor kodu, który oferuje:

• Kolorowanie składni HTML – kod jest czytelniejszy, a błędy łatwiej wychwycić,

• Numery linii – ułatwiają orientację i szybkie odnajdywanie fragmentów kodu,

• Podpowiedzi składni (autouzupełnianie tagów) – piszesz szybciej i z mniejszym ryzykiem literówek,

• Sygnalizowanie błędów – gdy w kodzie pojawi się błąd (np. niezamknięty tag), edytor wyświetli obok odpowiedniej linii charakterystyczny znak „X”, ułatwiając znalezienie i poprawienie problemu.

W trybie Edycji zaawansowanej możesz dowolnie korzystać z własnych stylów inline, klas, niestandardowych tagów oraz rozbudowanych struktur HTML. Treści zapisane w tym trybie są traktowane jako „dowolna sekcja” i nie są ograniczane sekcjami ani gotowymi szablonami.

Historia zmian

Historia zmian to funkcja, która pozwala szybko wrócić do jednej z ośmiu ostatnio zapisanych wersji opisu produktu. Jeśli podczas edycji wprowadzisz przypadkowe zmiany lub po prostu chcesz przywrócić wcześniejszą wersję treści możesz to zrobić dosłownie kilkoma kliknięciami.

Każdą z nich możesz najpierw zobaczyć, a jeśli zdecydujesz się ją przywrócić, wystarczy kliknąć „Załaduj tę wersję jako aktualną”. Po potwierdzeniu, wybrany opis pojawi się w polu Edycji zaawansowanej – możesz go od razu poprawić lub od razu zapisać jako nową, aktualną wersję.

Jeśli chcesz odzyskać opis, który nie znajduje się już wśród ostatnich ośmiu zapisanych wersji, możesz skorzystać z odnośnika do pełnej historii zmian opisów towaru. Tam znajdziesz wszystkie wcześniejsze wersje opisu, wystarczy skopiować interesujący kod HTML i wkleić go do pola Edycji zaawansowanej.

Nowy edytor treści w panelu administracyjnym IdoSell obsługuje zaawansowaną strukturę sekcyjną, która pozwala na elastyczne budowanie opisów produktów. W związku z tym wprowadzono dwie główne metody przesyłania opisów przez API:

productLongDescription – umożliwia przesłanie klasycznego opisu w formie ciągu HTML, zapewniając pełną kompatybilność wsteczną z dotychczasowymi rozwiązaniami i zewnętrznymi integracjami.

productDescriptionSections – pozwala na przekazywanie treści w formie predefiniowanych sekcji, co daje większą kontrolę nad strukturą, walidacją oraz prezentacją opisu na stronie sklepu.

Poniżej opisane zostały oba sposoby wgrywania opisów, ich zalety oraz zasady działania. Każda z metod dedykowana jest innym przypadkom użycia, od integracji wymagających prostego przesłania kodu HTML po zaawansowane scenariusze, w których liczy się struktura oraz bezpieczeństwo treści.

productLongDescription

Pole productLongDescription to dotychczasowy, uniwersalny sposób przesyłania długiego opisu produktu do panelu IdoSell przez API. Pozwala ono na masowe wgrywanie treści opisu, zgodnie z

wieloletnim standardem integracji platformy. Rozwiązanie to zapewnia pełną kompatybilność wsteczną z dotychczasowymi integracjami i narzędziami zewnętrznymi.

Opis przekazywany przez pole productLongDescription trafia domyślnie do trybu Edycji zaawansowanej na karcie produktu, gdzie prezentowany jest w swojej oryginalnej, niezmodyfikowanej formie. Dzięki temu możliwe jest zachowanie pełnej zgodności z dotychczasowymi integracjami oraz praca z niestandardowym lub nieoptymalnym kodem HTML. Użytkownik w każdej chwili może również otworzyć ten sam opis w trybie Edycji (wizualny edytor TinyMCE).

productDescriptionSections

W ramach rozwoju edytora blokowego oraz zwiększenia elastyczności w prezentacji treści, system został rozbudowany o możliwość przesyłania złożonych opisów produktów w nowej strukturze. Rozwiązanie to pozwala na budowanie opisów z dedykowanych sekcji i podsekcji, które odwzorowują układ oraz funkcjonalność dostępne w wizualnym edytorze panelu administracyjnego.

Dzięki temu API umożliwia już nie tylko przesyłanie klasycznego opisu w jednym bloku HTML, ale również przesyłanie opisów podzielonych na sekcje odpowiadające predefiniowanym układom, takim jak: tekst z obrazkiem, dwa opisy obok siebie, materiał video itp.

Podstawowe założenia i działanie:

• Opis przesyłany w productDescriptionSections składa się z listy sekcji (descriptionSections), z których każda może zawierać jedną lub dwie podsekcje (descriptionSubsection) określające typ (tekst, zdjęcie, video, html) oraz treść.

• Pozwala to odwzorować na stronie dowolny układ treści, zgodny z funkcjonalnością edytora sekcyjnego.

• Struktura ta daje większą kontrolę nad zawartością oraz jej prezentacją (np. tekst po lewej, zdjęcie po prawej).

• API waliduje przesyłane dane, uniemożliwiając np. połączenie w jednej sekcji niekompatybilnych typów (np. html + video).

Przykładowa struktura żądania:

{ 
  "productId": 12345, 
  "lang": "pl", 
  "productDescriptionSections": { 
    "descriptionSections": [ 
        { 
          "section_1": { 
            "type": "text", 
            "content": "Nowoczesny czajnik o pojemności 1,7l." 
          }, 
          "section_2": { 
            "type": "photo",
            "content": "<img src='https://demo7770-pl.iai-shop.com/pol_pm_languages-pol_0-productname-83_1.webp' alt='Czajnik czarny'>" 
            } 
          }, 
          { "section_1": { 
            "type": "video", 
            "content": "<video src='https://przyklad.pl/kettle-video.mp4' controls></video>" 
            } 
          } 
        ] 
      } 
    }

Działanie i efekt końcowy:

• Opis zostaje zapisany w formie sekcyjnej, dokładnie odwzorowując przesłane układy sekcji i podsekcji.

• Po wejściu w Edycję produktu w panelu administracyjnym, każda sekcja wyświetla się w odpowiednim bloku (np. tekst + obraz, video, sam tekst).

• System automatycznie poprawia strukturę przesłanych danych:

• W przypadku wystąpienia nieprawidłowości (np. nieobsługiwane typy podsekcji, błędna zawartość), system nie zgłasza błędu, tylko automatycznie poprawia przesłany opis, usuwając lub przekształcając fragmenty niezgodne ze schematem. Oznacza to, że Twój opis zostanie „naprawiony” zgodnie z regułami edytora, bez przerywania zapisu i bez informacji o odrzuconych fragmentach.

• Jeżeli w żądaniu API prześlesz opis zarówno w polu productLongDescription, jak i w productDescriptionSections, priorytet zawsze ma opis sekcyjny (productDescriptionSections). Zostanie on zapisany i wyświetlony na karcie produktu, natomiast klasyczny opis tekstowy (productLongDescription) zostanie pominięty.

Jak przygotować sekcje opisu do wgrania przez API?

W nowym systemie możesz budować opis produktu z tzw. sekcji, które odpowiadają różnym układom na stronie na przykład: zdjęcie z opisem, dwa zdjęcia obok siebie, sam tekst, sam film itd. Każda taka „sekcja” to jedna część opisu na stronie.

W API do przesyłania opisu w formie sekcyjnej korzystasz z opcji productDescriptionSections. Każda sekcja, którą chcesz wyświetlić, to osobny blok opisany jako descriptionSection. W środku każdej sekcji możesz umieścić jedną lub dwie podsekcje (czyli: section_1 i, jeśli chcesz, section_2).

Jakie sekcje można łączyć?

• Zdjęcie i tekst (np. zdjęcie z lewej, tekst z prawej) – wpisujesz:

  • section_1: typ photo (tutaj podajesz kod obrazka, np. <img ...>)

  • section_2: typ text (tu dajesz tekst, np. Opis produktu)

• Dwa zdjęcia obok siebie – wpisujesz:

  • section_1: typ photo

  • section_2: typ photo

• Dwa opisy tekstowe obok siebie – wpisujesz:

  • section_1: typ text

  • section_2: typ text

• Tylko tekst – wpisujesz:

  • section_1: typ text

• Tylko zdjęcie – wpisujesz:

  • section_1: typ photo

Czego nie wolno łączyć?

• Wideo (video) – zawsze osobno, nie możesz dodać nic obok.

• HTML (html) – zawsze osobno, nie możesz dodać nic obok.

• Nie można łączyć video + html oraz video + text, video + photo itp.

Automatyczne rozdzielanie podsekcji niekompatybilnych

Jeśli w jednej sekcji opisu przez API spróbujesz dodać więcej niż jedną podsekcję typu HTML lub video (albo oba te typy naraz), system sam podzieli je na osobne sekcje. W praktyce oznacza to, że każda część z kodem HTML lub każdy film wideo będzie automatycznie wyświetlany jako osobny blok w opisie produktu. Pozwala to zachować porządek i zgodność z układem nowego edytora treści.