The base theming is located within
rapidez/core which you can publish to your project and change it. Alternatively you can create your own package with views, css and js like a theme.
Read the Laravel Blade Templates docs (opens new window) before you begin.
To change the views you can publish them with:
php artisan vendor:publish --provider="Rapidez\Core\RapidezServiceProvider" --tag=views
After that you'll find all the Rapidez Core views in
resources/views/vendor/rapidez. For more information see Overriding Package Views (opens new window) in the Laravel docs.
It's recommended to only add the views you've changed into your source control for upgradability. To keep track of what you've changed in a view it's a good idea to add the unchanged version to version control before you make any changes.
# Blade Directives
Rapidez provides some Blade Directives to easily get information from Magento.
Keep in mind the output of these directives are cached! So after changing a configuration, block or widget the cache needs te be cleared. See the caching docs.
Get a config value for the current store scope with optionally a fallback, example:
Get the block contents for the current store scope:
Optionally you can specify a second argument with an array which will be passed through to the
strtr (opens new window) function to replace data within the block, for example:
@block('footer_links_block', [ '<a' => '<a class="text-red-600"' ])
Processes content containing variables from Magento so variables, block and widgets are working.
Created your own variables? Have a look at the
Used to specify a widget location where widgets can be rendered.
@widget('location', 'type', 'handle', $entityId)
Have a look at the current widget locations (opens new window) we've added by default and the widget tables in the database to see how the parameters work. Custom widgets can be defined with the
# Blade Components
Rapidez comes with some useful Blade Components (opens new window) for commonly used elements like form elements to reduce repetition. For example the input component:
Which outputs a styled input with an id, name, type, placeholder and label (with a corresponding
for attribute) on top.
Try to use these elements as much as possible so if you'd like to change the appearance you can do so at one place.
Another example; the "productlist" component which outputs a nice product list:
<x-rapidez::productlist :value="['MS04', 'MS05', 'MS09']"/>
Rapidez is using this component to render the related products, up-sells and cross-sells but it can be used anywhere.
Use TailwindCSS (opens new window) as we've done with the base styling or change the
webpack.mix.js file and use whatever you want. Have a look at the Laravel Mix docs (opens new window) for all the available options.
By default Rapidez is using the TailwindCSS Just-in-Time Mode (opens new window)
resources/js/app.js there is just a
require so you can extend easily. If you'd like to change or overwrite something you can copy the content of the required file and change the parts you'd like.