Dodanie konfigurowalności strony głównej w szablonie Szafir

Dodanie konfigurowalności strony głównej w szablonie Szafir

W tym artykule dowiesz się jak zmodyfikować szablon Szafir, aby strona główna była konfigurowalna.

Krok 1.

W panelu administracyjnym przejdź do sekcji Wygląd sklepu/Ustawienia. Następnie, mając wybrany szablon Szafir, w prawym górnym rogu wybierz więcej, po czym przejdź do Edytuj ustawienia zaawansowane/więcej/edytuj HTML.

Krok 2.

Odnajdź plik __settings.liquid. Następnie w drugiej linijce dodaj poniższy kod:

{% assign homepage = "Strona główna" -%}
{% assign elementsAtHomepage = "Lista elementów na stronie głównej sklepu" -%}
{% assign name = "Nazwa" -%}
{% assign parameters = "Parametry" -%}
{% assign mainBanner = "Baner główny" -%}
{% assign mainBannerLink = "Przejdź do edycji tego bannera" -%}
{% assign newsSection = "Sekcja Nowości" -%}
{% assign newsSectionLink = "Przejdź do edycji zawartości tej sekcji" -%}
{% assign newsletter = "Newsletter" -%}
{% assign manufacturersSlider = "Slider Producenci" -%}
{% assign news = "Aktualności" -%}
{% assign newsLink = "Przejdź do listy artykułów bloga" -%}
{% assign infographicBanner = "Banner infografika" -%}
{% assign infographicBannerLink = "Przejdź do edycji tego bannera" -%}
{% assign animationOnHover = "Animacja na hoverze" -%}
{% assign brandsSlider = "Slider Marki" -%}


Następnie wyszukaj linijkę border-bottom: 1px solid #ddd; i pod nią dodaj display: flex;. Parę linijek niżej znajduje się kod:

#lg-settings-content .row::after {
display: block;
clear: both;
content: '';
}
#lg-settings-content .cell {
border-left: 1px solid #ddd;
display: inline-block;
vertical-align: middle;
width: calc((100% - 308px)/4);
min-height: 20px;
padding: 10px;
float: left;
}


Usuń go, a następnie wklej następujący kod:

#lg-settings-content .cell {
border-left: 1px solid #ddd;
width: calc((100% - 308px)/4);
padding: 10px;
}
#lg-settings-content .elements-at-homepage .cell.name{
width: 130px;
}
#lg-settings-content .elements-at-homepage .cell.translation{
width: 160px;
}
#lg-settings-content .elements-at-homepage .cell.parameters{
width: calc(100% - 515px);
}
#lg-settings-content .elements-at-homepage .cell.goto{
width: 100%;
}


Wyszukaj frazę {{navigationBarSettings}} i zamień ją na {{homepage}}. Następnie odszukaj frazę {{newsletter}} i usuń całą sekcję fieldset w której się ona znajduje. To samo zrób w przypadku fraz {{homepageBannerTranslation}}, {{blogOnHomepage}} oraz {{categoryMenu}}. Kilka linijek niżej znajdziesz id=”tab1Content”. Pod tą linijką dodaj poniższy fragment:

{{navigationBarSettings}}

Następnie znajdź frazę id=”tab2Content” i dwie linijki wyżej wklej następujący kod:

{{categoryMenu}}

{{categoryMenuInfo}}

{{big}}

{{medium}}

{{small}}

{{elementsAtHomepage}}

{{available}}

{{number}}

{{name}}

{{translationId}}

{{parameters}}

{{mainBanner}}

{{animationTypeTranslation}}

{{animationTypeSlide}}

{{animationTypeFade}}

{{slideTimeTranslation}}

{{mainBannerLink}}

{{newsSection}}

NewProducts

{{animationOnHover}}

{{yesTranslation}}

{{noTranslation}}

{{newsSectionLink}}

{{newsletter}}

NewsletterAndNewsAdd

{{manufacturersSlider}}

{{animationOnHover}}

{{yesTranslation}}

{{noTranslation}}

{{slideTimeTranslation}}

{{brandsSlider}}

{{animationOnHover}}

{{yesTranslation}}

{{noTranslation}}

{{slideTimeTranslation}}

{{news}}

BlogNews

{{blogPresentationOnHomepage}}

{{extended}}

{{compact}}

{{animationOnHover}}

{{yesTranslation}}

{{noTranslation}}

{{newsLink}}

{{infographicBanner}}

{{animationOnHover}}

{{yesTranslation}}

{{noTranslation}}

{{slideTimeTranslation}}

{{infographicBannerLink}}

Teraz wyszukaj funkcję __SaveLiquidSettings i linijkę wyżej wklej poniższy kod:

$('.pa-translation-link').each(function(){
var id = $(this).text();
var url = $(this).attr('href').replaceAll('__ID__', id);
$(this).attr('href', url);
});

$('.pa-link').each(function(){
var id = $(this).data('id');
var url = $(this).attr('href').replaceAll('__ID__', id);
$(this).attr('href', url);
});


Krok 3.

Następnie w pliku home.html w pierwszych linijkach znajdziesz taki fragment kodu:

{% include 'common/banner.html' -%}

{{translations.NewProducts}}

{% if customer.HidePrices -%}
{% include 'product/hidden-prices-msg.html' -%}
{% endif -%}
{% include 'product/minibox-grid.html' -%}

{% unless customer.NewsletterSubscriber or settings.newsletter == 'no' -%}