Custom Dropdown Taking a While to Load Foxycart

Design help Custom code
1

Hi all,

I’m currently working on an ecommerce site that uses Foxycart.

I’ve added a custom dropdown for product options using Nice Select JS but it’s taking a few seconds to load on the page. I’m loading the JS file in the first in the header.

Any thoughts?

Site is here: http://lewesfc.webflow.io/product/example-beanie

Nice Select is here: jQuery Nice Select

cc @foxy

2

Have you tried contacting Foxy’s support team? They are very responsive.

3

I suppose it’s not really a Foxy issue, more a general JS code issue as it’s not a component they supply.

I’m open to other UI Kit solutions

4

Hey @CooperX.
Sorry you’re running into loading issues. Do you have a link to a product with multiple options? We’ll take a look.

Thanks,
Josh

5

Thanks Josh!

http://lewesfc.webflow.io/product/example-underlayer

6

No problem at all. It’s loading super quick for me: Screen Capture on 2017-05-24 at 16-43-38.gif - Droplr

7

Hey Josh,

I’m referring to the page load - I seem to be getting a few seconds before the options load… Not sure if it’s how Nice Select is written. I’m not a JS ninja unfortunately.

8

Ah gotcha. Can you test without Nice Select and see if it still happens?

Thanks,
Josh

9

The whole page loads fine. It’s not a problem with Foxy cart itself but I suppose nice select. Was looking for JS help

10

Is there another custom dropdown you could recommend?

11

Hey @CooperX.
Ok cool. I just wanted to make sure it wasn’t anything Foxy related, and if it was, I was going to dig in. As far as styling selects go, a quick Google search will give you lots of options.

That said, have you tried piggy backing on Webflow’s default select styling and then adding your own in the Designer. If you add the class “w-select” (instead of w-input) to your select element, that will give you Webflow’s default overrides that create a pretty consistent experience for users. Hope this helps some.

Thanks,
Josh

12

Hey Josh,

Haha no, Foxy is working out great so far.

I managed to work out the issue. It was because I was placing my css reset and css styles for Nice Select in to the header itself.

I’ve now created them as separate files and hosted them in my dropbox, then created links to the stylesheets in the header.

That’s fixed the loading issue!

13

@CooperX
Glad to hear you got it fixed. Let us know if you need anything.

Thanks,
Josh

14

Hi @CooperX, I’m trying to achieve the same checkout page that you did in the screencast.

In particular, i’m trying to achieve 3 things.

  1. Have a quantity adjustment field before submitting to cart (where foxy will pick up the same quantity)

  2. Have a dropdown for color variants for the product (similar to sizing)

  3. Have Foxy pick everything up in the order form and submit to the cart

I see you mentioned NiceSelect but I’m a designer only (designing for my own site) and I have very limited coding skills. How difficult would you say it would be to implement something like that? And would you say there is an easier option vs Nice Select?

@foxy if you know how best I am able to implement these inside Webflow and tie it up with Foxy it would be bloody awesome.

Right now my only option that I’m having users go through is click on Add to Cart then amend the quantity there in the minicart on the right side when Foxy pops up. (I have no current solution for variants within same parent SKU)

15

Hi @spencerj
I just responded to your private message with more info. For anyone else wondering how to add a quantity field and dynamic product variants, please reach out and we’ll send more info.

Thanks,
Josh

16

Hey @foxy, I too am trying to build a custom quantity selector, styled dropdown and styled radio buttons. Actually, here basically this is what I’m trying to do. Any help or links to live Webflow preview examples of how others did it are much appreciated!

07%20PM
07%20PM802×176 7.4 KB

(PS I haven’t started building it in Webflow yet which is why I didn’t include a preview link to my Webflow project.)

17

Hi @jonreese.
Thank you for getting in touch. Here is a link to a demo: foxy-plus-minus-quantity-field.webflow.io and the read-only link can be found here: https://preview.webflow.com/preview/foxy-plus-minus-quantity-field?utm_source=foxy-plus-minus-quantity-field&preview=509793e3a8b0714f67c105d17418902f

Let us know once you get to where you start integrating Foxy and we can help you every step of the way.

Thanks,
Josh

18

This is fantastic. Thank you so much Josh!

Jon Reese | 214.868.8777

19

Hey Jon.
You are very welcome!

Josh