[Shop] Add twig hooks to product card template#17918
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis update refactors the product card rendering in the Sylius ShopBundle by replacing direct HTML and component usage in the product card template with a hook-based approach. Several new Twig templates and a YAML configuration file are introduced to define and structure the hook points for the product card, its details, and pricing sections. The new templates modularize the rendering of product images, names, and prices, while the YAML configuration specifies the hooks’ structure and priorities. Additionally, a minor whitespace cleanup is made in a product review hook configuration file. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ProductCardTemplate
participant HookSystem
participant DetailsTemplate
participant ImageTemplate
participant NameTemplate
participant PricesTemplate
User->>ProductCardTemplate: Request product card rendering
ProductCardTemplate->>HookSystem: Invoke 'card' hook with product context
HookSystem->>DetailsTemplate: Render 'details' hook
DetailsTemplate->>HookSystem: Invoke 'details' sub-hooks
HookSystem->>ImageTemplate: Render product image
HookSystem->>NameTemplate: Render product name
HookSystem->>PricesTemplate: Render prices if variants enabled
Suggested labels
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
❌ Preview Environment deleted from BunnyshellAvailable commands:
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (6)
src/Sylius/Bundle/ShopBundle/templates/product/common/product_card/details/image.html.twig (2)
4-5: Extract inline styles into a CSS class
Inliningstyle="aspect-ratio: 3/4; "leads to maintenance headaches and a trailing space. Consider moving the aspect-ratio rule into your stylesheet (e.g..product-card__image-container { aspect-ratio: 3/4; }) and updating the markup accordingly.
5-5: Enhance accessibility by specifying analttext
If thesylius_shop:main_imagecomponent supports analtattribute, pass something meaningful (for example,alt: product.name) to improve screen-reader compatibility.src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/product_review/create.yaml (2)
37-38: Consistent quoting style for template paths
Other entries in this file use single quotes around paths. To maintain consistency, switch these double quotes to single quotes. For example:- template: "@SyliusShop/product/common/product_card/details.html.twig" + template: '@SyliusShop/product/common/product_card/details.html.twig'Also applies to: 40-41
45-46: Apply consistent quoting and remove trailing spaces
- Change double quotes to single quotes on
templatevalues.- Remove any trailing whitespace on blank lines (e.g., lines 42 and 50).
- template: "@SyliusShop/product/common/product_card/details/image.html.twig" + template: '@SyliusShop/product/common/product_card/details/image.html.twig' - template: "@SyliusShop/product/common/product_card/details/name.html.twig" + template: '@SyliusShop/product/common/product_card/details/name.html.twig'Also applies to: 48-49
src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/product_review/index.yaml (2)
38-41: Unify quoting style for template entries
Switch the new template declarations from double to single quotes to match the surrounding YAML:- template: "@SyliusShop/product/common/product_card/details.html.twig" + template: '@SyliusShop/product/common/product_card/details.html.twig'
44-47: Remove trailing spaces & adjust quoting
- Remove any trailing whitespace on blank lines.
- Convert double-quoted paths to single quotes for consistency:
- template: "@SyliusShop/product/common/product_card/details/name.html.twig" + template: '@SyliusShop/product/common/product_card/details/name.html.twig'Also applies to: 48-50
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/product_review/create.yaml(1 hunks)src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/product_review/index.yaml(1 hunks)src/Sylius/Bundle/ShopBundle/templates/product/common/card.html.twig(1 hunks)src/Sylius/Bundle/ShopBundle/templates/product/common/product_card/details.html.twig(1 hunks)src/Sylius/Bundle/ShopBundle/templates/product/common/product_card/details/image.html.twig(1 hunks)src/Sylius/Bundle/ShopBundle/templates/product/common/product_card/details/name.html.twig(1 hunks)src/Sylius/Bundle/ShopBundle/templates/product/common/product_card/price.html.twig(1 hunks)
🧰 Additional context used
🪛 YAMLlint (1.35.1)
src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/product_review/index.yaml
[error] 43-43: trailing spaces
(trailing-spaces)
[error] 51-51: trailing spaces
(trailing-spaces)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Static checks / PHP 8.3, Symfony ^7.2
- GitHub Check: Static checks / PHP 8.2, Symfony ^6.4
🔇 Additional comments (8)
src/Sylius/Bundle/ShopBundle/templates/product/common/product_card/price.html.twig (1)
1-10: Good implementation of modular price display with proper context extractionThe template correctly retrieves product data from the hookable_metadata context and conditionally renders pricing components only when enabled variants exist. This modular approach aligns well with Sylius's component-based architecture.
Two suggestions for consideration:
- Consider adding a comment explaining what each component does for easier maintenance
- The empty div might be unnecessary when there are no enabled variants
src/Sylius/Bundle/ShopBundle/templates/product/common/product_card/details/name.html.twig (1)
1-5: Clean implementation with proper test attributesThe template properly extracts the product from context and renders the name with appropriate styling and test attributes. The use of
text-breakclass is good for handling potentially long product names.src/Sylius/Bundle/ShopBundle/templates/product/common/card.html.twig (1)
2-2: Excellent simplification using the hook systemThe template has been successfully refactored to use the Twig hook system, delegating all rendering to the 'product_card' hook. This change:
- Increases modularity and flexibility
- Makes it easier to extend or customize product cards
- Reduces template complexity
- Follows best practices for Sylius template architecture
src/Sylius/Bundle/ShopBundle/templates/product/common/product_card/details/image.html.twig (1)
1-2: Verify availability ofhookable_metadata.context.product
Ensure that every Twig hook invocation into this template provides aproductin thehookable_metadata.context. If there's any scenario whereproductmight be missing or null, add a guard or default to avoid runtime errors.src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/product_review/create.yaml (2)
35-42: Approve: newproduct_cardhook group
The addition of'sylius.shop.product_review.create.content.sidebar.product_card': details: template: "@SyliusShop/product/common/product_card/details.html.twig" priority: 100 price: template: "@SyliusShop/product/common/product_card/price.html.twig" priority: 0correctly introduces a more granular hook for the sidebar card.
43-50: Approve: nesteddetailshook for image & name
The nested group'sylius.shop.product_review.create.content.sidebar.product_card.details': image: template: "@SyliusShop/product/common/product_card/details/image.html.twig" priority: 100 name: template: "@SyliusShop/product/common/product_card/details/name.html.twig" priority: 0correctly registers the image and name fragments under the parent
detailshook.src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/product_review/index.yaml (2)
36-42: Approve: newproduct_cardhook group in index'sylius.shop.product_review.index.content.sidebar.product_card': details: template: "@SyliusShop/product/common/product_card/details.html.twig" priority: 100 price: template: "@SyliusShop/product/common/product_card/price.html.twig" priority: 0This correctly mirrors the create-page configuration and enables the same modular rendering in the index sidebar.
43-50: Approve: nested hook for image & name in index'sylius.shop.product_review.index.content.sidebar.product_card.details': image: template: "@SyliusShop/product/common/product_card/details/image.html.twig" priority: 100 name: template: "@SyliusShop/product/common/product_card/details/name.html.twig" priority: 0This aligns the index page with the create page’s hook structure.
🧰 Tools
🪛 YAMLlint (1.35.1)
[error] 43-43: trailing spaces
(trailing-spaces)
| {% set product = hookable_metadata.context.product %} | ||
|
|
||
| <a class="link-reset" href="{{ path('sylius_shop_product_show', {'slug': product.slug, '_locale': product.translation.locale}) }}" {{ sylius_test_html_attribute('product-content') }}> | ||
| {% hook 'details' %} | ||
| </a> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Well-structured product link with nested hook
The template correctly creates a link to the product page with appropriate context and test attributes. The nested 'details' hook allows for further customization of content within the link.
One suggestion: Consider adding a fallback or empty state handling if the product is unavailable or has missing translation data, since accessing product.translation.locale could potentially cause issues if translations are not properly set up.
🏁 Script executed:
#!/bin/bash
# Check if there's any error handling for missing translations in other templates
rg -A 2 -B 2 "product\.translation" --type twig | grep -i "if\|empty\|null\|undefined"Length of output: 251
Add fallback for missing product translations
To prevent potential errors when product.translation.locale is unavailable, guard or provide a default locale in the link:
-
File:
src/Sylius/Bundle/ShopBundle/templates/product/common/product_card/details.html.twig(lines 1–5) -
Change the href to use a default or conditional, for example:
{% set locale = product.translation.locale|default(app.request.locale) %} <a class="link-reset" href="{{ path('sylius_shop_product_show', { 'slug': product.slug, '_locale': locale }) }}" {{ sylius_test_html_attribute('product-content') }} > {% hook 'details' %} </a>
This ensures that, if a translation or its locale is missing, the current request locale is used as a fallback.
4601229 to
6dd58c7
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/Sylius/Bundle/ShopBundle/templates/shared/product/card/prices.html.twig (2)
3-7: Consider adding semantic HTML and CSS classes to the wrapper div.The div wrapper lacks any classes or identifiers. For better maintainability and styling flexibility, consider adding appropriate CSS classes (e.g.,
class="sylius-product-card__prices") and semantic attributes.-<div> +<div class="sylius-product-card__prices">
5-5: Consider passing product as an explicit parameter to the hook.While the current implementation works because the product is available in the template context, passing it explicitly to the hook would make the dependency clearer for developers implementing hook extensions.
- {% hook 'price' %} + {% hook 'price' with {'product': product} %}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/product_review/index.yaml(1 hunks)src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/shared/product/card.yaml(1 hunks)src/Sylius/Bundle/ShopBundle/templates/product/common/card.html.twig(1 hunks)src/Sylius/Bundle/ShopBundle/templates/shared/product/card/details.html.twig(1 hunks)src/Sylius/Bundle/ShopBundle/templates/shared/product/card/details/image.html.twig(1 hunks)src/Sylius/Bundle/ShopBundle/templates/shared/product/card/details/name.html.twig(1 hunks)src/Sylius/Bundle/ShopBundle/templates/shared/product/card/prices.html.twig(1 hunks)src/Sylius/Bundle/ShopBundle/templates/shared/product/card/prices/catalog_promotions.html.twig(1 hunks)src/Sylius/Bundle/ShopBundle/templates/shared/product/card/prices/price.html.twig(1 hunks)
✅ Files skipped from review due to trivial changes (3)
- src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/product_review/index.yaml
- src/Sylius/Bundle/ShopBundle/templates/shared/product/card/prices/catalog_promotions.html.twig
- src/Sylius/Bundle/ShopBundle/templates/shared/product/card/prices/price.html.twig
🚧 Files skipped from review as they are similar to previous changes (5)
- src/Sylius/Bundle/ShopBundle/templates/shared/product/card/details/name.html.twig
- src/Sylius/Bundle/ShopBundle/templates/product/common/card.html.twig
- src/Sylius/Bundle/ShopBundle/templates/shared/product/card/details.html.twig
- src/Sylius/Bundle/ShopBundle/templates/shared/product/card/details/image.html.twig
- src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/shared/product/card.yaml
🔇 Additional comments (1)
src/Sylius/Bundle/ShopBundle/templates/shared/product/card/prices.html.twig (1)
1-7: Well-structured template with clear hook integration.This new template correctly implements the Twig hook system for product pricing, aligning with the PR's goal of enhancing template flexibility. The conditional check for enabled variants ensures prices are only displayed when relevant.
6dd58c7 to
46f48c0
Compare
src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/shared/product/card.yaml
Show resolved
Hide resolved
src/Sylius/Bundle/ShopBundle/templates/shared/product/card/prices/catalog_promotions.html.twig
Outdated
Show resolved
Hide resolved
src/Sylius/Bundle/ShopBundle/templates/shared/product/card/prices/price.html.twig
Outdated
Show resolved
Hide resolved
5f97b47 to
17b89ef
Compare
| @@ -0,0 +1,7 @@ | |||
| {% set product = hookable_metadata.context.product %} | |||
|
|
|||
| <div> | |||
Refactors the
product_cardTwig hook by introducing hooks. The goal is to make it easier to customize and extend the product card by allowing other templates or plugins to inject additional content without overriding the entire template. This improves flexibility and maintainability when adding features like badges, custom buttons, or additional information.Summary by CodeRabbit