如何在 Magento 2 中设置成功页面的样式

在 Magento 2 中，成功页面（success page）是指在客户成功完成某个操作（如下单）后显示的页面。以下是如何设置成功页面的样式：

步骤一：创建一个自定义的成功页面主题

首先，需要创建一个自定义的 Magento 2 主题。可以参考官方文档。

步骤二：创建一个自定义的成功页面布局

在创建主题后，需要为成功页面创建一个自定义的布局。在主题的 Magento_Checkout 文件夹中创建一个 success.phtml 文件。

<!-- language: lang-html -->
<?php
/**
 * @var $block \Magento\Checkout\Block\Onepage\Success
 */
?>
<div class="container">
    <div class="success-container">
        <h2><?php echo __('Thank You For Your Purchase!'); ?></h2>
        <p><?php echo __('Your order has been successfully placed.'); ?></p>
        <p><?php echo __('You will receive a confirmation email shortly with your order details.'); ?></p>
        <?php echo $block->getChildHtml(); ?>
    </div>
</div>

该布局包括一个包含成功页面信息的 div 元素。如果需要添加更多元素，可以在此处添加。

步骤三：更新 Magento 2 部件

成功页面是使用 Magento_Checkout 部件生成的。在 Magento 2 中，部件可以从主题的 templates 文件夹中进行更新。在主题的 Magento_Checkout 文件夹中创建一个新的 success.phtml 文件，即可更新成功页面的内容。

<!-- language: lang-html -->
<?php
    /** @var $block Magento\Checkout\Block\Onepage\Success */
?><div class="success-container">
    <?php if ($block->getOrderId()):?>
        <p><?php echo __('Your order # is: %1.', sprintf('<a href="%1">%2</a>', $block->escapeUrl($block->getViewOrderUrl()), $block->escapeHtml($block->getOrderId()))); ?></p>
    <?php endif;?>
    <?php if ($block->getCanViewOrderDetail()):?>
        <p><?php echo __('You can track your order status in <a href="%1">My Account</a>.', $block->escapeUrl($block->getUrl('sales/order/history'))); ?></p>
    <?php endif;?>
    <?php if ($block->getCanViewOrderEmail()):?>
        <p><?php echo __('You will receive an order confirmation email with details of your order and a link to track its progress.'); ?></p>
    <?php endif;?>
</div>

步骤四：更新样式表

最后，可以通过在主题中创建一个自定义的 css 文件来更新样式表。在主题的 web/css/source 文件夹中创建一个 success-page.less 文件，即可更新成功页面的样式。

/* language: lang-less */
.success-container {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
    margin: 20px 0;
    padding: 20px;
}

.success-container h2 {
    color: #000;
    font-size: 24px;
    margin-bottom: 10px;
}

.success-container p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
}

以上是如何在 Magento 2 中设置成功页面的样式的步骤。通过创建自定义主题、布局、部件和样式表，可以轻松地自定义成功页面，使其与你的网站风格保持一致。