Is it possible to change the order that custom shipping methods are displayed in? We currently have collection displayed at the top which we would like moved below the other shipping methods.
1 Like
Hi @nigelb,
Unfortunately, this isn’t possible at the moment.
That said, I’ll see if we can make our shipping-rates-list overridable. This would allow the shipping methods to be sorted through our customization feature.
I’ll make sure to report back with an example if this becomes available!
2 Likes
Thanks @Michael that would be handy if it could be made customisable. I’ll let the shop admin know it isn’t possible to do at the moment. Apologies for not replying sooner.
best wishes,
Nigel
We really need this customisation too as we have an option for customers to collect and this is selected by default. Customers are not selecting the correct shipping option and we have to contact them and ask them to pay the correct shipping rate as they did not intend to collect their order.
How far away would this customisation be?
I’m also looking for the order of shipping rates to be customisable. Customers are incorrectly selecting Collect because it is the default rate.
Hello! Happy to say this was included in the release of the 3.3.1.
You’ll be able to override the shipping-rates-list component to either sort or filter any of the shipping methods that would usually display in the cart.
For instance, here’s how to filter the shipping methods by cost (the changes occur in the v-for attribute):
<div hidden id="snipcart" data-api-key="<API_KEY>">
<shipping-rates-list>
<component class="snipcart-shipping-rates-list" :is="tag" v-if="!loading">
<shipping-rates-list-item
v-for="rate in rates.slice().sort((a, b) => b.cost - a.cost)"
:key="rate.slug"
:rate="rate"
:class="{'snipcart-shipping-rates-list-item--highlight': selectedRate == rate.slug}">
</shipping-rates-list-item>
</component>
</shipping-rates-list>
</div>
You’ll find a list of the available properties on the rate item in this section of the documenation.
Hi @Michael !
We’ve integrated Snipcart into a Webflow Project (kindel.webflow.io), and we have some problems with the order of custom shipping methods. There are 2 shipping methods: 1. Local Shipping = 0,00 cost ; 2. National Shipping = 20,00 Lei (our romanian currency). At the moment the first method listed is the Local one with 0,00 cost, but we want to switch them.
We’ve followed the above documentation, but it doesn’t work. Could anyone help us please?
Hi @Michael,
I’ve also tried your solution and it does not work for me either. We’ve created a Snipcart Templates.html page to store our customisations to the cart which has worked for adding things like adding the Phone Number input field. I’ve tried adding the code above to this same file and it does not seem to make any change. Any help would really be appreciated.
AndyK
We updated the example above by adding a .slice() before the .sort() as sort was mutating the original array and causing an infinite loop. Slice returns a copy of rates thus fixing the issue.
Here is a working example: Sorting shipping rates - CodeSandbox
3 Likes
Hey @AndyKnz,
The sort function by default works with strings if you omit the compare function parameter. But in this case, you want to sort based on an object’s property (rate.description) so you need a bit more code:
rates.sort(function(a, b) {
var stringA = a.description.toUpperCase(); // ignore upper and lowercase
var stringB = b.description.toUpperCase(); // ignore upper and lowercase
if (stringA < stringB) {
return -1;
}
if (stringA > stringB) {
return 1;
}
// strings are equal
return 0;
});
This example was taken directly from MDN, which you can consult for more information: Array.prototype.sort() - JavaScript | MDN
Hi @dominic…the order works great now.
Bellow you can see a screenshot of our custom shipping methods:
The problem is that regardless of the order we create them in the admin side…the free shipping is always preselected in the checkout. We would like to have the other one selected by default.
I see that in that snipped there is that line with :class="{'snipcart-shipping-rates-list-item--highlight': selectedRate == rate.slug}" so I supose what I’m asking is how can I set the default value for the selectedRate variable.
Thank you.
Hey @webhiver,
It is not something that is doable reliably as of now. There is the setShippingInformation method that can be used to select a new method, but the problem is how to know when to do it.
It’s something that we are aware of and will keep in mind when improving our SDK. In the meantime, it can be a good idea to add this to the feature request section of our support forum.
Cheers!