Feature Changes and updates

README.md

@@ -66,14 +66,20 @@ Every provider defines the features that it supports under `framework/{provider}
 
 #### Features Available
 
+The following features can be enabled or disabled. This means that the UI will remove all code related to the feature.
+For example: Turning `cart` off will disable Cart capabilities.
+
+- cart
+- search
 - wishlist
+- customerAuth
 - customCheckout
 
 #### How to turn Features on and off
 
 > NOTE: The selected provider should support the feature that you are toggling. (This means that you can't turn wishlist on if the provider doesn't support this functionality out the box)
 
-- Open `commerce.config.json`
+- Open `commerce.config.json` from your chosen provider.
 - You'll see a config file like this:
   ```json
   {
@@ -83,7 +89,7 @@ Every provider defines the features that it supports under `framework/{provider}
     }
   }
   ```
-- Turn wishlist on by setting wishlist to true.
+- Turn `wishlist` on by setting `wishlist` to `true`.
 - Run the app and the wishlist functionality should be back on.
 
 ### How to create a new provider

commerce.config.json

@@ -1,6 +1,9 @@
 {
   "features": {
+    "cart": true,
+    "search": true,
     "wishlist": false,
+    "customerAuth": false,
     "customCheckout": false
   }
 }

components/common/Navbar/Navbar.module.css

@@ -1,5 +1,6 @@
 .root {
   @apply sticky top-0 bg-primary z-40 transition-all duration-150;
+  min-height: 74px;
 }
 
 .nav {

components/common/Navbar/Navbar.tsx

@@ -34,9 +34,11 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
             ))}
           </nav>
         </div>
+        {process.env.COMMERCE_SEARCH_ENABLED && (
           <div className="justify-center flex-1 hidden lg:flex">
             <Searchbar />
           </div>
+        )}
         <div className="flex items-center justify-end flex-1 space-x-8">
           <UserNav />
         </div>

components/common/UserNav/UserNav.tsx

@@ -25,10 +25,12 @@ const UserNav: FC<Props> = ({ className }) => {
   return (
     <nav className={cn(s.root, className)}>
       <ul className={s.list}>
+        {process.env.COMMERCE_CART_ENABLED && (
           <li className={s.item} onClick={toggleSidebar}>
             <Bag />
             {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
           </li>
+        )}
         {process.env.COMMERCE_WISHLIST_ENABLED && (
           <li className={s.item}>
             <Link href="/wishlist">
@@ -38,7 +40,7 @@ const UserNav: FC<Props> = ({ className }) => {
             </Link>
           </li>
         )}
-        {process.env.COMMERCE_CUSTOMER_ENABLED && (
+        {process.env.COMMERCE_CUSTOMERAUTH_ENABLED && (
           <li className={s.item}>
             {customer ? (
               <DropdownMenu />

components/product/ProductSidebar/ProductSidebar.tsx

@@ -56,6 +56,7 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
         <div className="text-accent-6 pr-1 font-medium text-sm">36 reviews</div>
       </div>
       <div>
+        {process.env.COMMERCE_CART_ENABLED && (
           <Button
             aria-label="Add to Cart"
             type="button"
@@ -68,6 +69,7 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
               ? 'Not Available'
               : 'Add To Cart'}
           </Button>
+        )}
       </div>
       <div className="mt-6">
         <Collapse title="Care">

framework/bigcommerce/commerce.config.json

@@ -1,6 +1,7 @@
 {
   "provider": "bigcommerce",
   "features": {
-    "wishlist": true
+    "wishlist": true,
+    "customerAuth": true
   }
 }

framework/local/commerce.config.json

@@ -1,6 +1,9 @@
 {
   "provider": "local",
   "features": {
-    "wishlist": false
+    "wishlist": false,
+    "cart": false,
+    "search": false,
+    "customerAuth": false
   }
 }