GolfBagWarehouse.com E-Commerce Website
Custom magento e-commerce website for Las Vegas Golf Bag & Golf Accessory E-tailer golfbagwarehouse.com.
Custom Features:
- Per-Item Shipping
- Free Shipping (per item)
- Custom Color Switcher for Configurable Products & Available Colors Preview Swatches
- Custom “On Sale” Tag in Category & Product Detail Page
- Custom “New” Image & Label for New Products
- Label Brands Carousel (Home Page)
- Automatic Brand Logo Display on Product Detail Page
- Automatic Free Shipping Image on Product Detail Page
- Custom Display for New Products on Home Page
- Custom On-Sale / Specials Landing Page
- Custom Menu with Option to Display Ads & Banners
Before:
After:
About GolfBagWarehouse.com:
GolfBagWarehouse.com – golfing’s premier website for viewing, comparing and purchasing quality golf bags, golf travel bags and related golf equipment – from name brand manufacturers including Bag Boy, Bennington, Burton, Callaway, Datrek, Nike, Ogio, SKB, TaylorMade and more.
GolfbagWarehouse.com Custom Features / Custom Magento Development
Per Item Shipping Rates/Free Shipping
Integration of the per-item shipping presented a challenge on more than 1 level:
– First, magento does not natively support per-product fixed shipping rates (only the value given in the configuration’s
Flat Rate – if enabled)
– Second, Free Shipping must only apply to orders within the Continental US
We solved it by:
– Creating new attributes (Free Shipping – Yes/No, Shipping for lower 48, and Shipping to Alaska & Hawaii)
– Creating a Shopping Cart Rule checking for the “Free Shipping” Attribute and applying the Free Shipping Discount to the matching products
– Creating a modified Carrier file in magento’s local Shipping Model which applies the newly created attribute’s (Lower 48 or Alaska/Hawaii) value if Free Shipping does not apply.
Custom Color Switcher & Available Color Swatches
Golf bag manufacturers are creative individuals – at least when it comes to inventing custom colors for their products.
Everything from “Acid” to “Zebra”, from “Bluebinski” to “Swan/White Argyle” and hundreds of others are the selections available.
Theoretically, we could simple list all these options in an endless list of colors, but let’s be honest — do customers really search for them or even know about them? Would you have known that “Acid” is.. well.. best described as “lime green”?
We wanted to make the color selection process easy and error-proof for our client’s website, the manufacturers and – of course – the users.
The implementation was a multi-step process, and we achieved it by:
– Creating a new attribute as the base for Configurable Products
– Importing the list of available color combinations via a shell script to this attribute
– Linking the Associated Product’s image via the image label to a “regular” color (pre-defined list).
– Modifying the code of the product detail’s template to check for the image’s label and finding the associated “custom color” Super-Attribute
– Creating a little JavaScript loading the images into an array
– Modifying the Configurable Product’s JavaScript to adjust the image preview’s display matching the selected color from the Options drop-down
Brands Carousel / Home Page
The majority of Magento’s JavaScripts use Prototype – and the majority of creative UI elements use jQuery. Making them play well together presents a unique challenge, ans imply loading a script on every page (including Product Detail Pages or the one-page-checkout page can have very unusual – and very undesirable – effects.
The Brands Carousel on the Homepage is a Static Block, which allows easy changes and modifications.
Color Swatches:
Color Switcher
Shipping Options
Free Shipping Image
On Sale Image
Stand Bags Before:
Stand Bags After:
Product Detail Page Before:
Product Detail Page After:
Shopping Cart Before:
Shopping Cart After:
Custom Golf Bags Before:
Custom Golf Bags After:
Related Posts
Internet Merchant Account Requirements
40 Days ’till CES 2019: My Top 3 Gadgets Of …
Landing Page Health-Wellness-Escape
The Importance of Professional Product Images for …
[easy-social-share buttons="facebook,twitter,linkedin" counters=1 counter_pos="rightm" total_counter_pos="none" hide_names="yes"]