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.

Wskazówka

W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować i kompilować

Uwaga

Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order

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ą:


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

{% assign thxpageBannerSize = config.Banners['thxpage'].Images | Size -%}

{% if thxpageBannerSize > 0 -%}

{% for slide in config.Banners['thxpage'].Images -%}

<div>

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

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:

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:


if ($('.thxpage-slider-lq').length > 0) {
  UIFeatures.initSlider('.thxpage-slider-lq', {
    autoplay: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    dots: false
  });
}

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:

Po wykonaniu powyższych instrukcji otwieramy plik scss/_globals2.css, na którego końcu wklejamy następujący kod:


.thxpage-slider-ui{
  margin: 20px 0;
}

.slick-slide .thxpage-slider-figure-ui{
  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;
    }
  }
}

.thxpage-slider-ui{

margin: 20px 0;

}

.slick-slide .thxpage-slider-figure-ui{

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

.slick-slide .thxpage-slider-figure-ui{
  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;
    }
  }
}

.thxpage-slider-ui{

margin: 20px 0;

}

.slick-slide .thxpage-slider-figure-ui{

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.

Baner na stronie z podziękowaniami w szablonie Szafir

Baner na stronie z podziękowaniami w szablonie Szafir

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt