Blog - Hannes Pries - Webdeveloper Blog - Entwicklung mit Shopware, PHP, HTML5 und JavaScript

Shopware 6: Lieferschein und Datumsformate

Wenn man den Lieferschein erzeugt, fällt manchmal auf dass das eine Datum sich im Format stark unterscheidet. Es wäre so als würde es eine andere Locale als die anderen benutzen.. oder gar keine.

Der Fehler liegt direkt in der delivery_note.html.twig:

% block document_side_info_contents %}
{{ parent() }}
<tr><td>{% trans with {'%deliveryDate%': config.custom.deliveryDate|format_date('medium', locale=order.language.locale.code)} %}document.deliveryDate{% endtrans %}</td></tr>
{% endblock %}
[code]

Wenn man sich die anderen Datum-Formate in der base oder letter_header Datei anguckt fällt auf, dass hier das Locale nicht aus der Order stammt bzw nicht daraus gelesen wird. Korrekt wäre hier also:

[code]
% block document_side_info_contents %}
{{ parent() }}
<tr><td>{% trans with {'%deliveryDate%': config.custom.deliveryDate|format_date('medium', locale=locale)} %}document.deliveryDate{% endtrans %}</td></tr>
{% endblock %}

Vue: Animations einbauen

Mit Vue.js kann man relativ einfach und schnell normale CSS3-Animations mit den State-Übergängen von Elementen verknüpfen.

<transition name="dialogbox">
<div class="overlay-content card" v-if="textDialog.show">
<h4 class="text-center card-header">{{ textDialog.title }}</h4>
<div class="text-field card-body">
{{ textDialog.content }}
</div>
<div class="text-center card-footer">
<button v-on:click="closeDialogs" class="btn btn-dark">close</button>
</div>
</div>
</transition>

Durch die Transition-Tag wird das Element eingeschlossen, dessen Änderung mit der Animation verknüpft werden soll. Der Name ist der der erste Teil des Animationsnamens.

.dialogbox-enter-active {
animation: open 0.8s;
}

.dialogbox-leave-active {
animation: open 0.4s reverse;
}

@keyframes open {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}

die erste Klasse wird beim Anzeigen verwendet und die zweite, wenn das Element aus dem DOM entfernt wird.

Neben v.id geht auch v-show.

Shopware: Statische Seiten umbenennen

Im normal Fall wird die SEO-URL einer statischen Seite über den Namen/description gebildet. Ändert man nun den Namen der Seite, ändert sich auch der Link und damit könnten vorhandene eingetragene Links plötzlich nicht mehr funktionieren.
Um das zu verhindern, ist es praktisch der Namen für die SEO-URL unabhängig vom Namen erzeugen zu können. Da helfen die SEO Einstellungen im Punkt "SEO-Urls Shopseiten Template". Wir brauchen noch ein Freitextfeld mit dem DB-Spaltennamen "seourl". Nun ändern wir das Template:

{if $site.attributes.core.seourl}{$site.attributes.core.seourl}{else}{$site.description}{/if}

Wenn also dort im neuen Feld etwas angegeben ist, wird dieses verwendet und ansonsten weiterhin der Name. Das hat den Vorteil, dass man nur die Seite anpassen muss, die man umbenennen möchte und nicht jede.

CSS und Elementreihenfolge

Man kann sehr einfach mit CSS auch die Reihenfolge von Elementen ändern. Damit kann man allein schon mit CSS viel an Templates anpassen ohne gleich Twig oder Smarty bemühen zu müssen.

<!DOCTYPE html>
<html>
<head>
<title>element reorder</title>
<style type="text/css">
div#first{
order:3;
-moz-order:3;
}

div#second{
order:1;
-moz-order:1;
}

div#third{
order:2;
-moz-order:2;
}

#main {
display: -webkit-flex; /* Safari */
display: flex;
}

#main div {
width: 70px;
text-align:center;
}
</style>
</head>
<body>
<div id="main">
<div id="first">ONE(3)</div>
<div id="second">TWO(1)</div>
<div id="third">THREE(2)</div>
</div>
</body>
</html>

Erstes Wordpress-Theme fertig

Ich habe letzte Woche mein erstes Wordpress-Theme fertig gestellt. Mit integration der großen Social-Networks und allem.. ging sehr viel einfacher als gedacht. Wer also eine CMS- oder Blog-Lösung auf Wordpress-Basis braucht.. ich nehme jetzt auch Aufträge in die Richtung gerne entgegen.

Zu sehen gibt es das Theme hier http://www.superseriousllama.de/.

Ansonsten sucht auch mein Ferienhaus-CMS (aoop basierend) noch nach Einsatzmöglichkeiten.

Magento Email-Templates

Wenn es in Magento nicht klappt den Email-Header zu überschreiben, kann man auch einen statischen Block definieren und anstelle des Email-Headers einbinden.
Ist im Grunde das selbe und funktioneirt wirklich gut.

Beispiel

User	annonyme	Date	2019-07-25 21:51
Tags	anmation, css3, hannes pries, javascript, state, template, transition, vue, vuejs, v if

User	annonyme	Date	2018-05-02 19:03
Tags	hannes pries, seo, shopware, smarty, statische seiten, template, tipp

User	annonyme	Date	2016-11-30 20:07
Tags	css, element, hannes pries, order, smarty, template, templating, themes, twig

User	annonyme	Date	2016-06-19 15:27
Tags	cms, eigen werbung, hannes pries, template, theme, wordpress

Hannes Pries - Web/Shopware/JavaScript-Developer BlogWeil es immer eine simple Lösung gibt!

Hannes Pries - Web/Shopware/JavaScript-Developer Blog
Weil es immer eine simple Lösung gibt!