Thank you page

The thank you page is shown after a successful checkout. It displays order details and next steps for the customer.

Page structure

Component	File	Purpose
Page template	elements/templates/thanks.tpl	Thank you page layout
Order chunk	elements/chunks/ms3_get_order.tpl	Placed order details

Page template

Path: core/components/minishop3/elements/templates/thanks.tpl

The template extends the base template and has three sections:

Page sections

Section	Description
Success header	Icon, "Thank you!" title, subtitle
Order details	msGetOrder snippet call
"What's next?" block	Info and navigation buttons

Template code

{extends 'file:templates/base.tpl'}
{block 'pagecontent'}
    <div class="container my-5">
        <main>
            {* Success header *}
            <div class="text-center mb-5">
                <div class="mb-4">
                    <svg class="text-success" width="80" height="80" fill="currentColor">
                        <use xlink:href="#icon-check"/>
                    </svg>
                </div>
                <h1 class="display-5 fw-bold text-success mb-3">Thank you for your order!</h1>
                <p class="lead text-muted">Your order has been placed and is being processed</p>
            </div>

            {* Order details *}
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    {'!msGetOrder' | snippet: [
                        'tpl' => 'tpl.msGetOrder'
                    ]}
                </div>
            </div>

            {* "What's next?" block *}
            <div class="row justify-content-center mt-5">
                <div class="col-lg-10">
                    <div class="card border-0 bg-light">
                        <div class="card-body text-center py-4">
                            <h5 class="card-title mb-3">What's next?</h5>
                            <p class="card-text text-muted mb-4">
                                We've sent an order confirmation to your email.<br>
                                Our manager will contact you shortly.
                            </p>
                            <div class="d-flex gap-3 justify-content-center flex-wrap">
                                <a href="/" class="btn btn-outline-primary">
                                    Home
                                </a>
                                <a href="/catalog/" class="btn btn-primary">
                                    Continue shopping
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
{/block}

Caching

The msGetOrder snippet must be called uncached (!msGetOrder), because order data comes from the session or GET parameter.

How order is determined

After successful checkout the user is redirected to the thank you page with a GET parameter:

/thanks/?msorder=15

or with order UUID:

/thanks/?msorder=a1b2c3d4-e5f6-7890-abcd-ef1234567890

The msGetOrder snippet reads the order from the msorder GET parameter.

Security

UUID links can be sent by email safely — they don't require auth and don't expose the order number.

Order details

The order details block is rendered by the msGetOrder snippet and chunk tpl.msGetOrder.

Displayed info:

• Order number and status
• Product table with prices
• Total cost
• Delivery and payment methods
• Contact and address
• Payment link (if available)

Payment link

If the payment method supports online payment, a "Pay order" button appears:

{if $payment_link?}
    <a href="{$payment_link}" class="btn btn-success">
        Pay order
    </a>
{/if}

The link is generated by the payment handler via getPaymentLink().

Redirect setting

After checkout the customer is redirected to the thank you page. The page URL is set in system settings:

Setting	Description
ms3.page_id.thanks	Thank you page resource ID

On successful submit the redirect happens:

// After successful checkout
document.addEventListener('ms3:order:success', (e) => {
    window.location.href = e.detail.redirect;
    // redirect = /thanks/?msorder=15
});

Customization

Changing the template

1. Copy thanks.tpl into your theme
2. Adjust layout and styles
3. Assign the template to the thank you page resource

Changing the order chunk

Create your own chunk and pass it to the snippet:

{'!msGetOrder' | snippet: [
    'tpl' => 'tpl.myGetOrder',
    'includeThumbs' => 'small'
]}

Adding product thumbnails

{'!msGetOrder' | snippet: [
    'tpl' => 'tpl.msGetOrder',
    'includeThumbs' => 'small,medium'
]}

Adding recommendations

You can add recommended products after the order block:

{* After order details *}
<div class="row justify-content-center mt-5">
    <div class="col-lg-10">
        <h4 class="mb-4">You might also like</h4>
        {'msProducts' | snippet: [
            'parents' => 0,
            'where' => ['Data.popular' => 1],
            'limit' => 4,
            'tpl' => 'tpl.msProducts.row'
        ]}
    </div>
</div>

Notifications

On successful checkout notifications are sent automatically:

Recipient	Template	Description
Customer	tpl.msEmail.order.new	Order confirmation
Manager	tpl.msEmail.order.manager	New order notification

Notification setup is described in Events → Notifications.

Responsive layout

The page uses Bootstrap 5 Grid:

Screen	Content width
< 992px	100%
≥ 992px	10 columns (~83%)

<div class="row justify-content-center">
    <div class="col-lg-10">
        {* Content centered *}
    </div>
</div>