# Storefront # General # How can I add content into the body of the storefront? The content for body pipeline can be used to inject content into the `` element of the page, such as stylesheets, meta tags, scripts, or other body elements: ```php // Globally \Aero\Store\Pipelines\ContentForBody::extend(function (string $content, \Closure $next) { return $next($content . view('acme::script')) }); // Product Page Only \Aero\Store\Http\Responses\ProductPage::extend(function (\Aero\Store\Http\Responses\ProductPage $page, \Closure $next) { \Aero\Store\Pipelines\ContentForBody::extend(function (string $content, \Closure $next) { return $next($content . view('acme::script')) }); }); ``` --- ### Parameters
**Parameter****Type****Description**
`$content``string`The content to be injected into the body.
`$next``\Closure`The next step in the query pipeline.
# How can I add content into the head of the storefront? The content for head pipeline can be used to inject content into the `` element of the page, such as stylesheets, meta tags, scripts, or other head elements. ```php // Globally \Aero\Store\Pipelines\ContentForHead::extend(function (string $content, \Closure $next) { return $next($content . view('acme::script')) }); // Product Page Only \Aero\Store\Http\Responses\ProductPage::extend(function (\Aero\Store\Http\Responses\ProductPage $page, \Closure $next) { \Aero\Store\Pipelines\ContentForHead::extend(function (string $content, \Closure $next) { return $next($content . view('acme::script')) }); }); ``` --- ### Parameters
**Parameter****Type****Description**
`$content``string`The content to be injected into the body.
`$next``\Closure`The next step in the query pipeline.
# Pages # What are the standard storefront pages? Aero includes the following standard e-commerce pages. These are automatically created when you create a new Aero store: - **Homepage:** Displays the main landing page of the store. - **Listings:** Displays product listings based on searches or category selection. - **Product:** Displays a product details and let's customers add it to their cart. - **Cart:** Displays the cart, e.g. the products the customer has added to it. - **Search:** Search results will point to the listings page - **Information:** Displays static information, e.g. About Us, Returns Policy etc # Listings Page # How do I extend the listings page query? You can extend the listings page query by extending the `\Aero\Store\Pipelines\ListingsPageQuery` pipeline. For example, you can add functionality to have products that only certain customer groups can view and buy. First, add a product setting to control this behaviour: ```php \Aero\Catalog\Models\Product::settings('customer_groups', function (\Aero\Common\Settings\ModelSettingGroup $group) { $group->eloquent('allowed_customer_groups', \Aero\Account\Models\CustomerGroup::class) ->hint('Leave blank to allow any customer group to view/buy this product') ->multiple() ->dontLoadModels(); }); ``` Then add this data to the `\Aero\Search\Elastic\Documents\ListingDocument`: ```php \Aero\Search\Elastic\Documents\ListingDocument::add('search-data', function (\Aero\Search\Elastic\Documents\ListingDocument $document) { $product = optional($document->getModel())->product ?? null; $allowedGroups = optional($product)->setting('customer_groups.allowed_customer_groups') ?? []; return [ 'customer_groups' => $allowedGroups, 'does_not_require_customer_group' => empty($allowedGroups), ]; }); ```

You must run `php artisan aero:search:reindex --type=listing` for these document changes to be applied to existing listings.

Then extend the query to use factor this in when resolving what listings to show on the listings page: ```php \Aero\Store\Pipelines\ListingsPageQuery::extend(function (\Aero\Store\Pipelines\ListingsPageQuery $builder) { $bool = new \Elastica\Query\BoolQuery(); // Always show products that don't require a customer group $bool->addShould( new \Elastica\Query\Term([ 'search-data.does_not_require_customer_group' => true, ]), ); // When a customer is in a group, also show products that require that group if ($group = optional($builder->builder->request->user())->customer_group_id) { $bool->addShould( new \Elastica\Query\Terms('search-data.customer_groups', [$group]), ); } // At least one of the above conditions must be met $bool->setMinimumShouldMatch(1); $builder->query->getQuery()->addMust($bool); }); ``` Finally extend the product page to prevent people viewing products when they lack the required customer group: ```php \Aero\Store\Http\Responses\ProductPage::extend(function (\Aero\Store\Http\Responses\ProductPage $page, \Closure $next) { $allowedGroups = $page->product->setting('customer_groups.allowed_customer_groups'); if (empty($allowedGroups)) { return $next($page); } $customer = $page->request->user(); $customerGroupId = optional($customer)->customer_group_id ?? null; abort_unless(in_array($customerGroupId, $allowedGroups), 404); return $next($page); }); ``` # Products Page # How can I remove the manufacturer from the product page breadcrumb? By default, when there is no referrer (i.e. the page was hit directly - not through a filtering or searching), the product page breadcrumb contains a crumb entry for the manufacturer. This can be disabled: ```php \Aero\Catalog\Models\Product::$breadcrumbContainsManufacturer = false; ``` # Blocks # How do I display content blocks on the storefront? The structure of the views for the block items is shown below. If you are creating your own theme or custom storefront, you must ensure these files are present in order for the content blocks to display correctly: ``` └─ resources └─ views └─ blocks └─ html.twig └─ image.twig └─ link.twig └─ menu.twig └─ text.twig ``` ## Block Items ### A single block item To show a single block item, use `block_item` twig function, passing the block's key: ```twig {{ block_item('product-page.confidence-builder') }} ``` This will show the first available block item in the block. To show a different block item, provide the position as the second parameter: ```twig {% if block_exists('homepage.brand-heroes') %}
{{ block_item('homepage.brand-heroes', 0) }}
{{ block_item('homepage.brand-heroes', 1) }}
{% endif %} ``` ### A collection of block items To show all block items in a content block, use the `block_items` twig function, passing the block's key: ```twig {{ block_items('product-page.confidence-builders') }} ``` If you need to limit the number of items returned in the collection, pass a limit as the second parameter: ```twig {{ block_items('product-page.confidence-builders', 3) }} ``` If the block items need to be wrapped in elements to style their position, the following approach can be used: ```twig {% if block_exists('homepage.main-hero') %} {% set main_hero = block_items('homepage.main-hero', null, { sizes: { small: { width: 360, height: 360 }, medium: { width: 660, height: 560 }, large: { width: 1280, height: 600 } } }) %}
{% for hero in main_hero %}
{{ hero | raw }}
{% endfor %}
{% endif %} ```

You must use the `raw` filter to ensure the block item HTML isn't escaped.

## Passing data In some cases (as seen in the previous example), a block item may need data to be passed from the theme. This is especially useful for themes, which dictate the image dimensions: ```twig {{ block_item('listings.loyalty-banner', 0, { sizes: { small: { width: 400, height: 200 }, medium: { width: 600, height: 260 }, large: { width: 1024, height: 300 }, }, options: ['contain', {quality: 90}], }) }} ``` # Breadcrumb # How do I display the breadcrumb? To access the breadcrumb on the storefront, use the `breadcrumb()` function inside Twig files. It can be displayed by looping over each crumb like so: ```twig ``` # How do I add something to the breadcrumb? You can use the `add()` method to add a crumb: ```php \Aero\Store\Facades\Breadcrumb::add(function (\Aero\Store\Services\Breadcrumb $breadcrumb) { $breadcrumb->add(new \Aero\Store\Crumb('Name', '/url')); }); ```

You can provide a Closure that returns an `\Aero\Store\Crumb` instance instead if you need to defer until the breadcrumb is rendered.

# How do I clear the breadcrumb? You can use the `clear()` method to clear the crumbs: ```php \Aero\Store\Facades\Breadcrumb::clear(); ``` # How can I filter the breadcrumb? You can provide a filter callback to remove unwanted crumbs, it should return `true` when a crumb should be kept and `false` otherwise: ```php \Aero\Store\Facades\Breadcrumb::setFilter(function ($crumb) { if ($crumb->getName() === 'Foo') { return false; } return true; }); ``` # How can I display the request referrer? By default, the product page breadcrumb is built based on the referrer. For example, if a customer performs a search for "shirt" and then clicks on a listing result, the breadcrumb on the product page will be `Home > Search for “shirt” > Casual Shirt`. To disable this functionality, use `dontUseReferer()`: ```php \Aero\Store\Facades\Breadcrumb::dontUseReferer(); ``` # How can I disable the breadcrumb functionality? There may be cases (such as an API) where the breadcrumb functionality should not use the request at all. To do this, use `dontUseRequest()`: ```php \Aero\Store\Facades\Breadcrumb::dontUseRequest(); ``` # Routing # How do I set a slug validator? You can control if a collection of slugs is valid or not by setting your own validator: ```php \Aero\Store\Routing\Slugs::setValidator(function ($slugs, $resolver) { if ($resolver !== 'listings') return true; if ($slugs->count() < 3 && $slugs->where('model_type', 'tag')->count()) return false; return true; }); ``` # Image Factory # What is the image factory? The Image Factory is a tool for generating optimised, resized versions of images on demand. It allows you to define the dimensions and apply transformations such as cropping, resizing, format conversion, and quality adjustments, while generating a signed URL for the resulting image. ## Introduction The image factory can be called using the `image_factory()` helper function from within PHP (.php and .blade.php) and Twig (.twig) files. When initializing an instance, the width and height of the resized image must be provided (in pixels). The image factory outputs a signed URL to the resized image with an embedded validation token. This prevents being able to generate an infinite number of uniquely configured URLs that would drain the resources on the server. ### PHP ```php image_factory(600, 800); // outputs: https://store.com/image-factory/640fa397eb07791f~600x800 image_factory(600, 800)->path('/images/example.jpg'); // outputs: https://store.com/image-factory/640fa397eb07791f~600x800/images/example.jpg image_factory(600, 800)->path('/images/example.jpg')->retina(); // outputs: https://store.com/image-factory/632ab6d293827ff6~600x800@2x/images/example.jpg ``` ### Twig ```twig {{ image_factory(600, 800) }} {# outputs: https://store.com/image-factory/640fa397eb07791f~600x800 #} {{ image_factory(600, 800).path('/images/example.jpg') }} {# outputs: https://store.com/image-factory/640fa397eb07791f~600x800/images/example.jpg #} {{ image_factory(600, 800).path('/images/example.jpg').retina() }} {# outputs: https://store.com/image-factory/632ab6d293827ff6~600x800@2x/images/example.jpg #} ``` ### Twig / Vue If using the Aero component system (Vue.js template within a .twig file), the image URL can be built by merging the image factory prefix with the JavaScript variable: ```twig
``` ## Available Options There are several options that can be used to manipulate the image. These can be chained. ### `path($path)` The `path` option is used to specify the path to the original image within the `storage/app/public` directory. #### Twig: ```twig {% set image = listing.images | first %} ``` #### PHP: ```php $image = image_factory(150, 300)->path($path); ``` Alternatively, the path can be provided as the third parameter in the initialisation of the instance: #### Twig: ```twig {% set image = listing.images | first %} ``` #### PHP: ```twig $image = image_factory(150, 300, $path); ``` ### `webp()` The `webp` option is used to serve a `.webp` (a modern lossless compression) image. #### Twig: ```twig ``` #### PHP: ```php $image = image_factory(150, 300)->webp(); ``` ### `retina()` The `retina` option is used to serve an image that is twice the size (in pixels) of the designated dimensions. For example, an image generated from `image_factory(500, 500)->retina()` would result in an image with dimensions 1000px by 1000px. #### Twig: ```twig ``` #### PHP: ```php $image = image_factory(150, 300)->retina(); ``` ### `dpr($scale)` The `dpr` option is used to scale the image dimensions. #### Twig: ```twig ``` #### PHP: ```php $image = image_factory(150, 300)->dpr(3.5); ``` ### `flip()` The `flip` option transforms the image by flipping the x-axis. #### Twig: ```twig ``` #### PHP: ```php $image = image_factory(150, 300)->flip(); ``` ### `contain()` The `contain` option keeps the resized image within the dimensional constraints whilst retaining the original aspect ratio. #### Twig: ```twig ``` #### PHP: ```php $image = image_factory(150, 300)->contain(); ``` ### `crop()` The `crop` option scales the image to the dimensional constraints and removes any overflowing image from the canvas. #### Twig: ```twig ``` #### PHP: ```php $image = image_factory(150, 300)->crop(); ``` ### `rotate($angle)` The `rotate` option rotates the image by the given angle (in degrees counter-clockwise). #### Twig: ```twig ``` #### PHP: ```php $image = image_factory(150, 300)->rotate(90); ``` ### `sharpen($amount)` The `sharpen` option sharpens the image by the given amount (0 – 100). #### Twig: ```twig ``` #### PHP: ```php $image = image_factory(150, 300)->sharpen(25); ``` ### `pixelate($size)` The `pixelate` option applies a pixelation effect to the image with a given size of pixels. #### Twig: ```twig ``` #### PHP: ```php $image = image_factory(150, 300)->pixelate(5); ``` ### `quality($percentage)` The `quality` option sets the quality of the outputted image. The default is 80%. #### Twig: ```twig ``` #### PHP: ```php $image = image_factory(150, 300)->quality(95); ``` ### `invert()` The `invert` option reverses all colors in the image. #### Twig: ```twig ``` #### PHP: ```php $image = image_factory(150, 300)->invert(); ``` ### `greyscale()` The `greyscale` option turns the image into a greyscale version. #### Twig: ```twig ``` #### PHP: ```php $image = image_factory(150, 300)->greyscale(); ``` ### `placeholder($values)` The `placeholder` option returns a placeholder string. #### Twig: ```twig ``` #### PHP: ```php $image = image_factory(150, 300)->placeholder('#ff0000'); ``` By default, this is an encoded inline SVG path, which can be changed by setting a custom resolver: ```php \Aero\Store\Services\ImageFactory::setPlaceholderResolver(function ($image) { return asset('placeholder.svg'); }); ``` If using a custom resolver, the values passed into the placeholder can then be accessed using the `$placeholderValues` property: #### Twig: ```twig ``` #### PHP: ```php $image = image_factory(150, 300)->placeholder(['type' => 'product', 'category' => 'dress']); ``` ```php \Aero\Store\Services\ImageFactory::setPlaceholderResolver(function ($image) { return asset("placeholder-{$image->placeholderValues['type']}.svg#{$image->placeholderValues['category']}"); }); ``` ### `options($options)` The `options` option allows multiple options to be specificed by calling one method. The individual options can either be passed as separate arguments or as an array. #### Twig: ```twig // or ... ``` #### PHP: ```php $image = image_factory(150, 300)->options('crop', ['pixelate' => 100], ['quality' => 30]); // or ... $image = image_factory(150, 300)->options(['crop', ['pixelate' => 100], ['quality' => 30]]); ``` # How do I use the image factory? The image factory can be called using the `image_factory()` helper function from within PHP (.php and .blade.php) and Twig (.twig) files. When initialising an instance, the width and height of the resized image must be provided (in pixels). The image factory outputs a signed URL to the resized image with an embedded validation token. This prevents being able to generate an infinite number of uniquely configured URLs that would drain the resources on the server. ### PHP ```php image_factory(600, 800); // outputs: https://store.com/image-factory/640fa397eb07791f~600x800 image_factory(600, 800)->path('/images/example.jpg'); // outputs: https://store.com/image-factory/640fa397eb07791f~600x800/images/example.jpg image_factory(600, 800)->path('/images/example.jpg')->retina(); // outputs: https://store.com/image-factory/632ab6d293827ff6~600x800@2x/images/example.jpg ``` ### Twig ```twig {{ image_factory(600, 800) }} {# outputs: https://store.com/image-factory/640fa397eb07791f~600x800 #} {{ image_factory(600, 800).path('/images/example.jpg') }} {# outputs: https://store.com/image-factory/640fa397eb07791f~600x800/images/example.jpg #} {{ image_factory(600, 800).path('/images/example.jpg').retina() }} {# outputs: https://store.com/image-factory/632ab6d293827ff6~600x800@2x/images/example.jpg #} ``` ### Twig / Vue If using the Aero component system (Vue.js template within a .twig file), the image URL can be built by merging the image factory prefix with the JavaScript variable: ```html
``` # Currencies # How do I change the store currency? In order to change the store currency we need to publish the store configuration file: ```bash php artisan vendor:publish --tag aero::store-config ``` Then locate the `configurations` section of the published `config/aero/store.php` file and update the `currency_code` value of the active store configuration.

Ensure the new `currency_code` exists in the `currencies` database table of the store.

# What is a fascia currency and how do I use it? A fascia currency can be set to render a different currency to the one specified in the store configuration. ### Setting the fascia currency The easiest way to check for and apply the fascia currency is through `store` middleware. The example snippet below details how to check for the presence of a `currency` cookie passed with the request: ```php class SetFasciaCurrency { public function handle(\Illuminate\Http\Request $request, \Closure $next): void { \Aero\Store\Http\Middleware\EncryptCookies::$exceptions[] = 'currency'; if ($code = $request->cookie('currency')) { $currency = \Aero\Common\Models\Currency::find($code); $request->store()->setFasciaCurrency($currency); } return $next($request); } } ``` The middleware class can then be pushed to the `store` middleware group within the `register` method of a service provider: ```php public function register(): void { $this->app['router']->pushMiddlewareToGroup('store', SetFasciaCurrency::class); } ```

Remember to call `parent::register()` if inside a module service provider.

If the fascia currency needs to be set when running a console command: ```php if ($this->app->runningInConsole() && ($currency = env('CURRENCY_CODE'))) { $this->app->booted(function () use ($currency) { \Aero\Store\Facades\Store::setFasciaCurrency(\Aero\Common\Models\Currency::find($currency)); }); } ``` --- ### Additional Considerations - The exchange-rate of the fascia currency is based on the store's default configuration currency. - If your store theme uses the Aero component system, the fascia currency will automatically be rendered for listings and products. However, if your theme utilises the `range-slider` component, you should ensure `currency('[value]')` and `currency().fascia_exchange_rate` are passed through as the `formatter` and `multiplier` attributes, respectively. - Any event which is queued and is an instance of `Aero\Events\ManagedEvent` will automatically handle re-applying the fascia currency when running from the queue worker. To force rendering the payment currency in mail notifications, use the `.base` modifier. For example: `{{ order.total_price.base }}`. # Events # What are the available events? ### Products
**Event** **Description**
`product.loaded`Fired when the product component has finished mounting and is marked as loaded.
`product.images-updating`Fired when the product images are about to be updated because the image set changed.
`product.images-updated`Fired after the product images have been updated. Provides the updated `images`.
`product.variant-selected`Fired when the selected product variant changes. Provides the variant, quantity, price, and total sale price.
`product.attribute-selected`Fired when one or more product attributes are selected or changed. Provides the selected attributes.
`product.quantity-updated`Fired when the product quantity changes. Provides the new quantity.
`product.subscription-plan-deselected`Fired when the currently selected subscription plan is removed/deselected.
`product.subscription-plan-selected`Fired when a subscription plan is selected. Provides the plan ID and selected plan.
`product.add-to-cart`Fired before the product is sent to the cart API. This event can modify the cart payload or return `false`/`null` to prevent adding the item.
`product.added-to-cart`Fired after the cart API successfully adds the product. Provides the returned cart/add-to-cart data.
`product.failed-adding-to-cart`Fired when adding the product to the cart fails. Provides the returned errors.
### Listings
**Event** **Description**
`listings.loaded`Fired after the listings component has mounted and its initial data has been loaded.
`listings.update`Listener event that triggers a listings update/navigation to the supplied URL.
`listings.updating`Fired after a listings request returns but before the response data is applied to the Vue component. Can modify the returned listings data.
`listings.updated`Fired after the returned listings data has been applied to the component and Vue has completed the next tick.
`listings.navigated`Fired when listings data is updated through a navigation that does not involve the component's normal history push/replace handling.
# How do I run a custom event? You can run your own custom event using the `runEvent()` method: ```javascript window.Aero.runEvent('acme', { foo: 'bar' }); ``` And listen for it wherever needed: ```javascript window.AeroEvents.on('acme', (data) => { console.log(data); }); ``` # Twig # What is Twig? **Storefront pages are built using the [Twig](https://twig.symfony.com/) template engine**. Twig is a fast, secure and flexible PHP templating solution. Before developing with Aero, we recommend that you become acquainted with the core concepts of Twig. The official Twig documentation is a great place to start: [Click here for the official Twig documentation](https://twig.symfony.com/doc) # What are the available twig functions?
**Twig function** **Description** **Typical Usage / Notes**
`aero(key)`Retrieves a value from the current store using the supplied key.Useful for accessing store-level properties dynamically.
`locale()`Returns the current store locale as a two-letter language code, e.g. `en`.Useful when language-specific behaviour or markup is required.
`page_title()`Returns the current page's SEO title.Used for page titles and SEO-related markup.
`store_name()`Returns the current store's name.Useful for displaying the store name in templates.
`store_logo()`Returns the URL of the current store's logo, or an empty string if no logo is configured.Useful for displaying the store logo.
`email_logo()`Returns the URL of the store's email logo, or an empty string if none is configured.Intended for email templates.
`store_address()`Returns the current store's address as an array.Useful when rendering store address information.
`active(...)`Determines whether a given item/route is currently active using the application's active service.Commonly used to apply active states to navigation elements.
`blocks(key, limit = null, data = [])`Returns the block items belonging to a specified block/group.Can optionally limit the number of items or filter by block type.
`block_items(key, limit = null, data = [])`Alias of `blocks()`. Returns block items for a specified block/group.Provides an alternative, more descriptive name when working with block collections.
`block_item(key, index = 0, data = [])`Returns a specific block item from a block/group by its index.Useful when a template needs a particular block item rather than the whole collection.
`block_exists(key, count = null)`Checks whether a block/group contains any items. Can also check whether it contains at least a specified number of items.Useful for conditionally rendering block-based content.
`block_item_exists(key, index = 0)`Checks whether a block contains an item at a specified index.Useful for safely checking whether a particular block item exists before rendering it.
`breadcrumb(...)`Returns the current breadcrumb/crumb collection.Used to render breadcrumb navigation.
`base64_encode(content)`Base64-encodes the supplied content.Useful when content needs to be represented as Base64 within a template.
`image_factory(width, height, path = '')`Creates an `ImageFactory` instance for generating/manipulating an image with the specified dimensions and optional path.Used when template-level image generation or processing is required.
`theme_asset(path, secure = null)`Generates the URL for an asset within the current theme.Useful for referencing theme CSS, JS, images, fonts, etc.
`theme_mix(path)`Generates the URL for a theme asset processed through Laravel Mix.Used for versioned/compiled theme assets.
`theme_vite(entrypoints, directory = 'build')`Generates Vite asset tags/URLs for entry points within the current theme.Used to load Vite-built theme assets.
`vite(entrypoints, directory = 'build')`Generates Vite asset tags/URLs for the supplied entry points.Used to load application-level Vite assets.
`theme_css(path)`Generates a stylesheet reference for a CSS file within the current theme.Handles theme CSS and can render it inline where appropriate.
`view_exists(view)`Checks whether a specified view exists.Useful for conditionally rendering optional views.
`setting(...)`Retrieves an application/store setting using its key.Provides access to configured settings from Twig.
`cart(...)`Retrieves the current cart from the request.Used to access cart information in storefront templates.
`currency(amount = null)`Returns the current currency, or formats a supplied amount using the current currency.Useful for displaying correctly formatted prices.
`css(path, url)`Generates CSS output for a stylesheet, either as an inline ` {% endcss %} ```

`2592000000` is 30 days in milliseconds.

Then let's include this file in our `header.twig`: ```twig {% include "layouts/partials/tax-toggle.twig" %} ``` Now we just have to mark any prices we display to use this toggle, for example in `product.twig`: ```twig {# Before #} {{ "{{ sale_price.inc }}" }} {# After #} {{ "{{ sale_price.inc }}" }} {{ "{{ sale_price.ex }}" }} ``` # How can I add a cart panel to my store? This tutorial will provide the code needed to setup a cart panel slide-out system for your store. First, lets add the `layouts/partials/cart-panel.twig` code: ```html

My Cart

{% if cart().items is empty %}

Your Shopping Cart is Empty

You haven't put any items in your shopping cart.
{% else %} {% for item in cart().items %} {% if item.isVisible() %} {% snippet "cart-item" %} {% endif %} {% endfor %} {% endif %}
{{ csrf_field() }}
Subtotal
{{ cart().subtotal }}
{% for discount in cart().discounts %}
{% if discount.code is not empty %} Discount ({{ discount.code }})
{{ method_field("delete") }} {{ csrf_field() }}
{% else %} {{ discount.name }} {% endif %}
- {{ discount.price.inc }}
{% endfor %} {% if cart().shippable %}
Shipping
{% if shipping %} {{ shipping.inc }} {% else %} Calculated at next step {% endif %}
{% endif %} {% for surcharge in cart().surcharges %}
{{ surcharge.name }}
{{ surcharge.total_price }}
{% endfor %} {% for voucher in cart().vouchers %}
{% if voucher.code is not empty %} Voucher ({{ voucher.code }}) {% else %} Voucher {% endif %}
{{ method_field("delete") }} {{ csrf_field() }}
- {{ voucher.price.inc }}
{% endfor %}
Total {% if cart().total.hasTax() %} Including taxes of {{ cart().total.tax }} {% endif %}
{{ cart().total.inc }}
Checkout Securely
{% js %}
{% endjs %} {% css %} {% endcss %} ``` This file uses the `snippets/cart-item.twig` snippet: ```html
{% if item.url %}{% endif %} {% set image_width = 320 %} {% set image_height = 320 %} {% if item.image %} {{ item.image.alt|default(item.name) }} {% else %} {{ item.name }} {% endif %} {% if item.url %}{% endif %}
{% if item.url %}{% endif %} {{ item.name }} {% if item.url %}{% endif %}
{% if item.options|length %}
{% for option in item.options %}
{% set value = option.display_value|default(option.value) %} {% if value is empty %} {{ option.name }} {% else %} {{ option.name }}: {{ value }} {% endif %} {% if option.hasPrice() %} ({{ option.price.inc }}) {% endif %} {% if option.hasFiles() %} [{{ option.fileCount() }} attached files] {% endif %}
{% endfor %}
{% endif %} {% if item.hasSubItems() %}
{% for sub_item in item.subItems %} {% if sub_item.isHidden() %}
{{ sub_item.quantity }} x {{ sub_item.name }} {% if not sub_item.isFree() %} – {{ sub_item.subtotal.inc }} {% endif %} {% if errors.has(sub_item.id) or sub_item.hasError() %} {{ errors.first(sub_item.id)|default(sub_item.error) }} {% endif %} {% if sub_item.canBeRemoved() %}
{{ method_field("put") }} {{ csrf_field() }} ()
{% endif %}
{% endif %} {% endfor %}
{% endif %} {% for file in item.files %} {% if file.hasExtension(["jpg", "jpeg", "png"]) %} {% endif %} {% endfor %} {% if errors.has(item.id) or item.hasError() %} {{ errors.first(item.id)|default(item.error) }} {% endif %}
{% if not item.isFree() %}
{{ item.subtotal.inc }}
{% if item.isReduced() %}
{{ item.fullSubtotal.inc }}
{% endif %} {% if item.quantity > 1 %} {% set unit_price %} {{ item.price.inc }} {% endset %}
{{ unit_price }} each
{% endif %} {% endif %}
{% set quantity %}
{{ method_field("put") }} {{ csrf_field() }} {% if item.canBeChanged() %} {% else %} {{ item.quantity }} {% endif %} {% if item.canBeRemoved() %} {% endif %}
{% endset %}
Quantity: {{ quantity }}
``` Then we must extend the `\Aero\Store\Http\Responses\CartItemAdd` response builder in order to update the cart panel: ```php \Aero\Store\Http\Responses\CartItemAdd::extend(function (\Aero\Store\Http\Responses\CartItemAdd $action, \Closure $next) { $action->setData('cart_panel', (string) view('layouts.partials.cart_panel')); }); ```

The `cart_panel` is retrieved by our `product.added-to-cart` listener and used to effectively re-render the cart panel to use the new cart data.

Now we can include the cart panel in `header.twig`: ```twig {% include "layouts/partials/cart-panel.twig" %} ``` Finally, if you want the cart panel to open when the cart button (typically an anchor tag with `href={{ route('cart') }}`) is clicked (rather than redirecting to the cart page), then add the `header-link--cart` class to it.