Baza wiedzy LINKSPOT › Wygląd sklepu

Baner na stronie z podziękowaniami w szablonie Szafir

Wygląd sklepu · Opublikowano 2024-11-20

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

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:

![](https://pomoc.comarchesklep.pl/wp-content/uploads/init1.png)

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  

  });  

}  

Kod musi wyglądać w następujący sposób:

![](https://pomoc.comarchesklep.pl/wp-content/uploads/init2.png)

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;  

    }  

  }  

}  

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;  

    }  

  }  

}  

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.

Czy ten artykuł był pomocny?

Wyślij opinie

Inne w kategorii

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