Table of Contents & Menu
On this page
Navigation

Fixing Customizable Options for Configurable Products in the GraphQL Cart

GraphQL Cart Specific

This documentation applies *only* to the GraphQL cart. Hyvä Themes v1.1.15+ uses a PHP-rendered cart page by default.

Magento versions prior to 2.4.5-p8 contain a core GraphQL schema bug that prevents customizable options from appearing on configurable products in the cart. This issue is resolved in Magento 2.4.5-p8 and later, so the following patch is only needed for earlier versions.

Link to the issue in the Hyvä Gitlab (Gitlab Access Needed):

gitlab.hyva.io/hyva-themes/magento2-theme-module/-/issues/34

Solution for Magento versions < 2.4.5-p8:

If you cannot upgrade Magento, you must patch the core.

Patching the schema

Managing core patches

For maintaining Magento core patches, we recommend github.com/elgentos/magento2-composer-quality-patches, which utilizes github.com/vaimo/composer-patches.

In the file vendor/magento/module-configurable-product-graph-ql/etc/schema.graphqls, line 65 requires an additional ! after [SelectedCustomizableOption]:

Original (incorrect): 

customizable_options: [SelectedCustomizableOption] @resolver(class: "Magento\\QuoteGraphQl\\Model\\Resolver\\CustomizableOptions")

New (fixed): 

customizable_options: [SelectedCustomizableOption]! @resolver(class: "Magento\\QuoteGraphQl\\Model\\Resolver\\CustomizableOptions")

Extending the GraphQL query

Next, customizable_options must be added to the GraphQL cart query. This can be achieved by either rewriting the class \Hyva\Theme\ViewModel\Cart\GraphQlQueriesWithVariables or by using an event observer.

Tip

We recommend the event observer approach to minimize conflicts with other customizations.

For more details on customizing GraphQL queries, refer to our dedicated page: customizing GraphQL queries and mutations.

Example using the event observer approach

This example assumes a custom module named Hyva_MagentoCoreFixes exists.

Configure an event observer

Add the file app/code/Hyva/MagentoCoreFixes/etc/frontend/events.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="hyva_graphql_render_before_cart_query">
        <observer name="magento_core_fix" instance="Hyva\MagentoCoreFixes\Observer\ConfigCustomizableProductsInCartQuery"/>
    </event>
</config>

Add the observer class

Create the observer class app/code/Hyva/MagentoCoreFixes/Observer/ConfigCustomizableProductsInCartQuery.php:

<?php declare(strict_types=1);

namespace Hyva\MagentoCoreFixes\Observer;

use Hyva\GraphqlViewModel\Model\GraphqlQueryEditor;
use Magento\Framework\Event\Observer as Event;
use Magento\Framework\Event\ObserverInterface;

class ConfigCustomizableProductsInCartQuery implements ObserverInterface
{
    /**
     * @var GraphqlQueryEditor
     */
    private $graphqlQueryEditor;

    public function __construct(GraphqlQueryEditor $graphqlQueryEditor)
    {
        $this->graphqlQueryEditor = $graphqlQueryEditor;
    }

    public function execute(Event $event)
    {
        $queryString = $event->getData('gql_container')->getData('query');

        $queryString = $this->graphqlQueryEditor->addFieldIn(
            $queryString,
            ['cart', 'items', '... on ConfigurableCartItem', 'customizable_options'],
            'label'
        );

        $queryString = $this->graphqlQueryEditor->addFieldIn(
            $queryString,
            ['cart', 'items', '... on ConfigurableCartItem', 'customizable_options', 'values'],
            'label value'
        );

        $queryString = $this->graphqlQueryEditor->addFieldIn(
            $queryString,
            ['cart', 'items', '... on ConfigurableCartItem', 'customizable_options', 'values', 'price'],
            'value type'
        );

        $event->getData('gql_container')->setData('query', $queryString);
    }
}

Additionally, configure an event observer for the event hyva_graphql_render_before_customer_cart_query. This observer should be similar to the one above, but use customerCart instead of cart in the path arrays.

The first observer handles guest carts, while the second handles carts for logged-in customers.

With both the core patch and the event observers in place, customizable options will be correctly available on configurable products in the GraphQL cart.