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:


<header1>Nagłówek pierwszego poziomu</header1>
<header2><b>Nagłówek drugiego poziomu</b></header2>
<column1>Zawartość pierwszej kolumny</column1>
<column2>Zawartość drugiej kolumny</column2>
<image>link-do-zdjecia.jpg</image>

<header1>Nagłówek pierwszego poziomu</header1>

<header2><b>Nagłówek drugiego poziomu</b></header2>

<column1>Zawartość pierwszej kolumny</column1>

<column2>Zawartość drugiej kolumny</column2>

<image>link-do-zdjecia.jpg</image>

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-%}
<div class="textElement-2" id="textElement">
    <div class="page-padding">
        <div class="textElement-2__element-wrapper">
            <input class="hidden" type="text" name="textElementContent" value="{{content}}">
            <img class="textElement-2__image" id="textElementImage" src="">
            <div class="textElement-2__content-wrapper">
                <div class="textElement-2__header-wrapper">
                    <div class="textElement-2__header" id="textElementHeader"></div>
                    <div class="textElement-2__secondHeader" id="textElementSecondHeader"></div>
                </div>  
                <div class="textElement-2__column-wrapper">
                    <div class="textElement-2__column" id="textElementColumn"></div>
                    <div class="textElement-2__secondColumn" id="textElementSecondColumn"></div>
                </div>
            </div>
        </div>
    </div>
</div>

{% assign name = include-%}

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

</div>

</div>

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' -%}

{% 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}}

.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();
}

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('<header1>(\s*(?:\w|[^\w])*\s*)<\/header1>');
        const header2Regex = new RegExp('<header2>(\s*(?:\w|[^\w])*\s*)<\/header2>');
        const columnRegex = new RegExp('<column1>(\s*(?:\w|[^\w])*\s*)<\/column1>');
        const column2Regex = new RegExp('<column2>(\s*(?:\w|[^\w])*\s*)<\/column2>');
        const column3Regex = new RegExp('<column3>(\s*(?:\w|[^\w])*\s*)<\/column3>');
        const imageRegex = new RegExp('<image>(\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;
    }
}

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('<header1>(\s*(?:\w|[^\w])*\s*)<\/header1>');

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

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

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

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

const imageRegex = new RegExp('<image>(\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:


<header1>Nagłówek pierwszego poziomu</header1>
<header2><b>Nagłówek drugiego poziomu</b></header2>
<column1>Zawartość pierwszej kolumny</column1>
<column2>Zawartość drugiej kolumny</column2>
<column3>Zawartość trzeciej kolumny</column3>

<header1>Nagłówek pierwszego poziomu</header1>

<header2><b>Nagłówek drugiego poziomu</b></header2>

<column1>Zawartość pierwszej kolumny</column1>

<column2>Zawartość drugiej kolumny</column2>

<column3>Zawartość trzeciej kolumny</column3>

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-%}
<div class="textElement-1" id="textElement">
    <div class="page-padding">
        <input class="hidden" type="text" name="textElementContent" value="{{content}}">
        <div class="textElement-1__header-wrapper">
            <div class="textElement-1__header" id="textElementHeader"></div>
            <div class="textElement-1__secondHeader" id="textElementSecondHeader"></div>
        </div>
        <div class="textElement-1__column-wrapper">
            <div class="textElement-1__column" id="textElementColumn"></div>
            <div class="textElement-1__secondColumn" id="textElementSecondColumn"></div>
            <div class="textElement-1__thirdColumn" id="textElementThirdColumn"></div>
        </div>
    </div>
</div>

{% assign name = include-%}

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

</div>

</div>

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' -%}

{% include 'elements/textelement/textelement-1.html' with 'textelement-1' -%}

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

.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();
}

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('<header1>(\s*(?:\w|[^\w])*\s*)<\/header1>');
        const header2Regex = new RegExp('<header2>(\s*(?:\w|[^\w])*\s*)<\/header2>');
        const columnRegex = new RegExp('<column1>(\s*(?:\w|[^\w])*\s*)<\/column1>');
        const column2Regex = new RegExp('<column2>(\s*(?:\w|[^\w])*\s*)<\/column2>');
        const column3Regex = new RegExp('<column3>(\s*(?:\w|[^\w])*\s*)<\/column3>');
        const imageRegex = new RegExp('<image>(\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;
    }
}