Link proper product variant to the modal

src/Sylius/Bundle/ShopBundle/Resources/assets/controllers.json

@@ -9,9 +9,9 @@
       },
       "product-added-to-cart-modal": {
         "main": "controllers/ProductAddedToCartModalController.js",
+        "enabled": true,
         "webpackMode": "lazy",
-        "fetch": "lazy",
+        "fetch": "lazy"
-        "enabled": true
       }
     },
     "@symfony/ux-autocomplete": {

src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/product/show.yaml

@@ -19,6 +19,7 @@ sylius_twig_hooks:
                 component: 'sylius_shop:product_added_to_cart_modal'
                 props:
                     product: '@=_context.product'
+                    template: '@SyliusShop/shared/components/product_added_to_cart_modal.html.twig'
                 priority: -100
 
         'sylius_shop.product.show.content.header':

src/Sylius/Bundle/ShopBundle/Resources/config/services/twig/component/product.xml

@@ -112,6 +112,20 @@
             />
         </service>
 
+        <service
+            id="sylius_shop.twig.component.product.added_to_cart_modal"
+            class="Sylius\Bundle\ShopBundle\Twig\Component\Product\AddedToCartModalComponent"
+        >
+            <argument type="service" id="sylius.resolver.product_variant.default" />
+            <argument type="service" id="sylius.repository.product" />
+            <argument type="service" id="sylius.repository.product_variant" />
+
+            <tag
+                name="sylius.live_component.shop"
+                key="sylius_shop:product_added_to_cart_modal"
+            />
+        </service>
+
         <service
             id="sylius_shop.twig.component.product.breadcrumb"
             class="Sylius\Bundle\ShopBundle\Twig\Component\Product\BreadcrumbComponent"

src/Sylius/Bundle/ShopBundle/Twig/Component/Product/AddedToCartModalComponent.php

@@ -0,0 +1,77 @@
+<?php
+
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Sylius\Bundle\ShopBundle\Twig\Component\Product;
+
+use Sylius\Bundle\ShopBundle\Twig\Component\Product\Trait\ProductLivePropTrait;
+use Sylius\Bundle\ShopBundle\Twig\Component\Product\Trait\ProductVariantLivePropTrait;
+use Sylius\Bundle\UiBundle\Twig\Component\TemplatePropTrait;
+use Sylius\Component\Core\Model\ProductInterface;
+use Sylius\Component\Core\Model\ProductVariantInterface;
+use Sylius\Component\Core\Repository\ProductRepositoryInterface;
+use Sylius\Component\Core\Repository\ProductVariantRepositoryInterface;
+use Sylius\Component\Product\Resolver\ProductVariantResolverInterface;
+use Sylius\TwigHooks\LiveComponent\HookableLiveComponentTrait;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveArg;
+use Symfony\UX\LiveComponent\Attribute\LiveListener;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\TwigComponent\Attribute\PostMount;
+
+#[AsLiveComponent]
+final class AddedToCartModalComponent
+{
+    use DefaultActionTrait;
+    use HookableLiveComponentTrait;
+    use ProductLivePropTrait;
+    use ProductVariantLivePropTrait;
+    use TemplatePropTrait;
+
+    /**
+     * @param ProductRepositoryInterface<ProductInterface> $productRepository
+     * @param ProductVariantRepositoryInterface<ProductVariantInterface> $productVariantRepository
+     */
+    public function __construct(
+        protected readonly ProductVariantResolverInterface $productVariantResolver,
+        ProductRepositoryInterface $productRepository,
+        ProductVariantRepositoryInterface $productVariantRepository,
+    ) {
+        $this->initializeProduct($productRepository);
+        $this->initializeProductVariant($productVariantRepository);
+    }
+
+    #[PostMount]
+    public function postMount(): void
+    {
+        /** @var ProductVariantInterface|null $variant */
+        $variant = $this->productVariantResolver->getVariant($this->product);
+
+        $this->variant = $variant;
+    }
+
+    #[LiveListener(AddToCartFormComponent::SYLIUS_SHOP_VARIANT_CHANGED)]
+    public function updateProductVariant(#[LiveArg] mixed $variantId): void
+    {
+        if (null === $variantId) {
+            return;
+        }
+
+        $changedVariant = $this->productVariantRepository->find($variantId);
+
+        if ($changedVariant === $this->variant) {
+            return;
+        }
+
+        $this->variant = $changedVariant?->isEnabled() ? $changedVariant : null;
+    }
+}

src/Sylius/Bundle/ShopBundle/templates/shared/components/product_added_to_cart_modal.html.twig

@@ -1,4 +1,4 @@
-{% props product, variant = null, hookableMetadata = null %}
+{# Rendered with \Sylius\Bundle\ShopBundle\Twig\Component\Product\AddedToCartModalComponent #}
 
 <div {{ attributes.defaults(stimulus_controller('@sylius/shop-bundle/product-added-to-cart-modal')) }}>
     <div

src/Sylius/Bundle/ShopBundle/templates/shared/components/product_added_to_cart_modal/product_info.html.twig

@@ -1,5 +1,5 @@
 {% set product = hookable_metadata.context.product %}
-{% set variant = hookable_metadata.context.variant|default(product.enabledVariants.first|default(null)) %}
+{% set variant = hookable_metadata.context.variant %}
 
 <div class="d-flex align-items-center gap-4">
     <div class="flex-shrink-0" style="width: 6rem;">
@@ -13,9 +13,9 @@
     </div>
     <div class="flex-grow-1">
         <div class="h6 mb-2" {{ sylius_test_html_attribute('product-name') }}>{{ product.name }}</div>
-        {% if variant is not null and variant.code is not null %}
+        {% if variant is not null and variant.name is not null %}
-            <div class="text-body-tertiary small mb-2">
+            <div class="text-body-tertiary small mb-2" {{ sylius_test_html_attribute('variant-name') }}>
-                {{ variant.code }}
+                {{ variant.name }}
             </div>
         {% endif %}
         {% if variant is not null %}