he Buy-Online Pickup In-Store app enables your customers to opt for Store Pickup with many features that allow you to personalize the experience. This app utilizes login credentials, locations and inventory settings from iPaaS.com and completed transactions are downloaded and made available for any backend. iPaaS.com is an integration platform providing managed integrations between BigCommerce and all certified applications.
Prerequisites
Installation
Installation begins within BigCommerce. After logging into the BigCommerce Admin Portal, Navigate to Apps > Marketplace and install.
BOPIS APP Configuration
Configuration will occur within the BigCommerce Portal. After logging into the BigCommerce Admin Portal, Navigate to Apps > Buy Online Pickup in-Store by iPaaS.com
The first time you open the Store Pickup application, you will be prompted to Login using your iPaaS.com credentials and choose a company to link if your account has more than 1 company.
Enter the desired settings. Below is a complete list of available options and descriptions.
Google API Key
Please enter the Google API key to enable BOPIS Distance Locating feature.
The key provided should have these APIs turned on:Distance Matrix API
Geocoding API
GeoLocation API
Maps Javascript API
Places API
Enable Store Pickup
When this option is enabled, products can be enabled for Available for In-Store Pickup or Curbside Pickup. You may also limit items to pickup only.
Enable Curbside Pickup
When this option is enabled, shopping carts with items marked for curbside pickup will prompt users for their Car: Make / Model / Color.
Allow Shipment, Store Pickup and Curbside Pickup on the same transaction?
By default, transactions will be limited so that all line items on a single transaction can either be for shipment or Buy-Online Store Pickup. When this option is enabled, customers will be permitted to identify some line items for shipment and other for Buy-Online Store Pickup.
IMPORTANT! It is recommended to not mix line-item types. Mixing line-item types can become very complex for the fulfillment operations of a business. There is NOT a one-size fits all checkout experience in BigCommerce for this approach. Developing a custom checkout experience may be required.
Allow Store Pickup and Shipment line items on the same transaction?:
By default, transactions will be limited so that all line items on a single transaction can either be for shipment or Buy-Online Store Pickup. When this option is enabled, customers will be permitted to identify some line items for shipment and other for Buy-Online Store Pickup.
Allow Store Pickup and Curbside Pickup on the same transaction?
By default, the customer will be prompted to choose to Store Pickup or at Curbside Pickup at checkout for all line items designated as Pickup. When this option is enabled, the customer will have the option of choosing to store pickup or Curbside Pickup when adding a Pickup line item.
Allow Shipment and Curbside Pickup on the same transaction?
By default, the customer will be prompted to choose to Shipment or at Curbside Pickup at checkout for all line items designated as Shipment. When this option is enabled, the customer will have the option of choosing to Shipment or Curbside Pickup when adding a Pickup line item.
Allow different Pickup (Store Pickup , Curbside Pickup) locations on the same transaction?
By default, Buy-Online Store Pickup transactions will be limited to only a specific location. When this option is enabled, each line item could be set for Pickup from any of your Store locations.
Enable Scheduler?
When this option is enabled, customers will be able to specify date and time for future Pickups.
Show All Locations?
By default, when showing inventory, only locations with inventory values will appear. When this option is enabled, all locations will be visible even when there is not available inventory.
Specify distance (in miles) from the nearest location:
Enter 0 to disable or 999 to always use this feature.
Store Pickup Item Quantity Threshold:
A warning message will be displayed when the pickup location quantity available for this item is below the threshold amount entered here.
Ship-To-Store Pickup Delay:
Enter the number of days a customer should delay pickup when shipping to store. When the scheduler is enabled, the calendar will prevent pickup selection earlier than the delay period entered here. 0 = No Delay
Enable Ship-To-Store
If this option is enabled, customers will be able to select stores for pickup even when that store has quantity below the item quantity threshold.
Ship-To-Store Threshold:
Enter a safety stock threshold. Items cannot be picked up if the available product quantity is less than the Ship-To-Store Threshold value. 0 = Always available when Ship-To-Store is enabled.
Ship-To-Store Message:
Please enter the message you would like presented for items that qualify for Ship-To-Store.
Example: Please allow 5 days to arrive in store.
BOPIS Receipt Message:
The following message will be presented to the customer when at least one Store Pickup item was on the completed transaction.
Example: Please present the transaction email or your ID when picking up at the
store.
ASAP Pickup timeframe
Please enter the default timeframe text that will be displayed at checkout. This text will be displayed as a comparison when Pickup Scheduler is enabled.
Example: Your order will be ready in 30 minutes.
Quantity Warning Message
Please enter the message to display when the pickup quantity available is less than the value entered for Store Pickup Item Quantity Threshold
Location Search Title
Enter the search heading text to be displayed to customers while selecting a pickup location. Default = Zip, City & State or Store #
Location Configuration
You will have the ability to set Pickup Availability by Store. In the BOPIS configuration page, navigate to Store Location. Any locations saved in iPaaS.com (transferred from your ERP/POS or manually created) will be visible for configuration in BOPIS.
For each location you can set whether you want to enable Pickup Inside or Pickup Curbside.
Location Landing Pages
If you have individual landing pages for each location that display address/hours of operation, you can configure the URL here. When an enabled location is interacted with by the user, the click will navigate to that location page.
Script Manager
Please note that installation will add the following scripts to your BigCommerce store script manager. To view these, navigate to BigCommerce Admin > Storefront > Script Manager:
Scripts installed with the BOPIS app will only load on the following BigCommerce pages:
product
cart
checkout
orderconfirmation
createaccount
editaccount
Theming Requirements
The BOPIS app was tested on the unmodified Cornerstone theme. If this theme is used, then limited changes will be required. Please verify the existence of the following elements in your BigCommerce store. They are required for BOPIS to function.
Page: Template/Component/products/product-view.html1)
This page should have Product Custom Fields Tag
Code Snippet
{{#if theme_settings.show_custom_fields_tabs '!==' true}} {{#each product.custom_fields}} <dt class="productView-info-name">{{name}}:</dt> <dd class="productView-info-value">{{{value}}}</dd> {{/each}} {{/if}}
Frontend View
This page should have a Product Option Tag
Code Snippet
{{#each product.options}} {{{dynamicComponent 'components/products/options'}}} {{/each}}
Frontend View
This page should have a Product_id field and it should exist in the hidden state.
Code Snippet
<input type="hidden" name="product_id" value="{{product.id}}"/>
Frontend View
It is used as a control when current selected product is already added to cart line items.
This page should have a preview Modal Div object to open dialogs.
Code Snippet
<div id="previewModal" class="modal modal--large" data-reveal> <div class="modal-content"></div> <div class="loadingOverlay"></div> </div>
Frontend View
It is used to display product availability by location when “Check Other Locations” is clicked:
Product Option div should have selector name “data-product-option-change”.
Code Snippet
<div data-product-option-change style="display:none;">
Frontend View
When product options are supported for items, the BOPIS dialog and stock locations will not display until after the options are chosen so that inventory matches the specific option chosen. This setting is a control field that stores the value to guide this.
Page: Templates/Component/products/add-to-cart.html
Add to Cart Button should have Id = “form-action-addToCart”.
Code Snippet
<input id="form-action-addToCart" data-wait-message="{{lang 'products.adding_to_cart'}}" class="button button--primary" type="submit" value="{{#if product.pre_order}}{{lang 'products.pre_order'}}{{else}}{{lang 'products.add_to_cart'}}{{/if}}">
Frontend View
Quantity increment parent Div should have selector name “data-quantity-change’
Code Snippet
<div class="form-increment" data-quantity-change>
Quantity decrement should have selector name data-action=”dec” and Quantity increment should have selector name data-action=”inc”
Code Snippet
<button class="button button--icon" data-action="dec"> <span class="is-srOnly">{{lang 'products.quantity_decrease'}}</span> <i class="icon" aria-hidden="true"> <svg> <use xlink:href="#icon-keyboard-arrow-down"/> </svg> </i> </button>
<button class="button button--icon" data-action="inc"> <span class="is-srOnly">{{lang 'products.quantity_increase'}}</span> <i class="icon" aria-hidden="true"> <svg> <use xlink:href="#icon-keyboard-arrow-up"/> </svg> </i> </button>
Frontend View
When these selectors are adjusted, the application is checking inventory availability for the chosen location.
Page: Templates/Component/Cart/configure-product.html
The button labeled "Change" for each item in the cart needs a product Id associated with it for use by the change dialog once clicked.
data-product-id="{{product_id}}"
Page: Templates/Component/Cart/Modals/configure-product.html
Configure Products Div in Cart should have a placeholder to manage store pickup changes while in cart
Code Snippet
<div data-product-attributes-wrapper> {{#each options}} {{{dynamicComponent 'components/products/options'}}} {{/each}} </div> <div class="form-actions"> <input class="button" type="submit" value="{{lang 'common.save'}}"> </div>
Styling
Elements used for BOPIS are installed without styling applied. All elements have assigned Id's and classes to assist with applying a style that matches sites appearance.
Product Detail Page
Model Location Dialog
Example styling applied below:
CSS Code Snippet here
BigCommerce Configurations
Show Stock Levels
Navigate to Settings > Inventory > Stock Levels
Change the value for Stock Level Display to "Show stock levels"
This setting must be configured this way for BigCommerce to return inventory values in its own API Response.
This change will result in the product detail page showing inventory stock quantities. If you do not want to display this, it must be hidden in CSS.
Enable Shipping Type Pickup In Store:
Navigate to BigCommerce Admin > Settings > Shipping and enable Pickup In Store for the Shipping rule that will be loaded at checkout.
Please note that by default, BOPIS will hide this option at checkout for shipment orders.
Customer and Address Form Field:
User defined form fields should be created on the Account Signup Form. After logging into the BigCommerce Admin Portal, Navigate to Advanced Setting > Account Signup Form.
Account Signup Fields: Pickup Store
When a customer signs up, this field allows the customer to save their preferred pickup location. The field will be automatically populated with the list of available Pickup Locations
1) Create a Text field with name "Pickup Store"
Address Fields: Order For
When a customer is checking out, this field will be used to track ASAP or Scheduled pickup.
1) Create a Radio Button field with name "Order For "
2) Use this List of Values:
ASAP
Scheduled
Address Fields: Date
When a customer is checking out, this field will be used to track a future pickup date.
1) Create a Date field with name "Date"
Address Fields: Time
When a customer is checking out, this field will be used to track an estimated time of arrival for future pickups.
1) Create a Picklist field with name "Time"
2) Instructional Text example: "Please choose the best pickup time"
3) You may use this List of Values or modify as it matches your preferred time slot options:
08:15 AM
08:30 AM
08:45 AM
09:00 AM
09:15 AM
09:30 AM
09:45 AM
10:00 AM
10:15 AM
10:30 AM
10:45 AM
11:00 AM
11:15 AM
11:30 AM
11:45 AM
12:00 AM
12:15 AM
12:30 AM
12:45 AM
01:00 PM
01:15 PM
01:30 PM
01:45 PM
02:00 PM
02:15 PM
02:30 PM
02:45 PM
03:00 PM
03:15 PM
03:30 PM
03:45 PM
04:00 PM
04:15 PM
04:30 PM
04:45 PM
05:00 PM
05:15 PM
05:30 PM
05:45 PM
06:00 PM
06:15 PM
06:30 PM
06:45 PM
07:00 PM
07:15 PM
07:30 PM
07:45 PM
08:00 PM
08:15 PM
08:30 PM
08:45 PM
09:00 PM
09:15 PM
09:30 PM
09:45 PM
Please note that the scheduled list is not by Store. If you have pickup stores across different time zones, all store pickup windows must all be addressed in this singular list.
iPaaS.com Configurations
Custom Fields
In the Product From iPaaS.com mapping collection(s), six fields should be configured.
Three of these fields will be mapped to BigCommerce custom fields which will instruct BOPIS handling on the Product Detail page.
Three of these fields will be mapped to BigCommerce modifier fields will be used to track metadata related to the pickup such as Location selected and return the selected options on round trip to the ERP/POS where fulfillment will be handled.
In your BigCommerce subscription in iPaaS.com, first create 6 custom fields in the BC Product Module which will be used for your mappings:
RR_BOPIS_Shipment
RR_BOPIS_InStorePickup
RR_BOPIS_CurbsidePickup
Store Pickup
Pickup Curbside
Is Ship-To-Store
Mappings
If you are using the template mapping collections in iPaaS.com for your BigCommerce subscription, you will need to modify both "BC Product Update Only From IPaaS" and "BC Product Add Only From IPaaS".
Mapping Type | Value Option | Destination Field | Description |
Static | true or false | RR_BOPIS_Shipment | If true, this item is listed as available for shipment. If false, this items shipment option will be disabled on the product detail page. |
Static | true or false | RR_BOPIS_InStorePickup | If true, this item is listed as available for store pickup. If false, this items store pickup option will be disabled on the product detail page. |
Static | true or false | RR_BOPIS_CurbsidePickup | If true, this item is listed as available for curbside pickup. If false, this items curbside pickup option will be disabled on the product detail page. |
Dynamic Formula | ToTextModifier(false,"shipped") | Store Pickup | Saves whether a line-item was selected for Pickup In Store |
Dynamic Formula | ToTextModifier(false,"curbside") | Pickup Curbside | Saves whether a line-item was selected for Pickup Curbside |
Dynamic Formula | ToTextModifier(false,"false") | Is Ship-To-Store | Saves whether a line-item was selected for Ship-To-Store |
The mappings shown above can be configured using any supported iPaaS.com formula. Those shown above are an easy way to accommodate the BOPIS requirements, however if you require more complex handling to address your desires, feel free to improvise.
When a product has successfully transferred to BigCommerce, it will contain the following:
Location Configuration Requirements
If you don't already have addresses for each pickup location record, you will need to do so either by manually adding them to the location or by creating mapping rules from your source subscription.
BOPIS EventHandler (Optional)
This event handlers will be triggered by BOPIS on the specified after BOPIS options have been loaded on screen. Each Event Handler will only execute if it exists in the Script Manager. The agency on record can use this to execute custom code.
Scenarios might be to disable Add to Cart button onload, and only after all BOPIS options have been displayed to the Product Detail screen, enable it.
The following Event Handlers are available to be configured:
Product Detail Page Load (After BOPIS Loads)
Create Event function: bopisProductDetail_OnloadEventCompleted()
Cart Page Load (After BOPIS Loads)
Create Event function: bopisCart_OnloadEventCompleted()
Cart Page Model Loads Single Item
Create Event function: bopisCart_OnEditloadEventCompleted()
Cart Page Model Saves after updating a Single Item
Create Event function: bopisCart_OnUpdateloadEventCompleted()
Cart Page Model Loads Bulk Item
Create Event function: bopisCart_OnBulkEditloadEventCompleted()
Cart Page Model Saves after updating Bulk Items
Create Event function: bopisCart_OnBulkUpdateloadEventCompleted()
Checkout Page Load (After BOPIS Loads)
Create Event function: bopisCheckout_OnloadEventCompleted()
Order Confirmation Page Load (After BOPIS Loads)
Create Event function: bopisOrderConfirmation_OnloadEventCompleted()
To use this feature, navigate to the BigCommerce Admin > Storefront > Script Manager
For each that you wish to support, add a new script, naming it appropriately, and choosing Header/All Pages/Essential/Script
Code Snippet
<script> console.log("loading bopisProductDetail_OnloadEventCompleted"); function bopisProductDetail_OnloadEventCompleted() { // Agency can add their code here. console.log("executing bopisProductDetail_OnloadEventCompleted"); } console.log("loaded bopisProductDetail_OnloadEventCompleted"); </script>