zastąp:

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.

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.

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.

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 content %}
{% 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:

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

Na końcu pliku js/layout0.js dodaj poniższy kod odpowiedzialny za walidację i wysłanie formularza wyszukiwania zamówienia (dla niezalogowanego klienta). Po zapisaniu pliku pamiętaj o zminifikowaniu go do layout0.min.js.
const refunds = {
findRefundOrder(orderNumber, email) {
return $.post('', {
__action: 'Order/QuickReturnLookup',
orderId: orderNumber,
email: email,
__csrf: __CSRF
});
},

showForm() {
document.querySelectorAll(’.refunds-initial-view-js’).forEach((el) => el.classList.add(’hidden-js’));
document.querySelectorAll(’.refund-form-view-js’).forEach((el) => el.classList.remove(’hidden-js’));
document.querySelector(’.refund-form-js input[name=”orderNumber”]’)?.focus();
},

clearFieldError(input) {
input.classList.remove(’validation-error-ui’, 'validation-error-lq’);
input.closest(’.form__input-wrapper’)
?.querySelectorAll(’.error-ui’)
.forEach((el) => el.classList.add(’hidden-js’));
},

markFieldError(input, errorSelector) {
input.classList.add(’validation-error-ui’, 'validation-error-lq’);
input.closest(’.form__input-wrapper’)?.querySelector(errorSelector)?.classList.remove(’hidden-js’);
},

validateForm({ orderInput, emailInput }) {
const orderValue = orderInput.value.trim();
const emailValue = emailInput.value.trim();
const emailRegex = /^\w+([-+.’]\w+)*@\w+([-.]\w+)*\.\w{2,}$/;
let hasError = false;

if (orderValue.length === 0) {
refunds.markFieldError(orderInput, ’.validation-required-js’);
hasError = true;
}

if (emailValue.length === 0) {
refunds.markFieldError(emailInput, ’.validation-required-js’);
hasError = true;
} else if (!emailRegex.test(emailValue)) {
refunds.markFieldError(emailInput, ’.email-valid-js’);
hasError = true;
}

return { hasError, orderValue };
},

async submitForm(button) {
const form = button.closest(’.refund-form-js’);
if (!form) {
return;
}
const orderInput = form.querySelector(’input[name=”orderNumber”]’);
const emailInput = form.querySelector(’input[name=”email”]’);

form.querySelectorAll(’.error-ui’).forEach((el) => el.classList.add(’hidden-js’));
form.querySelector(’.refund-lookup-error-js’)?.classList.add(’hidden-js’);
form.querySelectorAll(’.form__input-value’).forEach((el) => {
el.classList.remove(’validation-error-ui’, 'validation-error-lq’);
});

const { hasError, orderValue } = refunds.validateForm({ orderInput, emailInput });
if (hasError) {
return;
}

button.disabled = true;
const errorBar = form.querySelector(’.refund-lookup-error-js’);
try {
const result = await refunds.findRefundOrder(orderValue, emailInput.value.trim());
const action = result.action;
if (action.Redirect302) {
globalThis.location.href = action.Redirect302;
return;
}
if (errorBar) {
errorBar.textContent = action.Message;
errorBar.classList.remove(’hidden-js’);
}
} catch (error) {
console.error(’Refund order lookup failed.’, error);
errorBar?.classList.remove(’hidden-js’);
} finally {
button.disabled = false;
}
}
};

js.delegate(document.body, 'click’, ’.start-refund-js’, () => refunds.showForm());

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

js.delegate(document.body, 'click’, ’.refund-form-submit-js’, function (event) {
event.preventDefault();
refunds.submitForm(this);
});

js.delegate(document.body, 'keydown’, ’.refund-form-js input’, function (event) {
if (event.key !== 'Enter’) {
return;
}
event.preventDefault();
this.closest(’.refund-form-js’)?.querySelector(’.refund-form-submit-js’)?.click();
});

Pliki SCSS strony Szybkie zwroty

W folderze scss/static-elements utwórz nowy katalog refunds i umieść w nim dwa pliki: refunds-g.scss (style desktop) oraz refunds-m.scss (style mobilne).

scss/static-elements/refunds/refunds-g.scss:
.refunds {
padding: 40px 110px;
background-color: $bgColor;
color: $primaryColorFont;

.refunds-header {
display: block;
width: 100%;
margin: 0 0 24px;
color: $primaryColorFont;
text-align: left;
font-size: 32px;
font-weight: 500;
line-height: 42px;
letter-spacing: 0.8px;
}

.refunds-intro {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
margin-bottom: 40px;
}

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

@media screen and (min-width: 769px) and (max-width: 1279px) {
max-width: 100%;
}
}

.refunds-info-title {
margin: 0;
font-size: 20px;
font-weight: 500;
line-height: 28px;
letter-spacing: 0.4px;
}

.refunds-info-desc {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.3px;
}

.refunds-info-hint {
margin: 4px 0 0;
color: $secondaryColorFont;
font-size: 12px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.2px;
}

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

.refunds-steps-item {
display: flex;
align-items: center;
gap: 12px;
}

.refunds-steps-number {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: $formsBgColor;
color: $primaryColor;
font-size: 14px;
font-weight: 600;
line-height: 20px;
}

.refunds-steps-text {
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0.3px;

strong {
font-weight: 600;
}
}

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

.refunds-cta-title {
margin: 0;
text-align: center;
font-size: 22px;
font-weight: 500;
line-height: 30px;
letter-spacing: 0.5px;
color: $primaryColorFont;
}

.refunds-cta-desc {
margin: 0;
text-align: center;
color: $secondaryColorFont;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0.3px;
}

.refunds-cta-button,
.refunds-form-submit {
display: inline-block;
width: 100%;
margin-top: 8px;
padding: 12px 16px;
background: $btnSolidBgColor;
color: $btnSolidTextColor;
border: 1px solid $btnSolidBgColor;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

&:hover,
&:focus {
background: $btnSolidHoverBgColor;
color: $btnSolidHoverTextColor;
border-color: $btnSolidHoverBgColor;
}

&[disabled],
&[disabled]:hover {
background: $btnDisabledBg;
border-color: $btnDisabledFont;
color: $btnDisabledFont;
cursor: default;
}
}

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

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

.refunds-form-title {
margin: 0 0 8px;
font-size: 22px;
font-weight: 500;
line-height: 30px;
letter-spacing: 0.5px;
color: $primaryColorFont;
}

.refunds-form-desc {
margin: 0 0 20px;
color: $secondaryColorFont;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0.3px;
}

.refund-form-js {
display: flex;
flex-direction: column;

.form__input-wrapper {
position: relative;
margin-bottom: 16px;

.form__input-info {
display: block;
margin: 0 0 4px;
color: $primaryColorFont;
font-size: 13px;
font-weight: 400;
line-height: 18px;
}

input {
width: 100%;
height: 36px;
margin: 0;
padding: 0 10px;
box-sizing: border-box;
border: 1px solid $lightBorderColor;
font-size: 14px;

&::placeholder {
font-size: 14px;
}

&.validation-error-ui,
&.validation-error-lq {
border-color: $dangerColor;
color: $dangerColor;
}
}

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

.form__required-fields-info {
margin: 4px 0 16px;
color: $primaryColorFont;
font-size: 12px;
font-weight: 300;
line-height: 18px;
}
}

.refunds-form-login-info {
margin: 12px 0 0;
text-align: center;
color: $primaryColorFont;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}

.refunds-form-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: 768px) {
.refunds {
padding: 20px 16px;

.refunds-header {
font-size: 24px;
line-height: 32px;
margin-bottom: 16px;
}

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

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

.refunds-info-title {
font-size: 18px;
line-height: 24px;
}

.refunds-info-desc {
font-size: 14px;
line-height: 22px;
}

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

.refunds-steps-number {
width: 28px;
height: 28px;
font-size: 13px;
}

.refunds-steps-text {
font-size: 13px;
line-height: 20px;
padding-top: 3px;
}

.refunds-cta {
padding: 24px;
}

.refunds-cta-title {
font-size: 20px;
line-height: 28px;
}

.refunds-form-section {
margin-top: 20px;
margin-bottom: 24px;
}

.refunds-form {
padding: 24px;
border: none;
}

.refunds-form-title {
font-size: 20px;
line-height: 28px;
}

.refunds-form-desc {
margin-bottom: 16px;
}

.refunds-form-login-info {
font-size: 13px;
}
}
}

3. Modyfikacje istniejących plików HTML

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

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

a) Blok z przyciskami akcji nawigacji zamówienia (zawierający {% if order.EditingAllowed -%}, opcje anulowania, edycji, ponowienia, druku itp.) opakuj warunkiem ukrywającym go dla zamówień typu restricted. Bezpośrednio po linii z elementem

• …

wstaw:
{% unless order.Restricted -%}
a tuż przed zamykającym znacznikiem

tej samej nawigacji dodaj:
{% endunless -%}

b) Na początku kontenera messages-container-lq messages-container-ui (zaraz po jego otwarciu) dodaj baner informujący o ukrytych danych zamówienia:
{% if order.Restricted -%}

{% endif -%}

c) Na końcu tego samego kontenera (przed zamykającym

i zastąp go nową, rozszerzoną wersją z dwoma wariantami (reklamacja / zwrot):

4. Modyfikacje pliku js/init-ui2.js

Poniższe zmiany dotyczą pliku js/init-ui2.js (po edycji pamiętaj o zminifikowaniu go do init-ui2.min.js).

a) Tuż po linii rejestrującej handler openComplaintForm:
js.delegate(document.body, 'click', '.open-complaint-form-js', openComplaintForm);
dodaj poniższy handler obsługujący przełączanie sposobu zwrotu środków – pokazuje on / ukrywa pole na numer konta bankowego:
js.delegate(document.body, 'change', '.refund-method-select-js', function() {
const container = js.parents(this, 'refund-method-container-js');
if(!container) return;
const bankWrapper = container.getElementsByClassName('bank-account-container-js')[0];
if(!bankWrapper) return;
const bankInput = bankWrapper.querySelector('input[name="bankAccountNumber"]');
const validationMsg = bankWrapper.getElementsByClassName('validation-required-js')[0];
if(this.value === 'bank') {
bankWrapper.classList.remove('hidden-js');
if(bankInput) {
bankInput.disabled = false;
bankInput.required = true;
}
} else {
bankWrapper.classList.add('hidden-js');
if(bankInput) {
bankInput.disabled = true;
bankInput.required = false;
bankInput.value = '';
bankInput.classList.remove('validation-error-lq', 'validation-error-ui');
}
if(validationMsg) validationMsg.classList.add('hidden-js');
}
});

b) W funkcji sendComplaint, bezpośrednio po pętli for (var i=0; i<dataFromHTML.length; i++) 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') {
var qrHash = new URLSearchParams(globalThis.location.search).get('qrHash');
if (qrHash) {
fd.append('qrHash', qrHash);
}
}

5. Modyfikacje pliku scss/globals/_globals2.scss

W pliku scss/globals/_globals2.scss wewnątrz selektora opakowującego (tego, który zawiera m.in. .note-ui) dodaj poniższe reguły. Po zmianach pamiętaj o kompilacji SCSS – nie edytuj ręcznie wynikowych plików CSS.

a) Style etykiety ilości oraz kontenera wyboru sposobu zwrotu środków (wstaw w sąsiedztwie istniejących reguł sekcji formularza reklamacji/zwrotu):
.amount-stepper-label-ui {
margin-right: 10px;
vertical-align: middle;
}

.refund-method-container-ui {
margin-bottom: 20px;
.bank-account-container-ui {
margin-top: 10px;
input {
width: 100%;
}
}
}

b) Style ekranu sukcesu po wysłaniu zwrotu (ikona, tytuł, lista kolejnych kroków, sekcja z e-mailem i przyciskiem zamknięcia):
.return-success-popup-ui {
padding: 30px 20px 20px;
.return-success-icon-ui {
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #68a204;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
i {
color: #68a204;
font-size: 26px;
}
}
.return-success-title-ui {
font-size: 18px;
font-weight: 500;
text-align: center;
margin-bottom: 10px;
}
.return-success-desc-ui {
font-size: 14px;
color: $primaryColorFont;
text-align: center;
margin-bottom: 20px;
}
.return-success-email-info-ui {
background-color: $bgColor;
border: 1px solid $lightBorderColor;
padding: 12px;
border-radius: 4px;
font-size: 14px;
margin-bottom: 20px;
display: flex;
align-items: flex-start;
i {
margin-right: 10px;
color: $primaryColorFont;
font-size: 16px;
line-height: 1.4;
}
strong {
display: block;
}
}
.return-success-steps-title-ui {
font-weight: 500;
margin-bottom: 10px;
}
.return-success-steps-ui {
padding-left: 20px;
margin: 0 0 20px;
font-size: 14px;
li {
margin-bottom: 8px;
padding-left: 5px;
}
}
.return-success-actions-ui {
border-top: 1px solid $lightBorderColor;
padding-top: 15px;
text-align: right;
.return-success-close-ui {
padding: 10px 30px;
}
}
}

Po wprowadzeniu wszystkich powyższych zmian w szablonie Szafir 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 Topaz / One Page Shop

Zmiany opisane poniżej dotyczą szablonu Topaz. Szablon One Page Shop ma praktycznie identyczną strukturę – wszystkie modyfikacje dotyczą tych samych plików i mają tę samą zawartość. Wystarczy zastosować poniższą instrukcję w plikach szablonu OPS pod tymi samymi ścieżkami.

1. Tłumaczenia

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

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.

Prf_ReturnPeriodInfo
– PL: Zamówienie można zwrócić w ciągu {0} dni od daty dostawy.
– EN: The order can be returned within {0} days from the delivery date.
– DE: Die Bestellung kann innerhalb von {0} Tagen ab dem Lieferdatum zurückgegeben werden.
– FR: La commande peut être retournée dans un délai de {0} jours à compter de la date de livraison.

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

ComplaintSuccessDescription
– PL: Przygotuj paczkę i odeślij ją do nas – wszystkie szczegóły znajdziesz poniżej.
– EN: Prepare the parcel and send it back to us – you will find all the details 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 – vous trouverez tous les détails ci-dessous.

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

ComplaintSuccessStepsTitle
– PL: Następne kroki
– EN: Next steps
– DE: Nächste Schritte
– FR: Étapes suivantes

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

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

ComplaintSuccessStep3
– PL: Pieniądze zwrócimy niezwłocznie po otrzymaniu i sprawdzeniu Twojej paczki.
– EN: We will refund the money immediately after receiving and inspecting your parcel.
– DE: Wir erstatten den Betrag unverzüglich nach Erhalt und Prüfung Ihres Pakets.
– FR: Nous rembourserons l’argent immédiatement après réception et vérification 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 entrez 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: Senden Sie das Paket
– FR: Envoyez 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ûr.

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 commencer le processus de retour. Nous vous guiderons à chaque étape.

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.

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

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: Fehler beim Suchen nach der Bestellung. Versuchen Sie es später erneut.
– FR: Une erreur s’est produite lors de la recherche de la commande. Veuillez réessayer plus tard.

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

InvalidEmail
– PL: Nieprawidłowy adres e-mail
– EN: Invalid e-mail address
– DE: Ungültige E-Mail-Adresse
– FR: L’adresse e-mail est incorrecte.

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

RefundAsPaid
– PL: Zwrot na sposób płatności
– EN: Refund to the original payment method
– DE: Rückerstattung auf die ursprüngliche Zahlungsmethode
– FR: Remboursement sur le mode de paiement initial

RefundToBankAccount
– PL: Zwrot na konto bankowe
– EN: Refund to bank account
– DE: Rückerstattung auf das Bankkonto
– FR: Remboursement sur un compte bancaire

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:
{% include 'partials/common/breadcrumbs.html' -%}

{% if customer.Authenticated == false -%}

{% endif -%}

{% if settings.newsletterOnFunctionalPages == 'yes’ -%}
{% include 'partials/newsletter-global.html’ -%}
{% endif -%}

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). Po zapisaniu pamiętaj o zminifikowaniu pliku do layout1.min.js.
$(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);
const $wrapper = $input.closest(’.form__input-wrapper’);
$input.removeClass(’form__validation-error-js’);
$wrapper.removeClass(’form__validation-error-js’);
$wrapper.find(’.form__invalid-input’).hide();
},

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’).hide();
$form.find(’.form__input-value’).removeClass(’form__validation-error-js’);
$form.find(’.form__input-wrapper’).removeClass(’form__validation-error-js’);

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

if (emailValue.length === 0) {
$emailInput.addClass(’form__validation-error-js’);
$emailInput.closest(’.form__input-wrapper’).find(’.form__validation-required-js’).show();
hasError = true;
} else if (emailRegex.test(emailValue)) {
$emailInput.removeClass(’form__validation-error-js’);
} else {
$emailInput.addClass(’form__validation-error-js’);
$emailInput.closest(’.form__input-wrapper’).find(’.form__validation-info-js’).show();
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.showTemporaryPopup(action.Message, 'error’, ”, 8000);
} catch (error) {
console.error(’Refund order lookup failed.’, error);
app.showTemporaryPopup($form.data(’error’), 'error’);
} finally {
$submit.prop(’disabled’, false);
}
},

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

$(’body’).on(’click’, ’.refunds-login-trigger-js’, function(e) {
const $popup = $(’.popup-dialog-js–loginRegister’);

if ($popup.find(’.reminder-container:visible’).length > 0) {
$popup.find(’.backButton-js’).click();
}

const loginTabText = $popup.find(’.loginRegisterTab-js’).first().text();
$popup.find(’.loginRegisterHeader’).text(loginTabText);

globalThis.location.hash = '#login-redirect=’ + __CustomerProfileUrl + ’?tab=orders-active’;

$(’body’).addClass(’modal-opened’);
$popup.show();
$popup.find(’.login-register-close-button’).removeClass(’hidden’);
if (typeof app !== 'undefined’ && typeof app.activateFocusTrap === 'function’) {
app.activateFocusTrap(’.popup-dialog-js–loginRegister’, e.currentTarget);
}
if (typeof ui !== 'undefined’ && typeof ui.formLabelAnimationOnCartLoginPage === 'function’) {
ui.formLabelAnimationOnCartLoginPage();
}
});

$(’body’).on(’click’, ’.login-register-close-button’, function() {
$(’.popup-dialog-js–loginRegister’).hide();
$(’body’).removeClass(’modal-opened’);
history.replaceState(null, ”, globalThis.location.pathname + globalThis.location.search);
});

$(’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, a w nim trzy pliki: refunds-g.scss (style ogólne), refunds-d.scss (desktop) oraz refunds-m.scss (mobile).

scss/static-elements/refunds/refunds-g.scss:
.refunds-container {
box-sizing: border-box;
margin: 0 auto;
color: $primaryFontColor;
background-color: $primaryPageBg;

.refunds-view {
display: flex;
flex-direction: column;
align-items: center;

&.hidden-js {
display: none;
}
}

.refunds-intro {
width: 100%;
align-self: stretch;

&__heading {
margin: 0 0 16px;
font-size: $mediumFontSize;
font-weight: 600;
line-height: 1.4;
color: $primaryFontColor;
}

&__lead {
margin: 0 0 16px;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
color: $primaryFontColor;
}

&__hint {
margin: 16px 0 0;
font-size: $extraSmallFontSize;
color: $secondaryFontColor;
}
}

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

&__item {
counter-increment: refund-step;
display: flex;
align-items: center;
gap: 12px;

&::before {
content: counter(refund-step);
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: $primaryBtnBg;
color: $primaryBtnFontColor;
font-weight: 600;
font-size: $smallFontSize;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
}

&__text {
font-size: $smallFontSize;
line-height: 1.5;
color: $primaryFontColor;

strong {
font-weight: 600;
}
}
}

.refunds-card,
.refunds-lookup {
box-sizing: border-box;
width: 100%;
background-color: $primaryPageBg;
border: 1px solid $borderColor;
border-radius: 8px;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
}

.refunds-card {
align-items: center;
text-align: center;
gap: 12px;

&__heading {
margin: 0;
font-size: $bigFontSize;
font-weight: 600;
line-height: 1.3;
color: $primaryFontColor;
}

&__text {
margin: 0;
font-size: 16px;
line-height: 1.5;
color: $secondaryFontColor;
}

&__btn {
width: 100%;
margin-top: 12px;
}
}

.refund-form-js {
.form__invalid-input {
margin: 4px 0 0;
font-size: $extraSmallFontSize;
line-height: 16px;
color: $messageErrorColor;
}
}

.refunds-lookup {
gap: 16px;

&__heading {
margin: 0;
font-size: $bigFontSize;
font-weight: 600;
line-height: 1.3;
color: $primaryFontColor;
}

&__lead {
margin: 0;
font-size: $smallFontSize;
line-height: 1.5;
color: $secondaryFontColor;
}

&__loginPrompt {
margin: 8px 0 0;
font-size: $smallFontSize;
color: $primaryFontColor;
}

&__loginLink {
color: $linkFontColor;
font-weight: 600;
text-decoration: underline;

&:hover,
&:focus {
text-decoration: none;
}
}

&__error {
margin: 0;
font-size: $smallFontSize;
color: $messageErrorColor;
}
}
}

.loginRegister–login-only {
.loginRegisterTabsContainer { display: none; }
.registrationForm-js { display: none; }
}

scss/static-elements/refunds/refunds-d.scss:
@media screen and (min-width: 769px) {
.refunds-container {
max-width: 1400px;
padding-top: 32px;
padding-bottom: 64px;

.refunds-view {
gap: 32px;
}

.refunds-intro {
&__heading {
font-size: 20px;
}

&__lead {
margin-bottom: 24px;
}
}

.refunds-card,
.refunds-lookup {
max-width: 578px;
}

.refunds-card {
padding: 40px;
}

.refunds-lookup {
padding: 32px;
}
}
}

scss/static-elements/refunds/refunds-m.scss:
@media screen and (max-width: 768px) {
.refunds-container {
padding: 16px 3% 40px;

.refunds-view {
gap: 24px;
}

.refunds-intro {
&__heading {
font-size: 18px;
}

&__lead {
font-size: $smallFontSize;
margin-bottom: 16px;
}
}

.refunds-steps {
&__item {
&::before {
width: 28px;
height: 28px;
}
}
}

.refunds-card {
padding: 24px 16px;

&__heading {
font-size: $mediumFontSize;
}

&__text {
font-size: $smallFontSize;
}
}

.refunds-lookup {
padding: 20px 16px;

&__heading {
font-size: $mediumFontSize;
}
}
}
}

3. Modyfikacje istniejących plików HTML

partials/customer/order-content.html

W pliku partials/customer/order-content.html wykonaj poniższe zmiany.

a) Bezpośrednio po otwarciu kontenera

dodaj dwa nowe bannery informacyjne (jeden o ukrytych danych zamówienia, drugi o terminie zwrotu, wraz z wyliczaniem flagi hasReturnableProduct):
{% if order.Restricted -%}

{{ translations.RestrictedOrderViewInfo }}

{% endif -%}
{% assign hasReturnableProduct = false -%}
{% if config.Complaints.ReturnsEnabled -%}
{% for product in order.Products -%}
{% if product.CanReturn -%}
{% assign hasReturnableProduct = true -%}
{% break -%}
{% endif -%}
{% endfor -%}
{% endif -%}
{% if hasReturnableProduct -%}

{{ translations.Prf_ReturnPeriodInfo | Format: config.Complaints.DaysToReturn }}

{% endif -%}

b) Kontener

…

(z dokumentami do druku) opakuj warunkiem {% unless order.Restricted -%} … {% endunless -%}, aby ukrywać go dla zamówień typu restricted.

c) Cały dotychczasowy blok przycisków reklamacji/zwrotu (oparty na konstrukcji {% if ComplaintsEnabled and ReturnsEnabled %} … {% elseif ComplaintsEnabled %} … {% elseif ReturnsEnabled %} … {% endif %} z jednym wspólnym przyciskiem) zamień na dwa niezależne warunki, dzięki czemu dla produktu uprawnionego zarówno do reklamacji, jak i do zwrotu, oba przyciski wyświetlają się obok siebie. Strukturę wewnątrz warunku {% if product.CanComplain or product.CanReturn -%} zastąp poniższym kodem:
{% if config.Complaints.ComplaintsEnabled == true and product.CanComplain -%}

{{translations.Prf_SendComplaint }}

{% endif -%}
{% if config.Complaints.ReturnsEnabled == true and product.CanReturn -%}

{{ translations.Prf_OrderReturn }}

{% endif -%}
Kluczowe różnice w stosunku do poprzedniej wersji: każdy przycisk renderowany jest niezależnie (oba mogą wystąpić równocześnie), przyciski mają modyfikatory orderContent__complainBtn–complaint i orderContent__complainBtn–return, atrybut data-form-type (odczytywany w JS), w przycisku reklamacji wymuszone data-product-return=”false”, w przycisku zwrotu wymuszone data-product-complain=”false”, ikony 16×16 (#comment-alt-regular dla reklamacji, #sync-regular dla zwrotu), a etykieta przycisku zawiera już tylko jedno tłumaczenie.

d) W pozostałych miejscach z przyciskami reklamacji/zwrotu (sekcje, w których nie zmieniają się klasy i ikony) dodaj jedynie dwa nowe atrybuty:
data-product-unit="{{ product.Unit }}"
data-product-description="{{ productAttributes | Join: ' / ' | H }}"

e) W sekcji załączników zamówienia zamień:
{% if order.Attachments[0] -%}
na:
{% if order.Attachments[0] and order.Restricted == false -%}

f) W kontenerze

zamień wyświetlanie adresu dostawy:
{{ order.Customer.DeliveryAddress.Street }} {{ order.Customer.DeliveryAddress.StreetNo }} / {{ order.Customer.DeliveryAddress.UnitNo }}
na:
{{ order.Customer.DeliveryAddress.Street }} {{ order.Customer.DeliveryAddress.StreetNo }}{% if order.Customer.DeliveryAddress.UnitNo != null and order.Customer.DeliveryAddress.UnitNo != '' -%} / {{ order.Customer.DeliveryAddress.UnitNo }}{% endif -%}g) Sekcję z przyciskami akcji zamówienia (orderCancel-js, ponowienie płatności itd.) opakuj warunkiem {% unless order.Restricted -%} … {% endunless -%}. Wstaw {% unless order.Restricted -%} bezpośrednio przed warunkiem {% if order.CanRestorePayment -%}, a {% endunless -%} po zamykającym {% endif -%} bloku z przyciskiem anulowania zamówienia.

partials/common/complaint-popup.html

Plik partials/common/complaint-popup.html wymaga gruntownej przebudowy. Usuwamy z niego radiowe przyciski wyboru „reklamacja/zwrot”, a typ formularza jest teraz przekazywany z zewnątrz przez parametr __include. Sterowanie ilością zostało przeniesione do kafelka z produktem (z etykietą i obsługą wariantu statycznego, gdy zostaje tylko 1 sztuka). W formularzu zwrotu zamiast samego pola numeru konta pojawia się sekcja wyboru sposobu zwrotu środków (refundMethod-js) – z opcją „zwrot na sposób płatności” (domyślna) lub „zwrot na konto bankowe”. Pole numeru konta jest domyślnie ukryte i disabled; pokazuje się dopiero po wybraniu opcji „konto bankowe” (obsługa w JS w metodzie changeRefundMethod). Tytuł, kafelek produktu i formularz oznaczone są dodatkową klasą complain-form-view-js, dzięki czemu po pomyślnym wysłaniu formularza można je ukryć i wyświetlić ekran sukcesu (complain-success-view-js). Zastąp całą zawartość pliku poniższym kodem:
{% if hideContent -%}
{% else -%}
{% assign formType = include -%}
{% assign isReturn = false -%}
{% if formType == 'return' -%}
{% assign isReturn = true -%}
{% endif -%}

{% assign order = customer-profile.Order -%}

{% if isReturn -%}
{{ translations.Prf_OrderReturn }}
{% else -%}
{{ translations.Prf_SendComplaint }}
{% endif -%}

{{translations.Com_Quantity}}:

 

{{ translations.ReportDetails }}
{% unless isReturn -%}

{% if config.Complaints.Defects <> null -%}
{% assign defectsSize = config.Complaints.Defects | Size -%}
{{ translations.ChooseComplaintCause }}

{% if defectsSize > 1 -%}* {{translations.ChooseComplaintCause}}{% endif -%}

{% for def in config.Complaints.Defects -%}{{def.Name}}{% endfor -%}

{% endif -%}

{{ translations.Com_FieldIsMandatory }}

* {{translations.Prf_DefectDate}}

{% if config.Complaints.Requests <> null -%}
{% assign requestsSize = config.Complaints.Requests | Size -%}
{{ translations.Prf_ComplainRequest }}

{% if requestsSize > 1 -%}* {{translations.Prf_ComplainRequest}}{% endif %}

{% for req in config.Complaints.Requests -%}{{req.Name}}{% endfor -%}

{% endif -%}

{{ translations.Com_FieldIsMandatory }}

{% else -%}
{% assign returnTypes = config.Complaints.Returns | Size -%}
{% if returnTypes > 1 -%}

{{ translations.ChooseReturn }}
* {{translations.ChooseReturn}}{% for return in config.Complaints.Returns -%}{{return.Name}}{% endfor -%}

{{ translations.Com_FieldIsMandatory }}

{% endif %}
{% endunless -%}

{{ translations.RefundMethod }}
{{ translations.RefundAsPaid }}{% if order.Payment.Name != null and order.Payment.Name != ” %} ({{ order.Payment.Name }}){% endif %}{{ translations.RefundToBankAccount }}

{{translations.Crt_BankAccountNumber}}

{{ translations.Com_FieldIsMandatory }}

{{translations.Prf_AdditionalInfo}}

* {{ translations.Com_RequiredFields }}

{% if config.Complaints.AttachmentsEnabled -%}

{{ translations.AddAttachment }}

{% capture maxSize -%}{{config.Complaints.AttachmentMaxSize | DividedBy: 1024}}KB{% endcapture -%}
{% for i in (1..config.Complaints.AttachmentsMaxCount) -%}

{% endfor -%}

{% endif -%}


{{translations.Report}}

{{ translations.ComplaintSuccessTitle }}

{{ translations.ComplaintSuccessDescription }}

{{ translations.ComplaintSuccessConfirmationSent }}
{{ order.Customer.Email }}

{{ translations.ComplaintSuccessStepsTitle }}

1. {{ translations.ComplaintSuccessStep1 }}
2. {{ translations.ComplaintSuccessStep2 }}
   {{ config.Shop.Address.Street }} {{ config.Shop.Address.StreetNo }}{% if config.Shop.Address.UnitNo != ” %}/{{ config.Shop.Address.UnitNo }}{% endif %}, {{ config.Shop.Address.ZipCode }} {{ config.Shop.Address.City }}
3. {{ translations.ComplaintSuccessStep3 }}

{{ translations.BtnClose }}

{% endif -%}

4. Modyfikacje pliku js/layout1.js

Poniższe zmiany dotyczą pliku js/layout1.js. Po edycji pamiętaj o zminifikowaniu pliku do layout1.min.js.

a) W obiekcie customerProfile usuń całą metodę setComplainReturnRadioButtons (radiowy przełącznik reklamacja/zwrot nie jest już potrzebny – typ formularza jest teraz przekazywany przy otwieraniu popupu).

b) W tym samym obiekcie zastąp całą metodę addDataToComplaintForm nową implementacją, która odczytuje typ formularza z atrybutu data-form-type przycisku i przekazuje go do szablonu jako parametr __include:
addDataToComplaintForm: function (e) {
const template = 'partials/common/complaint-popup.html';
const data = e.currentTarget;
const formType = data.dataset.formType === 'return' ? 'return' : 'complaint';

$.get(”, {__template: template, __include: „'” + formType + „'”}, function(result) {
$(’.customer__content-js’).append(result.template);
$(’.popupDialog__complain’).show();
$(’body’).addClass(’customerProfileNoScroll’);

const image = $(’.productImage-js’);
const productName = $(’.productName-js’);
const inputId = $(’.productId-js’);
const productQuantity = $(’.quantity__field-js’);
const quantityControl = $(’.quantityControl-js’);
const quantityStatic = $(’.quantityStatic-js’);
const productUnit = $(’.productUnit-js’);
const productDescription = $(’.productDescription-js’);

const orderId = $(’.orderId-js’);
const buttonOrderId = $(’.orderComplaintOrReturnAdd-js’);
const orderDate = $(’.orderDate-js’);

productName.text(data.dataset.productName);
productUnit.text(data.dataset.productUnit || ”);
productDescription.text(data.dataset.productDescription || ”);
inputId.val(data.dataset.productId);
productQuantity.attr(’max’, data.dataset.productQuantity);

if (parseInt(data.dataset.productQuantity, 10) <= 1) {
quantityControl.addClass(’hidden’);
quantityStatic.text(data.dataset.productQuantity).removeClass(’hidden’);
} else {
quantityControl.removeClass(’hidden’);
quantityStatic.addClass(’hidden’);
}

orderId.val(data.dataset.orderId);
buttonOrderId.attr(’data-id’, data.dataset.orderId);
orderDate.attr(’min’, data.dataset.orderDate);

if (data.dataset.imageext != null && data.dataset.imageext != „”) {
image.attr(’src’, data.dataset.imageext);
} else if (data.dataset.imageId != null && data.dataset.imageId != „”) {
image.attr(’src’, '/Image/?id=’ + data.dataset.imageId);
}

if (image.attr(’src’) === ” || image.attr(’src’) == null) {
image.closest(’figure’).addClass(’noImage-js’);
}

setTimeout(function() {
app.activateFocusTrap(’.popupDialog__complain’, e.target);
}, 200);
});
},

c) Zastąp metodę changeReturnComplaintForm nową wersją (obsługuje również pole numeru konta i wywołuje changeRefundMethod po przełączeniu na zwrot):
changeReturnComplaintForm: function (e) {
const form = $(e.currentTarget).closest('.inputs-container-js');
const complaintInputs = form.find('.complaintInputWrapper-js');
const returnInputs = form.find('.returnInputWrapper-js');
const accountWrapper = form.find('.accountNumberWrapper-js');
const accountInput = accountWrapper.find('input[name="accountNumber"]');

if ($(e.currentTarget).is(’:checked’) && e.currentTarget.dataset.name === 'complaint’ ) {
$.each(complaintInputs, function (index, value) {
$(value).find(’input, select’).first().removeAttr(’disabled’);
$(value).show(300);
});
returnInputs.each(function () {
$(this).find(’input, select’).first().attr(’disabled’, 'true’);
});
returnInputs.hide(300);
accountInput.removeAttr(’disabled’).removeAttr(’required’).removeClass(’form__validation-error-js’);
accountWrapper.find(’.form__validation-required-js’).hide();
accountWrapper.show(300);
}

if ($(e.currentTarget).is(’:checked’) && e.currentTarget.dataset.name === 'return’ ) {
$.each(complaintInputs, function (index, value) {
$(value).find(’input, select’).first().attr(’disabled’, 'true’);
$(value).hide(300);
});
returnInputs.each(function () {
$(this).find(’input, select’).first().removeAttr(’disabled’);
});
returnInputs.show(300);
customerProfile.changeRefundMethod(form);
}
},

d) Tuż za metodą changeReturnComplaintForm dodaj nową metodę changeRefundMethod (pokazuje / ukrywa pole numeru konta bankowego na podstawie wybranego sposobu zwrotu):
changeRefundMethod: function (formOrEvent) {
const form = formOrEvent && formOrEvent.currentTarget
? $(formOrEvent.currentTarget).closest('.inputs-container-js')
: $(formOrEvent);
const select = form.find('.refundMethod-js');
const accountWrapper = form.find('.accountNumberWrapper-js');
const accountInput = accountWrapper.find('input[name="accountNumber"]');

if (select.val() === 'account’) {
accountInput.removeAttr(’disabled’).attr(’required’, 'required’);
accountWrapper.show(300);
} else {
accountInput.attr(’disabled’, 'true’).removeAttr(’required’).removeClass(’form__validation-error-js’);
accountWrapper.find(’.form__validation-required-js’).hide();
accountWrapper.hide(300);
}
},

e) W metodzie wysyłającej formularz reklamacji/zwrotu (gdzie znajduje się pętla for (let i=0; i<dataFromHTML.length; i++)) zaraz po pętli dodaj fragment dołączający parametr qrHash z URL-a 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);
}
}

f) W tej samej metodzie, w callbacku success po pomyślnym wysłaniu, zamień fragment:
if (data.action.Result) {
const message = form.data('success-info');
app.showTemporaryPopup(message, 'success', '', 8000);
$('.clearFileInput-js').hide();
app.hidePopup(e);
sessionStorage.removeItem('complains');
sessionStorage.removeItem('order' + (e.currentTarget).dataset.id);
$('.order' + (e.currentTarget).dataset.id).remove();
$('.popupDialog__complain').remove();
$('body').removeClass('customerProfileNoScroll');
customerProfile.showOrderDetails(e);
}
na:
if (data.action.Result) {
$('.clearFileInput-js').hide();
sessionStorage.removeItem('complains');
sessionStorage.removeItem('order' + (e.currentTarget).dataset.id);
const popup = $(e.currentTarget).closest('.popupDialog__complain');
popup.find('.complain-form-view-js').addClass('hidden');
popup.find('.complain-success-view-js').removeClass('hidden');
popup.find('.popupDialog__wrapper').scrollTop(0);
}

g) W sekcji rejestracji zdarzeń profilu klienta (tam, gdzie znajdują się m.in. mainSection.on(’change’, ’.radioComplaint-js, .radioReturn-js’, …)) tuż za istniejącym handlerem zmiany typu formularza dopisz nowy handler:
mainSection.on('change', '.refundMethod-js', function (e) {
customerProfile.changeRefundMethod(e);
});

h) Znajdź globalny handler obsługujący keydown z selektorem zaczynającym się od .radioReturn-js label, .radioComplaint-js label, … i usuń z niego dwa pierwsze selektory (po zmianie zaczyna się od .showHideSection-js):
// PRZED
$('body').on('keydown', '.radioReturn-js label, .radioComplaint-js label, .showHideSection-js, .checkBoxes__container label, .customerPagination__form-js, .discountsDetails-js, .customer-focus, .customer__menuActivate-js', function(e) { ... });

// PO
$(’body’).on(’keydown’, ’.showHideSection-js, .checkBoxes__container label, .customerPagination__form-js, .discountsDetails-js, .customer-focus, .customer__menuActivate-js’, function(e) { … });

i) W obiekcie app w pliku js/layout1.js obsłuż przekierowanie po zalogowaniu z parametrem #login-redirect= (używanym przez stronę szybkich zwrotów). W bloku rejestracji/logowania, w miejscu gdzie obsługiwany jest hash #back-to-cart, tuż po nim dodaj:
if (globalThis.location.hash.startsWith('#login-redirect=')) {
url = globalThis.location.hash.slice('#login-redirect='.length);
}
Następnie w handlerze sukcesu logowania, gdzie znajduje się sprawdzenie window.location.hash.includes(’#back-to-cart’) wraz z przekierowaniem, tuż za nim dodaj analogiczny blok przekierowujący w przypadku #login-redirect=:
if (globalThis.location.hash.startsWith('#login-redirect=')) {
globalThis.location.assign(globalThis.location.hash.slice('#login-redirect='.length));
return;
}

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 (style ogólne), customer-profile-d.scss (desktop) i customer-profile-m.scss (mobile). Po zmianach pamiętaj o kompilacji SCSS – nie edytuj ręcznie wynikowych plików CSS.

Plik customer-profile-g.scss

a) Wewnątrz selektora opakowującego (tam, gdzie znajdują się istniejące reguły .orderContent__complainBtn) dodaj nowe reguły dla banera informacyjnego oraz kontenera grupującego przyciski reklamacji/zwrotu:
.orderContent__returnInfo {
display: flex;
align-items: center;
gap: 10px;
margin: 16px 0 24px;
padding: 12px 16px;
background-color: color-mix(in srgb, #{$linkFontColor} 4%, transparent);
border: 1px solid color-mix(in srgb, #{$linkFontColor} 20%, transparent);
border-radius: 4px;
font-size: 13px;
line-height: 1.4;
color: $primaryFontColor;

&__icon {
flex-shrink: 0;
fill: $linkFontColor;
}
}

.orderContent__complainBtns {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 16px 0 4px;
}

b) Następnie zastąp istniejące style .orderContent__complainBtn nowym wyglądem przycisku (z tłem, obramowaniem i hoverem):
.orderContent__complainBtn {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 16px 0 4px;
padding: 6px 12px;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
color: $linkFontColor;
fill: $linkFontColor;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: background-color 180ms, border-color 180ms;

.orderContent__complainBtns & {
margin: 0;
}

svg {
margin: 0;
flex-shrink: 0;
}

&:hover,
&:focus-visible {
background-color: color-mix(in srgb, #{$linkFontColor} 6%, transparent);
border-color: color-mix(in srgb, #{$linkFontColor} 25%, transparent);
outline: none;
}
}

c) Dodaj style etykiety sekcji oraz kontenera sposobu zwrotu w popupie reklamacji:
.complain__sectionLabel {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 500;
color: $primaryFontColor;
}

.refundMethodWrapper-js {
margin-bottom: 18px;
}

d) Dodaj kompletne style ekranu sukcesu zwrotu (m.in. ikona, tytuł, lista kolejnych kroków, sekcja z e-mailem i przyciskiem zamknięcia):
.complain__successView {
text-align: center;
padding: 16px 0 0;
}

.complain__successIcon {
display: flex;
justify-content: center;
margin: 8px 0 20px;

.svgIcon {
width: 64px;
height: 64px;
fill: #2d8c4a;
}
}

.complain__successTitle {
font-size: 20px;
font-weight: 600;
line-height: 1.3;
margin: 0 0 12px;
color: $primaryFontColor;
}

.complain__successDescription {
font-size: 14px;
line-height: 1.5;
color: $primaryFontColor;
margin: 0 0 20px;
}

.complain__successInfoBox {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
margin: 0 0 24px;
border: 1px solid #cfdcef;
background-color: #f0f5fc;
border-radius: 6px;
text-align: left;

.svgIcon {
flex-shrink: 0;
margin-top: 2px;
fill: #3a6ea5;
}

span {
font-size: 13px;
line-height: 1.5;
color: $primaryFontColor;
}

strong {
display: block;
font-weight: 600;
margin-top: 2px;
word-break: break-all;
}
}

.complain__successStepsTitle {
font-size: 15px;
font-weight: 600;
margin: 0 0 12px;
text-align: left;
color: $primaryFontColor;
}

.complain__successSteps {
margin: 0 0 24px;
padding-left: 22px;
text-align: left;

li {
font-size: 14px;
line-height: 1.6;
margin-bottom: 6px;
color: $primaryFontColor;
}
}

.complain__successActions {
display: flex;
justify-content: flex-end;
padding-top: 16px;
padding-bottom: 30px;
margin-top: 8px;
border-top: 1px solid $borderColor;

.primary-action-button {
min-width: 140px;
margin: 0;
}

@media screen and (max-width: 599px) {
.primary-action-button {
width: 100%;
min-width: 0;
}
}
}

e) Zaktualizuj style załączników – znajdź istniejące reguły .form__clear-attachement-input oraz reguły z position: absolute; top: 11px; i zastąp je nowymi (które ustawiają załączniki w układzie statycznym z poprawnym overflowem i przyciskiem usuwania):
.form__attachement-input-container-attachments__text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.form__attachement-input-container–hidden,
.form__attachement-input-container-attachments.form__attachement-input-container–hidden {
display: none;
}

.form__clear-attachement-input {
position: static;
background: transparent;
border: none;
padding: 2px 4px;
margin: 0 0 0 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;

svg {
fill: $linkFontColor;
transition: opacity 200ms;
}

&:hover svg {
opacity: 0.7;
}
}

Plik customer-profile-d.scss

Wewnątrz wrappera @media screen and (min-width: 769px) zamień istniejące style przycisku reklamacji:
.customer .orderContent__complainBtn {
position: absolute;
bottom: 8px;
}
na poniższy fragment (dodaje pozycjonowanie kontenera grupującego przyciski oraz osobny selektor dla pojedynczych przycisków w wierszu produktu):
.customer .orderContent__complainBtns {
position: absolute;
bottom: 8px;
right: 0;
margin: 0;
}

.customer .orderContent__productDetails > .orderContent__complainBtn {
position: absolute;
bottom: 8px;
right: 0;
margin: 0;
}

Plik customer-profile-m.scss

W obrębie selektora .customer zamień istniejący media-query @media screen and (max-width: 359px) wraz z jego wnętrzem na rozszerzoną wersję (układająca przyciski reklamacji/zwrotu pionowo na szerokościach do 450px):
@media screen and (max-width: 450px) {
.customer__orderContent .orderContent__productsRow {
max-height: none;
}

.customer__orderContent .orderContent__productDetails {
display: flex;
flex-direction: column;
align-items: stretch;
}

.customer__orderContent .orderContent__complainBtns {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
width: 100%;
margin: 12px 0 4px;
padding-top: 12px;
border-top: 1px solid $borderColor;
}

.customer__orderContent .orderContent__complainBtn {
display: flex;
width: 100%;
justify-content: center;
padding: 10px 12px;
margin: 12px 0 4px;
border-color: color-mix(in srgb, #{$linkFontColor} 25%, transparent);
}

.customer__orderContent .orderContent__complainBtns .orderContent__complainBtn {
margin: 0;
}
}

6. Szablon One Page Shop

Szablon One Page Shop ma praktycznie identyczną strukturę plików jak Topaz. Wszystkie powyższe modyfikacje (tłumaczenia, nowa strona zwrotów, edycje plików partials/common/complaint-popup.html oraz partials/customer/order-content.html, zmiany w js/layout1.js oraz w plikach SCSS profilu klienta i strony zwrotów) wykonaj 1:1 w plikach szablonu OPS pod tymi samymi ścieżkami. Treść kodu jest taka sama, ścieżki plików są takie same – instrukcja dla Topaza w pełni stosuje się również do One Page Shopa.

Po wprowadzeniu wszystkich powyższych zmian w szablonie Topaz (oraz One Page Shop) 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/.

Wskazówka

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

Czy ten artykuł był pomocny?

( 0 )

( 1 )

Wyślij opinie