Obsługa elementu tekstowego w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon Topaz, aby obsługiwał element tekstowy.

Wskazówka

W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować.

Element tekstowy z obrazem

W Panelu Administracyjnym przejdź do zakładki Obiekty (Wygląd sklepu -> Ustawienia -> Więcej (prawy górny róg) -> Edytuj ustawienia zaawansowane -> Obiekty). Kliknij dodaj i następnie wybierz typ tekstowy. Wprowadź nazwę textelement-2. Z dostępnych obiektów, wybierz nowo utworzony obiekt i wprowadź wybraną przez siebie treść w formacie:

Nagłówek pierwszego poziomu Nagłówek drugiego poziomu Zawartość pierwszej kolumny Zawartość drugiej kolumny link-do-zdjecia.jpg

Na końcu zapisz zmiany.

Po otwarciu ustawień obiektu, przejdź do zakładki Strony a następnie zaznacz Strona główna. Zapisz poprzez kliknięcie przycisku Zapisz w prawym górnym rogu. W ten sposób będzie możliwe wyświetlanie tekstu i obrazu na stronie głównej sklepu.

Kolejnym krokiem jest dodanie na stronę główną sklepu podglądu tekstu. W celu wykonania tej operacji, przejdź do plików sklepu (Wygląd sklepu -> Ustawienia -> Edytuj ustawienia zaawansowane -> Edytuj HTML), a następnie kliknij przycisk DODAJ. W polu Ścieżka wpisz elements/textelement, a w polu nazwa pliku, textelement-2.html. W nowo utworzonym pliku dodaj poniższy kod:

{% assign name = include-%} {% assign content = [name].Content-%}

Po wprowadzeniu powyższego kodu, otwieramy plik home-page.html znajdujący się w głównym katalogu. Należy dodać w nim linijkę:
{% include 'elements/textelement/textelement-2.html' with 'textelement-2' -%}

Kod ten należy umieścić w dowolnym miejscu pomiędzy linią {% block pageContent -%} a linią {% endblock -%}. Powyższa linia kodu odpowiada za położenie elementu tekstowego na stronie głównej, dlatego jej umiejscowienie zależy od własnych preferencji.

Następnie należy otworzyć katalog css a w nim plik layout0.css. Na jego końcu wklejamy następujący kod:

.textElement-2{color:{{settings.primaryFontColor}};max-width:1400px;margin:0 auto;padding-top:50px}.textElement-2__element-wrapper{display:grid;grid-template-columns:1fr 4fr}.textElement-2__content-wrapper{margin-left:64px}.textElement-2__image{margin:auto;max-height:290px}.textElement-2__header{font-size:40px;font-weight:300}.textElement-2__secondHeader{font-size:40px;font-weight:300}.textElement-2__column-wrapper{margin-top:27px;display:grid;grid-template-columns:2fr 1fr;gap:44px;text-align:justify} @media screen and (max-width: 768px) {.textElement-2{text-align:center;display:block;padding:0}.textElement-2__element-wrapper{display:block}.textElement-2__content-wrapper{margin-left:0}.textElement-2__image{display:block;width:auto;max-height:200px;margin-bottom:20px}.textElement-2__header{margin:0 10%;font-size:20px}.textElement-2__secondHeader{margin:0 10%;font-size:20px}.textElement-2__column-wrapper{grid:unset;gap:20px;margin:20px 10% 0 10%;font-size:15px}.textElement-2__column .textElement-2__secondColumn{text-align:justify}}

Po wykonaniu powyższych operacji, wracamy do głównego katalogu, otwieramy folder js a w nim plik layout0.js. Przy pomocy narzędzia wyszukiwania, szukamy frazy headerFunctions.init();. Następujący kod należy wkleić bezpośrednio pod znalezioną linią:

if($('body').find('#textElement').index() >= 0) { textElementFunctions.init(); }

Na koniec pozostając w tym samym katalogu otwieramy plik layout1.js. Na jego końcu wklejamy następujacy kod:

var textElementFunctions = { init: function () { textElementFunctions.setTextElement(); }, setTextElement: function() { let textElementList = $("div[class^='textElement-']");


        textElementList.each( function() {

            let content = $(this).find("input").val();

            if (content === null || content === undefined)

                return null;

            let textElementValues = textElementFunctions.getTextElementValue(content);
            if (!textElementFunctions.isTextElementEmpty(textElementValues)) {

                $(this).find("#textElementHeader").html(textElementValues.header1);

                $(this).find("#textElementSecondHeader").html(textElementValues.header2);

                $(this).find("#textElementColumn").html(textElementValues.column1);

                $(this).find("#textElementSecondColumn").html(textElementValues.column2);

                $(this).find("#textElementThirdColumn").html(textElementValues.column3);

                $(this).find("#textElementImage").attr("src",textElementValues.image);

            } else {

                $(this).css("display", "none");

            }

       });

    },

    getTextElementValue: function(content) {

        const headerRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/header1>');

        const header2Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/header2>');

        const columnRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column1>');

        const column2Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column2>');

        const column3Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column3>');

        const imageRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/image>');
        let header1, header2, column1, column2, column3, image = null;
        header1 = textElementFunctions.checkMatch(content, headerRegex) !== null? textElementFunctions.checkMatch(content, headerRegex).substring(0, 50) : null;

        header2 = textElementFunctions.checkMatch(content, header2Regex) !== null? textElementFunctions.checkMatch(content, header2Regex).substring(0, 50): null;

        column1 = textElementFunctions.checkMatch(content, columnRegex);

        column2 = textElementFunctions.checkMatch(content, column2Regex);

        column3 = textElementFunctions.checkMatch(content, column3Regex);

        image = textElementFunctions.checkMatch(content, imageRegex);

return { header1: header1, header2: header2, column1: column1, column2: column2, column3: column3, image: image, }; }, checkMatch: function(content, regex) { if (content) if (content.match(regex)) if (content.match(regex).hasOwnProperty(1)) return content.match(regex)[1]; return null; }, isTextElementEmpty: function(textElementValues) { for(const [index, item] of Object.entries(textElementValues)) { if(item !== null) return false; } return true; } }

Element tekstowy bez obrazu

W Panelu Administracyjnym przejdź do zakładki Obiekty (Wygląd sklepu -> Ustawienia -> Więcej (prawy górny róg) -> Edytuj ustawienia zaawansowane -> Obiekty). Kliknij dodaj i następnie wybierz typ tekstowy. Wprowadź nazwę textelement-1. Z dostępnych obiektów, wybierz nowo utworzony obiekt i wprowadź wybraną przez siebie treść w formacie:

Nagłówek pierwszego poziomu Nagłówek drugiego poziomu Zawartość pierwszej kolumny Zawartość drugiej kolumny Zawartość trzeciej kolumny

Na końcu zapisz zmiany.

Kolejnym krokiem jest dodanie na stronę główną sklepu podglądu tekstu. W celu wykonania tej operacji, przejdź do plików sklepu (Wygląd sklepu -> Ustawienia -> Edytuj ustawienia zaawansowane -> Edytuj HTML), a następnie kliknij przycisk DODAJ. W polu Ścieżka wpisz elements/textelement, a w polu nazwa pliku, textelement-1.html. W nowo utworzonym pliku dodaj poniższy kod:

{% assign name = include-%} {% assign content = [name].Content-%}

Po wprowadzeniu powyższego kodu, otwieramy plik home-page.html znajdujący się w głównym katalogu. Należy dodać w nim linijkę:
{% include 'elements/textelement/textelement-1.html' with 'textelement-1' -%}

Kod ten należy umieścić w dowolnym miejscu pomiędzy linią {% block pageContent -%} a linią {% endblock -%}. Powyższa linia kodu odpowiada za położenie elementu tekstowego na stronie głównej, dlatego jej umiejscowienie zależy od własnych preferencji.

Następnie należy otworzyć katalog css a w nim plik layout0.css. Na jego końcu wklejamy następujący kod:

.textElement-1{color:{{settings.primaryFontColor}};max-width:1400px;margin:0 auto;padding-top:50px}.textElement-1__header{font-size:40px;font-weight:300}.textElement-1__secondHeader{font-size:40px;font-weight:300}.textElement-1__column-wrapper{margin-top:27px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;text-align:justify} @media screen and (max-width: 769px) {.textElement-1{text-align:center;margin-bottom:30px}.textElement-1__header{margin:0 10%;font-size:20px}.textElement-1__secondHeader{margin:0 10%;font-size:20px}.textElement-1__column-wrapper{grid:unset;gap:20px;font-size:15px;margin:20px 10% 0 10%}.textElement-1__column .textElement-1__secondColumn .textElement-1__thirdColumn{text-align:justify;margin-bottom:15px}}

if($('body').find('#textElement').index() >= 0) { textElementFunctions.init(); }

Na koniec pozostając w tym samym katalogu otwieramy plik layout1.js. Na jego końcu wklejamy następujacy kod:

var textElementFunctions = { init: function () { textElementFunctions.setTextElement(); }, setTextElement: function() { let textElementList = $("div[class^='textElement-']");


        textElementList.each( function() {

            let content = $(this).find("input").val();

            if (content === null || content === undefined)

                return null;

            let textElementValues = textElementFunctions.getTextElementValue(content);
            if (!textElementFunctions.isTextElementEmpty(textElementValues)) {

                $(this).find("#textElementHeader").html(textElementValues.header1);

                $(this).find("#textElementSecondHeader").html(textElementValues.header2);

                $(this).find("#textElementColumn").html(textElementValues.column1);

                $(this).find("#textElementSecondColumn").html(textElementValues.column2);

                $(this).find("#textElementThirdColumn").html(textElementValues.column3);

                $(this).find("#textElementImage").attr("src",textElementValues.image);

            } else {

                $(this).css("display", "none");

            }

       });

    },

    getTextElementValue: function(content) {

        const headerRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/header1>');

        const header2Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/header2>');

        const columnRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column1>');

        const column2Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column2>');

        const column3Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column3>');

        const imageRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/image>');
        let header1, header2, column1, column2, column3, image = null;
        header1 = textElementFunctions.checkMatch(content, headerRegex) !== null? textElementFunctions.checkMatch(content, headerRegex).substring(0, 50) : null;

        header2 = textElementFunctions.checkMatch(content, header2Regex) !== null? textElementFunctions.checkMatch(content, header2Regex).substring(0, 50): null;

        column1 = textElementFunctions.checkMatch(content, columnRegex);

        column2 = textElementFunctions.checkMatch(content, column2Regex);

        column3 = textElementFunctions.checkMatch(content, column3Regex);

        image = textElementFunctions.checkMatch(content, imageRegex);

Obsługa elementu tekstowego w szablonie Topaz