Story 29.2. Frontend Shop Views & Model Flip Logic

ID

Scenario (Gherkin)

Screenshots / Wireframes

01

Scenario: Default "Featured" View Rendering

Given The user lands on /shop/ (No filters active)

When The page loads

Then Render Block 1: All Starred★ items, sorted by Key B (_featured_sort_index)

And Render Block 2: All remaining In-Stock items, sorted by Key A (menu_order)

And The result shows “Starred” first, followed immediately by the color-sorted catalog (sorted manually by salsteam).

02

Scenario: Switching to "New In" View

Given The user selects "Sort: New In"

When The grid reloads

Then Render ALL items (Stock + Preview) sorted strictly by Key A (menu_order)

And Ignore Starred★ status (Starred are treated as normal items)

And Disable the Model Image Flip logic completely.

03

Scenario: Model Image Logic (The 1-in-5 Rule)

Given The user is on the Featured View (no Brand/Color filters active)

When The grid renders

Then Check slots 2, 9, 16, 23, 30… (Every 7th item, offset by 2)

And IF the product in that slot is Starred AND has an image ending in _1M[.jpg or other file type]

Then Show Model image as Main, Packshot as Hover

Else Show Standard Packshot as Main.

Visual Proof (How it lands)

On 5-Column Grid:

• #2: Row 1, Col 2

• #9: Row 2, Col 4 (Nice jump to right)

• #16: Row 4, Col 1 (Nice jump to left)

• #23: Row 5, Col 3 (Center)

• Result: Perfectly scattered.

On 4-Column Grid:

• #2: Row 1, Col 2

• #9: Row 3, Col 1

• #16: Row 4, Col 4

• Result: Wide scatter.

On 2-Column Mobile:

• #2: Right side

• #9: Left side

• #16: Right side

• Result: Balanced.

04

Scenario: Sort Interaction

Given The user is on Mobile or Desktop

When They view the top right header (Action Bar)

Then The Sort Label displays the active text: "Sort by Featured ⌄" or "Sort by New In ⌄"

And Clicking the text opens the standard sort drawer with order Featured>New In>Price low to high>Price high to low.