Sort-by order dropdown, changing an option faultly functions

Technical Q&A
1

Hi,

Theme: Prestige

web: https://sartoriale.com

I’ve been trying to change an option in the ‘sort-by’ list on the collection page. I ran across a lot of solutions, mentioning the files like collection-template.liquid but I haven’t seem to own such a file.

I wanted to change created-(a/de)scending to published-(a/de)scending since modifying the link directly in the browser seems to work fine.

(I also hid a few options, including date descending, so I don’t work with that either, discovered 2 ways, finally used the theme.css file for it)

I found the theme.js file and in the code

line 2130

onSortChange_fn = function(event) {
  const url = new URL(window.location.href);
  url.searchParams.set("sort_by", event.detail.value);
  url.searchParams.delete("page");
  url.searchParams.set("section_id", this.getAttribute("section-id"));
  this.dispatchEvent(new CustomEvent("facet:update", {
    bubbles: true,
    detail: {
      url
    }
  }));
};

used an if branch to manually test and change the parameter:

onSortChange_fn = function(event) {
  const url = new URL(window.location.href);
  var event_detail_value = event.detail.value
  if (event_detail_value === "created-ascending") {
    event_detail_value = "published-ascending")
  }
  url.searchParams.set("sort_by", event_detail_value);
  url.searchParams.delete("page");
  url.searchParams.set("section_id", this.getAttribute("section-id"));
  this.dispatchEvent(new CustomEvent("facet:update", {
    bubbles: true,
    detail: {
      url
    }
  }));
};

after the modification, it seemed to work, displayed the desired content, but whenever I change to the modified option, the next selected option cannot be selected unless a 3rd option is selected.

so like

3 options A B C (A is modified):

Select A (loads in A)
Select B (Nothing happens, even after several time or clicks)
Select C (loads in C)

OR

Select A (loads in A)
Select C (Nothing happens, even after several time or clicks)
Select B (loads in B)

And it is the same with all the options, the one selected after the modified one, cannot be selected anymore, unless I select a 3rd one.

I would like to get some help on this issue, or a way to achieve my goal in a separate way, if possible.

Thanks in advance!

2

Hmm. I was under impression that the only sort options are these:

[“manual”,“best-selling”,“title-ascending”,“title-descending”,“price-ascending”,“price-descending”,“created-ascending”,“created-descending”]

List of GraphQL equivalents here: https://shopify.dev/docs/api/admin-graphql/2024-04/enums/CollectionSortOrder

Have there been any change to add “published-ascending”, “published-descending” options?

Note that when sort_by URL param is unrecognized it usees the default sort order, the one selected when collection was created.

I believe what you want is not possible without 3rd-party filter and sort app or maybe using the Storefront API..

1 Like
3

It seems that you are right about it, we have an application under Advanced Collections option that does sort collections based on publish date, but since it seems to operate slower than before, we’re considering removing it, then it seems we need to deal with it or find another app for the job.

Thanks for your Answer!

1 Like