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 -%}
    <div class="two-columns-thx-ui">
{% endif -%}

{% if order.SelectedDelivery.Payment.MethodType == 2 and order.PlacedOrder.ExternalPayment.Success == false -%}

{% assign externalPaymentError = true -%}

{% endif -%}

{% if externalPaymentError or crossSellingSize > 0 -%}

{% endif -%}

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 -%}
    </div>
    <div class="two-columns-thx-ui cross-selling-ui">
        <div class="mb10-ui">
            <strong>{{ translations.CrossSellingInfo }}</strong>
        </div>
        <div class="crossselling-slider-in-cart-ui crossselling-slider-in-cart-lq">
            {% for product in cross-selling.Products -%}
                <div class="minibox-product-container-ui">
                    <div class="minibox-product-ui">
                        <a class="product-link-ui" href="{{ product.Url }}"></a>
                        <div class="image-container-ui">
                            <span class="desktop-ui">
                                {{ product | Img:'compact' }}
                            </span>
                            <span class="mobile-ui">
                                {{ product | Img:'large' }}
                            </span>
                        </div>
                        <div class="product-caption-ui">
                            <h3 class="product-name-ui">{{ product.Name }}</h3>
                            {% unless customer.HidePrices -%}
                                {% if product.Price == null or product.AskForPrice -%}
                                    <a class="btn-ui block-ui" href="{{product.Url}}?open=askForPrice">
                                        {{ translations.AskForPrice }}
                                    </a>
                                {% else -%}
                                    <div {% if product.PreviousPrice > product.Price -%} class="price-container-ui" {% endif -%}>
                                        <span class="{% if customer.Cart.SubtotalPrices -%} price-ui {% else -%} brutto-price-ui {% endif -%}">
                                            {{ product.Price | ToPrice }} {{ currency }}
                                        </span>
                                        <span class="price-label-ui">
                                            {% if customer.Cart.SubtotalPrices -%}
                                                {{ translations.Netto | Downcase }}
                                            {% else -%}
                                                {{ translations.Brutto | Downcase }}
                                            {% endif -%}
                                        </span>
                                    </div>
                                    {% if product.PreviousPrice > product.Price -%}
                                        <div  class="price-container-ui f-right-ui">
                                            <span class="old-price-ui">
                                                {{ product.PreviousPrice | ToPrice }} {{ currency }}
                                            </span>
                                            <span class="price-label-ui">
                                                {% if customer.Cart.SubtotalPrices -%}
                                                    {{ translations.Netto | Downcase }}
                                                {% else -%}
                                                    {{ translations.Brutto | Downcase }}
                                                {% endif -%}
                                            </span>
                                        </div>
                                    {% endif -%}
                                {% endif -%}
                            {% endunless -%}
                        </div>
                    </div>
                </div>
            {% endfor -%}
        </div>
    </div>
{% endif -%}

{% elseif crossSellingSize > 0 -%}

</div>

<strong>{{ translations.CrossSellingInfo }}</strong>

</div>

{% for product in cross-selling.Products -%}

</span>

</span>

</div>

<h3 class="product-name-ui">{{ product.Name }}</h3>

{% unless customer.HidePrices -%}

{% if product.Price == null or product.AskForPrice -%}

</a>

{% else -%}

<div {% if product.PreviousPrice > product.Price -%} class="price-container-ui" {% endif -%}>

</span>

{% if customer.Cart.SubtotalPrices -%}

{% else -%}

{% endif -%}

</span>

</div>

{% if product.PreviousPrice > product.Price -%}

</span>

{% if customer.Cart.SubtotalPrices -%}

{% else -%}

{% endif -%}

</span>

</div>

{% endif -%}

{% endunless -%}

</div>

{% endfor -%}

</div>

{% endif -%}

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

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

$(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%;
	}
}

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


{% assign crossSellingSize = cross-selling.Products | Size -%}
<div class="cart cart--step-five {% if crossSellingSize > 0 -%} with-crossselling {% endif -%}">
    <div class="cart--step-five-content-container">
        <h2 class="cart__text--ty-heading">
            {{translations.Thx}},<br>
            <span class="text--strong text--smallcase">
                {{ translations.Crt_Order }} nr {{ cart.PlacedOrder.Id }} {{translations.Crt_BeenPlaced}}
            </span>
        </h2>
        <p class="cart__text--ty-msg text--opacity-05">{{ translations.Crt_DetailsOnMail }}
            {% if cart.NotDeterminedDeliveryCost or cart.SelectedDelivery.NotDeterminedDeliveryCost %}
                {{ translations.Crt_NotDeterminedDeliveryCostInfo }}.
            {% endif -%}
            <br>
            {{ translations.Crt_CheckSPAM }}
        </p>
        <a class="cart__button cart__button--submit button--primary primary-action-button js-back-to-shop" href="{{ config.DefinedPages.Home.Url }}">
            {{ translations.Crt_BackToShop }}
        </a>
        {% if cart.SelectedDelivery.Payment.MethodType == 2 and cart.PlacedOrder.ExternalPayment.Success == false -%}
            <div class="cart cart--unfinished-payment">
                <svg class="svgIcon">
                    <use href="css/img/icons-sprite.svg#credit-card-light"></use>
                </svg>
                <p class="cart__text--ty-heading">{{ translations.Crt_RestoreTitle }}</p>
                <p class="cart__text--ty-msg text--opacity-05">{{ translations.Crt_RestoreText }}</p>

                <div class="shoppingCart__form--restore inputs-container-js">
                    <input type="hidden" name="__action" value="Order/RestorePayment" />
                    <input type="hidden" name="__collection" value="cart" />
                    <input type="hidden" name="id" value="{{ cart.PlacedOrder.Id }}" />
                    <input type="hidden" name="hash" value="{{ cart.PlacedOrder.Hash }}" />
                    <span class="cart__button primary-action-button orderRestorePayment-js">{{ translations.IPay }}</span>
                    <br>
                    <a class="cart__button cart__button--submit secondary-action-button secondary-action-button js-back-to-shop" href="{{ config.DefinedPages.Home.Url }}">
                        {{ translations.Crt_BackToShop }}
                    </a>
                </div>
            </div>
        {% endif -%}
    </div>
    {% if crossSellingSize > 0 -%}
        <div class="cart--step-five-crossselling-container">
            <h2 class="cart__text--ty-heading">{{ translations.CrossSellingInfo }}</h2>
            <div class="slider">
                <ul class="crossselling-slider">
                    {% assign products = cross-selling.Products | Randomize -%}
                    {% for product in products -%}
                        {% unless product.Url == null and product.Url == '' -%}
                            <li>
                                {% include 'partials/product-item.html' with product -%}
                            </li>
                        {% endunless -%}
                    {% endfor -%}
                </ul>
            </div>
        </div>
    {% endif -%}
</div>

{% assign crossSellingSize = cross-selling.Products | Size -%}

<div class="cart cart--step-five {% if crossSellingSize > 0 -%} with-crossselling {% endif -%}">

{{translations.Thx}},<br>

{{ translations.Crt_Order }} nr {{ cart.PlacedOrder.Id }} {{translations.Crt_BeenPlaced}}

</span>

</h2>

<p class="cart__text--ty-msg text--opacity-05">{{ translations.Crt_DetailsOnMail }}

{% if cart.NotDeterminedDeliveryCost or cart.SelectedDelivery.NotDeterminedDeliveryCost %}

{{ translations.Crt_NotDeterminedDeliveryCostInfo }}.

{% endif -%}

<br>

</p>

</a>

{% if cart.SelectedDelivery.Payment.MethodType == 2 and cart.PlacedOrder.ExternalPayment.Success == false -%}

</svg>

<p class="cart__text--ty-heading">{{ translations.Crt_RestoreTitle }}</p>

<p class="cart__text--ty-msg text--opacity-05">{{ translations.Crt_RestoreText }}</p>

<span class="cart__button primary-action-button orderRestorePayment-js">{{ translations.IPay }}</span>

<br>

</a>

</div>

{% endif -%}

</div>

{% if crossSellingSize > 0 -%}

<h2 class="cart__text--ty-heading">{{ translations.CrossSellingInfo }}</h2>

{% assign products = cross-selling.Products | Randomize -%}

{% for product in products -%}

{% unless product.Url == null and product.Url == '' -%}

<li>

{% include 'partials/product-item.html' with product -%}

</li>

{% endunless -%}

{% endfor -%}

</ul>

</div>

{% endif -%}

</div>

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

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}

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

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

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

Obsługa cross-sellingu po złożeniu zamówienia