Twig Templating Engine
The Twig templating engine is at the heart of Shopware's theming system. It allows developers to create reusable templates for rendering HTML, making maintaining and updating the frontend easier.
Here are a few key elements of how Twig is used in Shopware themes:
- **Context**: In Twig, the context holds all the information that is passed to the template. In Shopware, this context typically includes vital information about the current page, such as the active product, category, or CMS content. For example, if a product detail page is being rendered, the context will include all relevant data about that product, such as its name, price, description, and images. This context-driven approach allows templates to be highly dynamic and adaptable to different pages and content types.
- **Custom Filters and Functions**: Shopware has added several custom Twig filters and functions to enhance the theming process. For instance, there are filters for formatting prices, rendering media files, and generating URLs based on the routing system. These extensions make it easier to implement common ecommerce functionalities without writing complex code.
For more detailed information about Twig and templating in Shopware, refer to the [Shopware Developer Documentation on Templating and Theming](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/customize-templates.html).
### 
Cascading Style Sheets
CSS plays a crucial role in customizing and styling Shopware themes. Here's how CSS is typically used:
- **Styling Components**: CSS is used to define the look and feel of various components like headers, footers, buttons, product listings, and forms.
```css
.header {
background-color: #f8f9fa;
padding: 20px;
}
.product-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
```
- **SASS/LESS**: Shopware supports CSS preprocessors like SASS (Syntactically Awesome Style Sheets) and LESS (Leaner Style Sheets) to write more maintainable and modular CSS.
```scss
$primary-color: #3498db;
.button {
background-color: $primary-color;
color: #fff;
&:hover {
background-color: darken($primary-color, 10%);
}
}
```
- **Media Queries**: CSS media queries are used to create responsive designs that adapt to different screen sizes.
```css
@media (max-width: 768px) {
.product-list {
flex-direction: column;
}
}
```
- **Twig and CSS**: Shopware uses Twig as its templating engine. You can include custom CSS files in your Twig templates.
```html
{% block base_styles %}
{{ parent() }}
{% endblock %}
```
Here's a typical structure for the CSS files in a Shopware theme:
```text
Javascript
Shopware themes primarily use vanilla JavaScript (ES6). However, developers can integrate various JavaScript libraries and frameworks to enhance functionality and interactivity.
Here's how it's typically used:
- **Create JS plugins**: Storefront JavaScript plugins are vanilla JavaScript ES6 classes that extend from the Shopware Plugin base class. For more information, refer to [Writing a JavaScript plugin](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-javascript.html#writing-a-javascript-plugin)
```js
const { PluginBaseClass } = window;
export default class ExamplePlugin extends PluginBaseClass {
}
```
- **Interactive Elements**: JavaScript is used to create interactive elements like sliders, modals, accordions, and dropdowns.
- **AJAX Calls**: Through AJAX (Asynchronous JavaScript and XML), JavaScript enables seamless data fetching without reloading the page. This is crucial for features like adding products to the cart or filtering products.
- **Event Handling**: JavaScript handles user actions such as clicks, hovers, and form submissions to create a responsive interface. On top of that, Shopware publishes JS events which you can use to extend the default behavior. For more information, refer to [Reacting to JavaScript Events on Storefront](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/reacting-to-javascript-events.html)
Some commonly used frameworks and libraries include:
- 
Vue.js: A progressive framework for building user interfaces. It's often used for creating dynamic and reactive components. BY default, Vue.js is used in administration. From Shopware 6.6 and upwards, administration uses Vue.js 3. On previous versions Vue.js 2 is used.
You can read more about this here [Vue 3 upgrade](https://developer.shopware.com/docs/guides/upgrades-migrations/administration/vue3.html).
- 
jQuery: A fast, small, and feature-rich JavaScript library that simplifies HTML document traversal, event handling, and animation. This library was included by default in Shopware until version 6.5.
Here's a typical structure for JavaScript files in a Shopware theme:
```text
src/Resources/app/storefront/src/
.
├── composer.json
└── src
├── Resources
│ ├── app
│ │ └── storefront
│ │ └── src
│ │ └── main.js <-- JS entry
└── SwagBasicExampleTheme.php
```
### 
Bootstrap
Shopware themes leverage Bootstrap, a popular HTML, CSS, and JavaScript library, to create responsive and visually appealing storefronts. Here's how Bootstrap is used in Shopware themes:
- **Base Framework**: The Shopware storefront is built on top of Bootstrap, utilizing its grid system, components, and utilities to structure and style the theme.
- **Customization**: Developers can override Bootstrap variables and styles to customize the appearance of the storefront. This is done by modifying SCSS variables in the theme's overrides.scss file.
- **Responsive Design**: Bootstrap's responsive design features ensure that the storefront looks good on all devices, from smartphones to tablets to desktops.
- **CSS Classes**: Bootstrap provides a wide range of CSS classes that can be applied to HTML elements to control layout, typography, colors, and more.
#### Using Bootstrap Classes
You can use Bootstrap classes directly in your Twig templates to style elements. For example:
```html
Welcome to My Shop
This is a primary text color.