Instrukcja: Jak dostosować samodzielnie szablon do szybkich zwrotów w e-Commerce?

Wskazówka

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

W szablonach Rubin, Szafir oraz Topaz / One Page Shop wprowadziliśmy funkcjonalność szybkich zwrotów. Umożliwia ona klientom składanie wniosku o zwrot produktu zarówno z poziomu profilu klienta (zalogowani), jak i z dedykowanej strony zwrotów po podaniu numeru zamówienia oraz adresu e-mail (niezalogowani). Wraz z funkcjonalnością pojawił się m.in. rozbudowany ekran potwierdzenia zwrotu zawierający kolejne kroki i adres do wysyłki, banery informacyjne dotyczące terminu zwrotu oraz przyciski akcji w tabeli produktów wyświetlane bezpośrednio (zamiast w rozwijanym menu).

Aby Twój szablon poprawnie obsługiwał te zmiany, wprowadź modyfikacje opisane poniżej w sekcji dotyczącej Twojego szablonu. Po zakończeniu edycji pamiętaj o kompilacji i minifikacji plików js oraz scss.

Wskazówka

Potrzebujesz pomocy lub masz pytania? Skontaktuj się z nami poprzez portal asysta.comarch.pl.

Wskazówka

Obecnie w Polsce trwają prace nad ostatecznym kształtem przepisów oraz nowelizacją Ustawy o prawach konsumenta, która wdroży unijną dyrektywę UE 2023/2673 i wprowadzi nowe wymagania techniczne dla platform e-commerce (m.in. ułatwienia w procedurze zwrotów). W momencie publikacji ostatecznej wersji polskich przepisów, wdrożone funkcjonalności mogą wymagać dostosowania do ostatecznych wytycznych ustawodawcy. Prezentowane informacje mają charakter poglądowy a instrukcja dotyczy zmian, jakie wprowadziliśmy w szablonach Comarch – w przypadku pytań dotyczących indywidualnej sytuacji prawnej Twojego sklepu, zalecamy konsultację z radcą prawnym lub adwokatem.

Spis treści

Szablon Rubin

Szablon Szafir

Szablon Topaz / One Page Shop

Szablon Rubin

1. Tłumaczenia

W panelu administracyjnym sklepu zaktualizuj dwa istniejące tłumaczenia oraz dodaj nowe klucze wymagane przez funkcjonalność szybkich zwrotów.

Zaktualizuj poniższe istniejące tłumaczenia:

ReturnSuccessTitle
– PL: Gotowe! Przyjęliśmy Twoje zgłoszenie
– EN: Done! We have received your request
– DE: Fertig! Wir haben Ihre Anfrage erhalten
– FR: C’est fait ! Nous avons reçu votre demande

ReturnSuccessInfo
– PL: Przygotuj paczkę i odeślij ją do nas – wszystkie szczegóły znajdziesz poniżej.
– EN: Prepare the package and send it back to us – all the details are below.
– DE: Bereiten Sie das Paket vor und senden Sie es an uns zurück – alle Details finden Sie unten.
– FR: Préparez le colis et renvoyez-le nous – tous les détails sont ci-dessous.

Dodaj nowe tłumaczenia:

OrderReturnDeadlineInfo
– PL: Zamówienie można zwrócić w ciągu {0} dni od daty dostawy.
– EN: You can return the order within {0} days from the delivery date.
– DE: Sie können die Bestellung innerhalb von {0} Tagen ab Lieferdatum zurückgeben.
– FR: Vous pouvez retourner la commande dans les {0} jours suivant la date de livraison.

RestrictedOrderViewInfo
– PL: Wybrane dane zamówienia zostały ukryte ze względów bezpieczeństwa. Możesz zwrócić produkty bez logowania.
– EN: Some order details are hidden for security reasons. You can return products without signing in.
– DE: Einige Bestelldetails wurden aus Sicherheitsgründen ausgeblendet. Sie können Produkte ohne Anmeldung zurücksenden.
– FR: Certaines informations de la commande ont été masquées pour des raisons de sécurité. Vous pouvez retourner des produits sans vous connecter.

Com_RefundMethod
– PL: Sposób zwrotu środków
– EN: Refund method
– DE: Rückerstattungsmethode
– FR: Mode de remboursement

Com_RefundAsPaid
– PL: Tak jak zapłacono
– EN: Same as paid
– DE: Wie bezahlt
– FR: Comme payé

Com_RefundToBankAccount
– PL: Na konto bankowe
– EN: To bank account
– DE: Auf Bankkonto
– FR: Sur le compte bancaire

Com_BankAccountNumber
– PL: Nr konta bankowego
– EN: Bank account number
– DE: Bankkontonummer
– FR: Numéro de compte bancaire

Com_ConfirmationSentTo
– PL: Potwierdzenie zwrotu zostało wysłane na adres:
– EN: Return confirmation has been sent to:
– DE: Bestätigung wurde gesendet an:
– FR: La confirmation de retour a été envoyée à:

Com_NextSteps
– PL: Następne kroki
– EN: Next Steps
– DE: Nächste Schritte
– FR: Prochaines étapes

Com_PackProducts
– PL: Bezpiecznie zapakuj swoje produkty
– EN: Safely pack your products
– DE: Verpacken Sie Ihre Produkte sicher
– FR: Emballez vos produits en toute sécurité

Com_SendPackageTo
– PL: Wyślij paczkę na adres:
– EN: Send the package to the address:
– DE: Senden Sie das Paket an die Adresse:
– FR: Envoyez le colis à l’adresse:

Com_RefundAfterReceive
– PL: Pieniądze zwrócimy niezwłocznie po otrzymaniu i sprawdzeniu Twojej paczki
– EN: We will refund the money promptly upon receipt and inspection of your package
– DE: Wir erstatten das Geld umgehend nach Erhalt und Überprüfung Ihres Pakets zurück
– FR: Nous rembourserons l’argent rapidement après réception et inspection de votre colis

ReturnInThreeSteps
– PL: Zwróć towar w 3 krokach
– EN: Return the product in 3 steps
– DE: Geben Sie die Ware in 3 Schritten zurück
– FR: Retournez la marchandise en 3 étapes

ReturnWithoutReasonInfo
– PL: Przysługuje Ci możliwość zwrotu bez podania przyczyny.
– EN: You have the right to return the product without giving a reason.
– DE: Sie haben das Recht, die Ware ohne Angabe von Gründen zurückzugeben.
– FR: Vous avez le droit de retourner la marchandise sans donner de motif.

OrEnterOrderNumber
– PL: lub podaj numer zamówienia
– EN: or enter the order number
– DE: oder geben Sie die Bestellnummer ein
– FR: ou saisissez le numéro de commande

FillForm
– PL: Wypełnij formularz
– EN: Fill out the form
– DE: Füllen Sie das Formular aus
– FR: Remplissez le formulaire

ReturnOnline
– PL: zwrotu online
– EN: online return
– DE: Online-Rückgabe
– FR: retour en ligne

SendParcel
– PL: Wyślij paczkę
– EN: Send the parcel
– DE: Paket senden
– FR: Envoyer le colis

SendParcelToOurAddress
– PL: nadaj przesyłkę na nasz adres
– EN: send the parcel to our address
– DE: senden Sie das Paket an unsere Adresse
– FR: envoyez le colis à notre adresse

FastSimpleSecure
– PL: Szybko, prosto i bezpiecznie.
– EN: Fast, simple and secure.
– DE: Schnell, einfach und sicher.
– FR: Rapide, simple et sécurisé.

ReadyForReturn
– PL: Gotowy do zwrotu?
– EN: Ready for return?
– DE: Bereit zur Rückgabe?
– FR: Prêt pour le retour ?

ReadyForReturnInfo
– PL: Kliknij poniżej, aby rozpocząć proces zwrotu. Przeprowadzimy Cię przez wszystkie kroki.
– EN: Click below to start the return process. We will guide you through all the steps.
– DE: Klicken Sie unten, um den Rückgabeprozess zu starten. Wir führen Sie durch alle Schritte.
– FR: Cliquez ci-dessous pour lancer le processus de retour. Nous vous guiderons à travers toutes les étapes.

StartReturn
– PL: Rozpocznij zwrot
– EN: Start return
– DE: Rückgabe starten
– FR: Commencer le retour

ProductReturn
– PL: Zwrot produktu
– EN: Product return
– DE: Produktrückgabe
– FR: Retour du produit

ProductReturnFormInfo
– PL: Wprowadź dane zamówienia, aby zlokalizować zakup i rozpocząć proces zwrotu. Numer zamówienia znajdziesz w e-mailu z potwierdzeniem.
– EN: Enter the order details to locate the purchase and start the return process. You will find the order number in the confirmation e-mail.
– DE: Geben Sie die Bestelldaten ein, um den Kauf zu lokalisieren und den Rückgabeprozess zu starten. Die Bestellnummer finden Sie in der Bestätigungs-E-Mail.
– FR: Saisissez les données de la commande pour localiser l’achat et démarrer le processus de retour. Vous trouverez le numéro de commande dans l’e-mail de confirmation.

InvalidOrderNumber
– PL: Błędny numer zamówienia. Spróbuj ponownie.
– EN: Invalid order number. Please try again.
– DE: Ungültige Bestellnummer. Bitte versuchen Sie es erneut.
– FR: Numéro de commande incorrect. Veuillez réessayer.

FindOrder
– PL: Znajdź zamówienie
– EN: Find order
– DE: Bestellung finden
– FR: Trouver la commande

LoginToSeeOrdersAndReturn
– PL: aby zobaczyć swoje zamówienia i dokonać zwrotu.
– EN: to see your orders and make a return.
– DE: um Ihre Bestellungen einzusehen und eine Rückgabe vorzunehmen.
– FR: pour voir vos commandes et effectuer un retour.

RefundLookupError
– PL: Wystąpił błąd podczas wyszukiwania zamówienia. Spróbuj ponownie później.
– EN: An error occurred while searching for the order. Please try again later.
– DE: Bei der Suche nach der Bestellung ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.
– FR: Une erreur s’est produite lors de la recherche de la commande. Veuillez réessayer plus tard.

2. Nowa strona Szybkie zwroty

Funkcjonalność szybkich zwrotów wymaga utworzenia dodatkowej strony statycznej refunds. Wykonaj poniższe kroki.

Plik refunds.html w katalogu głównym szablonu

W katalogu głównym szablonu utwórz nowy plik refunds.html z następującą zawartością:
{% extends '_layout.html' -%}

{% block pageContent -%}
{% include 'static-elements/refunds/refunds.html’ -%}
{% endblock -%}

Plik static-elements/refunds/refunds.html

W folderze static-elements utwórz nowy katalog refunds, a w nim plik refunds.html:
<div class="page-padding"> <h1 class="refunds-page-title refunds-initial-view-js">{{ translations.Returns }}</h1>

<section class=”refunds-container refunds-initial-view-js”>
<div class=”refunds-info”>
<h2 class=”refunds-info__title”>{{ translations.ReturnInThreeSteps }}</h2>
<p class=”refunds-info__intro”>{{ translations.ReturnWithoutReasonInfo }}</p>
<ol class=”refunds-steps”>
<li class=”refunds-steps__item”>
<span class=”refunds-steps__number”>1</span>
<p class=”refunds-steps__text”><strong>{{ translations.LogIn }}</strong> {{ translations.OrEnterOrderNumber }}</p>
</li>
<li class=”refunds-steps__item”>
<span class=”refunds-steps__number”>2</span>
<p class=”refunds-steps__text”><strong>{{ translations.FillForm }}</strong> {{ translations.ReturnOnline }}</p>
</li>
<li class=”refunds-steps__item”>
<span class=”refunds-steps__number”>3</span>
<p class=”refunds-steps__text”><strong>{{ translations.SendParcel }}</strong> – {{ translations.SendParcelToOurAddress }}</p>
</li>
</ol>
<p class=”refunds-info__hint”>{{ translations.FastSimpleSecure }}</p>
</div>
<div class=”refunds-cta”>
<div class=”refunds-cta__header”>
<h3 class=”refunds-cta__title”>{{ translations.ReadyForReturn }}</h3>
<p class=”refunds-cta__description”>{{ translations.ReadyForReturnInfo }}</p>
</div>
{% if usr.Authenticated -%}
<a href=”{{ config.DefinedPages.CustomerProfile.Url }}?tab=orders” class=”primary-action-button refunds-cta__button” rel=”nofollow” aria-label=”{{ translations.StartReturn }}”>
{{ translations.StartReturn }}
</a>
{% else -%}
<button type=”button” class=”primary-action-button refunds-cta__button start-refund-js” aria-label=”{{ translations.StartReturn }}”>
{{ translations.StartReturn }}
</button>
{% endif -%}
</div>
</section>

{% unless usr.Authenticated -%}
<section class=”refund-form-section refund-form-view-js hidden-js”>
<div class=”refund-form”>
<div class=”refund-form__header”>
<h2 class=”refund-form__title”>{{ translations.ProductReturn }}</h2>
<p class=”refund-form__description”>{{ translations.ProductReturnFormInfo }}</p>
</div>
<form class=”refund-form__body refund-form-js” novalidate data-error=”{{ translations.RefundLookupError }}”>
<div class=”form__input-wrapper”>
<label for=”refundOrderNumber” class=”form__input-info input-info-js”>{{ translations.NumberOfOrder }}</label>
<input id=”refundOrderNumber” type=”text” name=”orderNumber” class=”form__input-value input-value-js” maxlength=”50″ required>
<div class=”form__invalid-input validation-info-js validation-required-js hidden-js”>{{ translations.FieldRequired }}</div>
</div>
<div class=”form__input-wrapper”>
<label for=”refundEmail” data-type=”email” class=”form__input-info input-info-js”>{{ translations.EmailAddress }}</label>
<input id=”refundEmail” type=”email” name=”email” class=”form__input-value input-value-js” maxlength=”192″ autocomplete=”email” required>
<div class=”form__invalid-input validation-info-js validation-required-js hidden-js”>{{ translations.FieldRequired }}</div>
<div class=”form__invalid-input validation-info-js email-valid-js hidden-js”>{{ translations.FillProperEmail }}</div>
</div>
<button type=”button” class=”primary-action-button refund-form__submit refund-form-submit-js”>
{{ translations.FindOrder }}
</button>
<p class=”refund-form__login-info”>
{{ translations.HaveAccount }} <a class=”refund-form__login-link show-login-popup-js” rel=”nofollow” tabindex=”0″ role=”button”>{{ translations.LogIn }},</a> {{ translations.LoginToSeeOrdersAndReturn }}
</p>
</form>
</div>
</section>
{% endunless -%}
</div>

Plik js/layout1.js – kod obsługi formularza zwrotu

Na końcu pliku js/layout1.js dodaj poniższy kod odpowiedzialny za walidację i wysłanie formularza wyszukiwania zamówienia (dla niezalogowanego klienta):
$(document).ready(function() { refunds.init(); });

const refunds = {
init: function() {
this.events();
},

findRefundOrder: function(orderNumber, email) {
return $.post(”, {
__action: 'Order/QuickReturnLookup’,
orderId: orderNumber,
email: email,
__csrf: __CSRF
});
},

showForm: function() {
$(’.refunds-initial-view-js’).addClass(’hidden-js’);
$(’.refund-form-view-js’).removeClass(’hidden-js’);
$(’.refund-form-js input[name=”orderNumber”]’).trigger(’focus’);
},

clearFieldError: function(input) {
const $input = $(input);
$input.removeClass(’validation-error-js’);
$input.closest(’.form__input-wrapper’).find(’.form__invalid-input’).addClass(’hidden-js’);
},

submitForm: async function(button) {
const $submit = $(button);
const $form = $submit.closest(’.refund-form-js’);
const $orderInput = $form.find(’input[name=”orderNumber”]’);
const $emailInput = $form.find(’input[name=”email”]’);
const orderValue = $orderInput.val().trim();
const emailValue = $emailInput.val().trim();
const emailRegex = /^\w+([-+.’]\w+)*@\w+([-.]\w+)*\.\w{2,}$/;
let hasError = false;

$form.find(’.form__invalid-input’).addClass(’hidden-js’);
$form.find(’.form__input-value’).removeClass(’validation-error-js’);

if (orderValue.length === 0) {
$orderInput.addClass(’validation-error-js’);
$orderInput.closest(’.form__input-wrapper’).find(’.validation-required-js’).removeClass(’hidden-js’);
hasError = true;
}

if (emailValue.length === 0) {
$emailInput.addClass(’validation-error-js’);
$emailInput.closest(’.form__input-wrapper’).find(’.validation-required-js’).removeClass(’hidden-js’);
hasError = true;
} else if (!emailRegex.test(emailValue)) {
$emailInput.addClass(’validation-error-js’);
$emailInput.closest(’.form__input-wrapper’).find(’.email-valid-js’).removeClass(’hidden-js’);
hasError = true;
}

if (hasError) {
return;
}

$submit.prop(’disabled’, true);

try {
const result = await refunds.findRefundOrder(orderValue, emailValue);
const action = result.action;
if (action.Redirect302) {
globalThis.location.href = action.Redirect302;
return;
}
app.temporaryPopupMessage(undefined, action.Message, action.Type);
} catch (error) {
console.error(’Refund order lookup failed.’, error);
app.temporaryPopupMessage(undefined, $form.data(’error’), 'err’);
} finally {
$submit.prop(’disabled’, false);
}
},

events: function() {
$(’body’).on(’click’, ’.start-refund-js’, function() {
refunds.showForm();
});

$(’body’).on(’input’, ’.refund-form-js .form__input-value’, function() {
refunds.clearFieldError(this);
});

$(’body’).on(’click’, ’.refund-form-submit-js’, function(e) {
e.preventDefault();
refunds.submitForm(this);
});

$(’body’).on(’keydown’, ’.refund-form-js input’, function(e) {
if (e.key === 'Enter’) {
e.preventDefault();
$(this).closest(’.refund-form-js’).find(’.refund-form-submit-js’).trigger(’click’);
}
});
}
};

Pliki SCSS strony Szybkie zwroty

W folderze scss/static-elements utwórz nowy katalog refunds i umieść w nim trzy pliki: refunds-g.scss, refunds-m.scss i refunds-t.scss.

scss/static-elements/refunds/refunds-g.scss:
.refunds-page-title { margin: 0 0 24px; font-size: 24px; font-weight: 500; line-height: 32px; color: $primaryColorFont; }

.refunds-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
margin-bottom: 32px;
color: $primaryColorFont;
}

.refunds-info {
align-self: flex-start;
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
max-width: 800px;

&__title {
margin: 0;
font-size: 20px;
font-weight: 600;
line-height: 28px;
color: $primaryColorFont;
}

&__intro {
margin: 0;
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: $primaryColorFont;
}

&__hint {
margin: 4px 0 0;
font-size: 12px;
font-weight: 400;
line-height: 20px;
color: $breadcrumbs;
}
}

.refunds-steps {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;

&__item {
display: flex;
align-items: center;
gap: 12px;
}

&__number {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #f3f3f3;
color: $primaryColor;
font-size: 14px;
font-weight: 600;
line-height: 20px;
}

&__text {
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: $primaryColorFont;

strong {
font-weight: 600;
}
}
}

.refunds-cta {
box-sizing: border-box;
width: 100%;
max-width: 578px;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
background-color: $bgColor;
border: 1px solid $lightBorderColor;
border-radius: 8px;

&__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
}

&__title {
margin: 0;
font-size: 24px;
font-weight: 600;
line-height: 32px;
text-align: center;
color: $primaryColorFont;
}

&__description {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: center;
color: $breadcrumbs;
}

&__button {
width: 100%;
text-decoration: none;
}
}

.refund-form-section {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 32px;
}

.refund-form {
box-sizing: border-box;
width: 100%;
max-width: 578px;
padding: 40px;
background-color: $bgColor;
border: 1px solid $lightBorderColor;
border-radius: 8px;

&__header {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 32px;
}

&__title {
margin: 0;
font-size: 24px;
font-weight: 600;
line-height: 32px;
color: $primaryColorFont;
}

&__description {
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: $breadcrumbs;
}

&__body {
display: flex;
flex-direction: column;
}

.form__input-wrapper {
.form__input-value {
&.validation-error-js {
border-color: $dangerColor;
color: $dangerColor;
}
}

.form__invalid-input {
position: static;
display: block;
margin: 4px 0 0;
padding-left: 16px;
text-align: left;
color: $dangerColor;
font-size: 12px;
font-weight: 400;
line-height: 16px;
}
}

&__submit {
width: 100%;
margin-top: 4px;
}

&__login-info {
margin: 16px 0 0;
text-align: center;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: $primaryColorFont;
}

&__login-link {
color: $primaryColor;
font-weight: 600;
cursor: pointer;
text-decoration: none;

&:hover {
text-decoration: underline;
}
}
}

scss/static-elements/refunds/refunds-m.scss:
@media screen and (max-width: 767px) { .refunds-page-title { font-size: 20px; line-height: 28px; margin-bottom: 16px; }

.refunds-container {
gap: 24px;
margin-bottom: 24px;
}

.refunds-info {
max-width: 100%;
gap: 12px;

&__title {
font-size: 18px;
line-height: 24px;
}

&__intro {
font-size: 14px;
line-height: 22px;
}
}

.refunds-steps {
&__item {
align-items: flex-start;
gap: 10px;
}

&__number {
width: 28px;
height: 28px;
font-size: 13px;
}

&__text {
font-size: 13px;
line-height: 20px;
padding-top: 3px;
}
}

.refunds-cta {
padding: 24px;

&__title {
font-size: 20px;
line-height: 28px;
}

&__description {
font-size: 14px;
line-height: 22px;
}
}

.refund-form {
padding: 24px;

&__header {
margin-bottom: 24px;
}

&__title {
font-size: 20px;
line-height: 28px;
}

&__description {
font-size: 13px;
line-height: 18px;
}

&__login-info {
font-size: 13px;
}
}
}

scss/static-elements/refunds/refunds-t.scss:
@media screen and (min-width: 768px) and (max-width: 1439px) { .refunds-info { max-width: 100%; } }

3. Modyfikacje istniejących plików HTML

partials/cart/thx.html

W pliku partials/cart/thx.html znajdź fragment generujący etykietę zgody w sekcji zgód marketingowych:
<label tabindex="0" role="checkbox" aria-checked="false" for="{{ consent.FieldValue }}" class="cart__tos-label tos-js">
Usuń z niego atrybut for=”{{ consent.FieldValue }}”. Po zmianie linia powinna wyglądać tak:
<label tabindex="0" role="checkbox" aria-checked="false" class="cart__tos-label tos-js">

1. W pliku partials/common/login.html w kontenerze opakowującym formularz dodaj klasę login-container-popup. Zamień linię:
<div class="{% if page.PageId != config.DefinedPages.Login.Id and page.PageId != config.DefinedPages.CustomerProfile.Id and page.PageId != config.DefinedPages.Order.Id -%} login-popup-js{% else -%} login-container {% endif -%}">
na:
<div class="{% if page.PageId != config.DefinedPages.Login.Id and page.PageId != config.DefinedPages.CustomerProfile.Id and page.PageId != config.DefinedPages.Order.Id -%} login-popup-js login-container-popup{% else -%} login-container {% endif -%}">

2. W warunku otaczającym przycisk zamykający popup logowania usuń warunek and settings.signIn == „popup”. Zamień linię:
{% if page.PageId != config.DefinedPages.Login.Id and page.PageId != config.DefinedPages.CustomerProfile.Id and page.PageId != config.DefinedPages.Order.Id and settings.signIn == "popup" -%}
na:
{% if page.PageId != config.DefinedPages.Login.Id and page.PageId != config.DefinedPages.CustomerProfile.Id and page.PageId != config.DefinedPages.Order.Id -%}

partials/product/amount-stepper.html

W pliku partials/product/amount-stepper.html znajdź blok ustawiający zmienne dla typów complaint i return:
{% if type == 'complaint' or type == 'return' -%} {% assign reloadClass = '' -%} {% assign complaintOrReturn = true -%} {% endif -%}
i dodaj w jego wnętrzu nową linię ustawiającą maksymalną ilość produktu:
{% if type == 'complaint' or type == 'return' -%} {% assign reloadClass = '' -%} {% assign complaintOrReturn = true -%} {% assign max = product.Quantity | Normalize -%} {% endif -%}

partials/order/products-partials/product-table-header.html

Na samym początku pliku partials/order/products-partials/product-table-header.html dodaj blok przypisujący flagę complaintsOrReturnsEnabled:
{% if config.Complaints.ComplaintsEnabled or config.Complaints.ReturnsEnabled -%} {% assign complaintsOrReturnsEnabled = true -%} {% endif -%}

partials/product/products-table.html

Przyciski reklamacji i zwrotu są wyświetlane bezpośrednio w tabeli, zamiast w rozwijanym menu. W pliku partials/product/products-table.html znajdź komórkę z opcjami:
<td class="options drop"> {% if order.Status == 3 and complaintsOrReturnsEnabled and product.CanComplain == true -%} <button aria-label="{{translations.Options}}" class="pure-button open-dropdown-js"> <svg width="24" height="24" style="transform: rotate(90deg);"> <use href="css/img/fontawesome-icons.svg?v={{lqTS}}#ellipsis-h-{{settings.iconStyle}}"></use> </svg> </button> <div class="dropdown dropdown-js hidden-js" {% if productsSize == 1 -%} style="bottom: auto !important;" {% endif -%}> {% if config.Complaints.ComplaintsEnabled == true and product.CanComplain == true -%} <button class="pure-button open-complaint-form-js" data-type="complaint" data-product="{{ product.Url }}"> {{ translations.Complain }} </button> {% endif -%} {% if config.Complaints.ReturnsEnabled == true and product.CanReturn == true and product.IsSetElement == false -%} <button class="pure-button open-complaint-form-js" data-type="return" data-product="{{ product.Url }}"> {{ translations.Return }} </button> {% endif -%} </div> {% endif -%} </td>
i zastąp ją następującym fragmentem:
<td class="options complaint-actions-inline"> {% if order.Status == 3 and complaintsOrReturnsEnabled -%} {% if config.Complaints.ComplaintsEnabled == true and product.CanComplain == true -%} <button class="pure-button open-complaint-form-js complaint-action-btn" data-type="complaint" data-product="{{ product.Url }}"> {{ translations.Complain }} </button> {% endif -%} {% if config.Complaints.ReturnsEnabled == true and product.CanReturn == true and product.IsSetElement == false -%} <button class="pure-button open-complaint-form-js complaint-action-btn" data-type="return" data-product="{{ product.Url }}"> {{ translations.Return }} </button> {% endif -%} {% endif -%} </td>

Następnie w tym samym pliku znajdź zewnętrzny warunek otaczający kontenery formularzy reklamacji i zwrotu i poluzuj go (usuń warunek product.CanComplain == true). Zamień:
{% if order.Status == 3 and complaintsOrReturnsEnabled and product.CanComplain == true -%}
na:
{% if order.Status == 3 and complaintsOrReturnsEnabled -%}

partials/customer-profile/orders/order-details.html

W pliku partials/customer-profile/orders/order-details.html wykonaj poniższe zmiany.

a) Bloki Opcje (zawierające klasę options submenu z przyciskami akcji zamówienia) opakuj warunkiem {% unless order.Restricted -%} … {% endunless -%}, aby ukryć je dla niezalogowanych klientów dokonujących szybkiego zwrotu. Wstaw {% unless order.Restricted -%} bezpośrednio przed otwierającym <div class=”options submenu”> i zamykającym {% endunless -%} po jego zamykającym </div>:
{% unless order.Restricted -%} <div class="options submenu"> ... </div> {% endunless -%}

b) W kontenerze messages-container-js na początku (przed istniejącymi komunikatami typu OrderEditable) dodaj baner informujący o ukrytych danych zamówienia oraz, na końcu kontenera, baner informujący o terminie zwrotu:
{% if order.Restricted -%} <div class="return-info-banner"> <svg width="20" height="20" class="icon" aria-hidden="true"> <use href="css/img/fontawesome-icons.svg?v={{lqTS}}#info-circle-{{settings.iconStyle}}"></use> </svg> <span>{{ translations.RestrictedOrderViewInfo }}</span> </div> {% endif -%}

{% if order.Status == 3 and config.Complaints.ReturnsEnabled -%} <div class="return-info-banner"> <svg width="20" height="20" class="icon" aria-hidden="true"> <use href="css/img/fontawesome-icons.svg?v={{lqTS}}#info-circle-{{settings.iconStyle}}"></use> </svg> <span>{{ translations.OrderReturnDeadlineInfo | Format: config.Complaints.DaysToReturn }}</span> </div> {% endif -%}

c) We wszystkich miejscach wyświetlających numer telefonu klienta zamień warunki sprawdzające jedynie pusty ciąg na warunki sprawdzające również wartość null. Zamień każde wystąpienie:
{% if order.Customer.DeliveryAddress.PhoneNo != '' -%}
na:
{% if order.Customer.DeliveryAddress.PhoneNo != null and order.Customer.DeliveryAddress.PhoneNo != '' -%}

d) Analogicznie zaktualizuj warunek wyświetlania NIP-u/TIN-u w sekcji danych do faktury. Zamień:
{% elseif order.Customer.TIN != '' -%}
na:
{% elseif order.Customer.TIN != null and order.Customer.TIN != '' -%}

e) W sekcji adresu dostawy zamień otwierający warunek alternatywny {% else -%} (bezpośrednio przed kontenerem z translations.DelivAddress) na bardziej restrykcyjny:
{% elseif order.Customer.DeliveryAddress != null -%}

f) Sekcję wybranego dokumentu (ChoosenDocument) opakuj warunkiem ukrywającym ją dla zamówień typu restricted. Wstaw {% unless order.Restricted -%} przed kontenerem order-details-item z tytułem translations.ChoosenDocument oraz {% endunless -%} za jego zamykającym </div>.

g) W sekcji dokumentów zamówienia dodaj do warunku sprawdzenie order.Restricted == false. Zamień:
{% if orderDocumentsSize > 0 -%}
na:
{% if orderDocumentsSize > 0 and order.Restricted == false -%}

h) W sekcji załączników zamówienia dodaj analogiczne sprawdzenie. Zamień:
{% if config.Orders.AttachmentsEnabled and orderAttachmentsSize > 0 -%}
na:
{% if config.Orders.AttachmentsEnabled and orderAttachmentsSize > 0 and order.Restricted == false -%}

i) W sekcji zamówień powiązanych zamień:
{% if order.RelatedOrders[0] -%}
na:
{% if order.RelatedOrders[0] and order.Restricted == false -%}

partials/customer-profile/complaints/complaint-form.html

W pliku partials/customer-profile/complaints/complaint-form.html wprowadź poniższe zmiany.

a) W kontenerze amount-stepper-container (wewnątrz warunku {% if type != 'set-return’ -%}) na samym początku dodaj nową etykietę:
<span class="amount-stepper-container__label">{{ translations.Quantity }}:</span>

b) Pod sekcją z komentarzem reklamacji/zwrotu (po zamykającym {% endif -%} z sekcji complaint-message-textarea) wewnątrz warunku {% if type != 'set-return’ -%} dodaj sekcję wyboru sposobu zwrotu środków:
<div class="refund-method-wrapper"> <div class="refund-method-wrapper__title">{{ translations.Com_RefundMethod }} <span class="required">*</span></div> <label class="refund-method-option"> <input type="radio" name="refundMethod" class="refund-method-option__radio refund-method-radio-js" value="asPaid" checked> <span class="refund-method-option__box" aria-hidden="true"></span> <span class="refund-method-option__label"> {{ translations.Com_RefundAsPaid }} {% if order.Payment.Name and order.Payment.Name != '' -%} ({{ order.Payment.Name }}){% endif -%} </span> </label> <label class="refund-method-option"> <input type="radio" name="refundMethod" class="refund-method-option__radio refund-method-radio-js" value="bankAccount"> <span class="refund-method-option__box" aria-hidden="true"></span> <span class="refund-method-option__label">{{ translations.Com_RefundToBankAccount }}</span> </label> </div> <div class="form__input-wrapper account-number-wrapper-js hidden-js"> <label for="accountNumber" class="form__input-info input-info-js">{{ translations.Com_BankAccountNumber }} <span class="required">*</span></label> <input id="accountNumber" class="form__input-value input-value-js" type="text" name="accountNumber" maxlength="50" disabled> <div class="form__invalid-input validation-info-js validation-required-js hidden-js">{{ translations.FieldRequired }}</div> </div>

c) W sekcji załączników plików zamień prosty licznik file-{{forloop.index}} na prefiks zawierający identyfikator zamówienia, numer produktu i typ formularza. Tuż przed pętlą {% for i in (1..config.Complaints.AttachmentsMaxCount) -%} dodaj nową linię:
{% capture filePrefix -%}file-{{ order.Id }}-{{ product.No }}-{{ type }}{% endcapture -%}
Następnie wewnątrz pętli zamień:
<label for="file-{{forloop.index}}" class="file"> <input id="file-{{forloop.index}}" class="add-attachement-in-complaint-js hidden-js" type="file" ... >
na:
<label for="{{ filePrefix }}-{{ forloop.index }}" class="file"> <input id="{{ filePrefix }}-{{ forloop.index }}" class="add-attachement-in-complaint-js hidden-js" type="file" ... >

d) Komunikat sukcesu wyświetlany po wysłaniu formularza ma być inny dla reklamacji, a inny dla zwrotu. Znajdź kontener <div class=”success-message-js hidden-js”> i jego dotychczasową zawartość:
<div class="success-message-js hidden-js"> <span> {{ successInfo }} </span> </div>
zastąp:
<div class="success-message-js hidden-js"> {% if complaint -%} <span>{{ successInfo }}</span> {% else -%} <div class="data-form__header return-success__header"> <span></span> <button class="close-button hide-container-js closing-modal-js" aria-label="{{ translations.Close }}"> <svg aria-hidden="true" width="24" height="24" class="svgIcon"><use xlink:href="css/img/fontawesome-icons.svg?v={{lqTS}}#times-{{settings.iconStyle}}"></use></svg> </button> </div> <div class="return-success__icon"> <svg aria-hidden="true" width="48" height="48" class="svgIcon"><use xlink:href="css/img/fontawesome-icons.svg?v={{lqTS}}#check-circle-{{settings.iconStyle}}"></use></svg> </div> <div class="return-success__title">{{ successTitle }}</div> <div class="return-success__subtitle">{{ successInfo }}</div> {% if order.Customer.Email and order.Customer.Email != '' -%} <div class="return-success__email-box"> <svg aria-hidden="true" width="20" height="20" class="svgIcon"><use xlink:href="css/img/fontawesome-icons.svg?v={{lqTS}}#info-circle-{{settings.iconStyle}}"></use></svg> <div> <div>{{ translations.Com_ConfirmationSentTo }}</div> <strong>{{ order.Customer.Email }}</strong> </div> </div> {% endif -%} <div class="return-success__steps-title">{{ translations.Com_NextSteps }}</div> <ol class="return-success__steps"> <li>{{ translations.Com_PackProducts }}</li> <li> {{ translations.Com_SendPackageTo }} {% if config.Shop.Address.Street != '' -%} {{ config.Shop.Address.Street }}{% endif -%} {% if config.Shop.Address.StreetNo != '' -%} {{ config.Shop.Address.StreetNo }}{% endif -%} {% if config.Shop.Address.UnitNo != '' -%}/{{ config.Shop.Address.UnitNo }}{% endif -%} {% if config.Shop.Address.ZipCode != '' or config.Shop.Address.City != '' -%}, {{ config.Shop.Address.ZipCode }} {{ config.Shop.Address.City }}{% endif -%} </li> <li>{{ translations.Com_RefundAfterReceive }}</li> </ol> <div class="buttons-container short"> <button class="primary-action-button hide-container-js closing-modal-js"> {{ translations.Close }} </button> </div> {% endif -%} </div>

4. Modyfikacje pliku js/layout-customerprofile0.js

Poniższe zmiany dotyczą pliku js/layout-customerprofile0.js (jego nieskompresowanej wersji, którą po edycji należy ponownie zminifikować do layout-customerprofile0.min.js).

a) W funkcji openComplaintForm wewnątrz warunku if (hiddenContainer) – tuż po linii hiddenContainer.querySelector(’.success-message-js’).classList.add(’hidden-js’); – dodaj kod ujawniający nagłówek formularza oraz resetujący wybór sposobu zwrotu do opcji domyślnej:
const mainHeader = hiddenContainer.querySelector(':scope > .data-form__header'); if (mainHeader) { mainHeader.classList.remove('hidden-js'); } hiddenContainer.classList.remove('hidden-js');

const asPaidRadio = hiddenContainer.querySelector(’.refund-method-radio-js[value=”asPaid”]’);
if (asPaidRadio) {
asPaidRadio.checked = true;
$(asPaidRadio).trigger(’change’);
}
(Linia hiddenContainer.classList.remove(’hidden-js’); już istnieje – pokazana jest dla kontekstu. Nowe są bloki const mainHeader i const asPaidRadio.)

b) W funkcji sendComplaint, w bloku przygotowującym dane formularza – po pętli for (const item of dataFromHTML) dokładającej pola do fd – dodaj fragment dołączający parametr qrHash z adresu URL przy wysyłaniu zwrotu:
if (form.find('input[name="__action"]').val() === 'Order/ReturnAdd') { const qrHash = new URLSearchParams(globalThis.location.search).get('qrHash'); if (qrHash) { fd.append('qrHash', qrHash); } }

c) W tej samej funkcji sendComplaint, w callbacku success po pomyślnym wysłaniu, zamień fragment:
form.parents('.add-complaint-form-js').find('.success-message-js').removeClass('hidden-js');
na:
const container = form.parents('.add-complaint-form-js'); container.find('.success-message-js').removeClass('hidden-js'); container.children('.data-form__header').addClass('hidden-js');

d) Na samym końcu pliku js/layout-customerprofile0.js dodaj nowy handler obsługujący przełączanie sposobu zwrotu środków. Pokazuje on / ukrywa pole na numer konta bankowego:
$('body').on('change', '.refund-method-radio-js', function(e) { const radio = $(e.currentTarget); const form = radio.closest('.form-js'); const wrapper = form.find('.account-number-wrapper-js'); const input = wrapper.find('input[name="accountNumber"]'); if (radio.val() === 'bankAccount' && radio.prop('checked')) { wrapper.removeClass('hidden-js'); input.prop('disabled', false); input.prop('required', true); } else { wrapper.addClass('hidden-js'); wrapper.find('.validation-required-js').addClass('hidden-js'); wrapper.find('.form__input-info').removeClass('validation-error'); input.removeClass('validation-error-js'); input.prop('required', false); input.prop('disabled', true); input.val(''); } });

5. Modyfikacje plików SCSS profilu klienta

Poniższe style należy dodać do plików scss/static-elements/customer-profile/customer-profile-g.scss (wersja desktop) oraz scss/static-elements/customer-profile/customer-profile-m.scss (wersja mobile). Po zmianach pamiętaj o kompilacji – nie edytuj ręcznie wynikowych plików CSS.

Plik scss/static-elements/customer-profile/customer-profile-g.scss

a) Dla „przyklejonej” kolumny z akcjami reklamacji/zwrotu w tabeli produktów dodaj reguły wewnątrz selektora otaczającego tabelę zamówienia (tam, gdzie znajdują się style dla thead tr th):
thead tr th.open-complaint-form-container-js { position: sticky; right: 0; background: transparent; z-index: 5;

&::before {
content: ”;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 200px;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 50%);
pointer-events: none;
}
}

td.complaint-actions-inline {
white-space: nowrap;
text-align: right;
padding-left: 16px;
padding-right: 8px;
position: sticky;
right: 0;
background: #fff;
z-index: 2;

&::before {
content: ”;
position: absolute;
top: 0;
bottom: 0;
left: -32px;
width: 32px;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 100%);
pointer-events: none;
}

.pure-button.complaint-action-btn {
display: inline-flex;
background: transparent;
border: 0;
border-radius: 4px;
color: $primaryColor;
padding: 4px 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
line-height: 20px;
transition: background-color 150ms ease;

&:hover,
&:focus-visible {
color: $primaryColor;
background: rgba(0, 0, 0, 0.06);
}

& + .complaint-action-btn {
margin-left: 8px;
}
}
}

b) Style hovera dla wiersza tabeli z akcjami reklamacji/zwrotu (umieść w głównym zakresie pliku):
.row { &:hover, &:focus-within, &.hovered-js { td.complaint-actions-inline { background: #F1DDDE;

&::before {
background: linear-gradient(to right, rgba(241, 221, 222, 0), #F1DDDE 100%);
}
}
}

&.set td.complaint-actions-inline {
background: #ececec;

&::before {
background: linear-gradient(to right, rgba(236, 236, 236, 0), #ececec 100%);
}
}
}

c) Style banera informacyjnego (termin zwrotu / ukryte dane zamówienia):
.return-info-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 24px 0; background: #E8F1F8; border: 1px solid #C7DCEE; border-radius: 5px; font-size: 14px; line-height: 20px; color: #2C3E50;

.icon {
flex-shrink: 0;
fill: #4A90BC;
}

strong {
font-weight: 600;
}
}

d) Style sekcji wyboru sposobu zwrotu środków oraz radio-buttonów:
.refund-method-wrapper { text-align: left; display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px;

&__title {
color: $primaryColorFont;
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
}

.refund-method-option {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;

&__radio {
display: none;

&:checked ~ .refund-method-option__box {
border-color: $primaryColor;

&::after {
content: „”;
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: $primaryColor;
}
}
}

&__box {
display: flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
border: 1px solid #767676;
border-radius: 50%;
flex-shrink: 0;
}

&__label {
font-size: 14px;
line-height: 20px;
}
}

e) Style ekranu sukcesu po wysłaniu zwrotu (m.in. ikona, tytuł, lista kolejnych kroków):
.add-complaint-form-js .characters-length { margin-top: 0; bottom: 23px; }

.add-complaint-form-js {
.quantity__plus.disabled-js,
.quantity__minus.disabled-js {
opacity: 0.4;
}
}

.add-complaint-form-js .data-form__header.return-success__header {
margin-bottom: 8px;
}

.return-success {
&__icon {
display: flex;
justify-content: center;
margin-bottom: 16px;

svg {
fill: #2E7D32;
}
}

&__title {
text-align: center;
font-size: 20px;
font-weight: 600;
line-height: 28px;
color: $primaryColorFont;
margin-bottom: 8px;
}

&__subtitle {
text-align: center;
font-size: 14px;
line-height: 20px;
color: $labelsColor;
padding-bottom: 24px;
border-bottom: 1px solid #E7E7E7;
margin-bottom: 24px;
}

&__email-box {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
background: #F0F6FC;
border: 1px solid #D6E4F0;
border-radius: 6px;
margin-bottom: 24px;
font-size: 14px;
line-height: 20px;
color: $primaryColorFont;

svg {
fill: #1976D2;
flex-shrink: 0;
margin-top: 2px;
}
}

&__steps-title {
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: $primaryColorFont;
margin-bottom: 12px;
}

&__steps {
margin: 0 0 24px;
padding-left: 20px;
font-size: 14px;
line-height: 20px;
color: $primaryColorFont;

li {
margin-bottom: 8px;

&:last-child {
margin-bottom: 0;
}
}
}
}

f) Uzupełnij wnętrze selektora .file-attachements-wrapper o style dla kontenera pojedynczego załącznika:
.file-container { .file { align-items: center; font-weight: 400; color: $primaryColorFont; justify-content: flex-start; }

.icon-js svg {
fill: $primaryColorFont;
}

.clear-file-input-js {
flex-shrink: 0;
display: flex;
align-items: center;

svg {
width: 14px;
height: 14px;
fill: $primaryColor;
}
}
}

Plik scss/static-elements/customer-profile/customer-profile-m.scss

Na końcu pliku customer-profile-m.scss dodaj reguły dopasowujące przyciski reklamacji/zwrotu do widoku mobilnego (układają się one wówczas jeden pod drugim):
.eshop__table-container { thead tr th.open-complaint-form-container-js::before { width: 100px; }

td.complaint-actions-inline {
.pure-button.complaint-action-btn {
display: block;
width: max-content;
margin-left: auto;
text-align: right;

& + .complaint-action-btn {
margin-left: auto;
margin-top: 4px;
}
}
}
}

Po wprowadzeniu wszystkich powyższych zmian w szablonie Rubin pamiętaj o kompilacji oraz minifikacji plików js i scss, zgodnie z artykułem dostępnym pod linkiem https://pomoc.comarchesklep.pl/artykul/kompilacja-i-minifikacja-plikow/.

Szablon Szafir

1. Tłumaczenia

W panelu administracyjnym sklepu dodaj nowe klucze tłumaczeń wymagane przez funkcjonalność szybkich zwrotów w szablonie Szafir.

RefundMethod
– PL: Sposób zwrotu środków
– EN: Refund method
– DE: Rückerstattungsmethode
– FR: Méthode de remboursement

RefundAsPaid
– PL: Tak jak zapłacono
– EN: As paid
– DE: Wie bezahlt
– FR: Comme payé

RefundToBankAccount
– PL: Na konto bankowe
– EN: To bank account
– DE: Auf Bankkonto
– FR: Sur le compte bancaire

BankAccountNumber
– PL: Nr konta bankowego
– EN: Bank account number
– DE: Bankkontonummer
– FR: Numéro de compte bancaire

ReturnConfirmationTitle
– PL: Gotowe! Przyjęliśmy Twoje zgłoszenie
– EN: Done! We have received your request
– DE: Fertig! Wir haben Ihre Anfrage erhalten
– FR: Terminé! Nous avons reçu votre demande

ReturnConfirmationInfo
– PL: Przygotuj paczkę i odeślij ją do nas – wszystkie szczegóły znajdziesz poniżej.
– EN: Prepare the package and send it back to us – all details can be found below.
– DE: Bereiten Sie das Paket vor und senden Sie es an uns zurück – alle Details finden Sie unten.
– FR: Préparez le colis et renvoyez-le nous – tous les détails se trouvent ci-dessous.

ReturnConfirmationEmailSent
– PL: Potwierdzenie zwrotu zostało wysłane na adres:
– EN: Return confirmation has been sent to:
– DE: Die Rücksendebestätigung wurde gesendet an:
– FR: La confirmation de retour a été envoyée à:

NextSteps
– PL: Następne kroki
– EN: Next steps
– DE: Nächste Schritte
– FR: Prochaines étapes

ReturnStep1
– PL: Bezpiecznie zapakuj swoje produkty
– EN: Safely pack your products
– DE: Verpacken Sie Ihre Produkte sicher
– FR: Emballez vos produits en toute sécurité

ReturnStep2Address
– PL: Wyślij paczkę na adres
– EN: Send the package to
– DE: Senden Sie das Paket an
– FR: Envoyez le colis à

ReturnStep3
– PL: Pieniądze zwrócimy niezwłocznie po otrzymaniu i sprawdzeniu Twojej paczki.
– EN: We will refund the money promptly after receiving and checking your package.
– DE: Wir erstatten das Geld umgehend nach Erhalt und Überprüfung Ihres Pakets.
– FR: Nous rembourserons l’argent rapidement après réception et vérification de votre colis.