Customize shipping (dropdown list select)

Ask the community
,
1

Hi!
I have experience with javascript, but new to Wix.

I would like to add an extra dropdown list to one of the shipping methods (regions). This will be a list of available predefined destinations (parcel machine).

The chosen destination will have to be saved to the order.

As a first step it is ok to hardcode the destination values. Next step is to fetch these from external api.

I have developer tools enabled in Wix Website Editor. Cannot find a proper place where to put this code.

Thanks!

2

Hello

you can add a dropdown to your editor, then set the its options using code, on dropdown change you can get the value selected and save it.

$w("#myDropdown").options = [
  {"label": "Who's on first!", "value": "first"},
  {"label": "What's on second", "value": "second"},
  {"label": "I Don't Know is on third", "value": "third"}
];

use fetch to get the API data -here

import {fetch} from 'wix-fetch';

// ...

fetch("https://exchangeratesapi.io/api/latest", {method: "get"})
  .then( (httpResponse) => {
    if (httpResponse.ok) {
      return httpResponse.json();
    } else {
      return Promise.reject("Fetch did not succeed");
    }
  } )
  .then(json => console.log(json.rates["USD"]))
  .catch(err => console.log(err));

you code should be inserted in the home page code section on your editor

Best
Massa

3

Thanks for the reply!

About home page code section - how can I make sure this dropdown is only present for one of the shipping regions? Also pass this information to be included with order details?

4

@indrektamming

I’m not sure i well understand your question, however you can keep the dropdown hidden on load and add if statement to show it only on that shipping region, if that’s the case.

For the second part,where you get the order details from ?

5

@massasalah18 Ok, this is the scenario:

  1. Customer has a cart with items
  2. Customer clicks on CHECKOUT
  3. There will be
    3.1 E-mail
    3.2 Address
    3.3 The Dropdown (A place to choose destination) + Phone number
    3.4 …payment etc.

How to implement 3.3? Where to put this code?

" add if statement to show it only on that shipping region " can you explain more?

6

Hello @Indrek Tamming , did you manage to fix it? I have the same problem :frowning:

7

Hello @indrektamming @agnemac97 also interested if you were able to create this dropdown functionality related to shipping options?

8

Hi, did anyone get a solution?

9

I too would like to know!