Browse by Topic

ShipperHQ | Adding the 'City' Field to the Cart Page (Blueprint Themes)

 

Note: These instructions apply to Blueprint themes developed by BigCommerce, and may not be compatible with third-party developed themes, or themes based on our new Stencil theming architecture.

If you use ShipperHQ, and use YRC Freight and/or FedEx LTL to provide real-time freight shipping quotes to your shoppers, you’ll need to include the “City” field on your cart page.

These providers require a city value to properly return freight shipping quotes, and the Estimate Shipping & Tax button on the cart page will not return quotes for these services unless the City field is included.

Before making any changes, backup your theme customizations.

Adding the HTML to Panels/CartContent.html

1. Go to Storefront Design › Design Option, then click Edit HTML/CSS.

2. In the list of Other Template Files on the left, locate and click CartContent.html under Panels.

Use Ctrl F or Command F to quickly locate template files in the list.

3. Add the following two lines of code between the State and Zip/Postcode fields. Please note that the class may require some theme-specific customisation, and should be made to match the surrounding fields in style.

<dt>%%LNG_City%%:</dt>
<dd><input type="text" class="Textbox" name="shippingZoneCity" id="shippingZoneCity" value="%%GLOBAL_ShippingCity%%" /></dd>
 

Before:
Template HTML editor showing where to add the city field code (before)

After:
Template HTML editor showing where to add the city field code (after)

4. Save your changes.

Adding the HTML to cart.html

If your store was created before February 8, 2016, use the following instructions to add the required HTML to your template. If your store was created after this date, the required code is already included, and you can skip this section.

1. In the list of Other Template Files on the left, locate and click cart.html.

Use Ctrl F or Command F to quickly locate template files in the list.

2. On or around line 3, replace %%GLOBAL_TPL_PATH%%/js/cart.js with the following:

%%ASSET_js/cart.js%%

Before:
Template HTML editor showing where to add the reference to your custom cart.js file (before)

After:
Template HTML editor showing where to add the reference to your custom cart.js file (after)

3. Save your changes.

Adding the Javascript to js/cart.js

If your store was created before February 8, 2016, use the following instructions to add the required HTML to your template. If your store was created after this date, the required code is already included, and you can skip this section.

1. Connect to your store using a WebDAV client, like CyberDuck.

2. Navigate to the template folder, then open the js folder.

3. Download cart.js to your computer, then open it in a text editor like Notepad or TextEdit.

4. Locate w: 'getShippingQuotes', and paste the following code on the line immediately after it.

city: $('#shippingZoneCity').val(),

Before:
Editing cart.js to include the city variable (before)

After:
Editing cart.js to include the city variable (after)

5. Save the file, then re-upload it back to the template/js folder in your store.

Confirming Installation

If completed correctly, you should now be able to see the optional City field on your store’s cart page. To test that it is working correctly, enter some test State, City and Zip/Postcode credentials, then click the Estimate Shipping & Tax button to confirm you are receiving freight quotes via ShipperHQ.

Note that your freight shipping rules must already be configured in your ShipperHQ account.

Was this article helpful?