W tym artykule dowiesz się jak dodać drugą wersję widoku bloga na stronie głównej w szablonie Szafir – powiększone kafle z większą ilością tekstu.
Od wersji 2020.3 w standardowym szablonie Szafir dostępne są dwie wersje widoku bloga. Poniższa instrukcja dedykowana jest dla szablonów starszych lub modyfikowanych.
W pierwszej kolejności należy zmodyfikować plik __settings.liquid. Pierwsze dwie linijki w pliku powinny wyglądać następująco:
{% case languageId %}
{% when '1' %}
Kolejne 100-200 linii (w zależności od posiadanej przez Ciebie wersji sklepu) będą zaczynać się od frazy {% assign. Następnie zauważysz linię {% else %}. Przed linią {% else %} należy wkleić poniższy kod.
{% assign blogOnHomepage = "Blog na stronie głównej" -%}
{% assign blogPresentationOnHomepage = "Prezentacja bloga na stronie głównej" -%}
{% assign extended = "Rozszerzony" -%}
{% assign compact = "Kompaktowy" -%}
Po linii {% else %} znów zauważysz 100-200 linii zaczynających się od frazy {% assign, a następnie linię {% endcase %}. Przed linią {% endcase %} należy wkleić poniższy kod.
{% assign blogOnHomepage = "Blog on homepage" -%}
{% assign blogPresentationOnHomepage = "Blog presentation on homepage" -%}
{% assign extended = "Extended" -%}
{% assign compact = "Compact" -%}
Następnie wyszukaj frazę #lg-settings-content a.Nad znalezioną linią powinieneś zauważyć tag <script> a nad nią tag </div> (jeden lub dwa). Nad nimi powinieneś widzieć tag </fieldset>. Pod tagiem </fieldset> umieść następujący kod.
<legend>{{blogOnHomepage}}</legend>
<section>
<h3 class=”section-title”>{{blogPresentationOnHomepage}}</h3>
<div class=”table”>
<div class=”trow”>
<div class=”tcell”>
<input type=”radio” name=”blogPresentationOnHomepage” value=”extended” id=”blogPresentationOnHomepage-extended” {%=”” if=”” settings.blogpresentationonhomepage=”=” 'extended’=”” %}=”” checked=”” endif=””>
<label class=”label” for=”blogPresentationOnHomepage-extended”>{{extended}}</label>
</div>
<div class=”tcell”>
<input type=”radio” name=”blogPresentationOnHomepage” value=”compact” id=”blogPresentationOnHomepage-compact” {%=”” if=”” settings.blogpresentationonhomepage=”=” 'compact’=”” %}=”” checked=”” endif=””>
<label class=”label” for=”blogPresentationOnHomepage-compact”>{{compact}}</label>
</div>
</div>
</div>
</section>
</fieldset>
Następnie przejdź do pliku blog/blog-news-partial.html.
Usuń pierwszą linię kodu i wklej poniższy.
<div class="blog-posts-slider-lq blog-posts-slider-ui {% if settings.blogPresentationOnHomepage == 'extended' %} extended-ui {% endif -%}">
Następnie wyszukaj frazę <time. Znalezioną linię usuń i w tym miejscu wklej poniższy kod.
{% if settings.blogPresentationOnHomepage == 'extended' %}
<div class="blog-publication-date-ui">{{post.Content}}</div>
{% else -%}
<time class="blog-publication-date-ui">{{post.PublishedDate}}</time>
{% endif -%}
Ostatnim modyfikowanym plikiem będzie css/desktop1.css.
W dowolnym miejscu wklej poniższy kod.
.blog-posts-slider-ui.extended-ui .blog-home-ui {
border: none; }
@media only screen and (min-width: 1280px) {
.blog-posts-slider-ui.extended-ui .blog-home-ui {
width: calc(33% - 49px);
border: none;
margin: 40px 80px 0 0; }
.blog-posts-slider-ui.extended-ui .blog-home-ui .product-caption-ui {
height: auto; }
.blog-posts-slider-ui.extended-ui .blog-home-ui .blog-publication-date-ui {
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2; }
.blog-posts-slider-ui.extended-ui .blog-home-ui .latest-blog-post-heading {
font-weight: 700; }
.blog-posts-slider-ui.extended-ui .blog-home-ui:first-child {
width: 100%;
margin: 0;
padding-bottom: 0; }
.blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .blog-home-news-ui {
width: 45%;
height: 213px;
margin-right: 4%;
float: left; }
.blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .product-caption-ui {
width: 50%;
float: left; }
.blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .latest-blog-post-heading {
font-size: 22px; }
.blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .blog-publication-date-ui {
height: auto;
font-size: 16px; }
.blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .read-more-ui {
float: left; }
.blog-posts-slider-ui.extended-ui .blog-home-ui:last-child {
margin-right: 0; } }