MuraCon Notes - Creating Themes for SlatWall
October 01, 2013
Creating Themes for SlatWall - Brad Gustavesen
Clients needed to sell stuff
things got complicated
needed a full e-commerce platform
wanted to keep Mura
Mura + Slatwall = sweet
Slatwall
- full e-commerce platform
- custom products, produce bundles
- coming soon...selling events ala EventBrite
Slatwall + Mura Advantages
all your "brand stuff" is in ONE place
product listings, details, etc.
separate content and e-commerce admins
-- keep your blog editors OUT of the e-commerce section, etc.
(there is also a standalone version of Slatwall that runs without Mura)
What do i need to theme?
1. shopping pages -- products, listings, barriers, brands
barriers = the "hey you don't have access to this" msg that pops up for, say, a product guide for a product that i haven't purchased yet, etc
2. ordering -- checkout and shopping cart
the actual "buying process"
3. accounts
- my account, order history, profile, change password, etc.
tip - don't forget things like order confirmation, shipment confirmation email layouts, etc.
-- other 1-off things that you might need to theme as well.
Slatwall...
designed to run -immediately- with minimal setup/changes
adjust the links in the base templates and you're off and running
built on default Bootstrap framework
matches up w/ the Mura theme out of the box
-- no custom css definitions for Slatwall
selling content
Yellow Bird Club
- wants to sell guide books
a product in SlatWall is just a "page" in Mura
so to create a new product (i.e. the guide book)
just make a page in Mura
click the SlatWall tab on the left
restrict access - yes
barrier page - restricted access
require purchase for access = yes
sell this content = yes
publish
barrier page
make a new page/template in Mura
click SlatWall tab - click the "page type" and set it to "barrier page"
Products --
merchandise products = things i can actually touch (shirt, mousepad, etc)
can flag pages as Product via the Slatwall tab in Mura Admin
-- so just create a page, and tag it as a Product
attributes - work the same as the Mura class extension manager stuff
$.slatwall.productList()
-- gets you ALL the products, and filters automatically if you're on a listing page for a particular attribute (i.e. it will only return the Mousepad if you're on the listing page for that category, etc)
slatwall-shoppingcart.cfm
-- the default cart template
can just change the html in there to make the Cart match the sites look/feel
a straight copy/paste of the HTML from your theme will get you most of the way there.
User accounts in SlatWall don't HAVE to be Mura users
can sync them
or they can be separate
SlatWall "forgot password" box on the Profile is the SLATWALL password/profile, not the Mura user
typically, only sync the System Users so they can administer the site
Client side API too
put $.slatwall.renderJSObject(subsystem='public')# in your template so that renders out and you're all set.
need more themes?
themeforest.net
wrapbootstrap.com
tips -
outputting data
cfdump is your friend
USE THE "TOP" attribute
<cfdump var $slatwal.product() top = 1>
errors
-don't forget layout changes, there are lots of situational design and layout considerations
(error messages, promotions, product options)
review the comments
there are great inline comments in the default S/W templates worth reading
docs.getslatwall.com -- lots of documentation
also has a google group - slatwallecommerce
Let 'em know if you do a site w/ SlatWall, they'll check it out and maybe feature it on the site.
Clients needed to sell stuff
things got complicated
needed a full e-commerce platform
wanted to keep Mura
Mura + Slatwall = sweet
Slatwall
- full e-commerce platform
- custom products, produce bundles
- coming soon...selling events ala EventBrite
Slatwall + Mura Advantages
all your "brand stuff" is in ONE place
product listings, details, etc.
separate content and e-commerce admins
-- keep your blog editors OUT of the e-commerce section, etc.
(there is also a standalone version of Slatwall that runs without Mura)
What do i need to theme?
1. shopping pages -- products, listings, barriers, brands
barriers = the "hey you don't have access to this" msg that pops up for, say, a product guide for a product that i haven't purchased yet, etc
2. ordering -- checkout and shopping cart
the actual "buying process"
3. accounts
- my account, order history, profile, change password, etc.
tip - don't forget things like order confirmation, shipment confirmation email layouts, etc.
-- other 1-off things that you might need to theme as well.
Slatwall...
designed to run -immediately- with minimal setup/changes
adjust the links in the base templates and you're off and running
built on default Bootstrap framework
matches up w/ the Mura theme out of the box
-- no custom css definitions for Slatwall
selling content
Yellow Bird Club
- wants to sell guide books
a product in SlatWall is just a "page" in Mura
so to create a new product (i.e. the guide book)
just make a page in Mura
click the SlatWall tab on the left
restrict access - yes
barrier page - restricted access
require purchase for access = yes
sell this content = yes
publish
barrier page
make a new page/template in Mura
click SlatWall tab - click the "page type" and set it to "barrier page"
Products --
merchandise products = things i can actually touch (shirt, mousepad, etc)
can flag pages as Product via the Slatwall tab in Mura Admin
-- so just create a page, and tag it as a Product
attributes - work the same as the Mura class extension manager stuff
$.slatwall.productList()
-- gets you ALL the products, and filters automatically if you're on a listing page for a particular attribute (i.e. it will only return the Mousepad if you're on the listing page for that category, etc)
slatwall-shoppingcart.cfm
-- the default cart template
can just change the html in there to make the Cart match the sites look/feel
a straight copy/paste of the HTML from your theme will get you most of the way there.
User accounts in SlatWall don't HAVE to be Mura users
can sync them
or they can be separate
SlatWall "forgot password" box on the Profile is the SLATWALL password/profile, not the Mura user
typically, only sync the System Users so they can administer the site
Client side API too
put $.slatwall.renderJSObject(subsystem='public')# in your template so that renders out and you're all set.
need more themes?
themeforest.net
wrapbootstrap.com
tips -
outputting data
cfdump is your friend
USE THE "TOP" attribute
<cfdump var $slatwal.product() top = 1>
errors
-don't forget layout changes, there are lots of situational design and layout considerations
(error messages, promotions, product options)
review the comments
there are great inline comments in the default S/W templates worth reading
docs.getslatwall.com -- lots of documentation
also has a google group - slatwallecommerce
Let 'em know if you do a site w/ SlatWall, they'll check it out and maybe feature it on the site.