Cart block theming

The Cart block provided by the Commerce Cart Flyout module looks identical to the default Cart block provided by Drupal Commerce. However, when a customer clicks a link on the flyout version of the cart, he will not be taken to another page to view the cart. Instead, the cart form will be displayed in a sidebar that "flies out" on the right side of the page. This documentation page describes the two templates that can be themed to customize the Cart block provided by the Commerce Cart Flyout module:

• The main block template is commerce-cart-flyout-block.html.twig.
• The commerce-cart-flyout-block-icon.html.twig template can be used to customize the cart icon.

Theming commerce-cart-flyout-block.html.twig

Available variables

• The url variable provides a link to the the Cart page, at /cart. 
• The count_text variable displays the total number of items in all carts followed by either "item" for a single item or "items" for multiple items. See the Cart block section of the Installation & Configuration documentation page for more information about how the count is calculated.

Rendering the cart icon

To display the cart icon in the cart block, you need to include the following html in your template:

<span class="cart-block--summary__icon" />

The cart-block--summary__icon class is targeted by the javascript (in /commerce_cart_flyout/js/views/CartOffCanvas.es6.js.) The cart icon is rendered here using the commerce-cart-flyout-block-icon.html.twigtemplate.

Rendering the cart link

To render a link in the cart block that will trigger the offcanvas flyout, you need to include the cart-block-link__expand class. For example:

<a class="cart-block--link__expand" href="<%= url %>">My cart flyout link</a>

When the link is clicked, the offcanvas flyout will open in the right sidebar, provided there is at least one item in the customer's cart. 

Theming commerce-cart-flyout-block-icon.html.twig

Available variable

• The icon variable provides a path to the default cart icon provided by the Drupal Commerce module, at /icons/ffffff/cart.png

Rendering the icon

You can use a custom icon by providing its path. For example:

<img src="/modules/custom/mymodule/icons/my_cart.png" alt="Cart"/>