ProductGiftCardOptions

The ProductGiftCardOptions container manages and displays gift card-specific options on the product details page.

The container receives initial product data during initialization to preload the component and, being event-driven, updates with data emitted to pdp/data within the event scope. It also listens to pdp/values to keep its displayed state in sync with the currently selected configuration, and it updates the global PDP configuration values and validity as shoppers interact with the gift card fields.

Note

• Rendering is conditional. The container renders only when the product includes the ac_giftcard attribute. The attribute must contain a JSON string with the shape { "options": Option[] }, which defines the fields shown in the UI.
• As shoppers edit fields, the container writes the selected values to the PDP configuration (enteredOptions) and updates the overall configuration validity, enabling downstream actions like Add to Cart.

Container rendering

ProductGiftCardOptions container

ProductGiftCardOptions configurations

The ProductGiftCardOptions container provides the following configuration options:

Option	Type	Req?	Description
scope	string	No	Unique identifier for the PDP context. Only containers rendered with this scope will respond to product events.
className	string	No	Additional CSS class applied to the container wrapper.

Example

The following example demonstrates how to configure and render the ProductGiftCardOptions container:

return productRenderer.render(ProductGiftCardOptions, {
  scope: 'modal', // optional
  className: 'pdp-gift-card-options--custom',
});

Behavior in context

• The container will read the product’s ac_giftcard attribute to determine which gift card fields to render.
• As the shopper fills out gift card fields, selections are synchronized to the PDP values store (enteredOptions) and overall configuration validity is updated accordingly.
• If the product does not include ac_giftcard, the container renders nothing.