DF Kit Car Online Store Progress

Adam

Administrator
Staff member
Over the past week and a half I've been able to spend a few hours each night working on the online store so it is finally showing some progress. Since there have been some questions about it, I figured I would share the details about how I'm going about updating the site to include a store.

For guys that don't want to read the wall of text below, the TLDR is that I have to update the kit order pages before creating the store. I've made some progress on updating the order pages but still have at least a week and a half to go before those pages are done and I can start on the store.

Today the kit order pages (where you select your kit configuration and options) are static. The options that appear on those pages are hard coded on the website. This means to add, remove or update an option I go into the code for that page and do whatever change needs to be done. If the option is something that is available on the street Goblin and the Goblin A/T, I have to update the option on both pages. If I tossed a store up there that was designed the same way, I would then have 3 places to update the options. It was quick and easy to do this back when we started but it isn't sustainable.

So, the first step in creating a store is to update the kit order pages to dynamically load the options from the same source that the store will use. This source is Shopify.

Shopify is normally used to make the whole store (from the front end that the users see to the back end that only I would see) but I find it difficult to customize the front end to work for ordering the kits. You are only allowed so many variants on a product page so I can't make kit order pages with donor options, chassis length, chassis type, door bar style and all the other options. It is also tricky dealing with the full kit price vs the deposit price. For this reason I'm only using Shopify for the back end (storing the product data, processing payments and handling customer/order info).

Shopify makes it easy to add a new item, add a couple of photos, a description, price, variations and tag it as part of collection. The collections will be something like goblin-AT-options and every item added to the goblin-AT-options collection will automatically appear on the Goblin A/T order page.

For the past week and a half I've been figuring out how to integrate the Shopify data into a regular site. I found that the way to do this is to use the Shopify Javascript Buy SDK. There has been a steep learning curve with this product but I'm getting the hang of it. I've got the collection of items appearing on the kit order page including a photo, title, price and description. When I add something to the collection on Shopify it automatically appears on our site. It's pretty cool.

The next big hurdle is figuring out the checkout process. The kit order pages show your total kit price so you know what your kit costs as it is configured. It would be misleading if it showed you just the deposit price and you had no idea how much the kit cost with your selected configuration. So that's why we need to show the full price. However, when you go to checkout you just pay a deposit and not the full price. This means I need to have our page create a checkout that has a line item for the deposit at the deposit price and line items for all of your options at no charge. That way you only pay for the deposit up front and the database still gets a list of all of your options without you paying for all of the options up front.

Finishing up the kit checkout process and the final look and feel of the order pages will take at least another 1.5 weeks worth of nights.

Once I get the whole kit ordering process functioning I will be able to build the store. On paper the store is much easier than the kit order pages since the products don't require nearly as many variations and the price isn't broken up into a deposit + final payments.

At first there is a good chance it will just be a table of thumbnails and item names for every item we offer. When you click on one it'll take you to the page for that item and you'll be able to add it to cart. Eventually I'd like to group the items base on various criteria so that it is easy to narrow down the options you want to see but I'm looking for the minimum viable store at first.

Also, the first thumbnails of the products will definitely leave a bit to be desired until we can get some type of booth setup for taking high quality photos.

If you have any questions, please let me know.
 

Desert Sasqwatch

Goblin Guru
Adam, sounds like a lot of work up front, but will have benefits in the future if changes need to be made to the store pages. Look forward to seeing the new ordering page when it is finished - my kit order is still several weeks out. Great work and thanks for the improvements.
 

BaltimoreHokie

Goblin Guru
I can easily wait the 1.5 weeks but, I actually didn't know you guys offered a safety glass windshield and a full kit for parking brakes until I started searching the forum for a solution.

What else do you guys offer that is not on the page currently?

SS Solid Trans mounts
Windshield
BC Coilovers
Gauge Button Kit
Seat Rails
Stainless Brake Lines
Parking Brake Kit

Is that it?
 

Adam

Administrator
Staff member
I can easily wait the 1.5 weeks but, I actually didn't know you guys offered a safety glass windshield and a full kit for parking brakes until I started searching the forum for a solution.

What else do you guys offer that is not on the page currently?

SS Solid Trans mounts
Windshield
BC Coilovers
Gauge Button Kit
Seat Rails
Stainless Brake Lines
Parking Brake Kit

Is that it?
Some of the others are:
  • Boost gauge mount (bare or powder coated, only for the dial gauge not the LCD system)
  • Heat exchanger duct kit
  • Bearing hubs (base/SC or TC, 4x100, 5x110 or drilled to 5x114.3)
  • ASA caps for the front bearing hubs (to replace the speed sensor and shield the bearing)
  • Wiring harness service
  • Boss Audio speaker clamp extensions (it would be nice to just offer the whole bluetooth stereo kit but we'll just do the extensions first)
  • Fiberglass footwell cover (this is a new option that is just about ready to go, we'll announce it on the forum soon. It covers the leg area of the cockpit to keep radiator heat, water and debris from entering through the front of the car)
  • New F23 transmissions (we think we will be able to get more very soon)
  • Other seat and harness options (still from Corbeau but different from the FX1 and 5 point harness)
 
Last edited:

G Atsma

Goblin Guru
Glad to see this coming along! I'm very visual, and to see what's in the store will go a long way to visualizing what can be done to a Goblin to make it California street legal.
 

Adam

Administrator
Staff member
Yesterday I finished the single order page for the Goblin and Goblin A/T. It is quite a bit different from the old order pages. It includes much more information about what you are ordering and includes graphics and photos to make it easier to see what you are choosing between when you are selecting options. I'm hoping I didn't add too much info and make the page look intimidating.

Tonight I think I'm going to push the order page to the online test site so that you guys can access it and test it out before it goes live.

One big portion of the order page was the Optional Equipment section. This uses the same back-end as what the actual store will use. Since I've got it up and running on the order page I should be able to move right along as I make the store. I'd like to launch the store this coming weekend but we'll see how my nights go. (We've got a lot of kits going out the next few weeks so

Once I get the store working properly I'll then have to create each product. This includes the title, price, description and a photo or two. I've only got some dummy products I've been working with so far.
 

Adam

Administrator
Staff member
Here's the new order page for the original Goblin:
http://test.dfkitcar.com/order.php?type=og

and for the Goblin A/T:
http://test.dfkitcar.com/order.php?type=at

You'll see that the Optional Equipment section is a little skinny for both kit types and the "more info" descriptions might not make sense. I'll be filling those sections in later this week with more options with better photos and descriptions.

If you are willing to test it out for me please poke around both order pages. I'd appreciate feedback about how it looks and functions. Watch for typos and other errors. I'd also like to know how it works on various devices (I've only got my desktop, laptop and Android phone).

Other than the order pages, the test site is pretty much identical to the live site. However, if you start navigating around you'll find that forum link doesn't work (the forum is only available on the live site). You might find other differences too.
 

G Atsma

Goblin Guru
I like the new format! Yeah I expected the "Optional Equipment" section to be a work in progress. I AM interested in seeing the full gamut of goodies that will be in that section when the time comes. I understand what's there now barely scratches the surface!
 

Karter2026

Goblin Guru
Worked good for me using Chrome as the browser. I know it is a work in progress my only suggestion would be. Make a section to just order the optional items. For those people who have their kit and have seen something new or want add something as a after thought or need it for registration. I think it would prevent us from emailing or calling and bothering you and Impatiently waiting for an answer.
 

Tony

Well-Known Member
Worked good for me using Chrome as the browser. I know it is a work in progress my only suggestion would be. Make a section to just order the optional items. For those people who have their kit and have seen something new or want add something as a after thought or need it for registration. I think it would prevent us from emailing or calling and bothering you and Impatiently waiting for an answer.
That's the whole point of this thread - he's working on that, but the order page needed to be updated first.

If you are willing to test it out for me please poke around both order pages. I'd appreciate feedback about how it looks and functions. Watch for typos and other errors. I'd also like to know how it works on various devices (I've only got my desktop, laptop and Android phone).
The only things I see after a quick peruse are a couple updates needed to "more info" pop-ups in the Optional Equipment section. The Side Panels on the A/T have the description from the hood, and the Wide Rear Fenders on the standard say they fit up to 205 (same as front).
 
Top