Making changes in the template

Goal

The goal of this tutorial is to learn how to make small changes in your template. With the help of a few examples we will show you how to achive this. The first examples are described step-by-step, the following examples won't show each step separately, because the procedure is always the same.

Procedure

As procedure we take the following steps as a basis:

Definition of the adjustment
Searching the template file, which is responsible for the needed feature by default
Deduce the adjustment in the own template
Testing

The Bare Theme and the Responsive Theme are either default templates, which never should be changed, because adjustments could be deleted when this file will be updated in Shopware! Because of this you have to deduce the template correctly.

If not yet made, create a new theme in the Theme Manager which inherits from the default Responsive Theme. Shopware creates the complete directory structure for adjusting your template in the /themes directory, but don't create any files, because these are adopted from the default template, if no file exists. (More Information here.)

Size chart on detail page

Goal is to display a size chart below the order number on the item detail page.

Create / manage free text field

Because the link should appear only at defined items, it makes sense to use free text fields for this. So create a new item free text field of the type "checkbox", for example we use "attr4":

The free text field is now available in the backend and can be set for each desired item.

Adjust the template

To spot the place, where the default template build the order number, you have to open the theme directory of the Bare Theme, because the Bare Theme builds the whole structure of Shopware. Because our desired change should be made on the detail page, navigate to the directory /themes/Frontend/Bare/frontend/detail, here you find all template files, which are responsible for the detail page.

Because our adjustment should be made below the order number, we need the code, which builds the order number, you can search e.g. by IDE or editors like "Notepad++" this filed for keywords to find the right place, so you should search the "detail"-directory for the string "order number".

Because "order number" is contained in multiple files, you have to navigate through the results and find the right one, which accomplishes the task, in this case it's the index.tpl because here the order number blocks and the attribute 1 and 2 blocks are standing among themselves. The block for the order number is named frontend_detail_data_ordernumber here. Now we know, that the index.tpl and the block frontend_detail_data_ordernumber is responsible for the function we want to adjust.

Inherit adjustments correctly

Now create in /themes/Frontend/YOURTHEME/frontend/detail a new file named index.tpl. At first we have to deduce from the default theme, the first line must be:


{extends file="parent:frontend/detail/index.tpl"}

Now we extend the block. Because the size chart should appear under the order number, the block has to be extended with smarty.block.parent (Explanation). The extended block now looks like this:


{* Append Article SKU with link to size chart *}
{block name='frontend_detail_data_ordernumber'}
    {$smarty.block.parent}
    {if $sArticle.attr4 == true}
        <li class="base-info--entry entry--sku">
 
            {* Size chart - Label *}
            {block name='frontend_detail_data_sizechart_label'}
                <strong class="entry--label">
                    {s name="SizeChartLabel" namespace="frontend/detail/data"}{/s}
                </strong>
            {/block}
 
            {* Size chart - Link *}
            {block name='frontend_detail_data_sizechart_link'}
                <strong class="entry--content">
                    {s name="SizeChartLink" namespace="frontend/detail/data"}{/s}
                </strong>
            {/block}
        </li>
    {/if}
{/block}

If your theme gets compiled now, the new code will be applied and it should be displayed in the template, but the defined snippets are still empty.

Filling snippets

The snippets "SiteChartLabel" and "SizeChartLink" are currently empty and must be filled by using the Snippet management, just open the snippet manager and search for the snippets by name or open the defined namespace "frontend/detail/data". As example we set the snippets to "Size advice?" and a link to the size chart itself with the following HTML code:


 
<a href="/size-chart" title="Size chart" target="_blank">Size chart</a>

The link to /size-chart expects, that you defined this page yet. This can be done e.g. by using Shop pages.

Further description below the item listing

In some cases it may be helpful to display another description text below the category listing, goal of this tutorial is to display this description. which should look like the category description, if the description is filled.

Create / manage free text field

Because the description should appear only in categories which have the description filled, it makes sense to use free text fields for this. So create a new text field of the type "HTML" for the categories, in this example we use "attribute1":

The free text field is available now in the backend and can be filled.

Adjust the template

To spot the place, where the default template builds the listing, you have to open the theme directory of the Bare Theme, because the Bare Theme builds the whole structure of Shopware. Because our desired change should be made on the listing, navigate to the directory /themes/Frontend/Bare/frontend/listing, here you find all template files, which are responsible for the listing.

IN this case we don't know where to start, so we take a look in the index.tpl first, which is the basic structure of each component, there we see the included listing and below the tag could. So we know that the index.tpl is the file we need to deduce, the Block is called frontend_listing_index_listing.

Spot the variables

To spot the attribute, you can use the default template naming for search:

First take a look which variables are used in the file you are working on, in the listing this is $sCategoryContent, so you can use your deduced template file to get all available variables by using


<pre>{$sCategoryContent|print_r}</pre>

This shows you all available variables, so you can search for your attributes variable.

Inherit adjustments correctly

Then create a new file called index.tpl in the directory /themes/Frontend/YOURTHEME/frontend/listing. At first we have to deduce from the default theme, the first line must be:


{extends file="parent:frontend/listing/index.tpl"}

The block "frontend_listing_index_listing" will be extended by using smarty.block.parent to give the content in the template after the listing is shown:


{* Listing *}
{* Extend listing with additional description *}
{block name="frontend_listing_index_listing"}
    {$smarty.block.parent}
    {if $sCategoryContent.attribute.attribute1}
        {$sCategoryContent.attribute.attribute1}
    {/if}
{/block}

Because this only displays the attribute itself, this don't look nice:

So we change it another time and get the styling of the category description to use it for our additional description too, that it looks the same. As described in "Find the place which is responsible for the function", we search for the category description, which is built in the text.tpl and adopt this to our description box:


{block name="frontend_listing_index_listing"}
    {$smarty.block.parent}
    <div class="hero-unit category--teaser panel has--border is--rounded">
        <div class="hero--text panel--body is--wide">
            {if $sCategoryContent.attribute.attribute1}
                <div class="teaser--text-long">
                    {$sCategoryContent.attribute.attribute1}
                </div>
                <div class="teaser--text-short is--hidden">
                    {$sCategoryContent.attribute.attribute1|strip_tags|truncate:200}
                    <a href="#" title="{"{s namespace="frontend/listing/listing" name="ListingActionsOpenOffCanvas"}{/s}"|escape}" class="text--offcanvas-link">
                        {s namespace="frontend/listing/listing" name="ListingActionsOpenOffCanvas"}{/s} &raquo;
                    </a>
                </div>
                <div class="teaser--text-offcanvas is--hidden">
                    <a href="#" title="{"{s namespace="frontend/listing/listing" name="ListingActionsCloseOffCanvas"}{/s}"|escape}" class="close--off-canvas">
                        <i class="icon--arrow-left"></i> {s namespace="frontend/listing/listing" name="ListingActionsCloseOffCanvas"}{/s}
                    </a>
                    <div class="offcanvas--content">
                        <div class="content--title">{$sCategoryContent.cmsheadline}</div>
                        {$sCategoryContent.attribute.attribute1}
                    </div>
                </div>
            {/if}
        </div>
    </div>
{/block}

The result looks like this:

Desktop:

Mobile with opened off-canvas box:

Mark defined items as always deliverable

Goal of this tutorial is, that defined items are displayed as "Ready to ship today" no matter what the stock the item in Shopware has.

Create / manage free text field

Because this feature should also be usable for every item itself, we use free text fields also here. Create a new free text field of the type "Checkbox" for items, in our example we use "attr5":

The free text field now is available for use.

Adjust the template

The availability is displayed at multiple places in Shopware, because of this we search the whole Bare Theme folder for keywords using our IDE or "Notepad++" to find their usage. Trying this we see that "delivery" is used in the delivery_informations.tpl which again is used at the relevant places in the frontend, so we seem to be right. Now we know, which file is responsible for the availability, because this file has only 1 block, this is clear.

Inherit adjustments correctly

Now create a new file named delivery_informations.tpl in /themes/Frontend/DEINTHEME/frontend/plugins. At first we have to deduce from the default theme, the first line must be:


{extends file="parent:frontend/plugins/delivery_informations.tpl"}

Now we change the block this way, that we retrieve our defined attribute and then display the right deliverey status. The "Ready to ship today" state can be deduced by its name: "DetailDataInfoInstock" - Alternatively you also can search the snippets by name, this also works fine. Now we change the file:


{block name='frontend_widgets_delivery_infos'}
    {if $sArticle.attr5 == true || $sBasketItem.additional_details.attr5 == true}
        <div class="product--delivery">
            <link href="http://schema.org/InStock" itemprop="availability">
            <p class="delivery--information">
				<span class="delivery--text delivery--text-available">
					<i class="delivery--status-icon delivery--status-available"></i>
                    {s name="DetailDataInfoInstock"}{/s}
				</span>
            </p>
        </div>
    {else}
        {$smarty.block.parent}
    {/if}
{/block}

This way the item will look like "Ready to ship today" no matter what stock it is.

Deleting something from the theme

If you want to delete something from the frontend, you can do this easily by overwriting the desired block empty, this deletes the content in the frontend. An example:


{extends file="parent:PARENT"}
 
{block name='NAME'}
{/block}

Keep in mind, that this requires the same steps as described before, only deduce the theme in your own one, never change the default theme!

Changing the robots.txt

Because Shopware generates the robots.txt also over the theme, you can also change this easily. The path to the template file, which is responsible for generating the robots.txt, is /frontend/robots_txt/index.tpl.

Here you can deduce this file in your own theme like described before to individualize your robots.txt file.

Display divergent shipping address on the invoice

Documents are also template files which can also be individualized. The default document template files can be found in /Bare/documents, the files have the following responsibilities:

File	Responsible for
index.tpl	Invoice
index_gs.tpl	Credit
index_ls.tpl	Delivery note
index_sr.tpl	Cancellation

For example we add the divergent shipping address to the invoice, when it differs to the billing address.


{block name="document_index_info_dispatch"}
    {if $Order._dispatch.name}
        <div style="font-size:11px;color:#333;">
            {s name="DocumentIndexSelectedDispatch"}{/s}
            {$Order._dispatch.name}
 
        </div>
    {/if}
    {assign var="shippingaddress" value="shipping"}
    {assign var="shippingArr" value=$User.$shippingaddress}
    {assign var="billingArr" value=$User.$address}
 
    {$billingString = $billingArr['salutation']|cat:$billingArr['title']|cat:$billingArr["firstname"]|cat:$billingArr['lastname']|cat:$billingArr['street']|cat:$billingArr['street']|cat:$billingArr['city']}
    {$shippingString = $shippingArr['salutation']|cat:$shippingArr['title']|cat:$shippingArr["firstname"]|cat:$shippingArr['lastname']|cat:$shippingArr['street']|cat:$shippingArr['street']|cat:$shippingArr['city']}
 
    {if $shippingString != $billingString}
        {s name="DocumentIndexSelectedShippingaddress"}{/s}
 
        <div style="margin-left: 20px;">
            {if $User.$shippingaddress}
                {$User.$shippingaddress.salutation|salutation}
                {if {config name="displayprofiletitle"}}
                    {$User.$shippingaddress.title}<br/>
                {/if}
                {$User.$shippingaddress.firstname} {$User.$shippingaddress.lastname}
 
                {$User.$shippingaddress.street}
 
                {if {config name=showAdditionAddressLine1}}
                    {$User.$shippingaddress.additional_address_line1}
 
                {/if}
                {if {config name=showAdditionAddressLine2}}
                    {$User.$shippingaddress.additional_address_line2}
 
                {/if}
                {if {config name=showZipBeforeCity}}
                    {$User.$shippingaddress.zipcode} {$User.$shippingaddress.city}
 
                {else}
                    {$User.$shippingaddress.city} {$User.$shippingaddress.zipcode}
 
                {/if}
            {/if}
        </div>
 
    {/if}
{/block}

Add further country flags for the language change

In the default setting, the flags for Germany, Great Britain, the Netherlands, France, Spain and Italy are stored for the language change. These are stored in the file /themes/Frontend/Responsive/frontend/_public/src/less/_components/flags.less.
To provide further flags for selection, a theme adjustment is necessary.

Adjustments

flags.less

The flags.less file contains the information on the localisations and flags to be used.
Each localisation receives its own entry that begins with the ISO code. You can find this code in the basic settings under Shop settings > Localisations.

In general, you can create your own flags using CSS.
This is particularly useful for flags that consist of horizontal/vertical stripes, for example.
The flags stored in the standard can also be used as a guide.

More complex flags can also be created in this way. However, since several layers have to be worked with here, this may require advanced CSS knowledge.
As a simpler alternative, it is possible to integrate a ready-made flag as a base64. To do this, an image is reformatted into a character string and this character string is stored in the file.
Further details on Base64 and a converter can be found at https://www.base64-image.de/.

In your theme, save the customised file under: /themes/Frontend/YOURTHEME/frontend/_public/src/less/_components/flags.less

Example

Creating a flag as CSS
The extension for Hungary is listed here as an example


&.hu_HU { background-position: 0 0; background-image: linear-gradient(to bottom, #DD0000 33%, white 33%, white 66%, #336333 66%); }

The entry in flags.less begins with the ISO code of the localisation, in this case hu_HU.
This is followed by the information on the creation of the flag. The beginning


background-position: 0 0; background-image:

is identical for all flags created using CSS. The part


linear-gradient(to bottom, #DD0000 33%, white 33%, white 66%, #336333 66%);

contains the information for creating the flag. In this case, the flag is created from top to bottom ("linear-gradient(to bottom"). The first part takes up 33% of the area and receives the colour with the HEX value DD0000. The second colour area starts at 33% and ends at 66% with the colour white. The last area starts at 66% and receives the colour value 336333).

The complete file then looks like this:


/*
Language Flags
==================================================
Displays a country flag the size of 14px x 11px used for language selections purposes.

inspired by: https://github.com/dhanishgajjar/css-flags

en_GB: we need to use svg for en_GB, cause it's smaller than the CSS-Version
*/

.language--flag {
    .unitize-height(11);
    .unitize-width(14);
    display: inline-block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

    &.de_DE { background-position: 0 0; background-image: linear-gradient(to bottom, black 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%); }
    &.en_GB { background-position: 0 0; background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='640' height='480'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M-85 0h682v512H-85z'%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg clip-path='url%28%23a%29' transform='translate%2880%29 scale%28.94%29'%3E%3Cpath fill='%23006' d='M-256 0H768v512H-256z'%2F%3E%3Cpath fill='%23fff' d='M-256 0v57l910 455h114v-57L-141 0h-115zM768 0v57l-909 455h-115v-57L654 0h114z'%2F%3E%3Cpath fill='%23fff' d='M171 0v512h170V0H171zm-427 171v170H768V171H-256z'%2F%3E%3Cpath fill='%23c00' d='M-256 205v102H768V205H-256zM205 0v512h102V0H205zm-461 512L85 341h77l-342 171h-76zm0-512L85 171H9L-256 38V0zm606 171L692 0h76L427 171h-77zm418 341L427 341h76l265 133v38z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
    &.nl_NL { background-position: 0 0; background-image: linear-gradient(to bottom, #DD0000 33%, white 33%, white 66%, #21468B 66%); }
    &.fr_FR { background-position: 0 0; background-image: linear-gradient(to right, #21468B 33%, white 33%, white 66%, #DD0000 66%); }
    &.es_ES { background-position: 0 0; background-image: linear-gradient(#DD0000 25%, #FFCE00 25%, #FFCE00 75%, #DD0000 75%);}
    &.it_IT { background-position: 0 0; background-image: linear-gradient(to right, #009246 33%, white 33%, white 66%, #DD0000 66%);}
    &.hu_HU { background-position: 0 0; background-image: linear-gradient(to bottom, #DD0000 33%, white 33%, white 66%, #336333 66%); }
}

Embed flag as Base64
The extension for Sweden is listed here as an example.
First find an image file of the flag you want to use and convert it to Base64 code.


&.sv_SE { background-position: 0 0; background-size: 100%; background-repeat: no-repeat; background-image: url('data:image/gif;base64,R0lGODlhkgBvADAAACwAAAAAkgBvAIcAAAAAADMAAGYAAJkAAMwAAP8AKwAAKzMAK2YAK5kAK8wAK/8AVQAAVTMAVWYAVZkAVcwAVf8AgAAAgDMAgGYAgJkAgMwAgP8AqgAAqjMAqmYAqpkAqswAqv8A1QAA1TMA1WYA1ZkA1cwA1f8A/wAA/zMA/2YA/5kA/8wA//8zAAAzADMzAGYzAJkzAMwzAP8zKwAzKzMzK2YzK5kzK8wzK/8zVQAzVTMzVWYzVZkzVcwzVf8zgAAzgDMzgGYzgJkzgMwzgP8zqgAzqjMzqmYzqpkzqswzqv8z1QAz1TMz1WYz1Zkz1cwz1f8z/wAz/zMz/2Yz/5kz/8wz//9mAABmADNmAGZmAJlmAMxmAP9mKwBmKzNmK2ZmK5lmK8xmK/9mVQBmVTNmVWZmVZlmVcxmVf9mgABmgDNmgGZmgJlmgMxmgP9mqgBmqjNmqmZmqplmqsxmqv9m1QBm1TNm1WZm1Zlm1cxm1f9m/wBm/zNm/2Zm/5lm/8xm//+ZAACZADOZAGaZAJmZAMyZAP+ZKwCZKzOZK2aZK5mZK8yZK/+ZVQCZVTOZVWaZVZmZVcyZVf+ZgACZgDOZgGaZgJmZgMyZgP+ZqgCZqjOZqmaZqpmZqsyZqv+Z1QCZ1TOZ1WaZ1ZmZ1cyZ1f+Z/wCZ/zOZ/2aZ/5mZ/8yZ///MAADMADPMAGbMAJnMAMzMAP/MKwDMKzPMK2bMK5nMK8zMK//MVQDMVTPMVWbMVZnMVczMVf/MgADMgDPMgGbMgJnMgMzMgP/MqgDMqjPMqmbMqpnMqszMqv/M1QDM1TPM1WbM1ZnM1czM1f/M/wDM/zPM/2bM/5nM/8zM////AAD/ADP/AGb/AJn/AMz/AP//KwD/KzP/K2b/K5n/K8z/K///VQD/VTP/VWb/VZn/Vcz/Vf//gAD/gDP/gGb/gJn/gMz/gP//qgD/qjP/qmb/qpn/qsz/qv//1QD/1TP/1Wb/1Zn/1cz/1f///wD//zP//2b//5n//8z///8AAAAAAAAAAAAAAAAI/wALCBxIsKDBgwgTEhxjr6HDhxAdKpxIsaLFixgzaizAMKLHhxtDihxJcmTHjx9LqlzJUmUalChbypxJM+FJmBBr6tzZ8iZOiTyDCtXo86e9oUiTKnxpFKTSp1CL/oRKNalUnFWzBr0KU6vXmkybNvxKtqdYoGXTmjw7Vq3bjVxjvp17MaxYungpxk2Zt+/BvR79Cl7I9ujgwXabHh4MOOJiwY1zPu4b2elkvImNXs5bGe3mt53bfgZdePTczFNNuw1tWHVa1q7Vwo5dFjVW2mRn4/aqe3fW3r6p2u4a/Hfp4lWBI7d6fPnT4XKdK1UufWvz6kOpjy7Mvbv37+DDi6EfT768+fPo06tfz769+/fw48ufT7++/fv48+vfz7+///8ABijggAQWaOCBCCao4IIMNujggxBGKOGEEY1h4YUYZqjhhhx2iCEmhXko4ogklmjihV9ph11NKq44U4sutgQdXzHyBGONLl2HI0037rgWWz7q1GOQG80YGJEv6oikSkMueVGTTlZkpGNRrgRllQpdiSVCWm5p0JSSeSlSl2IORGNmmRwpiaZFYFq2JkZnlhmnmHN62aZnb1pU55Z7YtlnlXeKlqeeag5qU6GG/oVoogUF2hqjWS4KqUB/Rlmpk45OOtGlS3KKpKdEZqrpoUCOyqWkk4IapKimGqSqj6/uGCtUAQEAOw==');}

The entry in flags.less begins with the ISO abbreviation of the localisation. This is followed by a part that is generally valid for the inclusion of Base64 code


background-position: 0 0; background-size: 100%; background-repeat: no-repeat; background-image:

The individual code is then attached to it.

The complete file then looks like this:


/*
Language Flags
==================================================
Displays a country flag the size of 14px x 11px used for language selections purposes.

inspired by: https://github.com/dhanishgajjar/css-flags

en_GB: we need to use svg for en_GB, cause it's smaller than the CSS-Version
*/

.language--flag {
    .unitize-height(11);
    .unitize-width(14);
    display: inline-block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

    &.de_DE { background-position: 0 0; background-image: linear-gradient(to bottom, black 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%); }
    &.en_GB { background-position: 0 0; background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='640' height='480'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M-85 0h682v512H-85z'%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg clip-path='url%28%23a%29' transform='translate%2880%29 scale%28.94%29'%3E%3Cpath fill='%23006' d='M-256 0H768v512H-256z'%2F%3E%3Cpath fill='%23fff' d='M-256 0v57l910 455h114v-57L-141 0h-115zM768 0v57l-909 455h-115v-57L654 0h114z'%2F%3E%3Cpath fill='%23fff' d='M171 0v512h170V0H171zm-427 171v170H768V171H-256z'%2F%3E%3Cpath fill='%23c00' d='M-256 205v102H768V205H-256zM205 0v512h102V0H205zm-461 512L85 341h77l-342 171h-76zm0-512L85 171H9L-256 38V0zm606 171L692 0h76L427 171h-77zm418 341L427 341h76l265 133v38z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
    &.nl_NL { background-position: 0 0; background-image: linear-gradient(to bottom, #DD0000 33%, white 33%, white 66%, #21468B 66%); }
    &.fr_FR { background-position: 0 0; background-image: linear-gradient(to right, #21468B 33%, white 33%, white 66%, #DD0000 66%); }
    &.es_ES { background-position: 0 0; background-image: linear-gradient(#DD0000 25%, #FFCE00 25%, #FFCE00 75%, #DD0000 75%);}
    &.it_IT { background-position: 0 0; background-image: linear-gradient(to right, #009246 33%, white 33%, white 66%, #DD0000 66%);}
    &.sv_SE { background-position: 0 0; background-size: 100%; background-repeat: no-repeat; background-image: url('data:image/gif;base64,R0lGODlhkgBvADAAACwAAAAAkgBvAIcAAAAAADMAAGYAAJkAAMwAAP8AKwAAKzMAK2YAK5kAK8wAK/8AVQAAVTMAVWYAVZkAVcwAVf8AgAAAgDMAgGYAgJkAgMwAgP8AqgAAqjMAqmYAqpkAqswAqv8A1QAA1TMA1WYA1ZkA1cwA1f8A/wAA/zMA/2YA/5kA/8wA//8zAAAzADMzAGYzAJkzAMwzAP8zKwAzKzMzK2YzK5kzK8wzK/8zVQAzVTMzVWYzVZkzVcwzVf8zgAAzgDMzgGYzgJkzgMwzgP8zqgAzqjMzqmYzqpkzqswzqv8z1QAz1TMz1WYz1Zkz1cwz1f8z/wAz/zMz/2Yz/5kz/8wz//9mAABmADNmAGZmAJlmAMxmAP9mKwBmKzNmK2ZmK5lmK8xmK/9mVQBmVTNmVWZmVZlmVcxmVf9mgABmgDNmgGZmgJlmgMxmgP9mqgBmqjNmqmZmqplmqsxmqv9m1QBm1TNm1WZm1Zlm1cxm1f9m/wBm/zNm/2Zm/5lm/8xm//+ZAACZADOZAGaZAJmZAMyZAP+ZKwCZKzOZK2aZK5mZK8yZK/+ZVQCZVTOZVWaZVZmZVcyZVf+ZgACZgDOZgGaZgJmZgMyZgP+ZqgCZqjOZqmaZqpmZqsyZqv+Z1QCZ1TOZ1WaZ1ZmZ1cyZ1f+Z/wCZ/zOZ/2aZ/5mZ/8yZ///MAADMADPMAGbMAJnMAMzMAP/MKwDMKzPMK2bMK5nMK8zMK//MVQDMVTPMVWbMVZnMVczMVf/MgADMgDPMgGbMgJnMgMzMgP/MqgDMqjPMqmbMqpnMqszMqv/M1QDM1TPM1WbM1ZnM1czM1f/M/wDM/zPM/2bM/5nM/8zM////AAD/ADP/AGb/AJn/AMz/AP//KwD/KzP/K2b/K5n/K8z/K///VQD/VTP/VWb/VZn/Vcz/Vf//gAD/gDP/gGb/gJn/gMz/gP//qgD/qjP/qmb/qpn/qsz/qv//1QD/1TP/1Wb/1Zn/1cz/1f///wD//zP//2b//5n//8z///8AAAAAAAAAAAAAAAAI/wALCBxIsKDBgwgTEhxjr6HDhxAdKpxIsaLFixgzaizAMKLHhxtDihxJcmTHjx9LqlzJUmUalChbypxJM+FJmBBr6tzZ8iZOiTyDCtXo86e9oUiTKnxpFKTSp1CL/oRKNalUnFWzBr0KU6vXmkybNvxKtqdYoGXTmjw7Vq3bjVxjvp17MaxYungpxk2Zt+/BvR79Cl7I9ujgwXabHh4MOOJiwY1zPu4b2elkvImNXs5bGe3mt53bfgZdePTczFNNuw1tWHVa1q7Vwo5dFjVW2mRn4/aqe3fW3r6p2u4a/Hfp4lWBI7d6fPnT4XKdK1UufWvz6kOpjy7Mvbv37+DDi6EfT768+fPo06tfz769+/fw48ufT7++/fv48+vfz7+///8ABijggAQWaOCBCCao4IIMNujggxBGKOGEEY1h4YUYZqjhhhx2iCEmhXko4ogklmjihV9ph11NKq44U4sutgQdXzHyBGONLl2HI0037rgWWz7q1GOQG80YGJEv6oikSkMueVGTTlZkpGNRrgRllQpdiSVCWm5p0JSSeSlSl2IORGNmmRwpiaZFYFq2JkZnlhmnmHN62aZnb1pU55Z7YtlnlXeKlqeeag5qU6GG/oVoogUF2hqjWS4KqUB/Rlmpk45OOtGlS3KKpKdEZqrpoUCOyqWkk4IapKimGqSqj6/uGCtUAQEAOw==');}
}

Display the payment status of orders in the frontend

Here we describe how to add the paymend status to your own order or payment state and sending emails by using it.

Implement the status in the theme

The easiest way to provide the paymend status in the frontend is to add it below the orderstatus. To do this, add the "order_item.tpl" in your own theme in the following path: /themes/Frontend/YOURTHEMENAME/frontend/account/.

There you can extend the following block with the payment status:


{extends file="parent:frontend/account/order_item.tpl"}
 
{block name="frontend_account_order_item_status_value"}
	{$smarty.block.parent}
	<div class="column--value">
		<span class="order--status-icon status--{$offerPosition.cleared}"></span>
		{if $offerPosition.cleared==9}
			{s name="partially_invoiced"}Partially invoiced{/s}
		{elseif $offerPosition.cleared==10}
			{s name="completely_invoiced"}Completely invoiced{/s}
		{elseif $offerPosition.cleared==11}
			{s name="partially_paid"}Partially paid{/s}
		{elseif $offerPosition.cleared==12}
			{s name="completely_paid"}Completely paid{/s}
		{elseif $offerPosition.cleared==13}
			{s name="1st_reminder"}1st Reminder{/s}
		{elseif $offerPosition.cleared==14}
			{s name="2nd_reminder"}2nd Reminder{/s}
		{elseif $offerPosition.cleared==15}
			{s name="3nd_reminder"}3nd Reminder{/s}
		{elseif $offerPosition.cleared==16}
			{s name="encashment"}Encashment{/s}
		{elseif $offerPosition.cleared==17}
			{s name="open"}Open{/s}
		{elseif $offerPosition.cleared==18}
			{s name="reserved"}Reserved{/s}
		{elseif $offerPosition.cleared==19}
			{s name="delayed"}Delayed{/s}
		{elseif $offerPosition.cleared==20}
			{s name="re_crediting"}Re-Crediting{/s}
		{elseif $offerPosition.cleared==21}
			{s name="review_necessary"}Review necessary{/s}
		{/if}
	</div>
{/block}

Add the correct Icon

To display the corresponding icon next to the status and you already know about LESS-Styling you could add the following code. If you're not so good with LESS at this moment you could create your own "all.less" file. The LESS code will be compiled into normal CSS by the LESS compiler. Create your all.less in the following directory: /themes/Frontend/YOURTHEMENAME/frontend/_public/src/less Please enter the following code:


.order--status-icon {
	&.status--9, //partially_invoiced
	&.status--10, //completely_invoiced
	&.status--11, //partially_paid
	&.status--13, //1st_reminder
	&.status--14, //2nd_reminder
	&.status--15, //3nd Reminder
	&.status--17, //open
	&.status--18, //reserved
	&.status--19{ //delayed
		background: @highlight-info;
	}
 
	&.status--12, //completely_paid
	&.status--20{ //re_crediting
		background: @highlight-success;
	}
 
	&.status--16, //encashment
	&.status--21{ //review_necessary
		background: @highlight-error;
	}
}

If you clear the cache after your adjustment and re-compile your theme, the paymend status is displayed as shown in the frontend:

Remove logo

You can remove the Shopware logo from the footer via a template adjustment.

Example

First you have to connect to your FTP server. In the Shopware directory under "themes > Frontend > YOUR THEME > frontend > index" you have the option of including a file that removes the logo.

To do this, create the file "footer.tpl" with the following content in the named path:

{extends file="parent:frontend/index/footer.tpl"}{block name="frontend_index_shopware_footer_logo"}{/block}

Please note that this is an example and that you may have to make further changes to the code. You should also make sure to create your own theme, which is derived from the original theme, so that your changes are update-safe.

After you have created the file, recompiled the theme and cleared the cache, the logo should be removed.

Remove lettering

If you want to change or remove the text "Realised with Shopware", you can do this in the snippet management under Settings > Snippets in the backend. Here you can simply search for the text module "IndexCopyright" and remove the value.

Making changes in the template

Goal

Procedure

Size chart on detail page

Create / manage free text field

Adjust the template

Inherit adjustments correctly

Filling snippets

Further description below the item listing

Create / manage free text field

Adjust the template

Spot the variables

Inherit adjustments correctly

Mark defined items as always deliverable

Create / manage free text field

Adjust the template

Inherit adjustments correctly

Deleting something from the theme

Changing the robots.txt

Display divergent shipping address on the invoice

Add further country flags for the language change

Adjustments

Example

Display the payment status of orders in the frontend

Implement the status in the theme

Add the correct Icon

Remove Shopware logo and lettering from the footer

Remove logo

Remove lettering

Was this article helpful?

Version

Contents