Online shops built with Shopware can be set up professionally and offer good usability for both shop operators and users. However, Shopware has a difficult relationship with older browsers — unfortunately, there is no other way to put it. Here is an example of how Shopware can cost an online shop developer several hours of work: In the standard Shopware template, the service dropdown menu in the top right cannot be opened because it immediately disappears again after briefly opening. This problem occurred on a Samsung Galaxy Tab 3 10.1 (GT-P5200) using the native Android browser. The reason is the simultaneous assignment of "click" and "touchstart" listeners, which in
/themes/Frontend/Responsive/frontend/_public/src/js/jquery.drop-down-menu.js
is implemented, more precisely in the line
me._on(me.$el, 'touchstart click', $.proxy(me.onClickMenu, me));
What modern browsers understand without exception needs to be handled differently on our Galaxy Tab 3. One approach is to modify the onClickMenu function and change it to the following form:
onClickMenu: function (event) {
var me = this;
var flag = me.opts.flag;
me.applyDataAttributes();
if ($(event.target).is(me.opts.blockedElements)) {
return;
}
if (me.opts.preventDefault) {
event.preventDefault();
}
if (!flag) {
me.opts.flag = true;
setTimeout(function(){ me.opts.flag = false; }, 500);
me.$el.toggleClass(me.opts.activeCls);
}
if (me.opts.closeOnBody) {
event.stopPropagation();
$('body').on(me.getEventName('touchstart click'), $.proxy(me.onClickBody, me));
}
$.publish('plugin/swDropdownMenu/onClickMenu', [ me, event ]);
},
This means that when it is executed for the first time, we set a marker that we reset after 0.5 seconds in order to prevent the onClickMenu function, or the toggleClass command contained within it, from being executed twice. Online shop: Shopware 5.3.7.
