Frontends Recipes

Each recipe follows one Shopware Frontends feature end-to-end, from the UI action through the composables and Store API calls to the session state the UI reads afterwards. They are written for frontend developers who want the Shopware flow behind a feature, not a generic Vue tutorial.

New here? Start with Login or Cart. Most other recipes build on the session and cart state they explain.

Account

LoginStart hereLog a customer in, then refresh the session context and the cart so the UI matches the new customer.useUseruseSessionContextuseCartRegisterCreate a customer and its billing address in one request, with salutation and country lookups and double opt-in.useUseruseSalutationsuseCountriesPassword Recovery and ChangeRecover a forgotten password in three steps, and let a logged-in customer change theirs.useCustomerPassworduseUserWishlistAdd and remove wishlist products, and page through one wishlist shared by every component.useWishlistuseProductWishlistOrder HistoryList a customer's orders page by page and open one order with the associations it needs.useCustomerOrdersuseOrderDetailsNewsletterSubscribe and unsubscribe through the double opt-in lifecycle, for guests and customers.useNewsletteruseUserCustomer AddressesList, add, edit and delete addresses, and switch the default billing and shipping address.useAddressuseCountriesuseSessionContextCustomer ProfileShow the logged-in customer and change their name, salutation, birthday and email address.useUseruseSessionContext

Catalog

Product Listing and FiltersRender a listing with filters, sorting, pagination and infinite scroll from one response.useListinguseCategoryPrices and Tax StateShow the right price, tier and strikethrough in the current currency without doing price math.usePriceuseProductPriceSearch and SuggestBuild a suggestion dropdown and a full results page, and pick the right search route for each.useProductSearchSuggestuseListingProduct ReviewsRender a product's reviews and rating, and let a customer submit one.useProductReviewsuseUserProduct VariantsRender option groups, track the selection and resolve the matching variant.useProductConfiguratoruseProductCross-SellingRender a product's cross-selling groups such as accessories and related products.useProductAssociationsuseProduct

Checkout

CartStart hereAdd, change and remove line items, and keep one shared cart in sync with every response.useCartuseCartItemuseAddToCartCart ErrorsTurn the errors a successful cart response carries into messages a customer can act on.useCartNotificationuseCartCheckout and Order PlacementSelect shipping and payment methods as context changes, then turn the cart into an order.useCheckoutuseSessionContextPaymentHand a placed order to the payment provider and read the real payment state on the return page.useOrderPaymentuseOrderDetails

CMS

Rendering CMS PagesWalk a page's sections, blocks and slots and resolve each one to a component.useCmsSectionuseCmsBlockContact FormBuild a contact form element that submits to the Store API and passes a real shop's validation.useCmsElementConfiguseSalutations

Context

Session ContextSeed the sales channel context once at the root and patch it through setters that read it back for you.useSessionContextuseContextLanguage and Currency SwitchSwitch language and currency with the same context patch, and see why only the language switch ends in a redirect.useInternationalizationuseSessionContextNavigation and BreadcrumbsLoad main and footer navigation, resolve the current entity and render breadcrumbs.useNavigationuseBreadcrumbsURL Resolving and SEO URLsServe every shop URL from one catch-all route and redirect technical URLs to SEO URLs.useNavigationSearchuseNavigationContext

Orders

Guest Order Lookup via Deep LinkOpen a guest order from the confirmation mail link, asking for the email and postal code only when the first lookup rejects the guest as not authenticated.useOrderDetailsuseUserOrder DetailsRender one order with its state, items, documents and downloads, and let the customer cancel it.useOrderDetailsuseDefaultOrderAssociations