Uaktualnij stronę realizacji zakupu online

Możesz dostosować swoją realizację zakupu online, aby rozszerzyć swoją markę, zmienić obsługę wiadomości, prezentować oferty i wprowadzić inne ulepszenia w zakresie obsługi klienta. Aby upewnić się, że dostosowania są zgodne ze zmianami wprowadzanymi przez Shopify, musisz okresowo aktualizować stronę realizacji zakupu.

Aby przygotować się do tego uaktualnienia, musisz wykonać następujące czynności:

1. Wyświetl podgląd nowej strony realizacji zakupu i przetestuj środowisko realizacji zakupu widoczne dla klienta. W zależności od przeprowadzonych dostosowań strony realizacji zakupu uaktualnienie może wymagać wprowadzenia zmian w pliku checkout.liquid.
2. Gdy będziesz zadowolony(-a) ze zmian, uaktualnij swój sklep, aby korzystać z nowej realizacji zakupu Shopify.

Wyświetl podgląd strony realizacji zakupu i sprawdź jej poprawność

Przed uaktualnieniem sklepu w celu korzystania z nowej wersji realizacji zakupu nie zapomnij wyświetlić podglądu zmian.

Kroki:

1. W panelu administracyjnym Shopify przejdź do strony Uaktualnienie realizacji zakupu, a następnie kliknij Podgląd realizacji zakupu.
2. Wybierz bieżący temat z listy, a następnie kliknij Podgląd.
3. Utwórz testowy proces realizacji zakupu, przechodząc przez proces realizacji zakupu jako klient.

Uwaga

Niektórzy dostawcy płatności mają minimalną cenę za testowe realizacje zakupu. W przypadku Shopify Payments wynosi ona 0,50 CAD, 0,35 USD lub 0,30 EUR. Inni dostawcy płatności mogą mieć odmienne progi.

Jeśli otrzymasz komunikat o błędzie informujący, że Twoja płatność nie mogła zostać przetworzona w tej chwili, spróbuj ponownie za kilka minut, a następnie spróbuj zwiększyć cenę zamówienia testowego lub dokończyć testową transakcję realizacji zakupu za pomocą darmowych pozycji.

Jeśli podczas tych testów znajdziesz jakiekolwiek błędy, niektóre z dostosowań realizacji zakupu mogą powodować konflikt z ulepszeniami w nowej wersji. Jeśli tak jest, musisz wprowadzić zmiany w pliku checkout.liquid przed uaktualnieniem.

Rozwiązywanie błędów

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Kliknij przycisk ..., a następnie opcję Duplikuj.
3. W opcji Więcej szablonów znajdź swój zduplikowany szablon, a następnie kliknij przycisk ... > Edytuj kod. Wprowadź zmiany i przetestuj je przy użyciu tej zduplikowanej i nieopublikowanej wersji szablonu.

Uwaga

Za każdym razem, gdy wprowadzasz zmiany w szablonie lub testujesz szablon, utwórz zduplikowaną kopię i pracuj na niej. Jeśli popełnisz błąd podczas pracy z duplikatem, będziesz mógł/mogła usunąć duplikat i utworzyć kolejną kopię na podstawie oryginalnego szablonu w sposób niezauważalny dla klientów.

1. Otwórz plik checkout.liquid.

2. Wyświetl podgląd pliku checkout.liquid z powielonego szablonu przy użyciu nowej realizacji zakupu Shopify:

Jeśli pojawią się błędy lub problemy dotyczące wyglądu strony realizacji zakupu, należy edytować plik checkout.liquid, aby je rozwiązać.

Uaktualnienie do nowej strony realizacji zakupu Shopify

Uaktualnienie strony realizacji zakupu to proces dwuetapowy, który wymaga uaktualnienia strony realizacji zakupu Shopify i zastąpienia bieżącego, opublikowanego szablonu zduplikowaną kopią, która zawiera zmiany.

Uwaga

Przed wykonaniem tego uaktualnienia pamiętaj o wyświetleniu podglądu realizacji zakupu. Musisz mieć pewność, że ta aktualizacja nie wpłynie na środowisko realizacji zakupu klientów i że nadal będą oni mogli opłacać swoje zamówienia, korzystając z nowej realizacji zakupu.

Na dokonanie uaktualnienia wybierz porę dnia, w której nie są prowadzone intensywne prace (np. wcześnie rano, późny wieczór lub weekend), aby zminimalizować potencjalne zakłócenia.

Kroki:

1. Na stronie Uaktualnienie strony realizacji zakupu kliknij opcję Uaktualnij stronę realizacji zakupu (przycisk ten znajduje się na dole strony).

2. Jeśli napotkano błędy podczas pierwszego podglądu szablonu, najpierw upewnij się, że zostały one rozwiązane (zob. Rozwiązywanie błędów powyżej). Następnie opublikuj zaktualizowany powielony szablon:

Strona realizacji zakupu jest uaktualniona, a zduplikowany szablon jest teraz bieżącym szablonem.

Nowości w zakresie realizacji zakupu Shopify

Nowa wersja realizacji zakupu Shopify zawiera następujące zmiany i nowe funkcje:

• Subskrypcje
• Sprzedaż droższych produktów
• Dawanie napiwków podczas realizacji zakupu
• Odbiór i dostawa lokalna
• Dodatkowe pola międzynarodowe
• Przycisk Śledź zamówienie za pomocą aplikacji Shop
• Aktualizacje strony statusu zamówienia
• Ogólne zmiany pliku
• Szkielety/Statusy ładowania
• Komunikaty o błędach
• Zmiany atrybutów danych
• Ulepszenia dostępności

Subskrypcje

Do strony realizacji zakupu Shopify dodano wiele sekcji, dzięki którym możesz oferować produkty subskrypcyjne przy zachowaniu swoich dostosowań strony realizacji zakupu. Sekcje te umożliwią Ci sprzedawanie produktów subskrypcyjnych i przetwarzanie okresowych płatności bezpośrednio na stronie realizacji zakupu Shopify.

Po zakończeniu uaktualniania funkcji realizacji zakupu możesz oferować subskrypcje, dodając aplikację subskrypcyjną ze sklepu Shopify App Store, lub stworzyć niestandardową aplikację z nowymi interfejsami API Subscription.

Dowiedz się więcej o subskrypcjach w Centrum Pomocy Shopify.

• Gdy subskrypcje są włączone, metody wysyłki używane na potrzeby subskrypcji są wyświetlane oddzielnie od metod stosowanych przypadku zakupów jednorazowych.
• .product_description_variant Span.product_description_selling_plan pojawia się jako dodatkowa właściwość pozycji, jeśli istnieje subskrypcja związana z produktem.
• Opłata cykliczna z towarzyszącą etykietką narzędzia pojawia się pod sumą w podsumowaniu zamówienia.
• Opcje wysyłki subskrypcji są wyświetlane, gdy zamówienie zawiera produkt subskrypcyjny.

Sprzedaż droższych produktów

W sklepie Shopify App Store dostępne są nowe aplikacje obsługujące sprzedaż droższych produktów, które można wykorzystać po zakupie dokonanym przez klienta. Aplikacje prezentują klientom oferty po dokonaniu przez nich zakupu bezpośrednio na stronie realizacji zakupu Shopify i modyfikują złożone zamówienie, aby uwzględnić sprzedany droższy produkt bez ponownego wprowadzania informacji dotyczących rozliczenia lub wysyłki.

To uaktualnienie strony realizacji zakupu obejmuje zmiany w plikach realizacji zakupu, które umożliwiają pozakupową sprzedaż droższych produktów na dostosowanej stronie realizacji zakupu.

Dowiedz się więcej o sprzedaży droższych produktów po zakupie.

• Gdy prawidłowa aplikacja do obsługi pozakupowej zostanie zainstalowana w panelu administracyjnym Shopify, klienci będą otrzymywać oferty po dokonaniu zakupu.

Uwaga

Dostosowanie strony obsługi pozakupowej odbywa się w zewnętrznej aplikacji do sprzedaży droższych produktów. Nie można jej dostosować za pomocą pliku checkout.liquid.

Dawanie napiwków podczas realizacji zakupu

Opcji napiwków można użyć, aby umożliwić klientom uwzględnienie napiwku w zamówieniu online, lub aby zamiast napiwków przyjmować darowizny. Po włączeniu opcji napiwków na etapie realizacji zakupu Metoda płatności pojawia się sekcja Dodaj napiwek. Sekcja Dodaj napiwek zawiera trzy wstępnie wybrane opcje napiwków dodatkowo oprócz pola wprowadzania niestandardowej kwoty napiwku.

Dowiedz się więcej o oferowaniu opcji napiwków.

• Po włączeniu opcji napiwków na etapie realizacji zakupu Metoda płatności pojawia się sekcja Dodaj napiwek.

Odbiór i dostawa lokalna

Lokalny odbiór i dostawa to nowe metody dostawy, które umożliwiają klientom odbieranie zamówień lokalnie. Gdy te metody dostawy są włączone, klienci mogą wybrać lokalny odbiór lub dostawę na etapie realizacji zakupu dotyczącym wysyłki.

Dowiedz się, jak włączyć lokalny odbiór i lokalną dostawę.

• Dodatkowe pola dotyczące dostawy lokalnej pojawiają się, gdy lokalna dostawa jest włączona i została wybrana przez klienta.
• Jeśli włączony jest odbiór lokalny, sekcja metody dostawy jest wyświetlana klientowi na stronie Informacje w kasie. Jeśli wysyłka jest niedostępna, wyświetlane są tylko informacje o odbiorze.

• Metody dostawy są wyświetlane jako oddzielne karty.

  • Po wybraniu opcji Wyślij klienci są proszeni o podanie informacji o wysyłce. Po kliknięciu przycisku Przejdź do wysyłki wyświetlane są dostępne metody wysyłki.
  • Po wybraniu opcji Odbierz wyświetla się listę lokalizacji odbioru. Klienci klikają przycisk dla wybranej lokalizacji odbioru, a następnie opcję Przejdź do płatności.

• Jeśli klienci wybiorą opcję Odbierz na etapie realizacji zakupu Wysyłka, informacje o wysyłce nie zostaną zebrane. Klienci muszą wprowadzić informacje rozliczeniowe na etapie realizacji zakupu Płatność.

• Instrukcje dotyczące dostawy lokalnej pojawiają się na stronie statusu zamówienia. Można je edytować, wybierając w panelu administracyjnym Shopify menu: Ustawienia > Wysyłka i dostawa. W sekcji Odbiór lokalny znajdź lokalizację, którą chcesz edytować, i kliknij opcję Zarządzaj.

• Strona statusu zamówienia została zaktualizowana tak, by wyświetlany był na niej postęp w realizacji dostaw i odbiorów. Wiadomości wyświetlają się, gdy:

  • zamówienie zostało przygotowane i jest gotowe do dostarczenia.
  • dostawa została zrealizowana. Ta wiadomość zawiera również link do ponownego zamówienia tych samych pozycji.
  • zamówienie do odbioru zostało potwierdzone ze wskazaniem, że klient otrzyma wiadomość e-mail, gdy będzie ono gotowe do odbioru.
  • zamówienie do odbioru jest gotowe do odbioru.
  • zamówienie do odbioru zostało odebrane.

Dodatkowe pola międzynarodowe

W niektórych krajach obowiązują specyficzne przepisy dotyczące wysyłki, których musisz przestrzegać, aby Twoje przesyłki dotarły do Twoich klientów. W przypadku krajów ze specyficznymi przepisami dotyczącymi wysyłki dostępne są teraz dodatkowe pola. Te nowe pola pojawiają się na etapie realizacji zakupu Metoda płatności.

Dowiedz się więcej o dodatkowych polach międzynarodowych.

• Dodatkowe pola realizacji zakupu są wyświetlane tylko klientom w Brazylii, Korei Południowej, Włoszech i Chinach.

Przycisk Śledź zamówienie za pomocą aplikacji Shop

Przycisk Śledź zamówienie za pomocą aplikacji Shop w statusie zamówienia i na stronach z podziękowaniem został zaktualizowany i ma teraz nowy wygląd.

Dowiedz się więcej o aplikacji Shop.

• Dodano przycisk tekstowy, który zachęca klientów do śledzenia zakupów w aplikacji Shop.
• Dodano parametry umożliwiające wyświetlanie śledzenia procesu Shop Pay.
• Renderowanie dla przycisku Śledź zamówienie za pomocą aplikacji Shop w następujących przypadkach:
  • próba dostarczenia
  • potwierdzenie
  • dostarczono
  • nie powiodło się
  • w drodze
  • wysyłka niemożliwa
  • wydano do doręczenia

Aktualizacje strony statusu zamówienia

Dokonano kilku aktualizacji strony statusu zamówienia.

• Dla informacji o karcie prezentowej utworzono dedykowaną sekcję, która wyświetla się po zakupie karty prezentowej.
• Dodano informacje o subskrypcji.
• Klasa icon-svg--align-text-bottom została usunięta.
• data-step="thank-you" zmieniono na data-step="thank_you". Jeśli wykorzystujesz ten atrybut do identyfikacji strony realizacji zakupu, na której znajduje się klient, zamiast niego używaj obiektu JavaScript Shopify.Checkout.page.
• Dodano kartę statusu zamówienia.

Ogólne zmiany pliku

• div.content-box__row ma teraz role="table".
• Jeśli klient znajduje się na etapie podziękowania i ma pakiet QR, dodaje się show_qr.js.
• Dodano kontrolę, aby upewnić się, że klient ma dostęp do strony realizacji zakupu.
• Karty prezentowe są teraz wyświetlane z checkouts/order_status/gift_cards.
• Kierunek danych kontaktowych został ustalony za pomocą enforce_content_directionality.
• Informacje o wysyłce zostały przeniesione do checkouts/web/checkouts/contact_information/pickup.
• Możliwe jest teraz wyświetlanie wielu linii wysyłki na pasku bocznym podsumowania zamówienia.
• tr.total-line będą wyświetlane tylko w przypadku istnienia zaktualizowanych sum.
• Obsługiwane są teraz ogólne linie płatności.
• Możliwa jest teraz zmiana waluty podczas realizacji zakupu.

• #payment-gateway-subfields ma teraz klasy:

  • .radio-wrapper content-box__row .content-box__row--secondary
  • .card-fields-container

• Podpowiedź dla karty kredytowej została skorygowana i jest teraz w div.field__icon.

• Etykieta Aria została usunięta z pełnego opisu stawek wysyłki.

• Pola formularza stawek wysyłki zostały przeniesione do checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields.

Szkielety/Statusy ładowania

Statusy ładowania stron realizacji zakupu zostały zaktualizowane tak, by podczas ładowania stron dodawane były widoczne szkielety lub selektywnie ukrywane były niektóre elementy, aż do zakończenia ładowania. Zmiany te optymalizują czas ładowania.

• Obiekty ukryte podczas ładowania:

  • del.total-recap__original-price
  • .total-line__price span.payment-due__currency
  • span.order-summary__emphasis

• Obiekty, które wyświetlają szkielet podczas ładowania:

  • Span.total-recap__final-price
  • .product__price del.order-summary__small-text
  • .product__price del.order-summary__emphasis
  • .total-line__price span.payment-due__price
  • .total-line__price span.order-summary__emphasis
  • .total-line__price span.visually-hidden
  • .total-line__price.total-line--subtotal span.order-summary__emphasis

Komunikaty o błędach

Do funkcji realizacji zakupu dodano nowe komunikaty o błędach.

• W polu adresu dodano ostrzeżenie dotyczące numeru domu.
• Ostrzeżenie informujące, że nie ma dostępnych stawek wysyłki dla koszyka, miejsca docelowego lub kraju, zostało podzielone na dwa różne komunikaty ostrzegawcze: jeden komunikat ostrzegawczy informujący, że nie ma dostępnych stawek dla koszyka lub miejsca docelowego i oddzielne ostrzeżenie informujące, że nie ma dostępnych stawek dla danego kraju.
• Do strony realizacji zakupu dodano baner ostrzegawczy wyświetlany podczas próby dokonania zakupu w sklepie w fazie rozwoju.
• Dodano powiadomienie, które pojawia się, gdy klientowi nie zostanie naliczona płatność podczas realizacji zakupu.
• Dodano baner ostrzegawczy informujący o błędzie zmiany uwierzytelnienia.
• Dodano komunikat o błędzie wyświetlany w przypadku niedostępności metod wysyłki na etapie realizacji zakupu Wysyłka.

Zmiany atrybutów danych

Usunięto skrypt trekkie z następujących obiektów:

• Continue_shipping_button
• Get_shipping_updates_button
• Shipping_updates_handle_field
• Shipping_updates_submit_button
• Change_shipping_address_link
• breadcrumb_cart_link
• apply_discount_button
• Have_an_account_login_link
• Email_or_phone_field
• Email_field
• buyer_accepts_marketing_field
• Change_billing_address_link
• Change_contact_method_link
• Change_payment_method_link
• Change_pickup_method_link
• Change_shipping_address_link
• Pola wprowadzania na stronie realizacji zakupu:
  • {type}_address_field
  • {type}_firstname_field
  • {type}_lastname_field
  • {type}_company_field
  • {type}_address1_google_autocomplete_field
  • {type}_address1_field
  • {type}_address2_field
  • {type}_city_field
  • {type}_country_field
  • {type}_province_field
  • {type}_zip_google_autocomplete_field
  • {type}_phone_field

Ulepszenia dostępności

Wprowadzono kilka zmian do realizacji zakupu, aby zapewnić zgodność ze standardami dostępności stron internetowych. Ułatwia to nawigację w procesie realizacji zakupu klientom korzystającym z technologii ułatwień dostępu, takich jak czytniki ekranu.

• Dodano role="list" w ul dla:

  • u.breadcrumb
  • ul.payment-method-list
  • ul.os-timeline
  • ul.policy-list

• Etykietka narzędzia została usunięta z aria-labelledby w telephone_field.

• W aplikacji Shop etykieta wejściowa została zmieniona, aby wskazywała na telefon.

• Dodano nagłówki h3 podczas oczekiwania na podatki.

• Dodano nagłówki h3 podczas przekierowywania.

• Podczas ładowania metod wysyłki tag p został zmieniony na tag h3.

• Funkcja autouzupełniania odnosi się teraz do mobile tel zamiast phone.

• Zaktualizowano div[data-processing-order], dodając role="region".

• Zaktualizowano div[data-announce-change] o:

  • dodano role="region"
  • ustawiono aria-labelledby, aby pasował do identyfikatora elementu nagłówka
  • ustawiono aria-describedby aby pasował do identyfikatora elementu kontenera zawartości

• Zaktualizowano div.content-box blank-slate o:

  • dodano role="region"
  • ustawiono aria-labelledby, aby pasował do identyfikatora elementu nagłówka

• Siatka ekspresowej realizacji zakupu została ulepszona w celu wykorzystania elementów ul i li zamiast div.

• Zaktualizowano Podsumowanie zamówienia:

  • większa przejrzystość ceny promocyjnej i ceny regularnej
  • zmieniono zakres na tag dl
  • zmieniono tag del na tagi dt i dd.

• Zaktualizowano szczegółów metod płatności:

  • span.radio__label__accessory zmieniono na div.radio__label__accessory
  • span.visually-hidden zmieniono na h3.visually-hidden
  • span.payment-icon-list__more zmieniono na li.payment-icon-list__more
  • span.content-box__small-text zmieniono na small.content-box__small-text

Powiązane linki

• Najlepsze praktyki dotyczące edycji checkout.liquid
• checkout.liquid
• CSS w checkout.liquid