The goal is to check the customer's shopping cart for items that are marked as Dangerous Goods in BigCommerce via a Custom Field on the product. When dangerous goods are present in the cart we will remove the ground shipping options.
Checking for custom field in shopping cart
Utilizing the Script Manager in BC, we're adding some code to check the cart items for the Dangerous Good custom field:
<script>
console.log("checking for dangerous goods...");
var dangerous_goods = false;
{{#each cart.items}}
console.log("{{name}}");
{{#each custom_fields}}
{{#if name '===' 'Dangerous Good'}}
dangerous_goods = true;
{{/if}}
{{/each}}
{{/each}}
if (dangerous_goods) {
console.log("Dangerous goods found in order.");
}
</script>I got this solution from the Big Commerce Help Center post here
One of the issues I came across was the cart Stencil Object isn't available by default on the checkout page which we need in order to disable the other shipping methods.
Making the cart object available to pages via Frontmatter
You can use YAML front matter for templates in the templates/pages/ directory. Injecting objects in the front matter of templates/pages/checkout.html will make the objects available to custom templates. In this case we'll be adding the cart object to the checkout page.
Frontmatter is done using simple YAML syntax. You can see a complete reference for Big Commerce Stencil Frontmatter here. Add the following to the very top of templates/pages/checkout.html
---
cart: true
---Now we should see our log items in the console when we reload the checkout page:
Manipulate Shipping Methods
Now we can enter some code to disable our other shipping methods leaving only ground available for orders that contain dangerous goods. All over the Big Commerce support forums people will say you need to pay for something like Shipper HQ to achieve this functionality but with a little bit of code you can setup something that achieves the goal.
In the same footer script we'll add the following:
(function(win) {
'use strict';
var listeners = [],
doc = win.document,
MutationObserver = win.MutationObserver || win.WebKitMutationObserver,
observer;
function ready(selector, fn) {
// Store the selector and callback to be monitored
listeners.push({
selector: selector,
fn: fn
});
if (!observer) {
// Watch for changes in the document
observer = new MutationObserver(check);
observer.observe(doc.documentElement, {
childList: true,
subtree: true
});
}
// Check if the element is currently in the DOM
check();
}
function check() {
// Check the DOM for elements matching a stored selector
for (var i = 0, len = listeners.length, listener, elements; i < len; i++) {
listener = listeners[i];
// Query for elements matching the specified selector
elements = doc.querySelectorAll(listener.selector);
for (var j = 0, jLen = elements.length, element; j < jLen; j++) {
element = elements[j];
// Make sure the callback isn't invoked with the
// same element more than once
if (!element.ready) {
element.ready = true;
// Invoke the callback with the element
listener.fn.call(element, element);
}
}
}
}
// Expose `ready`
win.ready = ready;
})(this);
ready('#checkoutShippingAddress', function(element) {
// do something
alert("You're on the shipping step!");
var items = document.getElementsByClassName('form-checklist-item');
for(var i = 0; i < items.length; i++) {
var item = items[i];
var desc = item.querySelector('.shippingOption-desc');
if (desc && desc.textContent !== 'Free Shipping') {
item.parentNode.removeChild(item);
i--; // adjust counter as we have removed an item from the collection
}
}
}); The Mutation Observer is the best method I've found for checking the availability of an element. I got the above code from The Complete Guide to Checkout Customization on BigCommerce
When we are on the shipping address we loop through the shipping options removing everything except ground shipping which you can see in the ready() function.
Check an element continuously
When you need to check an element more than once you'll want to update the following:
if (!element.ready) {
element.ready = true;
listener.fn.call(element, element);Should be updated to:
if (!element.ready) {
listener.fn.call(element, element);
}Adding Messaging for Dangerous Goods
It's probably a good idea to add a label to individual cart items that are dangerous goods. This way a customer can order those items separately if they require expedited shipping on other items in their cart.
We can add some stencil code to the /templates/components/cart/content.html file which handles rendering of cart items on the cart page.
{{#each custom_fields}}{{#if name '===' 'Dangerous Good'}}* <br><span style="color:red">Only eligible for ground shipping</span>{{/if}}{{/each}}Updating the Shipping Header
It makes sense to to update notify users . Here we add a label to the shipping heading that notifies users they can only use ground shipping.
ready('h2.stepHeader-title.optimizedCheckout-headingPrimary', function(element) {
if (dangerous_goods) {
console.log("test content");
var h2Elements = document.querySelectorAll('h2.stepHeader-title.optimizedCheckout-headingPrimary');
// Loop through all the h2 elements found
h2Elements.forEach(function(h2Element) {
// Check if the content of the h2 element matches "Shipping"
if (h2Element.textContent.trim() === 'Shipping') {
console.log(h2Element);
// Insert an empty h3 tag after it
h2Element.insertAdjacentHTML('afterend', '<h4 style="margin: 0px;color: red;">Products classified as Dangerous Goods can only be shipped via ground.</h4>');
}
h2Element.ready = 'true';
});
}
});