Gellum Delivery Calculator for WooCommerce
| 开发者 |
gellum
venywest |
|---|---|
| 更新时间 | 2025年6月1日 15:34 |
| 捐献地址: | 去捐款 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 6.8 |
| 版权: | GPL v2 or later |
| 版权网址: | 版权信息 |
详情介绍:
https://www.youtube.com/watch?v=RXEAB7D3Z5I
Calculate Shipping Costs by GPS Distance in WooCommerce with Interactive Map
Gellum Delivery Calculator transform your WooCommerce store's local delivery experience. This plugin offers a robust and user-friendly way to calculate shipping costs based on the precise GPS distance from your store to the customer's location. It goes beyond simple calculations by integrating an interactive Google Map directly into your cart or checkout process. Customers can easily pinpoint their exact delivery location on the map, or allow their browser to attempt automatic GPS detection for an even quicker start. You define your operational reach by drawing or uploading a GeoJSON boundary, ensuring that rates are only offered within your designated service area. The plugin visually displays this area on the map, providing clear feedback to the customer. The standout feature is the integration of Google Maps Reverse Geocoding. When a customer selects or moves their pin on the map:
- The plugin instantly fetches detailed address information via the Google Geocoding API.
- It identifies the Google Plus Code, City, State/Province, Postal Code, and Country. This streamlines the checkout process, reduces typing errors, and enhances the overall user experience by leveraging WooCommerce's native checkout update mechanisms. It's particularly useful for areas where traditional street addresses might be less precise or for customers who prefer the simplicity of dropping a pin.
- Interactive Google Map: Customers visually select their delivery location.
- GPS Distance Calculation: Uses the Haversine formula for accurate distance measurement.
- GeoJSON Delivery Area: Define precise service zones using GeoJSON (Polygon/MultiPolygon support) and visually display them.
- Reverse Geocoding: Fetches Plus Codes, City, State, Postcode, and Country from a map point.
- Automatic Address Field Updates: Populates WooCommerce Billing/Shipping fields (Address 1, City, State, Postcode, Country) in real-time.
- Initial GPS Auto-Detection: Attempts to find the customer's current location via browser Geolocation API.
- Configurable Rate Structure: Set a base fee, define a maximum distance for that base fee, and add a per-kilometer cost for distances beyond that.
- Free Shipping Threshold: Offer free delivery for orders above a certain subtotal.
- Order Details Storage: Saves the customer's selected GPS coordinates (Latitude & Longitude) with each order for your records.
- Admin Order View: Displays the customer's GPS coordinates and a link to Google Maps directly on the order details page in the WordPress admin.
- HPOS Compatible: Works seamlessly with WooCommerce's High-Performance Order Storage.
- Shortcode Support: Easily place the map anywhere using the
[gellumdcw_map]shortcode. - Server-Side Validation: Includes checks during checkout to ensure the final delivery location is still within the valid GeoJSON area.
- Independent Configuration: Each subsite within your Multisite network can have its own unique Gellum Delivery Calculator settings. This includes distinct Google Maps API Keys, store locations (latitude and longitude), GeoJSON delivery areas, and pricing structures.
- Separate Data Handling: Customer sessions, cart data, and order details (including GPS coordinates saved with each order) are managed independently for each subsite, ensuring no data conflicts across your network.
- Seamless Integration: The plugin integrates smoothly with WooCommerce's standard shipping methods and checkout processes across individual subsites. Gellum Delivery Calculator is ideal for restaurants, local shops, and any business offering delivery services within a defined geographic area, providing both operational control and customer convenience.
安装:
- Download: Download the plugin .zip file.
- Upload: Go to your WordPress Dashboard > Plugins > Add New > Upload Plugin. Select the downloaded .zip file and click 'Install Now'.
- Activate: Once installed, click 'Activate Plugin'.
- Configure Shipping Zone:
- Go to WooCommerce > Settings > Shipping.
- Click 'Add shipping zone'. Give it a name (e.g., "Local Delivery Zone"). Assign regions if necessary (though Gellum uses its own GeoJSON).
- Click 'Add shipping method'. Select 'Gellum Delivery' from the dropdown and click 'Add shipping method'.
- Configure Gellum Delivery:
- Hover over 'Gellum Delivery' in your shipping zone and click 'Edit'.
- Crucially, enter your Google Maps API Key. Ensure you have enabled both the Maps JavaScript API and the Geocoding API in your Google Cloud Console for this key.
- Enter your Store Latitude and Store Longitude. You can find these using Google Maps.
- Set up your Base Shipping Rate, Max Distance for Base Rate, and Additional Rate per km.
- Define your Delivery Area GeoJSON. You can create this using a tool like geojson.io and paste the code here.
- Set a Minimum Order for Free Shipping if desired (set to 0 to disable).
- Click 'Save changes'.
- Add the Map:
- Edit your WooCommerce Cart or Checkout page (or any other page where you want the map).
- Add the
[gellumdcw_map]shortcode where you want the interactive map to appear. - Test: Place a test order, select a location on the map, and verify that the shipping costs and address fields update correctly.
常见问题:
How do I get a Google Maps API Key?
You need to create a project in the Google Cloud Console, generate an API key, and enable the "Maps JavaScript API" and "Geocoding API" for that key. Remember to restrict your key for security (e.g., by HTTP referrers).
How do I create the GeoJSON for my delivery area?
Use a free online tool like geojson.io. Use the drawing tools (Polygon) to outline your delivery area on the map. Copy the generated GeoJSON code from the right-hand panel and paste it into the plugin settings. Ensure it's a valid GeoJSON FeatureCollection or Polygon/MultiPolygon.
Will it work with my theme's checkout page?
The plugin uses standard WooCommerce hooks and AJAX calls. It's designed to be compatible with most themes. The [gellumdcw_map] shortcode allows you to place the map flexibly. Some highly customized checkouts might require minor CSS adjustments.
Does it update both billing and shipping addresses?
Currently, the JavaScript focuses on updating the billing address fields. If your checkout uses separate shipping fields, you might need to adjust the gellumdcw-frontend.js or implement a filter if you need both updated automatically.
Can I customize the map's appearance?
Yes, there are a couple of ways to customize the map's appearance:
- CSS Styling: The included
gellumdcw-frontend.cssprovides basic styling for the map container and related elements. You can override these CSS styles in your theme'sstyle.cssfile or via the WordPress Customizer's "Additional CSS" section for a more integrated look with your site. This primarily affects the elements around the map (like the info text, error messages). - Google Cloud Map Styling (via Map ID): For advanced customization of the map itself (colors of roads, water, points of interest, density of features, etc.), the plugin now supports Google Maps Cloud-based map styling.
- You need to create a Map Style in the Google Cloud Console under "Maps Platform" > "Map Styles".
- Then, create a Map ID under "Maps Platform" > "Map IDs", ensuring it's configured for "JavaScript" and "Vector" maps.
- Associate your custom Map Style with this Map ID within the Map ID's settings in the Google Cloud Console.
- Finally, enter this Map ID into the "Google Maps Map ID" field in the Gellum Delivery Calculator settings in WooCommerce (WooCommerce > Settings > Shipping > [Your Zone] > Gellum Delivery).
- When a valid Map ID is provided, the plugin will instruct Google Maps to use the associated cloud-based style, giving you rich visual control over the map's look and feel directly from the Google Cloud Console.
- GeoJSON Delivery Area Styling: The appearance of the delivery area (the polygon drawn on the map) can also be customized.
- Currently, the plugin styles it as an outline (no fill).
- If you need to change the color, stroke weight, or opacity of this delivery area outline, you would need to modify the
self.map.data.setStyle({…})section within thedrawDeliveryAreafunction in theassets/js/gellumdcw-frontend.jsfile.
Multisite Compatibility
Gellum Delivery Calculator is designed to be fully compatible with WordPress Multisite installations. To configure: Simply activate the plugin on each subsite where you intend to offer Gellum Delivery, and then set up its specific settings within the WooCommerce Shipping Zone configuration for that particular subsite.
更新日志:
1.0.7 (2025-05-30)
- Bug fix that prevented "View on Google Map" from being displayed within order management.
- Update: Only Address 1 si readonly when Gellum Delivery is selected.
- Updated gdc prefixes to gellumdcw.
- Updated [gdc_map] shortcode to [gellumdcw_map].
- Created gellum-delivery-calculator.pot within language.
- Feat: Add internal order note with customer GPS Google Maps link.
- Fix: Ensure geocoded address fields always update, overwriting previous values.
- Fix: Improve state/province dropdown selection by matching option text.
- Feat: Make Address 1 & City fields
readonlywhen Gellum Delivery is selected.
- Updated server-side PHP execution to JS for compatibility with HTTP Refer APIKey restrictions
- Improved security.
- Minor bug fixes.
- CSS and icon changes.
- Minor bug fixes.
- Improved security.
- Minor bug fixes.
- CSS updates.
- Descriptive text fixes.
- Update store icon.
- Robust Map Initialization: Improved JavaScript stability by ensuring latitude/longitude values are correctly parsed as numbers before being used by the Google Maps API, resolving potential map load failures.
- Advanced Marker Implementation: Updated map markers to use
google.maps.marker.AdvancedMarkerElementwhen a Google Maps Map ID is provided, addressing deprecation warnings forgoogle.maps.Marker. - Conditional Marker Logic: Implemented a fallback to the standard
google.maps.Markerif no Map ID is configured, ensuring the map remains functional even without advanced marker features. This includes conditionally loading themarkerlibrary. - Configurable Map ID: Added a new setting in the WooCommerce shipping method configuration for store owners to input their Google Maps Map ID, allowing for the use of cloud-based map styles and vector maps.
- GeoJSON Layer Click-Through: Resolved an issue where the GeoJSON delivery area overlay would intercept map clicks, preventing users from selecting a delivery location within the drawn area. Clicks now pass through to the map correctly.
- GeoJSON Styling Option: Modified the GeoJSON delivery area to display as an outline only (no fill) for clearer map interaction, by adjusting
fillOpacity. - Optimized Google Maps API Script Loading: Implemented
asyncanddeferattributes for the Google Maps API script tag via a WordPress filter, addressing performance warnings and improving page load behavior. - Enhanced Debugging & Error Handling: Added more console log messages and error handling in JavaScript for map initialization and GeoJSON processing to aid in troubleshooting.
- Initial release and subsequent bug fixes.
- Switched primary AJAX action to handle both reverse geocoding and Gellum cost calculation in a single call.
- Refined session handling and cart total recalculation logic, leveraging WooCommerce checkout fragments and triggers.
- Adjusted
is_availablelogic to be more permissive, relying primarily oncalculate_shipping(based on session data) to add/remove the rate dynamically. - Improved GeoJSON handling and validation in both PHP and JavaScript.
- Enhanced logging for easier debugging.
- Improved handling of Google Maps API loading and error messages.
- Added core features: Distance calculation, GeoJSON area, rate configuration, interactive map.
- Included
[gdc_map]shortcode. - Added server-side checkout validation.