Magento 2.4.4 PWA Storefront购物车重定向至Magento结账并返回的实现方案咨询

一、PWA端配置跳转触发逻辑 #

在完成购物车商品添加、账单/配送地址设置、配送方式选择后，添加跳转至Magento前端支付页的逻辑：

• 利用PWA Studio内置的useCartQuery钩子获取购物车信息，确保用户会话与Magento后端同步（依赖共享cookie）。
• 构造Magento前端结账URL，直接跳转至支付步骤，示例代码如下（在PWA的结账组件中实现）：

import { useCartQuery } from '@magento/peregrine/lib/talons/CartPage/useCartQuery';

const CheckoutPaymentRedirect = () => {
    const { cart } = useCartQuery();
    
    const handleRedirect = () => {
        // 替换为你的Magento前端基础URL
        const magentoFrontendUrl = 'https://your-magento-domain.com';
        // 直接跳转至支付步骤
        window.location.href = `${magentoFrontendUrl}/checkout/#payment`;
    };

    return (
        <button onClick={handleRedirect} disabled={!cart}>
            前往Magento完成支付
        </button>
    );
};

export default CheckoutPaymentRedirect;

• 关键注意点：确保PWA与Magento前端配置相同的根域名（或共享cookie域），否则会话无法共享，Magento前端无法识别PWA中的购物车。

二、Magento后端配置支付后跳转回PWA #

方式1：后台配置快速设置 #

进入Magento后台 Stores > Configuration > Sales > Checkout > Success Page：

• 将「Redirect to CMS Page」设置为「Custom URL」
• 在「Custom URL」中填入PWA的订单成功页地址（例如：https://your-pwa-domain.com/checkout/success）

方式2：插件实现自定义跳转（更灵活） #

如果需要根据订单状态或其他条件动态调整跳转地址，可通过插件拦截成功页逻辑：

1. 创建插件类：

<?php
namespace YourVendor\YourModule\Plugin;

use Magento\Checkout\Controller\Onepage\Success;
use Magento\Framework\Controller\Result\RedirectFactory;

class RedirectToPwaOnSuccess
{
    private $redirectFactory;

    public function __construct(RedirectFactory $redirectFactory)
    {
        $this->redirectFactory = $redirectFactory;
    }

    public function afterExecute(Success $subject, $result)
    {
        // 替换为你的PWA成功页地址
        $pwaSuccessUrl = 'https://your-pwa-domain.com/checkout/success';
        $redirect = $this->redirectFactory->create();
        $redirect->setUrl($pwaSuccessUrl);
        
        return $redirect;
    }
}

2. 在etc/di.xml中注册插件：

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Controller\Onepage\Success">
        <plugin name="redirect_to_pwa_after_checkout" type="YourVendor\YourModule\Plugin\RedirectToPwaOnSuccess" />
    </type>
</config>

三、会话共享关键配置 #

确保PWA与Magento前端的cookie域一致，才能共享购物车会话：

1. 在Magento后台进入 Stores > Configuration > Web > Cookie Configuration：
   • 设置「Cookie Domain」为共享根域（例如：.yourdomain.com）
   • 启用「Use HTTP Only」「Cookie Restriction Mode」等必要配置
2. 在PWA的.env文件中配置对应cookie域：

MAGENTO_BACKEND_URL=https://your-magento-domain.com
COOKIE_DOMAIN=.yourdomain.com

四、测试与验证流程 #

1. 在PWA中添加商品至购物车，填写账单/配送地址，选择配送方式
2. 点击跳转按钮，确认Magento前端正确加载当前购物车并进入支付步骤
3. 完成支付流程，确认自动跳转回PWA的订单成功页
4. 检查PWA中是否能同步显示订单状态（可通过调用Magento订单API实现）

内容的提问来源于stack exchange，提问作者user19503350