1

Can javascript help me change the default sort order for an ecommerce category page? I'm running an a/b-test, and in the variation1 I'd like to have the sorting option "Newest" as the page default instead of "Most Popular". What kind of Javascript would change the sort order when the page is loaded?

The select ID's are as follows, currently the "Most Popular" is the default:

<select id="all-sort" class="ordering-select " name="sortAllProducts">
<option value="name.asc">Name (asc)</option>
<option value="name.desc">Name (desc(</option>
<option value="discountedPrice.asc">Min Price</option>
<option value="discountedPrice.desc">High Price</option>
<option value="lastStatusChange.desc">Newest</option>
<option value="viewCount.desc" selected="selected">Most Popular</option>
</select>

I tried changing the html-code (selected="selected") from Most popular to the "Newest" option using the the a/b-testing tool (visual website editor), but it didn't work, Most popular was still loaded as default. I think a Javascript is needed to load the code-change in the a/b-testing tool overriding the current default?

I'd really appreciate help, and I'm very sorry if this is an silly question, that has been answered a million times :/

I also tried looking for solutions and found couple of similar questions, but those unfortunately didn't give me the answer. I'm not very tech savy.

Javascript to sort contents of select element How to show <Select > in sorted order (this was very close, but I didn't get it working).

Thanks!

Community
  • 1
  • 1
user2956220
  • 11
  • 1
  • If you're just trying to change the default selected option in JavaScript, there are a lot of answers and explanations at http://stackoverflow.com/questions/7373058/how-to-change-the-selected-option-of-html-select-element – Brian Hoover Nov 06 '14 at 12:56
  • Try: `$("#all-sort")[0].selectedIndex = 4;` – Hackerman Nov 06 '14 at 12:56
  • Thank you for your replys! Unfortunately when I tried your solution Robert, it changed the sort menu default text to the chosen element, but it didn't reorder the product listing itself. Any ideas? Brian, I also tried the different options from the link you pasted, but the results were the same, the actual product order didn't change, only the title of the sort menu. – – user2956220 Nov 18 '14 at 11:10
  • Do you have any frameworks (like angular/react, etc.) or is it just vanilla JS and/or jQuery? – jsNovice Mar 08 '17 at 06:14

1 Answers1

0

Try:

$(function(){
  $("#all-sort")[0].selectedIndex = 4;
});

Working fiddle: http://jsfiddle.net/fyL2efom/

Hackerman
  • 12,139
  • 2
  • 34
  • 45
  • Thank you for your replys! Unfortunately when I tried your solution Robert, it changed the sort menu default text to the chosen element, but it didn't reorder the product listing itself on the page. Any ideas? The page in question is https://www.mso.fi/kauppias/aukia.fi . Brian, I also tried the different options from the link you pasted, but the results were the same, the actual product order didn't change, only the title of the sort menu. – user2956220 Nov 20 '14 at 07:04