dbxapp Knowledge Shop Frontend

Shop Frontend

This tutorial explains the shop from the point of view of customers and testers – from the catalogue to product detail and shopping cart to checkout, order overview and legal texts.

Note the demo note: If the shop is expressly marked as a demo shop, there is no actual purchase, no payment and no delivery. In a production shop, however, the displayed contract and payment conditions apply.

The shopping process at a glance

1. Catalogue 2. Product detail 3. Shopping cart 4. Cashier 5. Order 6. Status and documents

1. Open the catalogue and narrow the range

Open in the main menu Shop. At the top, switch between catalogue, shopping cart, checkout, orders, legal texts and revocation.

  1. If necessary, select a group of items such as software, services or merchandise.
  2. Enter a search term and start Filters.
  3. Open Refining filtersto choose features such as size, color or material.
  4. Check “Total” and “Selected” to see how strong the filter is.
  5. Use pagination to browse additional results.
Tip: If an expected article is missing, first search text and reset any refined filters. Then check group and next catalogue page.

2. Read the product detail carefully

Open a product from its image or the View action. The detailed page shows the information important for the purchase decision.

  • Article name and SKU
  • Description and article group
  • Price, tax declaration and shipping costs
  • Delivery time and shipping route
  • Product images and technical characteristics
  • Quantity field and button "Add to cart"

Check variants, scope and quantity before adding. For digital items, the shipping route may be ‘download/unlock’; in the case of physical items, the stated shipping costs apply.

3. Place items in the shopping cart

  1. Enter the desired number.
  2. In the shopping cart Select.
  3. In the confirmation flow between the shopping cart and checkout and “continue shopping”.
  4. Pay attention to the shopping cart symbol in the upper navigation; It shows the current number.

4. Checking the shopping cart and changing it

In the shopping cart, items, quantity, price, shipping and sum are displayed in tabular form.

  1. Compare articles and SKU with the product selection.
  2. change the quantity; and Updating volumes Press.
  3. Check the sum and shipping costs again after the update.
  4. Remove an individual item via the Trash symbol or empty the entire shopping cart.
  5. Continue with Proceed to checkout.
Price control: Decisive is the server-side recalculated display in the shopping cart and at the checkout. Don’t rely on an old tab or cached product view.

5. Enter customer data at the checkout

The checkout shows the order again first. This includes customer data, payment and legal consents.

  1. Enter name and valid e-mail address.
  2. Provide telephone number only in the expected format.
  3. Delivery address complete with name, street, postal code, place and country.
  4. Use optional notice only for order-related information.
  5. Select the payment method and read the displayed note.

6. Confirm payment and legality

Before submitting, the displayed legal information must be read and the required control fields activated.

  • Open legal texts, GTC, payment and shipping instructions.
  • Read the revocation policy.
  • Only set actually read and understood consents.
  • For online payments, complete the provider dialogue and return to the shop.
Do not double send: After clicking on the order button, wait for the feedback. Multiple clicks or back/forward navigation can make it unnecessarily difficult.

7. Checking Order and Status

After successful processing, a unique order number is displayed. Write down this number. In the area: Orders logged-in users will see their own orders and – where available – invoices or status information.

  • Compare order number and positions.
  • Do not confuse payment and shipping status.
  • Use tracking link only if there are service providers and tracking number.
  • If the order result is unclear, quote the order number when contacting support.

Typical problems

ProblemSolution
No hits in the catalogueReset search and detail filters, check group and page navigation.
Shopping cart is emptyReopen product detail, set quantity at least 1 and observe confirmation dialog.
Cashier reports missing dataFully complete marked mandatory fields, delivery address and e-mail.
Order is not sentOpen legal texts and revocation, set necessary consents, check payment method.
Payment remains openwaiting for order status and not re-ordering; If necessary, ask with order number.

Test checklist

  • Catalogue search, group and at least one attribute filter tested
  • Product detail checked with image, price, tax, shipping and quantity
  • Cart quantity changed and sum recalculated
  • Mandatory fields and missing consents generate comprehensible messages
  • Order button used only once
  • Order number, status and own order view controlled
  • Desktop and mobile view tested

Opening the shopShop admin tutorialAll tutorials

Text walkthrough

The slideshow remains the visual tutorial. These steps provide a complete text fallback.

Prerequisite: Sign in with an account that has access to the area shown in the tutorial.
  1. The shopping process at a glance
  2. Open the catalogue and narrow the range
    Open in the main menu Shop. At the top, switch between catalogue, shopping cart, checkout, orders, legal texts and revocation.
  3. Read the product detail carefully
    Open a product from its image or the View action. The detailed page shows the information important for the purchase decision.
  4. Place items in the shopping cart
  5. Checking the shopping cart and changing it
    In the shopping cart, items, quantity, price, shipping and sum are displayed in tabular form.
  6. Enter customer data at the checkout
    The checkout shows the order again first. This includes customer data, payment and legal consents.
  7. Confirm payment and legality
    Before submitting, the displayed legal information must be read and the required control fields activated.
  8. Checking Order and Status
    After successful processing, a unique order number is displayed. Write down this number. In the area: Orders logged-in users will see their own orders and – where available – invoices or status information.
  9. Typical problems
  10. Test checklist
    Opening the shopShop admin tutorialAll tutorials

Checkpoint: After the final step, reload the target page and confirm that the expected state remains active.

Common errors: If a control or record is missing, first check permissions, the active language, filters and whether the preceding step was saved.