[Facets] Update filter counts on filter selection #2988

patrickracicot · 2023-09-11T17:23:15Z

PR Summary:

We are currently working on allowing merchant to control the logical operator applied to tags and metafield list filters. This effectively means that merchant will now be able to change the logical operator for being OR to AND between filter values which now needs us to keep the count updated after the selection of a filter.

Why are these changes introduced?

Fixes https://github.com/Shopify/discovery-app/issues/3632

What approach did you take?

Lifted the current facets javascript logic to update the filter list with the result received from the section rendering API and ensure to keep the proper filter active.

Visual impact on existing themes

Counts inside a filter type will now be in-sync when changing a filter is selected or unselected.

Testing steps/scenarios

Install the 1P app Search & Discovery
Create a new filter using the tags filter type
Change the logical operator to AND
On the online store, apply the tags filter
Ensure that the counts on each filter are properly updated.

Recorded Demo

Demo links

Store
Editor

Checklist

Added PR summary for release notes
[-] Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
[-] Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
Followed theme code principles
[-] Linted with Theme Check
Tested on mobile
Tested on multiple browsers
Tested for accessibility

dan-menard

The code changes look good to me, but I don't have a ton of context on filtering. Two people that I think have good context in this area are @KaichenWang and @sofiamatulis... can one or both of you take a look?

sofiamatulis · 2023-09-18T17:49:21Z

assets/facets.js

@@ -120,7 +120,11 @@ class FacetFiltersForm extends HTMLElement {
    FacetFiltersForm.renderActiveFacets(parsedHTML);


Works well 👌 I have tested

no JS

Drawer

Vertical

Horizontal

Mobile

AND

OR

However, for the or I noticed this https://screenshot.click/18-40-amlj3-kzqcs.png

Is it expected?

The screenshot you linked has nothing wierd in it. The clause used between filter types (like product type and price) is always AND.

So youre saying if you have set up or in the theme, itll only work for filters in the same category?

Here the or works because its on the same category? https://screenshot.click/18-34-eas2g-t8nsy.png

Setting or or and is only for filter values under the same filter type. The operator between filter types is always AND. Source

Now the ability to change the operator isn't done through the theme itself, but rather through the 1P app, Search & Discovery.

sofiamatulis · 2023-09-20T13:41:22Z

assets/facets.js

+    if (countsToRender) {
+      const closestFilterElID = event.target.closest('.js-filter').id;
+      FacetFiltersForm.renderCounts(countsToRender, event.target.closest('.js-filter'));
+      FacetFiltersForm.renderDrawerCounts(countsToRender, document.getElementById(closestFilterElID));


Maybe im missing something 🤔 Why do we need to add renderDrawerCounts. Doesnt renderCounts account for drawer, vertical and horizontal? Shouldnt this be working currently?

No, the reason here is that the drawer display which was initially built for Mobile but that can now be applied in Desktop mode as well doesn't follow the same structure. So instead of complexifying the renderCounts, I've separated the logic to have single concerns for each structure.

But drawer desktop already existed before the introduction of and and or. Does that make sense?

I could merge the logic all under renderCounts, I don't have a strong opinion here, but it will make the function more complex.

Here is the logic in a single method --> 676e36ef34b48e7843df7a01ce5679a3a9387378
Code is also updated on the test store linked to the demo links.

I'll look into re-separating the functions in a follow-up work as I still have some changes coming in.

sofiamatulis · 2023-09-20T13:45:23Z

assets/facets.js

@@ -155,13 +159,39 @@ class FacetFiltersForm extends HTMLElement {

    if (sourceElement && targetElement) {
      target.querySelector('.facets__selected').outerHTML = source.querySelector('.facets__selected').outerHTML;
+
+      const targetWrapElement = target.querySelector('.facets-wrap');


I apologize if im missing context, but with this change, why do we need to re-render facets-wrap

It's the facets-wrap that actually contains the list of filter values. The code above facets__Selected is the X selected header inside the dropdown.

sofiamatulis

thanks for the detailed explanation 🙏 Id be in favour of reverting the last commit so the code looks simpler #2988 (comment)

* Update 1 translation file (Shopify#2997) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#3001) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Image_tag] Update to remove lazy loading and let it automatically decide the best loading strategy (Shopify#3002) * remove lazy loading where necessary to better performance * add fetch priority * [Facets] update filter counts on filter selection (Shopify#2988) * Correct CSS (Shopify#3003) * Check if there is compare_at_price (Shopify#3000) * Update 1 translation file (Shopify#3012) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Facets] fix mobile count update (Shopify#3018) * Update 1 translation file (Shopify#3043) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#3044) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Image with text] Add color scheme picker for section wrapper (Shopify#3016) * [Image with text] Add color scheme picker for section wrapper * address review comment about overlap and transparency * Refactor `quick-order-list.css` (Shopify#3006) * Fix Add to Cart error on page load/slower connections (Shopify#3008) * [Facets] dynamic header (Shopify#3048) * Add component-card.css to cart drawer (Shopify#3049) * [Refactoring] Replace loading spinner with snippet (Shopify#2996) * Change spinner for main-cart-items * Change spinner for cart-drawer * remove extra div and change classes * Replace spinner with snippet for pdp and fead prod * Remove unnecessary classes * Add comment for snippet * Change naming for files and css classes * Put back deleted elements * Remove unused classes * Put back loading-overlay for cases when no spinner * Chnage loading-overlay--error name * Minor change in CSS * Move loading-overlay styles to template-collection * Rename component-loading-overlay * Fix bug with overlay and spinner for facets * Remove component-loading-spinner import from files * Use spinner snippet for predictive search * Hide product count when loading for drawer filters * Address feedback. Clean-up. * Minor changes to address feedback * Fix spinner conflict with cart drawer * Address feedabck * Add missing whitespace for if tag * [Sliders] Regression fix. Apply CSS only when necessary in theme editor (Shopify#3070) * [Sliders] Regretion fix. Apply CSS only when necessary in theme editor * change of approach * add comment to explain CSS * Add visual representation for filters (Shopify#3045) * [Facets] update visual representation of facets operators (Shopify#3061) * [Collection template] Product grid color scheme picker (Shopify#3017) * [Collection template] Product grid color scheme picker] * move color setting up in the list * support gradient * [Cart] Add color picker on cart page and in general cart settings (Shopify#3021) * rebase final final * use the update for the loading spinner * add color picker for the cart drawer and cart popup * fix spacing issues on cart page * add gradient support * address review comments * adjust where the class is added. Fix gradient issue * isolation needed for shadow * add comment * Remove unnecessary isolate * use the isolate class instead * [Product] Add color scheme picker (Shopify#3015) * [Product] Add color scheme picker * support gradient * apply background color to be full width * address review comments: color scheme applied to quick add modal and lightbox modal * add color scheme to product availability drawer and move color settings up * fix color classes to work properly with gradients * Add support for gradient on modal * remove console log * [VisualDisplay] bump the active outline width (Shopify#3083) (Shopify#3091) * 12.0.0 Version Bump and release notes (Shopify#3092) * Update 1 translation file (Shopify#3093) * updated code to match new color scheme naming (Shopify#2801) * updated code to match new color scheme naming * removing additional background-1 after rebase * Fixed race condition for cart note updates (Shopify#3125) * [Facets] support dynamic facet lists (Shopify#3123) * Assign font family to input fields (Shopify#2871) * Price per item, Popover and global style bugs (Shopify#2851) * Fix cart submission on Quick Order List (Shopify#2868) * Social icons: Visual fixes (Shopify#2855) * Adjust spacing. * Facebook + Tumblr icon size adjustments. * Update social icon SVGs. * Tidy up new icon sizes again. * Resize icons. * Make spacing slightly smaller. * Make icons larger so they're more similar to the old sizes. * Remove padding to compensate for extra viewbox space. * Try a smaller Twitter icon. * Update snapchat icon. * Resize social links in menu drawer to 44x44 * replace translation string to have the translation visible (Shopify#2869) * B2B compare at price with price range (Shopify#2858) * Add sale badge and price-range for volume-pricing * Add compare_at price to PDP and Feat Prod. * Change opacity to 100% for price per item. * Update the logic * Hide price per item for unavailable variants. * Remove margin for dl. * Refactoring * Correct a mistake in liquid. * Change the JS logic back for updating price per item * Add compare at to prod card. Add style to compare at * Assign font family to input fields. * Update assets/base.css Co-authored-by: Kai <KaichenWang@users.noreply.github.com> * Use the theme's font style + weight in form elements. --------- Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: melissaperreault <melissa.perreault@shopify.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Kai <KaichenWang@users.noreply.github.com> * Update 1 translation file (Shopify#3155) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#3157) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#3158) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#3161) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 2 translation files (Shopify#3160) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Applied image shape and ratio to placeholder images (Shopify#2817) added classes and styles to get image shape and image ratio working added styling on portrait placeholders aligned placeholder when in potrait mode applying code review suggestions and removed image-ratio * [Visual Display] Display accurate filter colors when high contrast mode is enabled (Shopify#3165) * Improved country selectors (Shopify#3175) Original PR with review comments -> Shopify#3135 * Update inline quantity error styles. (Shopify#3150) * Update 1 translation file (Shopify#3177) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Variant Picker] Update settings copy (Shopify#3173) * Bring back the lighthouse-ci-action to v1 (Shopify#3181) This will make sure new releases are automatically used. Better for forks as well. * Changed slider to work on tablet for multicolumn (Shopify#3176) * Changed slider to work on tablet for multicolumn * Adjusted to prevent early cutoff on tablet * Adjusted Featured Collection placeholders to work with any number of desktop columns (Shopify#3182) * Adjusted featured collection placeholders to work with any number of desktop columns * [Variant Picker] Add swatch display type (Shopify#3180) * [VariantPicker] Unify variant selects and radios under new component * [VariantPicker] Add swatch settings * [VariantPicker] Move styles to dedicated CSS file * [Variant Picker] Update settings copy * [VariantPicker] Add swatch component * [VariantPicker] Add a swatch to selected dropdown option * [Variant Picker] Update disabled state * [Variant Picker] Swatch snippet * [Variant Picker] Swatch input snippet * [Variant Picker] Tweak swatch border colors * Update swatch border (Shopify#3184) * Update translations: merchant (Shopify#3178) * Update 1 translation file * Update 1 translation file * Update 2 translation files * Update 1 translation file --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Variant Picker] Ensure that swatches wrap correctly (Shopify#3185) * Focus search on country selector open and fix iOS bug (Shopify#3183) * Focus search on country selector open * Set stacking context * Prevent sticky header from hiding when country selector is open (Shopify#3188) * change to 100% (Shopify#3190) * [Variant Picker] Simplify swatch settings (Shopify#3189) * [Variant Picker] Simplify swatch settings * Update 7 translation files * Update 12 translation files * Update 1 translation file --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Escape filter label consistently (Shopify#3192) * Update 1 translation file (Shopify#3202) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Patrick Racicot <patrick.racicot@shopify.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Jason Addleman <jason.addleman@shopify.com> Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Louisa Goncharenko <93098869+lougoncharenko@users.noreply.github.com> Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: melissaperreault <melissa.perreault@shopify.com> Co-authored-by: Kai <KaichenWang@users.noreply.github.com> Co-authored-by: Alex Ilea <6627543+alisterdev@users.noreply.github.com> Co-authored-by: Abdulrahman Hamideh <abdulrahman.hamideh@shopify.com> Co-authored-by: CP Clermont <cp.clermont@shopify.com>

patrickracicot changed the title ~~Pracicot/filter value customization~~ [Facets] Update filter counts on filter selection Sep 11, 2023

github-actions bot added the cla-needed label Sep 13, 2023

patrickracicot force-pushed the pracicot/filter_value_customization branch from 7c3d3e9 to 0df9a2b Compare September 14, 2023 12:50

github-actions bot removed the cla-needed label Sep 14, 2023

patrickracicot force-pushed the pracicot/filter_value_customization branch from 0df9a2b to e8c457c Compare September 14, 2023 13:03

patrickracicot added Category: Enhancement New feature or request By: Shopify labels Sep 14, 2023

patrickracicot marked this pull request as ready for review September 14, 2023 13:04

dan-menard approved these changes Sep 14, 2023

View reviewed changes

sofiamatulis reviewed Sep 18, 2023

View reviewed changes

patrickracicot force-pushed the pracicot/filter_value_customization branch from e8c457c to 6231cd5 Compare September 19, 2023 19:08

sofiamatulis reviewed Sep 20, 2023

View reviewed changes

patrickracicot requested a review from sofiamatulis September 20, 2023 16:16

patrickracicot force-pushed the pracicot/filter_value_customization branch from d66077c to de06e92 Compare September 20, 2023 18:55

sofiamatulis approved these changes Sep 20, 2023

View reviewed changes

[Facets] update filter counts on filter selection

63c20e2

patrickracicot force-pushed the pracicot/filter_value_customization branch from de06e92 to 63c20e2 Compare September 20, 2023 19:25

patrickracicot merged commit 4dacca1 into main Sep 20, 2023

patrickracicot deleted the pracicot/filter_value_customization branch September 20, 2023 19:27

patrickracicot mentioned this pull request Sep 28, 2023

[Facets] fix mobile count update #3018

Merged

11 tasks

phapsidesGT pushed a commit to Gravytrain-UK/gt-shopify-dawn-theme that referenced this pull request Sep 3, 2024

[Facets] update filter counts on filter selection (Shopify#2988)

914549c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Facets] Update filter counts on filter selection #2988

[Facets] Update filter counts on filter selection #2988

patrickracicot commented Sep 11, 2023 •

edited

Loading

dan-menard left a comment

sofiamatulis Sep 18, 2023

patrickracicot Sep 18, 2023

sofiamatulis Sep 18, 2023

patrickracicot Sep 19, 2023

sofiamatulis Sep 20, 2023

patrickracicot Sep 20, 2023

sofiamatulis Sep 20, 2023

patrickracicot Sep 20, 2023

patrickracicot Sep 20, 2023 •

edited

Loading

patrickracicot Sep 20, 2023

sofiamatulis Sep 20, 2023 •

edited

Loading

patrickracicot Sep 20, 2023

sofiamatulis left a comment

		@@ -120,7 +120,11 @@ class FacetFiltersForm extends HTMLElement {
		FacetFiltersForm.renderActiveFacets(parsedHTML);

[Facets] Update filter counts on filter selection #2988

[Facets] Update filter counts on filter selection #2988

Conversation

patrickracicot commented Sep 11, 2023 • edited Loading

PR Summary:

Why are these changes introduced?

What approach did you take?

Visual impact on existing themes

Testing steps/scenarios

Demo links

Checklist

dan-menard left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patrickracicot Sep 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sofiamatulis Sep 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sofiamatulis left a comment

Choose a reason for hiding this comment

patrickracicot commented Sep 11, 2023 •

edited

Loading

patrickracicot Sep 20, 2023 •

edited

Loading

sofiamatulis Sep 20, 2023 •

edited

Loading