Using the Google Places API - Jumpseller
Create a Javascript code that autocomplete and hides fields on the checkout of your store. Make the checkout process better!
On this guide you will learn all of the available settings to customize the checkout process in your Admin Panel: Settings > Checkout.
Step | Description | URL Structure |
---|---|---|
Information | Contact Information and Shipping Address | /v2/information/success/unique_token |
Shipping | Shipping Method or Pickup Point Selection | /v2/shipping/success/unique_token |
Billing | Billing Address and Information | /v2/billing/success/unique_token |
Payment | Payment Method Selection | /v2/checkout/payment/unique_token |
Processing | Payment Gateway Process the transaction | External URL |
Success | Payment Confirmation or Instructions in case of Manual Payments | /v2/checkout/success/unique_token |
When a customer completes the Information, Shipping, Billing but not the Payment Step, his cart will be considered Abandoned after the time defined in “Expiration time for carts”.
If the customer reached the Processing step, an order will be created in Pending status, the order will be considered abandoned if the customer does not complete the payment, if the payment is rejected, the order will be considered canceled, not abandoned.
Data Retention policies are critical to ensuring local privacy regulations are being met. Customer Data will be removed from your store after the selected period of time.
The Privacy Policy legal page may include a reference to this setting.
What happens when a customer clicks on Add to cart. Choose between:
Cross-selling is one of the most effective methods of marketing. Offer related or complementary products to your customers.
Select products that the customer will view as recommended in the cart page.
Automate your Cross Selling process in your cart and emails based on purchasing patterns across sessions from repeat sales in our Advanced Plan.
If toggled, customers who don’t meet the requirements will not be able to initiate Checkout.
Item count will consider all units of products added to the cart.
Shipping estimations are always displayed in the Checkout process, some stores find value in showing these prices before the initiation of the checkout.
A calculator will be placed in the cart if the toggle is on.
When toggled, customer will receive a request for the location. If accepted, Address Checkout fields will be autocompleted with the current location.
Current version of the Checkout is 2. Previous version (1) is a simplistic form that allows some modifications, mostly through Javascript. Checkout 1 will not receive updates and will not support Local Pickups.
Design options are limited to color selections and a logo that will be visible only in the checkout process.
Add extra fields to your checkout form. These can be optional or required.
These can be added to any of the three sections: Contact Information, Shipping and Billing Addresses or Other. If a field is added to the Shipping Information, it will be added as well in the billing form. These are the field types:
Change the text style to Bold, Italics and add in-text links when creating your customized fields by selecting and hovering text.
Using these options involves a solid understanding of Javascript. If you are not confident about what this is get an overview of Design for Jumpseller.
The Jumpseller Javascript Library is included in every theme on every store, the most commonly used functions for the checkout process are:
Add a an existing virtual product if a certain condition is true in the Checkout.
<script>
// Variables
var productId = 4482829 // The product id
var variant1 = 8769517 // This is the variant that will go to the cart.
// Conditions Function: This function returns true or false depending if the conditions are present or not on the checkout.
var conditions = function(){
return $("#payments_options input:checked").val() == "186648"; // Certain payment option is selected on this example
}
// Finds product_cart_id by searching the productId on the cart. The Product Cart Id is the ID of the instance of the product that is on the cart. This section shouldn't change.
function find_order_product_id(cart_json) {
var id = null;
$.each(cart_json.products, function(i, order_product) {
if (order_product.product_id == productId) {
id = order_product.id;
}
});
return id; // return order_product.id if found
}
// Function to add product to Cart (Removes if previously pressent). This section shouldn't change.
var addProduct = function(data) {
var order_product_id = find_order_product_id(data);
var variants = data.products.map(product => { return product.variant_id })
if(!variants.includes(parseInt(variant1))) {
Jumpseller.updateCart(order_product_id, 0); // no payment cost on the order.
Jumpseller.addProductToCart(productId, 1, {
"Variant": variant1
})
}
}
// Function to remove product from cart. This section shouldn't change.
var removeProduct = function(data) {
var order_product_id = find_order_product_id(data);
Jumpseller.updateCart(order_product_id, 0); // no payment cost on the order.
}
// Function that checks the conditions and adds or removes the virtual product. This section shouldn't change.
function productInCart(){
if(conditions()){
Jumpseller.getCart({callback: addProduct})
}else{
Jumpseller.getCart({callback: removeProduct })
}
}
// Applies function on condition changes and on page load. This part can change depending on the conditions.
$("#checkout").change(productInCart)
$(document).ready(productInCart)
</script>
Date picker with some custom rules: Remove a list of holidays, requires Bootsrap Datepicker.
<script>
const today = new Date() // Defines Today
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1) // Defines Tomorrow
holidays = ["29/05/2020", "03/06/2020"] // Holidays to remove
$(document).ready(function() {
$("#custom_input_field").datepicker({
format: 'dd/mm/yyyy', // Chose your preffered date format.
weekStart: 1, // Week starts Mondays.
startDate: tomorrow,
language: "es", // Choose a language.
daysOfWeekDisabled: [0, 1], // Disables Sundays and Mondays.
datesDisabled: holidays
});
});
</script>
For up-to-date information on the status of our system and all its services, please visit status.jumpseller.com. You can also subscribe to receive notifications about any updates or maintenance work on the site.
Free trial for 14 days. No credit card required.