Customize commerce cart form page

Question

Task

I have been issued to alter the cart form view Shopping cart form (Commerce Order) on the site.com/cart page of the Drupal 7's commerce module. This includes adding extra choices such as sizes together with simply updating the quantity of each product.

My attempts so far

I've tried overriding commerce_cart_block just realise it was commerce_cart_form that was in charge of the content. Now I've tried a module that's called Commerce Cart View Override and it helps me have a template file called views-view--commerce-cart-form.tpl.php inside my template to display the content.

However I'm not really sure what I'm supposed to do now. In my mind I would override the table that show the items and the form surrounding it. I echo'ed get_defined_vars() in the template just to realise that there are quite many variables passed.

Question

What I desire is an elegant solution that allows me to append more forms to modify existing cart session, all in the /cart page, and also be able to have full control of the current cart table.

What is the ideal way for me to customize the /cart page? Am I on the right path, or there some simplier alternatives that I have missed? Personally I want a coded solution and not a database saved one.

Answer 1

Editing the /cart page in Views

I think this is the expected approach. Note: this assumes you know your way around Views.

1. Install Commerce Cart View Override, as you've done.
2. Edit the view named Shopping Cart Form, clone it, change the machine name to something starting with commerce_cart_form like commerce_cart_form_custom
3. Select this in the dropdown on the admin page admin/commerce/config/cart-overrides (Administer >> Store >> Configuration >> Cart Overrides), then save.
4. You can now edit the view that appears on the /cart page by editing this new view. A few non-intuitive tips:
   • To see a preview in the Views preview, you'll need to enter a shopping cart ID number into the "Preview with contextual filters" box above the preview. You can see some shopping cart ID numbers at /admin/commerce/orders/carts. You just enter the ID number, no other text needed.
   • To add any views fields from the products, for example product images, you'll need to add a new relationship from Line Items to Products. Under Advanced in the Views UI, under Relationships, click Add, then choose Commerce Line item: Referenced products. Product fields like images and taxonomy tags will then become available under Fields.
   • A common Commerce Cart configuration confusion: If no "Checkout" button appears for customers who aren't logged in, you need to go to admin/people/permissions and tick the "Anonymous user" box next to "Access checkout"
   • If you want to change the labels of buttons, for example the "Remove" buttons... that's a whole different story. Form elements are generated in a whole different part of the Drupal ecosystem and put into a View like this pre-rendered, all you can edit in Views is the labels that appear alongside or above the button. To edit the buttons themselves has to be PHP code:

Editing form elements like buttons

In a custom module or your theme's template.php file (remember that if you use a seperate admin theme, your template.php won't have any effect in the views preview, only the customer-facing pages), add something like this (credit):

function yourthemename_form_alter(&$form, $form_state, $form_id) {
  switch ($form_id)  {
  case 'views_form_commerce_cart_form_custom_default': 
  //               ^ from here on should match the view machine name from earlier 
  //                                         ^ from here, the particular view display, which you can see at the end of the Views UI URL while editting that display 
      foreach ($form['edit_delete'] as $row_id => $row) {
        if(isset($form['edit_delete'][$row_id]['#value'])){
            $form['edit_delete'][$row_id]['#value'] = 'New delete button label';
            }
        }

    $form['actions']['checkout']['#value'] = 'New checkout button label';
    $form['actions']['submit']['#value'] = 'New update button label';

  break;
  }
}