Obsługa cross-sellingu po złożeniu zamówienia
W tym artykule dowiesz się jak zmodyfikować swój szablon, aby po złożeniu zamówienia wyświetliła się sekcja z Cross-Sellingiem.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js oraz scss. Z tego artykułu dowiesz się jak je kompilować i minifikować.
Szafir
W pliku order/thx.html wyszukaj frazę date-format.html. Pod linijką z tą frazą będzie się znajdował warunek, który trzeba zastąpić poniższym kodem:
{% if order.SelectedDelivery.Payment.MethodType == 2 and order.PlacedOrder.ExternalPayment.Success == false -%}
{% assign externalPaymentError = true -%}
{% endif -%}
{% if externalPaymentError or crossSellingSize > 0 -%}
Dalej w tym samym pliku (order/thx.html) wyszukaj frazę lastpagescripts.html. Nad linijką z tą frazą będzie się znajdowało zamknięcie warunku, które trzeba zastąpić poniższym kodem:
{% elseif crossSellingSize > 0 -%}{{ translations.CrossSellingInfo }}
{% for product in cross-selling.Products -%}
{{ product | Img:'compact' }} {{ product | Img:'large' }}
{{ product.Name }}
{% unless customer.HidePrices -%} {% if product.Price == null or product.AskForPrice -%} {{ translations.AskForPrice }} {% else -%}
product.Price -%} class="price-container-ui" {% endif -%}> {{ product.Price | ToPrice }} {{ currency }} {% if customer.Cart.SubtotalPrices -%} {{ translations.Netto | Downcase }} {% else -%} {{ translations.Brutto | Downcase }} {% endif -%}
{% if product.PreviousPrice > product.Price -%}
{{ product.PreviousPrice | ToPrice }} {{ currency }} {% if customer.Cart.SubtotalPrices -%} {{ translations.Netto | Downcase }} {% else -%} {{ translations.Brutto | Downcase }} {% endif -%}
{% endif -%} {% endif -%} {% endunless -%}{% endfor -%}
Następnie w pliku js/init-ui1.js wyszukaj frazę 1019. Będzie to linijka z warunkiem dotyczącym kodu błędu. Pod tym warunkiem wklej poniższy kod:
if ($('.crossselling-slider-in-cart-lq').length) {
window.UIFeatures.initSlider('.crossselling-slider-in-cart-lq', {
dots: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows: false,
infinite: false,
responsive: [{
breakpoint: 1279,
settings: {
slidesToShow: 1.7,
slidesToScroll: 1,
arrows: false,
infinite: false,
dots: false
}
}]
});
$('.crossselling-slider-in-cart-lq img').each(function () {
var src = $(this).data('src');
$(this).attr('src', src);
})
}
Na samym końcu pliku js/init-ui2.js wklej poniższy kod:
$(document).ready(function () {
if ($('.crossselling-slider-in-cart-lq').length) {
UIFeatures.initSlider('.crossselling-slider-in-cart-lq', {
dots: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows: false,
infinite: false,
responsive: [{
breakpoint: 1279,
settings: {
slidesToShow: 1.7,
slidesToScroll: 1,
arrows: false,
infinite: false,
dots: false
}
}]
});
$('.crossselling-slider-in-cart-lq img').each(function () {
var src = $(this).data('src');
$(this).attr('src', src);
})
}
});
Na końcu pliku scss/globals/_globals2.scss wklej poniższy kod:
.cross-selling-ui{
padding: 40px 0;
.minibox-product-container-ui{
padding: 10px;
}
.minibox-product-ui{
margin: 0;
height: 300px;
width: 100%;
}
}
Topaz
W Panelu Administratora przejdź do zakładki Tłumaczenia (Wygląd sklepu -> Ustawienia -> Tłumaczenia) i dodaj tam frazę CrossSellingInfo – Inni kupili również. Następnie przejdź do zakładki Obiekty (Wygląd sklepu -> Ustawienia -> Trzykropek w prawym górnym rogu -> Edytuj ustawienia zaawansowane -> Obiekty) i dodaj tam nowy obiekt typu Nowości i Promocje o nazwie cross-selling. Po jego dodaniu wejdź w jego ustawienia i wybierz Typ Cross-Selling. Następnie pozostając w tych ustawieniach przejdź na zakładkę Strony i zaznacz tam check-box Zamówienie. Zapisz to wszystko kliknięciem w dyskietkę w prawym górnym rogu.
W pliku partials/product-item.html wyszukaj frazę config.Products.ShowCode, a następnie usuń warunek (wraz z jego zawartością), którego częścią jest ta fraza.
Następnie w pliku staticElements/cart/cart.html wyszukaj frazę cart–step-five. Zastąp kontener z tą klasą (wraz z jego zawartością) poniższym kodem:
0 -%} with-crossselling {% endif -%}”> |
Teraz w pliku js/layout1.js (lub layout0.js jeśli nie ma layout1.js, lub layout.js jeśli nie ma dwóch poprzednich) wyszukaj zmienną var cartFunctions. W niej należy znaleźć funkcję init (zaraz na samym początku) i dodać na jej końcu linijkę this.initializeCrossSellingSlider();. Następnie trzeba wyszukać linijkę z frazą $(’.activeCart’).removeClass(’activeCart’); (będzie w funkcji placeOrder) i pod nią dodać cartFunctions.initializeCrossSellingSlider();. Teraz trzeba dodać poniższy kod pod funkcją placeOrder:
initializeCrossSellingSlider: function () {
$('.crossselling-slider').slick({
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1441,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 1
}
}
]
});
},
Następnie w pliku css/layout.css dodaj poniższy kod:
.cart--step-five.with-crossselling{display:block}.cart--step-five a{display:block;width:calc(100% - 50px);max-width:387px;margin-bottom:35px}.crossselling-slider{padding:0}.crossselling-slider .slick-track{margin:0 -20px}.crossselling-slider .slick-prev,.crossselling-slider .slick-next{background:{{settings.sliderBgColor}}}.crossselling-slider .slick-prev:before,.crossselling-slider .slick-next:before{border:solid {{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;width:4px;height:4px;top:14px;content:" "}.crossselling-slider .slick-prev:hover,.crossselling-slider .slick-next:hover{background:{{settings.sliderHoverBgColor}}}.crossselling-slider .slick-prev:hover:before,.crossselling-slider .slick-next:hover:before{border-color:{{settings.sliderHoverArrowColor}}}.crossselling-slider .slick-prev{left:-40px}.crossselling-slider .slick-prev:before{left:16px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}.crossselling-slider .slick-next{right:-40px}.crossselling-slider .slick-next:before{left:14px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.crossselling-slider button.slick-prev.slick-arrow.slick-disabled,.crossselling-slider button.slick-arrow.slick-disabled{display:none !important}
Teraz w pliku css/layout-m.css dodaj poniższy kod:
.cart--step-five-crossselling-container{margin-top:60px}.crossselling-slider .slick-prev{left:0}.crossselling-slider .slick-next{right:0}
Następnie w pliku css/layout-d.css dodaj poniższy kod:
.cart.with-crossselling{display:block}.cart--step-five.with-crossselling .cart--step-five-content-container{width:30%;margin-right:9%;display:inline-block;vertical-align:top}.cart--step-five-crossselling-container{display:inline-block;width:60%;vertical-align:top}