Problem/Motivation

Currently, the Commerce Wishlist module only provides wishlist functionality through the Add to Cart form via hook_form_BASE_FORM_ID_alter(). This means the "Add to Wishlist" button can only appear where the Add to Cart form is rendered.

Theme developers and site builders have no way to place wishlist links in custom locations within their Twig templates, such as:

  • Product cards in listing views
  • Quick view modals
  • Custom product teasers
  • Header or navigation areas
  • Comparison tables

This limitation forces developers to either:

  1. Render the entire Add to Cart form just to get the wishlist button
  2. Build custom solutions from scratch using WishlistManager and WishlistProvider services

Use cases

  • Product cards: Display a heart icon on product listings that allows adding to wishlist without navigating to the product page
  • Modal attribute selection: When a product has variations (size, color), show a modal for attribute selection before adding to wishlist
  • Conditional display: Check if a product/variation is already in the wishlist to show different states (filled heart vs empty heart)
  • Direct variation links: For products with a single variation or when using the default variation, allow direct add/remove without additional UI

Expected functionality

Twig functions that allow theme developers to:

  • Render an add/remove wishlist link for a specific product variation
  • Render a wishlist link that opens attribute selection (for products with multiple variations)
  • Check if a variation or product is currently in the user's wishlist

Example desired usage in templates:

{{ wishlist_link(product_variation) }}

{{ wishlist_modal_link(product) }}

{% if is_in_wishlist(product_variation) %}...{% endif %}

Current workaround

Developers must create custom modules with their own Twig extensions, controllers, routes, and forms - essentially reimplementing wishlist link functionality that should be provided by the module itself.

Issue fork commerce_wishlist-3564454

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

introfini created an issue. See original summary.

introfini opened merge request !27

introfini’s picture

introfini commented
Assigned: Unassigned » introfini
Status: Active » Needs review

Implementation Added

I've pushed an initial implementation that provides Twig functions for rendering wishlist links anywhere in templates.

New Twig Functions

1. commerce_wishlist_link(variation)

Direct add/remove link for a specific product variation. Use when you already have a variation and don't need attribute selection.

{# Using a product variation directly #}
{{ commerce_wishlist_link(product_variation) }}

{# Using the product's default variation #}
{{ commerce_wishlist_link(product_entity.defaultVariation) }}

2. commerce_wishlist_modal(product)

Opens a modal with attribute selection (size, color, etc.) before adding to wishlist. Use for products with multiple variations.

{{ commerce_wishlist_modal(product_entity) }}

3. commerce_wishlist_in_wishlist(variation)

Check if a specific variation is in the user's wishlist. Returns boolean.

{% if commerce_wishlist_in_wishlist(product_variation) %}
  <span class="badge">In Wishlist</span>
{% endif %}

4. commerce_wishlist_product_in_wishlist(product)

Check if any variation of a product is in the user's wishlist. Returns boolean.

{% if commerce_wishlist_product_in_wishlist(product_entity) %}
  <span class="badge">In Wishlist</span>
{% endif %}

Example Usage in Product Card Template

{# Option 1: Modal with attribute selection #}
{{ commerce_wishlist_modal(product_entity) }}

{# Option 2: Direct link using default variation #}
{{ commerce_wishlist_link(product_entity.defaultVariation) }}

{# Option 3: Conditional display #}
{% if commerce_wishlist_product_in_wishlist(product_entity) %}
  <span class="wishlist-status">♥ In your wishlist</span>
{% else %}
  {{ commerce_wishlist_modal(product_entity) }}
{% endif %}

New Files

  • src/TwigExtension/WishlistTwigExtension.php - Twig extension with all functions
  • src/WishlistLinkBuilder.php - Service for building link render arrays
  • src/WishlistLinkBuilderInterface.php - Interface for the link builder
  • src/Form/AddToWishlistForm.php - Form for modal attribute selection (extends AddToCartForm)
  • src/Controller/WishlistLinkController.php - AJAX endpoints for add/remove/modal
  • templates/commerce-wishlist-link.html.twig - Template for direct links
  • templates/commerce-wishlist-product-link.html.twig - Template for modal trigger (heart icon)

Note on Modal Form

The commerce_wishlist_modal() function reuses Commerce's Add to Cart form widget for attribute selection (hiding the quantity field and Add to Cart button). If you have "Show wishlist button" enabled in the Add to Cart formatter settings, you may see a duplicate button in the modal. To avoid this, disable "Show wishlist button" in the product type's Manage Display settings for the Variations field.