Baza wiedzy LINKSPOT › Wygląd sklepu

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

Wygląd sklepu · Opublikowano 2024-11-20

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.

Wskazówka

Instrukcja przeznaczona jest dla sklepów od wersji 2022.4, które posiadają starsze szablony. Artykuł przeprowadzi Cię przez proces modyfikacji plików js oraz scss. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.

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

Usuń go i w jego miejsce wklej ten kod:
{% if settings.mainBanner -%} {% include 'common/banner.html' -%} {% endif -%}

{% if settings.newsSection -%}

{{translations.NewProducts}}

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

{% include 'product/minibox-grid.html' -%}

{% endif -%}

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

Teraz znajdź frazę assign manufacturersSliderSize. W obszareze tej linijki znajdziesz następujący fragment kodu:
{% assign manufacturersSliderSize = manufacturer-brand.Manufacturers | Size -%} {% if manufacturersSliderSize > 0 -%}

{% for manufacturer in manufacturer-brand.Manufacturers -%}
{% if manufacturer.Image -%}
{% if manufacturer.Url != empty -%}
[{% endif -%}

Usuń go, a w jego miejsce wklej poniższy kod:
{% endif -%}

{% assign manufacturersSliderSize = manufacturer-brand.Manufacturers | Size -%}
{% if manufacturersSliderSize > 0 and settings.manufacturersSlider -%}

{% for manufacturer in manufacturer-brand.Manufacturers -%}
{% if manufacturer.Image -%}
{% if manufacturer.Url != empty -%}
[{% endif -%}

Kilka linijek niżej znajdziesz taki fragment kodu:
{% assign blogPostsSize = blog.LatestPosts | Size -%} {% if blogPostsSize > 0 -%}

{{translations.BlogNews}}

{% include 'blog/blog-news-partial.html' -%}

{% endif -%}

{% assign homepageSmallSliderSize = config.Banners['homepage-small'].Images | Size -%}
{% if homepageSmallSliderSize > 0 -%}

{% for slide in config.Banners['homepage-small'].Images -%}
{% if slide.Link != empty -%}
[{% endif -%}

Usuń go i wklej w jego miejsce ten kod:
{% assign brandsSliderSize = manufacturer-brand.Brands | Size -%} {% if brandsSliderSize > 0 and settings.brandsSlider -%}

{% for brand in manufacturer-brand.Brands -%}
{% if brand.Image -%}
{% if brand.Url != empty -%}
[{% endif -%} {% if brand.Heading != null -%}
{% assign title = {{brand.Heading | H}} -%}
{% else -%}
{% assign title = {{brand.Name | H}} -%}
{% endif -%}
{{brand|Img2:'medium'}}

{% if brand.Url != empty -%}](https://pomoc.comarchesklep.pl/artykul/dodanie-konfigurowalnosci-strony-glownej-w-szablonie-szafir/{{brand.Url}})
{% endif -%}
{% endif -%}
{% endfor -%}

{% endif -%}

{% assign blogPostsSize = blog.LatestPosts | Size -%}
{% if blogPostsSize > 0 and settings.news -%}

{{translations.BlogNews}}

{% include 'blog/blog-news-partial.html' -%}

{% endif -%}

{% assign homepageSmallSliderSize = config.Banners['homepage-small'].Images | Size -%}
{% if homepageSmallSliderSize > 0 and settings.infographicBanner -%}

{% for slide in config.Banners['homepage-small'].Images -%}
{% if slide.Link != empty -%}
[{% endif -%}

Krok 4.

Teraz w pliku common/banner.html znajdź class=”lazyslider-container-lq homepage-slider-ui” i po spacji dopisz style=”order: {{ settings.mainBannerNo }}”. Dwie linijki niżej znajdziesz settings.autoplaySpeed. Zamień to na settings.mainBannerAutoplaySpeed.

Krok 5.

Następnie w pliku product/minibox-product.html w jednej z pierwszych linijek znajdziesz frazę {{isLarge}}. Za wskazaną frazą, po spacji, dopisz następującą: {% if settings.newsSectionAnimationOnHover == 'yes’ -%} with-animation-on-hover-ui {% endif -%}.

Krok 6.

Podobnie w pliku blog/blog-news-partial.html – znajdź blog-home-ui i po spacji dopisz {% if settings.newsAnimationOnHover == 'yes’ -%} with-animation-on-hover-ui {% endif -%}.

Krok 7.

Teraz w pliku js/init-ui1.js wyszukaj frazę //lookbook slider i linijkę wyżej wklej poniższy kod:
//brands slider if ($('.brands-slider-lq').length > 0) { window.UIFeatures.initSlider('.brands-slider-lq', { autoplay: true, slidesToShow: 5, slidesToScroll: 1, arrows: false, dots: false, responsive: [ { breakpoint: 1600, settings: { slidesToShow: 4 } }, { breakpoint: 1024, settings: { slidesToShow: 3 } }, { breakpoint: 768, settings: { slidesToShow: 2 } }, { breakpoint: 550, settings: { slidesToShow: 1 } } ] }); }

Krok 8.

Następnie w pliku scss/partials/_home.scss w drugiej linijce wklej poniższy kod:
display: flex; flex-direction: column;

Na koniec w pliku scss/globals/_globals2.scss na samym końcu dodaj poniższy kod:
.with-animation-on-hover-ui{ transition:box-shadow $short-animations-time; &:hover { box-shadow: 0 3px 12px 0 $gridAndListHoverShadowColor; } }](https://pomoc.comarchesklep.pl/artykul/dodanie-konfigurowalnosci-strony-glownej-w-szablonie-szafir/{{slide.Link}})

Czy ten artykuł był pomocny?

Wyślij opinie](https://pomoc.comarchesklep.pl/artykul/dodanie-konfigurowalnosci-strony-glownej-w-szablonie-szafir/{{slide.Link}})](https://pomoc.comarchesklep.pl/artykul/dodanie-konfigurowalnosci-strony-glownej-w-szablonie-szafir/{{manufacturer.Url}})

Inne w kategorii

Społeczność Comarch

Dzięki społeczności Comarch ERP rozwiązujemy problemy, dzielimy się pomysłami oraz informujemy o nowościach.

Dołącz do Społeczności Comarch

Oferta e-Commerce

Demo Comarch e-Sklep
Zamów Comarch e-Sklep
Cennik Comarch e-Sklep
Comarch e-Sale
Comarch B2B
Czym się różni Comarch
e-Sklep B2B od Comarch B2B?

Przydatne linki

Spis treści
Stwórz darmowy szablon
Konfigurator produktu
Więcej o Comarch ERP
Pomoc Comarch Betterfly
Pomoc Comarch ERP Optima
Pomoc Comarch ERP XL
Pomoc Comarch ERP Altum
Oprogramowanie e-commerce
Sztuczna Inteligencja (AI)

Kontakt

Skontaktuj się z nami
Partnerzy Comarch wdrażający e-Sklep

＋ Mam problem z tym tematem Otwórz w portalu bazy wiedzy »