In this demo we want to show you how you can create an onlineshop with commerce store on the frontend and ERPAL platform on the backend, without much effort. Please be aware that these are only some steps towards creating a ready-to-go-live online-shop. Creating taxes, or syncing customer profiles to CRM contacts for example are not covered in this tutorial.
We also prepared some timestamps, so that you can retrace your steps by skipping through the screenscast. Keep an eye open for them » (0:04).
Before we start: special thanks to spleshka for creating the screencast.
The Video
Please note that, due to advancement in development, there are additional steps required, that are not mentioned in the video:
- enable Dynamic widget for commerce line item use for cart
- 5.2.1. Set default site template selection rule
Preparation
For the online-shop we will need some additional modules that are not shipped with ERPAL Platform, so please download & enable:
- Modules
- Commerce AutoSKU (commerce_autosku)
- Views UI (views_ui)
- Cart (commerce_cart)
- ERPAL Commerce Cart (erpal_commerce_cart)
- ERPAL Quote Commerce Cart (erpal_quote_commerce_cart)
- Payment Method Example (commerce_payment_example) [for demo/testing]
- ThemeKey (themekey)
- ThemeKey UI (themekey_ui)
- [not in video] Dynamic widget for commerce line item use for cart (commerce_line_item_widget_cart)
- Themes
- Adaptive Theme (adaptivetheme)
- AT Commerce (at_commerce)
All in one go using drush:
drush en -y commerce_autosku views_ui commerce_cart erpal_commerce_cart erpal_quote_commerce_cart commerce_payment_example themekey themekey_ui commerce_line_item_widget_cart adaptivetheme at_commerce
1. Add Product Display
For the start we will add the a new content type, that will be used to create the product that we want to sell (0:40).
- Go to: Structure » Content types » Add content type (/admin/structure/types/add)
- Name: 'Office Supplies'
- Save & add fields
- Manage Fields: (0:53)
- Delete: body
- Add image
- Label: "Image"
- Machine name (rename to): "field_office_supplies_image"
- Field type:
Image
- Save
- Save field settings (no changes here)
- Check
required field
- Save settings
- Add product reference
- Label: "Product"
- Machine name (rename to): "field_office_supplies_product"
- Field type: Product reference
- Widget:
inline entity form - single value
orinline entity form - multiple values
- Save
- Save field settings (no changes here)
- Check
required field
- Save settings
2. Configure Product
Next up: configure the product to use an automatically generated sku (1:53).
- Go to: Store » Products » Product types » Product (/admin/commerce/products/types/product)
- Enable
Automatically Generate SKU
- Set
Pattern
to "[commerce-product:title]" (Products » Title) - Save product type
3. Add Products
This step is a rather easy one: add some products (2:16). You can do that on Content » Add content » Office Supplies.
4. Create Products-list (view)
The fourth step: creating a product-list (view and page), is not that complicated but rather complex. So let's do this step by step. (3:10)
4.1 Add a new view
First part: create a view that contains all listed products (3:27).
- Go to: Structure » Views » Add new View (/admin/structure/views/add)
- View Name: "Shop: Product list"
- Show
content
of typeOffice Supplies
sorted bynewest first
- Uncheck
create a page
- Continue & edit
- Config (3:47)
- Format: table
- Fields » Add:
Content Image
; Image style:Thumbnail
- (Advanced) Relationships » Add
- Check
Content: referenced products
- Add and configure relationships
- Identifier (rename to) "Product"
- Check "require this relationship"
- Apply
- Check
- Fields » Add:
Commerce Product: Add to Cart form
; checkDisplay a textfield quantity widget on the add to cart form
; checkAttempt to take settings from line item field widget.
; Select from which order type the line item settings should be taken. - Fields
Content: Title
»Create a label
set to "Product" - Displays » Add » Content pane
- Set Display name to "Shop: all products"
- Save
4.2 Add a new page
Second part: adding a new page that will show our just created view (6:10).
- Go to: Structure » Pages » Add custom page (/admin/structure/pages/add)
- Basic setup
- Set
Administrative title
to "Front page" - Set
Path
to "front" - Check
Make this your site home page
- Set
- Continue
- Choose Layout
- Select
Category
"Columns: 2" - Select "Two column"
- Select
- Continue
- Continue (no changes to the Panel settings)
- Panel Content (6:36)
- Set
Title type
to "No title" - Left side: Add content » Menus » "User menu"
- Right side: Add content » View panes » "View: Shop: Product list: Shop: all products"
- Set
- Finish
- Save
5. Improvements
OK, the most important part, showing the products, is done. So let's add all the little things an online-shop needs, like an option to (re-) download the invoices, or a separated theme for the shop and backend (7:11).
5.1 Set shop-theme as default
Let's set a new shop theme so that a (potential) customer will see your favorite funky theme, but keep the ERPAL theme for adinistrative parts.
- Go to Appearence (/admin/appearance)
- Enable AT Commerce theme and set as default
5.2 Set ERPAL theme for administrators
First here comes a new part: we progressed with our development, thus you would need to go a little detour by adjusting the default site template setup - won't take long. promise.
Then we'll make our beloved ERPAL theme again available for the admins.
- [not in the video] Set default site template selection rule
- Go to: Structure » Sites » Edit site template (/admin/structure/pages/site_template)
- Open ERPAL default » Selection rules
- Add "Current theme"
- Set
Themes
to "ERPAL Theme"
- Set
- Update and save
- Add User role (8:20)
- Go to: People » Permissions » Roles (/admin/people/permissions/roles)
- Add role: "administrator"
- Assign rule to your user
- Set ERPAL Theme for Admins (8:45)
- Go to: Configuration » User interface » ThemeKey (/admin/config/user-interface/themekey)
- Add new rule
- Set
user:role
= "administrator" - Set
Theme
to "ERPAL Theme"
- Set
5.3 Miscellaneous
As we still want to be able the access the given dashboard-page will add a new link to the ERPAL menu. Once this is done we will add our shop-logo to the theme and add permissions that users may access the new products, the cart-checkout or download their quotes (9:15).
- Add a link "Dashboard" to ERPAL Menu with path: "home"
- Create demo user
- Add logo to AT Commerce Theme (9:59)
- Go to: Appearance » Settings » AT Commerce Theme (/admin/appearance/settings/at_commerce)
- Scroll to
Logo image settings
- Uncheck
Use the default logo
- Save configuration
- Permissions (11:00)
- Go to: People » Permissions (/admin/people/permissions)
- To view products, add permissions:
View published content
for anonymous and authenticated userView any product of any type
for anonymous and authenticated user
- To enable checkout button, add permission:
Access checkout
for authenticated user
- To enable to download own quotes, add permission:
View own orders of any type
for authenticated user
5.4 Create a quotes, orders and invoices page
Next one is a bit more complicated but still easy to retrace: we will create a new view that will give a logged-in user the chance to view his/her quotes, orders and invoices (13:54).
- Add new view
- Go to: Structure » Views » Add new View (/admin/structure/views/add)
- Show
Commerce Order
of typeOrder
- Uncheck
Create a page
- Show
- Continue & edit
- Config (14:15)
- (Advanced) Add contextual filter
- Check
Commerce Order: Uid
- Set
When the filter value is not available
to "Display contents of 'No results found'" - At
When the filter value is available or default is provided
check "Specify validation criteria"- Set
Validator
to "User"
- Set
- Apply
- Check
- Set
Format
to "Table" - Add field
Commerce Order: Order PDF
- Remove field
Commerce Order: Order ID
- Add quotes-pdf-link
- Add relationship
- Check
Entity Reference: Referenced Entity
for "field_quote" - Rename Identifier to "Quote"
- Check
- Add field
- Check
Commerce Order: Quote PDF
- Select relationship "Quote"
- Check
- Add relationship
- Add invoice-pdf-link
- Add relationship
- Check
entity reference: referencing entity
for "field_invoice_order" - Rename Identifier to "Invoice"
- Check
- Add field
- Check
Commerce Order: Invoice PDF
- Select relationship "Invoice"
- Check
- Add relationship
- Add content plane (17:15)
- (Pane settings) Argument input
- Set
Commerce Order: Uid source
to "From context" - Set
Required context
to "User ID" (Group User)
- Set
- Change display name to "My orders"
- (Pane settings) Argument input
- (Advanced) Add contextual filter
- Save
- Go to: Structure » Views » Add new View (/admin/structure/views/add)
- Create new custom page (17:47)
- Go to: Structure » Pages » Add custom page (/admin/structure/pages/add)
- Basic setup
- Set
Title
to "My orders" - Set
Path
to "my-orders" - Check
Contexts
- Set
- Contexts
- Add contexts
- Select
User
- Set
Enter the context type
to "Logged in user"
- Panel content
- Add Content View panes » View: My orders
- Add a links to User-menu
- Add "My orders" with path: "my-orders"
- Add "My cart" with path: "cart"
5.5 Change checkout completion message
Finally we want to show you how you can customize the completion-message, for example by adding a link to the new order-view-page (20:16).
- Go to: Store » Configuration » (/admin/commerce/config/checkout)
- Configure "Completion message" and adjust the message
Summary
That was quiet the journey but you made it, awesome. That means you are now fit to open up your own online-shop powered by EPRAL platform.
So, we have shown you how to create pages to provide a user access to their orders on the fly as well as customizing important parts of the checkout-process and - of course - the basic shop itself can be created. And all that in just about 20 minutes! Isn't that amazing?