Modifying the Shopping Cart using Views
Drupal's strength is that the modules work together. Imagine a world where
you can build the most amazing content lister. It could give you as much or even
more control than raw SQL. Now, imagine a world where an ecommerce platform
completely worked with that amazing content lister. We each have our focus and
leave the "annoying" stuff to the other guy. The end result is everything we can
do is pluggable and has more use cases than we can possibly imagine.
That world exists. The content lister is called Views
and here we document how you can use Views to do just about anything with your
shopping cart or shopping basket.
Shopping Cart Block and Page
You would be tempted to think that the shopping cart block and the cart page
are from the same view with different displays. After all, that is a very common
pattern in Drupal. However for Drupal Commerce 1.x, Views 3.x was very much in
beta and to avoid forgotten bugs, the decision was made to make both the block
and the page separate views that only have a master display. This means, if you
want to edit either the block or the page, know that you must edit both
individually.
Editing the Shopping Cart Block
Shopping Cart Config
Navigate to any page and make sure to have an item in your shopping
cart block. You can then hover over the table there, you will see in the
upper right a link for "Edit view."
- Commerce Kickstart
- Add item to cart
- Hover over shopping cart, click Edit
Editing the Shopping Cart Page
Shopping Cart Config
If you navigate to the Shopping cart page and hover over the table
there, you will see in the upper right a link for "Edit view." Click
that.
- Commerce Kickstart
- Navigate to /cart
What views looks like when you click edit.
- Administration
- Structure
- Views
- commerce_cart_form
- Click "Edit"
- Or... Navigate to /cart
- Hover over table and click "Edit"
Creating a Shopping Cart from Scratch
"Sometimes the best way to learn is to rebuild it." I imagine Tony Stark
would have said that at some point. Let's play the engineer and see how the
Commerce Guys were able to build a shopping cart in Views.
Create a View
Create a View
Simply navigate to Structure, Views, Create a new View. Make your
screen look like the one to the left and then click "Continue and
Edit."
- Administration
- Structure
- Views
- Add a New View
Contextual Filters
The first bit of magic includes add a contextual filter in the
advanced column. Click add and then search for "Order ID" and add that
filter.
- Administration
- Structure
- Views
- new_shopping_cart
- Edit
Contextual Filters Config
This is very important. When setting up the contextual filter, be
sure to provide default value and select "Current user's cart order
ID."
- Administration
- Structure
- Views
- new_shopping_cart
- Edit
- Contextual Filters Edit
Relationship
Add a relationship. Choose Referenced Line Item. Also select "require
this relationship."
- Administration
- Structure
- Views
- new_shopping_cart
- Edit
- Add Relationship
Fields
When you add a field, simply start with the title. You could also add
a new relationship to the referenced product and add product details.
For our example, we added a product photo.
- Administration
- Structure
- Views
- new_shopping_cart
- Edit
- Add Fields
Footer
Views 3 has a feature called "Area Handlers" and this is what
powers the footer. Add a footer and you will see
a Line Item Summary near the top. Add that and configure to
your liking. We chose to show the Total and Checkout links.
- Administration
- Structure
- Views
- new_shopping_cart
- Edit
- Add Footer
Filters
Since line items can be anything from products, to shipping, to
discounts, we want to make sure we are only showing products. Though
there is a case where you might want to include other kinds of line
items.
- Administration
- Structure
- Views
- new_shopping_cart
- Edit
- Add Filter
Views Preview
Note that we have one item in our shopping cart while making this
view. If you didn't have anything the preview would show something
different.
- Administration
- Structure
- Views
- new_shopping_cart
- Edit
- Preview at the Bottom.
Blocks
Save and Exit out of Views. Go to Structure > Blocks and drag your
new block to a region of your choosing. For this example, it's going to
Sidebar-First.
- Administration
- Structure
- Blocks
- Drag Block to Region
Final Result
The final result is definitely custom. And hopefully this exercise
has inspired you to work through and explore other kinds of shopping
cart scenarios. For example, it would be possible to do what Amazon does
and attach a view to this to show related products, etc.