glynnsanity

Optimized One Page Checkout Customization Guide

When doing customizations on the OOPC, even when using a headless front end, the Checkout page and the Order Confirmation page must be customized using Stencil.

In the checkout.html and order-confirmation.html files, the checkout and order confirmation page are able to have code injected into them. There are elements or Stencil Theme Objects within each of these files that correlate to the:

• Checkout React App (content.checkount_content)
• Order Confirmation React App (content.order_confirmation_content)

Here's the link to documentation on those objects.

glynnsanity

This is a script that will hide product thumbnail images that are not relevant to a particular Color variant option that has been selected.

In this example, when a user selects a color, the code retrieves the color first from the name text for the color variant option (a radio button in this case). Then we use this value to find product thumbnail images that have that color included in their alt attribute. Once we find the correct matches we can reveal them and hide any other product images in the thumbnail set.

This can be applied within a script tag on the product.html file in a Cornerstone template.

glynnsanity

This is a copy of the product-list.html file within the Cornerstone Theme template (built for the BigCommerce Stencil CMS). It has been modified to show product prices for each picklist item, using the Storefront GraphQL API.

When navigating in Cornerstone or another template you should find this file at the following path:(templates/components/common/products/product-list.html

See lines 36 - 61.

glynnsanity

PDP - Disable Add to Cart Based on ZipCode POC

Use Case:

• Product is configured with a custom field or metafield with a list of zipcodes that represents all the regions the product is restricted to sell to.
• A logged in customer (has an address defined) goes to the PDP for above product. Based on his account address zipcode and what is in the exception list of zipcodes above, the "Add to Cart" button would be greyed out if restricted.

Solution(s):

• Stencil Solution: Expose Theme Objects for Address Matching