Skip to content

Commit 85052b0

Browse files
rfmarcelinorfmarcelino
committed
feat: enhance accordion functionality and diagnostics; added support for accordion mode in filtering, improved tab handling within accordions, and refined diagnostics for missing classes in filter and tab modes.
1 parent 4a71983 commit 85052b0

3 files changed

Lines changed: 404 additions & 105 deletions

File tree

‎README.md‎

Lines changed: 102 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,19 @@ npm run build # Build once (manual)
5959
- `.button-filter`, `.button-reset`
6060
- `.items-summary` → `.results-count` (total before filter), `.items-count` (after filter)
6161

62+
**For List Page C (Accordion Mode - grouped by bedroom type):**
63+
- `.accordion_accordion` → Template accordion containing mixed cards
64+
- `.accordion_question` → Accordion header
65+
- `.accordion_answer` → Contains `.card-wrapper` elements (directly or in `.floorplan-collection-list`)
66+
- **Placeholders**: `{{floor_type}}` and `{{starting_price}}` (replaced automatically)
67+
68+
**Mode Detection:**
69+
- **Tab Mode**: `.propsync-tabs` exists
70+
- **Filter Mode**: `.button-filter` and filter controls exist
71+
- **Accordion Mode**: `.accordion_accordion` with cards exists
72+
- Only one mode activates per page
73+
74+
6275
**For Tab-Based Filtering (alternative to checkboxes/sliders):**
6376
- `.propsync-tabs` → Container for tab elements
6477
- Automatically generates tabs based on available apartment types
@@ -126,6 +139,75 @@ When `.propsync-tabs` is present on the page, the script automatically generates
126139
</div>
127140
```
128141

142+
### Accordion Mode HTML Structure (List Page C)
143+
144+
**Minimum Required Structure:**
145+
```html
146+
<!-- Template accordion with all cards inside -->
147+
<div class="accordion_accordion">
148+
<div class="accordion_question">
149+
<div class="floor-plan-container">
150+
<div class="accordion_left-wrapper">
151+
<div class="floor-plan_type-2">
152+
<div class="bedroom-text">{{floor_type}}</div>
153+
</div>
154+
<div class="floor-plan_square-feet">
155+
<div class="floorplan-accordian-text">
156+
Starting at {{starting_price}} -- Number of {{floor_type}} Floorplans
157+
</div>
158+
</div>
159+
</div>
160+
<div class="accordion_icon-wrapper">
161+
<div>+</div>
162+
</div>
163+
</div>
164+
</div>
165+
<div class="accordion_answer">
166+
<!-- Cards can go directly here -->
167+
<div class="card-wrapper">
168+
<div class="bedroom-card-value">2</div>
169+
<div class="price-min-card-value">575</div>
170+
<!-- ... more card details ... -->
171+
</div>
172+
<div class="card-wrapper">
173+
<div class="bedroom-card-value">3</div>
174+
<div class="price-min-card-value">495</div>
175+
<!-- ... more card details ... -->
176+
</div>
177+
<!-- More cards... -->
178+
</div>
179+
</div>
180+
```
181+
182+
**Or with Optional Container:**
183+
```html
184+
<div class="accordion_accordion">
185+
<div class="accordion_question">
186+
<!-- ... same as above ... -->
187+
</div>
188+
<div class="accordion_answer">
189+
<!-- Optional: wrap cards in a collection list -->
190+
<div class="floorplan-collection-list">
191+
<div class="card-wrapper">
192+
<div class="bedroom-card-value">2</div>
193+
<div class="price-min-card-value">575</div>
194+
<!-- ... more card details ... -->
195+
</div>
196+
<!-- More cards... -->
197+
</div>
198+
</div>
199+
</div>
200+
```
201+
202+
**What the script does:**
203+
1. Finds the template `.accordion_accordion` with mixed cards inside
204+
2. Groups cards by bedroom type (2BR, 3BR, 4BR, etc.)
205+
3. Clones the template for each bedroom type
206+
4. Replaces `{{floor_type}}` and `{{starting_price}}` in each clone
207+
5. Distributes cards into their respective accordion clones
208+
6. Hides the original template
209+
7. Inserts cloned accordions sorted by bedroom count (ascending)
210+
129211
## 🔄 Workflow
130212

131213
### For Developers
@@ -238,10 +320,27 @@ When tab filtering activates, you'll see:
238320

239321
## 🎯 Filtering Modes Summary
240322

241-
The script supports three filtering modes:
323+
The script supports four filtering modes:
242324

325+
### List Pages A & B - Checkbox/Slider Filtering
243326
1. **Standard Filtering** (with `.button-filter`): Users click filter button to apply changes
244327
2. **Auto-Submit Filtering** (without `.button-filter`): Filters apply automatically on interaction
245-
3. **Tab Filtering** (with `.propsync-tabs`): Tab-based filtering replaces checkbox/slider system
246328

247-
**Important:** Tab filtering and checkbox/slider filtering are mutually exclusive. If `.propsync-tabs` is present, only tab filtering will be active.
329+
### Alternative Filtering Modes
330+
3. **Tab Filtering** (with `.propsync-tabs`):
331+
- Tab-based filtering that replaces checkbox/slider system
332+
- Automatically generates tabs based on available bedroom types
333+
- Creates "View All" and individual bedroom tabs
334+
335+
4. **Accordion Mode** (List Page C - with `.accordion_accordion`):
336+
- Groups floor plans by bedroom type into collapsible accordions
337+
- Clones template accordion for each bedroom type
338+
- Replaces `{{floor_type}}` and `{{starting_price}}` placeholders
339+
- Automatically sorts accordions by bedroom count (ascending)
340+
- Distributes cards into their respective accordions
341+
- Each accordion shows bedroom type, starting price, and floor plan count
342+
343+
**Important:**
344+
- Tab filtering and checkbox/slider filtering are mutually exclusive
345+
- Accordion mode only affects cards inside `.accordion_component`
346+
- Each page should use only one filtering approach

0 commit comments

Comments
 (0)