Change the appearance of the shopping cart block

The shopping cart block can be changed and extended using regular Drupal concepts such as theming, applying css, altering the block output.

hook_block_view_alter() gives you access to the render array returned by CartBlock::build() and the data that's passed to the template.
The commerce-cart-block.html.twig template can be overriden in your theme to replace the HTML output.
And finally the commerce_cart.layout.css and commerce_cart.theme.css files provide the styling which you can override in your own stylesheets, or swap out altogether (by replacing the #attached library in hook_block_view_alter(), for example).

The cart block is styled through the following library:

cart_block:
  version: VERSION
  css:
    layout:
      css/commerce_cart.layout.css: {}
    theme:
      css/commerce_cart.theme.css: {}
  js:
    js/commerce_cart.js: {}
  dependencies:
    - core/jquery
    - core/drupal

As bojanz stated, we made two CSS to control the appearance. In your theme you can override the stylesheet for a library. See https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-an...

However, it may be worth just implementing commerce-cart-block.html.twig in your theme to replace our HTML with a FontAwesome <i class="fa fa-cart"></i>

We usually don't provide settings for things that can be done via theming.
This is a general Drupal 8 philosophy, and it makes sense since every user ends up having slightly different needs.

We tend to reconsider once the same request gets repeated (and refused) a significant number of times.
That way our UIs stay as simple as possible while site builders are guided to a right approach from day 1.

Created a new documentation page showing How to customize cart-block.
PR HERE - https://github.com/drupalcommerce/commerce-docs/pull/98
Patch attached

Nice! How can the twig variable for the total amount be figured out?

Nice! How can the twig variable for the total amount be figured out?

Unfortunately, right now the block is built 100% by Views and there are no order entities passed. I'd love to see a follow-up which allows the cart block to be solely Twig and not (just) Views

rigids, thanks for docs PR, merged: http://docs.drupalcommerce.org/v2/product/customize-the-shopping-cart-bl...

I'd like to alter the cart block links (replace Cart link by a checkout link).

CartBlock.php is a BlockBase but neither hook_block_build_alter nor hook_block_view_alter is called :-(
(same result with a specific block hook like hook_block_view_BASE_BLOCK_ID_alter or hook_block_build_BASE_BLOCK_ID_alter with id "commerce_cart" )

https://api.drupal.org/api/drupal/core!modules!block!block.api.php/funct...
https://api.drupal.org/api/drupal/core%21modules%21block%21block.api.php...

As mglaman said, right now the block is built 100% by Views.

Do I have to use a views hook ? which one ? and how to access to the block render array to change the links at the bottom of the cart block ?

Thanks

I'm not sure that it is the best way to do it but I successed using hook

https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21...

YOUR_MODULE_preprocess_block(&$variables)

==> to identify the block :

$variables["elements"]["#configuration"]["id"] == "commerce_cart"

==> to change the links with customs :

$variables['content']['#links']=$custom_links;

Here is how you can change the block content that is not alterable by the view.

You need to create a custom module. In the example below, the module is named "my_module".

my_module_block_view_commerce_cart_alter is based on hook_block_view_BASE_BLOCK_ID_alter(). hook_block_view_BASE_BLOCK_ID_alter() is similar to hook_block_view_alter(), but allows us to alter a specific block.

As explained in https://www.drupal.org/project/drupal/issues/2626224, we need to add a pre-render callback in order to modify the block content. in the example below, this is the "_change_cart_build_content" function.

use Drupal\Core\Url;

function my_module_block_view_commerce_cart_alter(array &$build, Drupal\Core\Block\BlockPluginInterface $block) {
  $build['#pre_render'][] = '_change_cart_build_content';
}

function _change_cart_build_content(array $build) {
  //ksm($build['content']); // uncomment to get content array

  // change the path to the cart icon
  $build['content']['#icon']['#uri'] = "modules/contrib/commerce/icons/000000/cart.png";

  // add a link to the bottom of the cart dropdown
  $build['content']['#links'][]= [
    '#type' => 'link',
    '#title' => t('Home'),
    '#url' => Url::fromRoute('<front>'),
  ];

  // change the number of items text
  $count = $build['content']['#count'];
  $build['content']['#count_text'] = \Drupal::translation()->formatPlural($count, '1 goody', '@count goodies');

  return $build;
}

One thing to note is that most $build['content'] area keys correspond to their values in the commerce-cart-block.html.twig file. For example, $build['content']['#count_text'] corresponds to {{ count_text }}. Also, if you just want a number of items (without text) you can simply use {{ count }} in that twig file. The contents of the view are displayed within {{ content }} .

Hi @spacetaxi, the code you've suggested works fine, but I cannot add a link to the checkout page. I looked in the documentation but I did not find anything useful. Do you have a suggestion? Thanks!

If anyone is interested I'm using the following method to add the checkout button on the cart block (with the code suggested on #15):

  if (isset($build['content']['#content'][0]['#arguments'][0])) {
    $cart_id = $build['content']['#content'][0]['#arguments'][0];
    $build['content']['#links'][]= [
      '#type' => 'link',
      '#title' => t('Checkout'),
      '#url' => Url::fromUri( \Drupal::request()->getSchemeAndHttpHost() . '/checkout/' . $cart_id),
      '#attributes' => [
        'class' => ['checkout-button']
      ]
    ];
  }

Hi @FiNeX.
Thanks for your code. I modified how the URL link is set to checkout. I think you should use the route name to create link for checkout page. (Code suggested on #17):

'#url' => Url::fromRoute('commerce_checkout.form', ['commerce_order' => $cart_id]),

Override template : commerce-cart-block.html.twig

If you want to print only count of the product without text then add {{ count }} and add image of cart in this twig template.

Seems odd to me that Drupal\commerce_cart\CartLazyBuilders method cartBlock() has a hard-coded icon URI, ending in '/icons/ffffff/cart.png'. So the module provides a selection of cart icon colours, but only white can be used without custom code.

Perhaps a future enhancement would be a way to specify a different icon colour, since there are a range of icon colours provided already by the Commerce module?