Feat(product-labels): Implement multiple product labels feature

[DevWael]

This pull request introduces the ability to display multiple product labels on a single product and significantly refactors the label positioning system for greater flexibility and control. See #519

Key Changes:

• Multiple Labels Support:

  • A new Use multiple labels switcher has been added to the product labels settings.
  • When enabled, the system now collects all matching labels for a product and renders them individually, wrapped in a main container.
  • When disabled, the system maintains backward compatibility by rendering only the first matching label, mimicking the previous behavior.

• Refactored Positioning System:

  • Replaced the rigid margin_x and margin_y settings with a more versatile position_x (Horizontal Position), position_y (Vertical Position), and position_anchor (Anchor Point) system.
  • Labels can now be positioned absolutely relative to a chosen anchor point (top-left or top-right) using X and Y offsets, allowing for more precise placement.
  • The preview in the admin panel (assets/js/src/modules/product-labels/admin/preview.js) has been updated to reflect these new positioning options dynamically.

• Improved Text Shape Rotation:

  • Implemented dynamic rotation and transform-origin for text-shape-5 and text-shape-6 based on their position_anchor. This ensures these shapes are correctly oriented regardless of whether they are anchored to the top-left or top-right.

• Codebase Modernization:

  • The label rendering logic in inc/modules/product-labels/class-product-labels.php has been updated to support the new multiple label and flexible positioning features.
  • CSS in assets/sass/modules/product-labels/product-labels.scss has been adjusted to accommodate the new positioning classes and shape transformations.

Testing Steps:

1. Access Product Labels Admin Page:

   • Navigate to the Merchant Product Labels settings page in your WordPress admin.

2. Test Single Label (Backward Compatibility & New Positioning):

   • Ensure the "Use multiple labels" option is disabled.
   • Create a new product label (e.g., "Sale" label) and configure its display rules to show on a specific product.
   • Scenario 2.1: Basic Positioning (Top Left)
     • Set Label Type to 'Text', Text Shape to 'Shape 1'.
     • Set Anchor Point to 'Top Left'.
     • Set Horizontal Position (X) to 10px and Vertical Position (Y) to 10px.
     • Save settings.
     • Verification: View the product on the frontend. The label should appear 10px from the top and 10px from the left edge of the product image/container. Observe the admin preview for real-time accuracy.
   • Scenario 2.2: Basic Positioning (Top Right)
     • Change Anchor Point to 'Top Right'.
     • Set Horizontal Position (X) to 20px and Vertical Position (Y) to 20px.
     • Save settings.
     • Verification: View the product on the frontend. The label should appear 20px from the top and 20px from the right edge. Observe the admin preview.
   • Scenario 2.3: Text Shape 5 Rotation
     • Set Label Type to 'Text', Text Shape to 'Shape 5'.
     • Set Anchor Point to 'Top Left', Horizontal Position (X) to 0px, Vertical Position (Y) to 0px.
     • Save settings.
     • Verification: On the frontend, the label should be rotated -45 degrees, with its origin at the left. Observe the admin preview.
     • Change Anchor Point to 'Top Right', Horizontal Position (X) to 0px, Vertical Position (Y) to 0px.
     • Save settings.
     • Verification: On the frontend, the label should be rotated 45 degrees, with its origin at the right. Observe the admin preview.
   • Scenario 2.4: Text Shape 6 Rotation
     • Repeat Scenario 2.3 for Text Shape 'Shape 6'. The rotation and origin should be similar to Shape 5, but with a slightly different vertical translation.
   • Scenario 2.5: Image Labels
     • Set Label Type to 'Image'. Upload a custom image.
     • Test Anchor Point, Horizontal Position (X), and Vertical Position (Y) as in Scenarios 2.1 and 2.2.
     • Verification: The image label should follow the positioning rules correctly on the frontend and in the admin preview.

3. Test Multiple Labels Functionality:

   • Enable the "Use multiple labels" option.
   • Create at least two distinct product labels with different display rules (e.g., one for "On Sale" and another for "New Products").
   • Configure each label with unique Anchor Point, Horizontal Position (X), and Vertical Position (Y) values.
   • Ensure you have a product that satisfies the display rules for both labels (e.g., a new product that is also on sale).
   • Save settings.
   • Verification: View the product on the frontend. Both labels should appear, each positioned according to its individual settings. They should not interfere with each other's positioning. Observe the admin preview.
   • Scenario 3.1: Multiple Labels with Shapes 5 & 6
     • Within the multiple labels setup, configure one label with Text Shape 'Shape 5' and another with Text Shape 'Shape 6', each with different anchor points.
     • Verification: Each label should correctly apply its specific rotation and positioning based on its individual settings.

4. Test Device Visibility:

   • For both single and multiple label scenarios:
     • Configure a label to Show on devices as 'Desktop only'.
     • Verification: The label should appear on desktop browsers but not on mobile devices (use browser developer tools to simulate mobile).
     • Configure a label to Show on devices as 'Mobile only'.
     • Verification: The label should appear on mobile devices but not on desktop browsers.

5. Check Console for Errors:

   • Throughout all testing, keep the browser's developer console open on both the admin page and the frontend product pages.
   • Verification: Ensure no JavaScript errors are reported.

[sentry]

Bug: Device visibility for multiple product labels is broken, only applying settings from the first label to all.
_{Severity: CRITICAL | Confidence: 1.00}

🔍 Detailed Analysis

When multiple product labels are active, the device visibility settings are incorrectly applied. The code at inc/modules/product-labels/class-product-labels.php lines 852-869 only captures show_devices from the first matching label, due to the if ( empty( $device_visibility_classes ) ) condition. This means subsequent labels' individual device visibility configurations are ignored. As the CSS applies device visibility classes to the main container (.merchant-product-labels), all labels within that container will show or hide together based solely on the first label's settings, breaking the expected per-label device visibility functionality.

💡 Suggested Fix

Modify inc/modules/product-labels/class-product-labels.php to apply device visibility classes to each individual label wrapper, rather than only to the main container based on the first label's settings.

🤖 Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: inc/modules/product-labels/class-product-labels.php#L853-L857

Potential issue: When multiple product labels are active, the device visibility settings
are incorrectly applied. The code at
`inc/modules/product-labels/class-product-labels.php` lines 852-869 only captures
`show_devices` from the first matching label, due to the `if ( empty(
$device_visibility_classes ) )` condition. This means subsequent labels' individual
device visibility configurations are ignored. As the CSS applies device visibility
classes to the main container (`.merchant-product-labels`), all labels within that
container will show or hide together based solely on the first label's settings,
breaking the expected per-label device visibility functionality.

_{Did we get this right? 👍 / 👎 to inform future reviews.}

_{Reference_id: 2778672}