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

Click edit
        to configure the shopping cart block View

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

Click edit
        to configure the shopping cart View

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.

Drupal
    Commerce Shopping Cart Block Views
  • 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 block based on Commerce Order with Display Table

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

Add Commerce
        Order ID to Contextual Filters

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

VERY IMPORTANT:
        Supply Default Value and choose current user's order ID

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

Add a
        relationship to Reference Line Item

Relationship

Add a relationship. Choose Referenced Line Item. Also select "require this relationship."

  • Administration
  • Structure
  • Views
  • new_shopping_cart
  • Edit
  • Add Relationship

Add a field,
        search for title

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

Add a Footer called the Line Item Summary

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

Add a filter to
        make sure you are only seeing products.

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

Custom Shopping Cart Preview.

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.

Drag new block to
        a region of your choosing.

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

Default Shopping
        Cart vs. New Custom Shopping Cart

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.

Found errors? Think you can improve this documentation? edit this page