Table of Contents & Menu
On this page
Navigation

Rendering GraphQL Cart Page Items

This page refers to the GraphQL Cart

Since release 1.1.15, Hyvä uses a PHP-rendered cart page by default. This documentation focuses on rendering cart items specifically for the GraphQL cart page.

For the PHP cart, item rendering is similar to Luma and doesn't require special documentation. The Hyvä GraphQL cart, however, uses a different approach.

PHP item renderers cannot be used with the Hyvä GraphQL cart because cart items are rendered client-side using Alpine.js.

The data is fetched by GraphQL.

There are two general approaches to customizing how cart items are rendered:

Customizing the Cart GraphQL query

To fetch additional data via GraphQL (e.g., for a custom product type), customize GraphQL queries using Magento Event Observers and the GraphQL Query Editor. See Customizing GraphQL for details.

Customizing the Cart GraphQL response

Changing the GraphQL response is only possible within the limits of the GraphQL schema.

Changing a field object type is not recommended, as it can be extensive and quickly requires many overwrites wherever the type is used.

The easiest way to supply additional frontend information is to add a custom field to the CartItemInterface schema in your module's schema.graphqls file and populate it with a custom resolver. Alternatively, you can configure a plugin for the core Magento\QuoteGraphQl\Model\Resolver\CartItems resolver to customize an existing return value, provided it doesn't change the declared type.

Any plugins to GraphQL resolvers should be declared in the graphql area, specifically in a etc/graphql/di.xml file.

Rendering custom cart item options

While general cart item rendering is often sufficient, you may need to render custom cart item options.

This can be done by adding a child block to the additional.cart.item.options container.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="additional.cart.item.options">
            <block name="my-custom-cart-item-options"
                   template="My_Custom::cart/item/custom-options.phtml"/>
        </referenceContainer>
    </body>
</page>

The block will be automatically rendered within the parent template's section iterating over the cart items.

Here's an example template for rendering custom cart item options:

<template
    x-if="item.my_custom_options && Object.keys(item.my_custom_options).length > 0">
    <div>
        <template x-for="option in item.my_custom_options">
            <div class="sm:grid grid-cols-4 pb-2">
                <div class="text-sm font-semibold inline-block">
                    <span x-text="option.label"></span>:
                </div>
                <div class="text-sm col-span-3 inline-block">
                    <template x-if="option.code === 'my_special_price'">
                        <span class="text-gray-700" x-text="hyva.formatPrice(option.value)"></span>
                    </template>
                    <template x-if="option.code !== 'my_special_price'">
                        <span x-text="option.value"></span>
                    </template>
                </div>
            </div>
        </template>
    </div>
</template>

The item property represents the data returned by GraphQL for each quote item.

Customizing cart item rendering beyond custom options

For more extensive customizations, override the Magento_Checkout/templates/cart/items.phtml template file.

Tip

Be aware that items.phtml is a large file. Overriding it can complicate future upgrades, so consider using custom cart item options rendering if possible.