Site Guide

Site Guide

Customer Login:
Username: customer
Password: customer

DEMOING

LIMITATION OF DEMO

Commerce 2.x hasn't been fully ported over yet, so some things are missing from the demo. 

  • Shipping
    • Flat Rate only at the moment. Other methods still need to be ported over.
    • Product dimensions do seem to be built in, but no documentation for setup so it has been left out of demo. Enabling it broke site.
       
  • Currencies and Exchange
    • Can import whichever currencies you would like to accept.
    • No way to switch currencies from the user's point of view.
    • If a product has a currency set other than the store default, the site breaks. Not sure how this will work in the future.
       
  • Payment Gateways
    • Example onsite payment setup on site. Can add new cards or select existing during checkout, and remove cards from My Account.
    • Manual payment methods also setup.
    • Currently only PayPal and Auth.net (however, I tried PayPal and couldn't get to work).
       
  • Promotions
    • Sitewide automatic sale works.
    • Coupon codes can be created but no way for a customer to use. 
    • No good way for individual sale pricing yet.
       
  • Inventory
    • No inventory system ported over yet.
       
  • Product Management
    • Products can be created and edited easy enough, but no overall view for making bulk changes by default.
       
  • Checkout Flows
    • Looks like checkout flows can be created for physical goods, digital goods, events and recurring billing out of the box. The latter 3 have not been added yet as part of this demo. 

VIEW ALL PRODUCTS/USE FACETS

To view all products:

  • Click any homepage CTA
  • Click the Urban Living primary menu and then uncheck the Urban Living facet.
    • Once in any product category page,

PRODUCT VARIATIONS/RECOMMENDED PRODUCTS

To view how products can have selectable variations, or how recommended products can be added:

  • Click the ‘Custom Mason Jar’ product anywhere you see it
    (Featured products, Urban Living > Mason Jars > ‘Custom Mason Jar’ product.

PLACING & VIEWING ORDERS 
(Customer checkout, viewing, and editing orders)

FRONTEND: Checkout Flow

  1. Add products to your cart.
  2. Go to cart page and proceed through Checkout.
    NOTE: Checkout as Guest, or use customer/customer if you want to show the ‘My Account’ page and view the order once complete.
    NOTE: Checkout details already pre-filled. Check ‘Use my shipping information’ to autofill payment info.
    NOTE: Only Flat Rate shipping for demo. Other options not ready yet.
    NOTE: Charles Mound is the highest point in Illinois.
  3. Complete page: this page shows order number. Admin can view order on the backend. If user has an account, order can also be viewed on frontend under the ‘My Account’.

VIEW ORDERS AND CARTS

FRONTEND: As Customer

  1. Click Login in the header and login using ‘customer’ for both user and pass.
    NOTE: After login you’ll be in the user account area. This is also accessed from the ‘My Account’ link in the header.
  2. Click ‘Orders’ to view any completed orders by this user.
  3. Click the order number to see details.

BACKEND: As Admin: Go to Commerce > Orders

  • Orders tab - Views all completed orders.
    NOTE: Click an ORDER NUMBER to view details. From here you can change status to Validate and then Fulfill.
    NOTE: Click EDIT for an order to modify the order. From here an admin can edit all aspects of the order. Various tabs along the top provide additional info, like payment. Here you can return payments.
    NOTE: Don’t enter any coupons here. This doesn’t work yet in Commerce 2.x.
     
  • Carts tab - View active carts.
    NOTE: This shows the same information as the completed orders. 
    NOTE: Don’t enter any coupons here. This doesn’t work yet in Commerce 2.x.

PRODUCTS

Architecture of a Drupal 8 Commerce 2.x Product.
Product Attributes > Product Variation Type > Product Type > Product

  • Product Attribute
    Can be added to any product variation type (Default, Mason Jars, etc). Attributes are what give you customizable product options like colour, size, etc.
     
  • Product Variation Type 
    What the customer is ultimately buying. The variation type is made up of the specific price, sku, product attributes, traits (i.e. is it shippable), etc.
     
  • Product Type
    This can be thought of as the overall general product. The Product type is what get’s categorized, receives the product description and reviews, etc. One product variation type must be assigned to a product type.
     
  • Product
    The product is the end result of the type, variation type, and attribute. Once the latter 3 are setup, the product is the actual content that gets added to the store.

PRODUCTS (Create, edit)

Edit Existing Products
FRONTEND: As Admin

  1. Go to the product you’d like to edit.
  2. Click ‘Edit’ above the product image.
  3. Update as needed. Click ‘Save and keep published’ to save.

BACKEND: As Admin

  1. Go to Commerce > Products
  2. Click ‘Edit’ beside the product you want to edit.
  3. Update as needed. Click ‘Save and keep published’ to save.

Creating NEW Products
BACKEND: As Admin

  1. Go to Commerce > Products
  2. Add Product button
  3. Choose product type
    NOTE: Default is basic product w/o attributes. Mason Jar has attributes.
  4. Enter product details, categorize, and as many variations as needed. Variations are what is actually bought, so, in the case of a mason jar, each colour variation is what the user can choose to buy.
  5. Optionally add Recommend Products by starting to type the name of a product and clicking any of the results.

PRODUCE ATTRIBUTES (Size, colour, etc.)

Editing Existing Attributes
BACKEND: As Admin

  1. Go to Commerce > Product attributes
  2. Click edit beside the attribute you want to update.
  3. Add/Remove attributes and Save.

Creating NEW Attributes
BACKEND: As Admin

  1. Go to Commerce > Product attributes
  2. Add Product product attribute button
  3. Enter a name (i.e. Color), choose how the user would select the attribute, select the product type(s) to which the attribute applies.
  4. Save.
  5. Add attributes.
  6. Save.

PRODUCT VARIATION TYPES

Editing Existing Product Variation Types
BACKEND: As Admin

  1. Go to Commerce > Configuration > Product Variation Types
  2. Click Edit beside the variation you would like to edit.
  3. Edit and save

Creating NEW Product Variation Types
BACKEND: As Admin

  1. Make sure the attributes of the product variation are created first.
  2. Go to Commerce > Configuration > Product Variation Types
  3. Add Product Variation Type button
  4. Enter a label, select any traits, choose order type, and select any attributes.
  5. Save

PRODUCT TYPES

Editing Existing Product Types
BACKEND: As Admin

  1. Go to Commerce > Configuration > Product Types
  2. Click Edit beside the variation you would like to edit.
  3. Edit and save

Creating NEW Product Types
BACKEND: As Admin

  1. Make sure the variation type has been created first.
  2. Go to Commerce > Configuration > Product Types
  3. Add Product Type button
  4. Enter a label, choose variation type to use, and check the options as you see fit.
  5. Save

PRODUCT ORGANIZATION (Categories, brand, etc.)

BACKEND: As Admin

  1. Go to Structure > Taxonomy
  2. Click ‘List terms’ to the right of the taxonomy you want to add to.
  3. Click ‘Add term’
  4. Enter term name. Optionally choose the parent term under ‘Relations’.
    NOTE: If adding a product category you would want to choose at least one of the primary categories as a parent (i.e. Women, Men, Urban Living, etc.)
  5. Save.

SHIPPING/CHECKOUT/ORDERS

Architecture of a Drupal 8 Commerce 2.x Order.
Shipment Type & Checkout Flow > Order type > Order Item Type

  • Shipment Type & Shipment Method
    These are the options a customer will have for shippable items. Currently there is only support for flat rate.
     
  • Checkout Flow 
    This is the process that the customer will follow for checkout. Checkout flows can be modified in a drag and drop interface.
     
  • Order Type
    This is the configuration of how an order will be handled.
     
  • Order Item Type
    This is where you can configure which order type will be used for specific product variation entity (i.e. Physical goods, events, digital goods, etc.)

SHIPMENT METHOD

Editing Existing Shipping Methods
BACKEND: As Admin

  1. Go to Commerce > Configuration > Shipping Methods
  2. Click Edit beside the method you would like to edit.
  3. Edit and save

Creating NEW Shipping Methods
BACKEND: As Admin

  1. Go to Commerce > Configuration > Shipping Methods
  2. Click Add Shipping Method button.
  3. Edit and save. Currently, there is only one shipping method available, flat rate.

CHECKOUT FLOWS

Editing Existing Checkout Flows
BACKEND: As Admin

  1. Go to Commerce > Configuration > Checkout Flows
  2. Click Edit beside the checkout flow you would like to edit.
  3. Drag and Drop to reorder elements. 
  4. Click the gear beside certain elements for additional options.
  5. Save

Creating NEW Checkout Flows
BACKEND: As Admin

  1. Go to Commerce > Configuration > Checkout Flows
  2. Click Add Checkout Flow button
  3. Enter a name and choose the plugin (Multistep is the only option currently)
  4. Use the default setup or drag and drop to reorder elements. Click the gear beside certain elements for additional options.
  5. Save

ORDER TYPE

Editing Existing Order Types
BACKEND: As Admin

  1. Go to Commerce > Configuration > Order Types
  2. Click Edit beside the order type you would like to edit.
  3. Drag and Drop to reorder elements. Click the gear beside certain elements for additional options.
  4. Save

Creating NEW Order Types
BACKEND: As Admin

  1. There must be a shipping method and checkout flow available before an order type can be created.
  2. Go to Commerce > Configuration > Order Types
  3. Click Add Order Type button
  4. Choose options, checkout flow, etc.
  5. Save

ORDER ITEM TYPE

Editing Existing Order Item Types
BACKEND: As Admin

  1. Go to Commerce > Configuration > Order Item Types
  2. Click Edit beside the item type you would like to edit.
  3. Edit and save.

Creating NEW Order Types
BACKEND: As Admin

  1. There must be an order type available before an order item type can be created.
  2. Go to Commerce > Configuration > Order Item Types
  3. Click Add Order Item Type button
  4. Choose options.
  5. Save

GENERAL STORE SETUP

STORES

Stores are where you setup the general details about a particular store.

  • Name
  • Email
  • Default Currency
  • Address
  • Supported billing and shipping countries
  • Tax settings

To view, add or edit stores, go to:
BACKEND: As Admin

  • Go to Commerce > Stores and edit or create a new store.

CURRENCIES

NOTE: This hasn’t been setup on the demo. Not sure what works or how it works.

To view, add or edit currencies accepted:
BACKEND: As Admin

  • Go to Commerce > Configuration > Currencies

PAYMENT GATEWAYS

NOTE: Couldn’t get a payment gateway other than example payment and manual, so that’s all we have. However, apparently, PayPal and Auth.net do work.

To view, add or edit payment gateways, go to:
BACKEND: As Admin

  • Go to Commerce > Configuration > Payment Gateways and edit or create.
  • Manual payment methods allow you to add instructions for the customer that are displayed once checkout is completed.

TAX TYPES

Tax types can be added manually. There is built in plugins already for:
NOTE: For the demo, I've setup a base tax for the state of Illinois.

  • Canadian taxes
  • EU VAT
  • Swiss VAT
  • 3rd party plugin for Avalara to automate US tax calculation (paid service).

To view, add or edit taxes, go to:
BACKEND: As Admin

  • Go to Commerce > Configuration > Tax Types and edit or create.

PACKAGE TYPES

This is where you can setup package dimensions and weights for shipping.
NOTE: The demo doesn’t include this. It might work, but when I originally enabled shipping dimensions is broke the site. I didn’t have time to figure out why and there’s no documentation for setup.

To view, add or edit shipping package types, go to:
BACKEND: As Admin

  • Go to Commerce > Configuration > Package Types

ERRORS

  • If you get an error when adding a product to your cart, edit the product and change variation currency to USD. For some reason the multi-currency doesn’t work, so if there’s a product variation set with a price in CAD, the site breaks.  All product should be in USD, but there’s a chance I may have missed one.