Shopify rozszerza możliwości AppBridge’
App Bridge to pakiet SDK (software development kit) dla aplikacji osadzonych, zapewniający dostęp do danych i web komponentów, m.in. w panelu administracyjnym Shopify. Najnowsza wersja, do istniejących funkcjonalności i komponentów dodaje kolejny - okno dialogowe.
Jeżeli korzystasz z szablonu Shopify opartego o Remix to App Bridge jest domyślnie ładowany w komponencie AppProvider:
<AppProvider isEmbeddedApp apiKey={apiKey}>
...
</AppProvider>
W ramach tego providera możemy użyć komponentu obsługującego okno dialogowe:
<ui-modal id="my-modal">
<p>Message</p>
<ui-title-bar title="Title">
<button variant="primary" onClick={() => {
shopify.modal.hide('my-modal');
}}>Label</button>
</ui-title-bar>
</ui-modal>
<button onClick={
() => {
shopify.modal.show('my-modal');
}}>Open Modal</button>
Należy tutaj zwrócić uwagę na kilka elementów - otwieranie i zamykanie okna, kontrolowane jest z poprzez obiekt “shopify”. W przypadku aplikacji, która nie jest oparta o React, można zastosować podejście klasyczne:
<button onclick="document.getElementById('my-modal').show()">Open Modal</button>
<script>
document.getElementById('my-modal').addEventListener('show', () => {
console.log('Modal is showing');
});
</script>
Należy zauważyć, że treść musi być elementem - nie może być tekstem. W tym przypadku wiadomość “Message”, znajduje się w tagach <p></p>. Zaznaczę też, że funkcjonalność jest relatywnie nowa a użytkownicy, którzy próbują w niej zawierać bardziej zaawansowane widoki zgłaszają problemy z działaniem skryptów.
Najważniejsze w tej aktualizacji nie jest samo okno dialogowe, a raczej kierunek jaki Shopify obiera. W ostatnich latach obserwujemy zainteresowanie samego Shopify różnymi technologiami i rozwiązaniami. W przypadku szablonów aplikacji, tempo zmian jest momentami kłopotliwe, a nowe wersje często odbiegają od bycia stabilnymi. W projektach opartych o stare wersje App Bridge zauważyliśmy, że architektura aplikacji oraz wersja SDK od Shopify, są bardzo mocno ze sobą powiązane. Gdy starsza wersja App Bridge wymaga aktualizacji, to niestety znaczna część aplikacji również. Wierzymy, że postawienie na Web Components, które są standardem samym w sobie pomoże rozwiązać ten problem.
Źródła:
https://shopify.dev/changelog/modal-api-added-to-the-latest-version-of-app-bridge
https://shopify.dev/docs/api/app-bridge-library/reference/modal
Dalszy rozwój API Shopify w obszarze subskrypcji
Od 1 lutego 2024 wraz z ogłoszeniem Winter Editions 2024 dostępna jest aplikacja Shopify Subscriptions dla wszystkich planów. Więcej szczegółów na temat najnowszej aplikacji znajdziesz tutaj.
Streszczenie niektórych zmian:
- subscriptionBillingAttemptCreate zwraca błąd CONTRACT_UNDER_REVIEW zamiast INVALID, a próby ponawiania płatności mają dodatkowy limit jeżeli analiza wykryje potencjalne oszustwo,
- automatyczne rabaty mogą być stosowane dla zamówień subskrypcyjnych,
- mechanizm do anulowania subskrypcji utworzonych przez aplikacje, które zostały odinstalowane,
- Checkout UI Extensions: purchase.checkout.shipping-option-list.render-before i purchase.checkout.shipping-option-list.render-after) zostaną zduplikowane, aby uwzględnić różne rodzaje grup dostawy, tj. jednorazowe zakupy i subskrypcje. Deweloperzy mogą użyć hooka useDeliveryGroupTarget aby uzyskać informacje o grupie dostawy.
import {
reactExtension,
Banner,
useDeliveryGroups,
useDeliveryGroup,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const deliveryGroups = useDeliveryGroups();
const {
selectedDeliveryOption,
targetedCartLines,
} = useDeliveryGroup(deliveryGroups[0]);
return (
<Banner>
Selected delivery option:{' '}
{selectedDeliveryOption?.title}
</Banner>
);
}
- Jeżeli kontrakt ma status EXPIRED lub CANCELLED lub STALE to wywołanie SubscriptionBillingAttemptCreate zwróci błąd CONTRACT_TERMINATED,
- w nowym Customer Account API można pobrać opcje dostawy w danym kontrakcie oraz je zaktualizować za pomocą: subscriptionContractFetchDeliveryOptions oraz subscriptionContractSelectDeliveryMethod,
- w wersji 2024-01 GraphQL Admin API dodano webhooki: subscription_contracts/activate subscription_contracts/activate subscription_contracts/fail oraz subscription_contracts/pause,
- dodano możliwość pomijania poszczególnych cykli subskrypcji bez naruszania głównego kontraktu,
- Subscriptions Contracts APIs: Dodano nowe mutacje do aktualizacji statusu kontraktu subskrypcji. W wersji 2024-01 GraphQL Admin API oraz GraphQL Customer API, można teraz aktualizować pole statusu kontraktu subskrypcji w pojedynczej operacji za pomocą mutacji subscriptionContractActivate, subscriptionContractPause, subscriptionContractCancel, subscriptionContractFail, subscriptionContractExpire.
Możliwość modyfikacji admin panelu za pomocą Admin UI Extensions
Przez długi czas użytkownicy skarżyli się, że nie mogą dodawać nowych lub modyfikować* istniejących funkcjonalności do panelu administracyjnego. Najczęściej ograniczenia są dokuczliwe dla doświadczonych właścicieli sklepów, migrujących się z bardziej elastycznych platform.
Admin UI extensions to rozwiązanie łączące możliwości Remote UI, Admin GraphQL API oraz wygląd Polaris UI. Remote UI natomiast to technologia gwarantująca bezpieczny kontrakt między Shopify a deweloperem - znamy ją z Checkout UI Extensions. Admin UI extensions pozwalają na połączenie z dowolnym API (w tym bezpośrednie z Admin GraphQL API), bez hostingu i bez proxy. Wymagań jest niewiele - musimy mieć dostęp do portalu organizacji sklepu. To oznacza że możemy zrobić wszystko w ramach admin panelu, na co Admin GraphQL pozwala.
Należy zauważyć że Admin UI Extensions mają swoje ograniczenia: rozszerzenia są dostępne tylko z poziomu widoku zamówienia, produktu oraz klienta. Obowiązują też zasady jak w Checkout UI Extensions - czyli sekcje budujemy za pomocą z góry narzuconych funkcjonalności.
Od strony frontendowej są to zwykłe formularze. Raz w popupie, a raz bezpośrednio w interfejsie. Możemy te formularze poukładać po swojemu, a potem wysyłać zapytania do Shopify API lub innego, a wyniki zapisywać w metafieldach lub w tym zewnętrznym API, bez hostingu. Ciekawe rozwiązanie!
Od strony backendu - w większości przypadków go nie będzie, gdyż nie ma potrzeby robić proxy dla autoryzowania zapytań. Chyba że zadania będą czasochłonne - to wtedy może się przydać.
Przykładowy kod możesz znaleźć w dokumentacji Shopify: https://shopify.dev/docs/api/admin-extensions#getting-started
Interesujące zmiany dla Klientów B2B w funkcjach Shopify
Najnowsza wersja funkcji pozwala na tworzenie rabatów wyłącznie dla klientów B2B (wszystkich lub konkretnych) lub z pominięciem klientów B2B. Informacje są dostępne na wejściu koszyka w polu: BuyerIdentity.purchasingCompany. UWAGA: Jeżeli korzystasz z opcji zatwierdzania zamówień dla klientów b2b te funkcje nie są dostępne.
➡️ https://shopify.dev/changelog/automatic-discount-functions-now-apply-to-b2b-sessions
Shopify flows otrzymują możliwość wykonywania kodu!
Dotychczas dużym ograniczeniem była paleta dostępnych opcji w aplikacji Shopify Flows. Dostały one jednak ostatnio najważniejszą aktualizację - deweloperzy w ramach Flows będą mogli uruchamiać swój własny kod. To daje możliwości, które wcześniej nie były dostępne - transformacja danych, obliczanie informacji wejściowych (np. liczenie produktów w zamówieniu wg. kryteriów), filtrowanie danych.
Flows mogą być świetną alternatywą dla prostych aplikacji backendowych, hostowanych poza Shopify. Dzięki nim mamy gwarancję że kod backendowy zawsze się wykona i nie narazimy się na dodatkowe koszty czy bezpośrednie ryzyka związane z bezpieczeństwem, wynikające z samodzielnego hostingu. W różnych projektach obserwujemy rosnące zainteresowanie i użycie tego narzędzia do przeprowadzania prostych automatyzacji.
Wkrótce powinna pojawić się możliwość wysyłania zapytań do API oraz logowania kodu.
Nowa strategia rabatowa już dostępna!
Strategia ALL pozwala na zastosowanie rabatów dla wszystkich produktów w koszyku, a nie jak wcześniej - do pierwszego spełniającego warunek funkcji. Dodatkowo w ramach jednej funkcji możliwe jest zastosowanie różnych wartości zniżek dla różnych produktów. W tym przypadku pierwszy produkt otrzyma zniżkę 10%, a drugi 15%:
{
"discounts": [
{
"targets": [
{
"productVariant": {
"id": "gid://shopify/ProductVariant/44715850367250"
}
}
],
"value": {
"percentage": {
"value": "10.0"
}
}
},
{
"targets": [
{
"productVariant": {
"id": "gid://shopify/ProductVariant/44715850498322"
}
}
],
"value": {
"percentage": {
"value": "15.0"
}
}
}
],
"discountApplicationStrategy": "ALL"
}
Zmiana jest kluczowa ze względu na ograniczenia wynikające z ilości możliwych do zastosowania automatycznych rabatów. Teraz w ramach jednej funkcji możemy tworzyć kampanie, które aplikują różne wartości rabatów w ramach jednej logiki - np. stosować wysokość rabatu proporcjonalnie do ilości zakupionych produktów na danej pozycji w koszyku.
Szwecja i Finlandia mogą cieszyć się nową integracją lokalnych metod wysyłki
Dzięki aplikacji Nordic Shipping możesz wyświetlać specyficzne dla przewoźnika i niestandardowe punkty odbioru podczas składania zamówienia. Z Nordic Shipping App możesz drukować etykiety wysyłkowe bezpośrednio z zamówień Shopify, nie opuszczając sklepu, lub możesz połączyć swój system zarządzania magazynem, aby drukować etykiety wysyłkowe. Aplikacja Nordic Shipping integruje lokalne metody wysyłki w Finlandii i Szwecji.
.png)
