Baner na stronie z podziękowaniami w szablonie Szafir
W tym artykule dowiesz się jak dodać baner na stronę z podziękowaniami w swoim szablonie.
Pierwszym krokiem będzie dodanie kodu w pliku order/thx.html. Przy pomocy narzędzia wyszukiwania, szukamy frazy {% include 'edrone/order.html’ %}. Następujący kod należy wkleić bezpośrednio nad linijką: Kolejnym plikiem, który musimy edytować jest js/init-js2.js. Proszę wyszukać za pomocą narzędzia wyszukiwania frazę $('.crossselling-slider-in-cart-lq img').each(function () {, a następnie wkleić następujący kod: Po wykonaniu powyższych instrukcji otwieramy plik scss/_globals2.css, na którego końcu wklejamy następujący kod: .slick-slide .thxpage-slider-figure-ui{ .slick-slide .thxpage-slider-figure-ui{{% assign thxpageBannerSize = config.Banners['thxpage'].Images | Size -%}
{% if thxpageBannerSize > 0 -%}
<div class="thxpage-slider-ui thxpage-slider-lq slider-lq">
{% for slide in config.Banners['thxpage'].Images -%}
<div>
<figure class="thxpage-slider-figure-ui">
<img data-lazy="{{slide.Url}}" alt="{{slide.Alt | H}}" title="{{slide.Title | H}}" />
<figcaption class="thxpage-slider-figcaption-ui">
<h2 class="thxpage-slider-heading-ui">{{slide.Heading}}</h2>
<p class="thxpage-slider-text-ui">{{slide.Text}}</p>
{% if slide.Link != empty -%}
<a class="btn-ui" href="{{slide.Link}}" {% if slide.TargetBlank -%} target="_blank" {% endif -%}>{{ translations.CheckDetails }}</a>
{% endif -%}
</figcaption>
</figure>
</div>
{% endfor -%}
</div>
{% endif -%}
Następnie w pliku js/init-ui1.js proszę wyszukać za pomocą narzędzia wyszukiwania frazę $('.crossselling-slider-in-cart-lq img').each(function () {, a następnie wkleić następujący kod:
if ($('.thxpage-slider-lq').length > 0) {
window.UIFeatures.initSlider('.thxpage-slider-lq', {
autoplay: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false
});
}
Kod musi wyglądać w następujący sposób:
if ($('.thxpage-slider-lq').length > 0) {
UIFeatures.initSlider('.thxpage-slider-lq', {
autoplay: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false
});
}
Kod musi wyglądać w następujący sposób:
.thxpage-slider-ui{
margin: 20px 0;
}
position: relative;
text-align: right;
margin: 0;
&:after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: calc(100% - 6px);
display: inline-block;
background: linear-gradient(90deg, rgba(#f8f8f8, 1) 0%, rgba(#f8f8f8, 1) 40%, rgba(#f8f8f8, 0) 70%, rgba(#f8f8f8, 0) 100%);
}
img{
display: inline-block;
width: 60%;
}
.thxpage-slider-figcaption-ui{
text-align: left;
z-index: 1;
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: calc(60% + 20px);
}
.thxpage-slider-heading-ui{
border-left: none;
padding: 0;
font-weight: 700;
}
.thxpage-slider-text-ui{
color: $labelsColor;
}
.btn-ui{
display: inline-block;
width: 300px;
padding: 10px;
margin-top: 20px;
text-align: center;
background-color: $lowerPriceAndCart;
color: $lowerPriceAndCartFont;
&:hover{
background-color: $cartButtonHover;
color: $cartButtonHoverFont;
}
}
}
Przedostatnim krokiem jest otworzenie pliku scss/_globals-m.css i wklejenie na końcu następującego kodu (przed ostatnią klamrą):
.thxpage-slider-ui{
margin: 20px 0;
}
position: relative;
text-align: right;
margin: 0;
&:after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: calc(100% - 6px);
display: inline-block;
background: linear-gradient(90deg, rgba(#f8f8f8, 1) 0%, rgba(#f8f8f8, 1) 40%, rgba(#f8f8f8, 0) 70%, rgba(#f8f8f8, 0) 100%);
}
img{
display: inline-block;
width: 60%;
}
.thxpage-slider-figcaption-ui{
text-align: left;
z-index: 1;
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: calc(60% + 20px);
}
.thxpage-slider-heading-ui{
border-left: none;
padding: 0;
font-weight: 700;
}
.thxpage-slider-text-ui{
color: $labelsColor;
}
.btn-ui{
display: inline-block;
width: 300px;
padding: 10px;
margin-top: 20px;
text-align: center;
background-color: $lowerPriceAndCart;
color: $lowerPriceAndCartFont;
&:hover{
background-color: $cartButtonHover;
color: $cartButtonHoverFont;
}
}
}
Ostatnim krokiem jest dodanie zdjęć i utworzenie banera w panelu administracyjnym w obszarze Wygląd sklepu/ Ustawienia. W sekcji Bannery skorzystaj z przycisku Dodaj. Wypełnij pole Nazwa wpisując thxpage, następnie wciśnij Dodaj. Wejdź na nowo utworzony baner i dodaj zdjęcia według własnego uznania.