Sort-by order dropdown, changing an option faultly functions

Technical Q&A

Topic summary

Goal: replace the collection sort option from created-(asc/desc) to published-(asc/desc) in the Prestige theme and hide some other sort options.

Attempt: edited theme.js to intercept onSortChange and rewrite created-ascending to published-ascending. The page appeared to reflect the desired sort, but introduced a UI issue: after choosing the modified option, the next selected option would not apply until a third option was chosen.

Clarification: Shopify only supports these sort_by values: manual, best-selling, title-ascending/descending, price-ascending/descending, created-ascending/descending. There is no published-ascending/descending. When an unrecognized sort_by is used, Shopify falls back to the collection’s default sort order.

Outcome: Native replacement with published-based sorting is not possible. To sort by publish date, a third-party sorting/filter app or using the Storefront API is required.

Status: Resolved. OP notes they currently use an app (Advanced Collections) for publish-date sorting but it has become slow; they will either keep it or find an alternative.

Summarized with AI on December 25. AI used: gpt-5.
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