Cross-Selling-Unterstützung nach Auftragserteilung

Cross-Selling-Unterstützung nach Auftragserteilung

In diesem Artikel erfahst du, wie du Ihre Vorlage änderst, um den Cross-Selling-Bereich anzuzeigen, nachdem du deine Bestellung aufgegeben hast.

Tipp
Für diesen Artikel müss Man Änderungen an den Dateien vornehmen js und scss. Von dieses Artikels  lernst du, wie du sie kompilierst und minimierst.

Topaz

Gehe im Administrationspanel auf die Registerkarte Übersetzungen (Webshop Layout -> Einstellungen -> Übersetzungen) und füge dort die Phrase CrossSellingInfo – Andere haben auch gekauft hinzu. Gehe dann zur Registerkarte Objekte (Webshop Layout -> Einstellungen -> -> Threepoint oben rechts -> Erweiterte Einstellungen bearbeiten -> Objekte) und füge dort ein neues Objekt des Typs News and Promotions mit dem Namen Cross-Selling hinzu. Sobald es hinzugefügt wurde, gehe in die Einstellungen und wähle den Typ Cross-Selling. Bleibe dann in diesen Einstellungen, gehe auf die Registerkarte Seiten und aktiviere dort das Kontrollkästchen Bestellen. Speichere das Ganze, indem du auf die Diskette in der oberen rechten Ecke klickst.

Suche in der Datei partials/product-item.html die Phrase config.Products.ShowCode und lösche dann die Bedingung (mit ihrem Inhalt), zu der diese Phrase gehört.

Suche anschließend in der Datei staticElements/cart/cart.html nach dem Ausdruck cart-step-five. Ersetze den Container mit dieser Klasse (mitsamt seinem Inhalt) durch den folgenden Code:

{% 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>
Suche nun in der Datei js/layout1.js (oder layout0.js, wenn du layout1.js nicht hast, oder layout.js, wenn du die beiden vorherigen Dateien nicht hast) nach der Variablen var cartFunctions. Suche darin die Funktion init (ganz am Anfang) und füge am Ende die Zeile this.initializeCrossSellingSlider(); ein. Suche dann nach der Zeile mit dem Ausdruck $(‘.activeCart’).removeClass(‘activeCart’); (sie befindet sich in der placeOrder-Funktion) und füge darunter cartFunctions.initializeCrossSellingSlider(); ein. Jetzt müsst du den folgenden Code unter der placeOrder-Funktion hinzufügen:
initializeCrossSellingSlider: function () {
$(‘.crossselling-slider’).slick({
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1441,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 1
}
}
]
});
},
Füge dann den folgenden Code in die Datei css/layout.css ein:
.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}
Füge nun den folgenden Code in die Datei css/layout-m.css ein:
.cart—step–five–crossselling–container{margin–top:60px}.crossselling–slider .slick–prev{left:0}.crossselling–slider .slick–next{right:0}
Füge dann den folgenden Code in die Datei css/layout-d.css ein:
.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}

Finden Sie den Artikel hilfreich?

Wyślij opnie