Stellenbeschreibung:

Work Instruction for Developer – Mattress Configurator (based on Uni CPO for WooCommerce)

Project Goal

We want to build a product configurator identical (in functionality and flow) to the one on Snoozeproject Mattress Configurator: https://www.snoozeproject.de/konfigurator-matratzen/

The foundation should be the Uni CPO Configurator for WooCommerce.

---

Scope & Requirements

1. Step-by-step Configurator (Wizard Flow)

• Users proceed through multiple steps:
  1. Size
  2. Model / Construction
  3. Firmness
  4. Height
  5. Cover / Fabric
  6. Extras (optional add-ons)
  7. Delivery Options
  8. Final summary (with total price and Add to Cart)
• Each step should only become visible/active once the previous step is completed.
• "Next" and "Back" buttons must be available to navigate between steps.
• A progress indicator (dots or bar) should show the current step.

2. Conditional Logic

• Steps and fields should be displayed or hidden depending on user selections.
• Example: Certain heights are not available for specific models.
• Example: Dual firmness is only shown for widths above 160 cm.
• Validation: Each step must require a selection before proceeding.

3. Dynamic Image Preview

• The main product image must update dynamically based on the user’s selections (size, model, cover, etc.).
• Images should be handled via Uni CPO (Imagify, image mapping, or option mapping).
• Layering or swapping images must reflect the chosen configuration in real time.

4. Pricing & SKU Logic

• Base price per model.
• Price modifiers depending on size, height, cover, and extras.
• SKU composition: for example, MAT-size-model-firmness-height-cover.
• Optional discounts: combinations of options may trigger discounts.

5. Summary Step

• At the final step, display a summary of all selected options.
• Show dynamic price, total including all modifiers.
• "Add to Cart" button must add the configured product to WooCommerce with all selected attributes.

6. Mobile Responsiveness & UX

• Configurator must be mobile-friendly (large buttons/tiles, clear navigation).
• Smooth scrolling or automatic focusing when changing steps.

7. Tracking & Analytics (optional)

• Push step-view events into Google Tag Manager (for example, config_step_view with step number and option values).
• Track add-to-cart events with all attributes.

---

Technical Requirements

• Platform: WooCommerce (latest version)
• Plugin: Uni CPO Configurator (latest version)
• Custom code (if needed) for:
  • Step navigation (Next/Back buttons and progress bar)
  • Dynamic image handling
  • Frontend styling (CSS/JS)
• Code must be clean, modular, and update-safe (use child theme or custom plugin).
• Cross-browser compatibility.

---

Deliverables

1. Fully functional step-by-step mattress configurator integrated into WooCommerce product page.
2. Dynamic image preview system.
3. Admin panel configuration of all options (sizes, models, prices, images).
4. Documentation for adding/changing options, prices, images in Uni CPO.
5. Optional: GTM event setup for tracking.

---

Request for Proposal

Please provide:

• Technical approach (how you will implement Next/Back navigation, progress bar, and image switching with Uni CPO).
• Estimated development time (in hours) broken down by feature:
  • Setup of Uni CPO product with all fields and logic
  • Step-by-step navigation (buttons, progress bar)
  • Dynamic image integration
  • Pricing and SKU logic
  • Styling (desktop/mobile)
  • Testing and bug fixing
  • Documentation
• Total project cost based on your hourly rate.
• Suggested timeline for delivery.

NOTE / HINWEIS:

EN: Please refer to Fuchsjobs for the source of your application

DE: Bitte erwähne Fuchsjobs, als Quelle Deiner Bewerbung