Joomla Templates Club 406,261 posts

[7of9 Friend 7of9Join date: December 2010Posts: 579Downloads:81Uploads:66 Thanks: 162 Thanked: 25 times in 3 posts]

#705070

Hi,

At Google PageSpeed Insights for mobile, the is a User Experience problem. In more detail:
Size tap targets appropriately
Some of the links/buttons on your webpage may be too small for a user to easily tap on a touchscreen. Consider making these tap targets larger to provide a better user experience.
The following tap targets are close to other nearby tap targets and may need additional spacing around them.

The tap target <a href=”javascript:;” class=”dropdown-toggle”></a> is close to 1 other tap targets.
The tap target <a href=”/shop/my-basket/view”>Go to cart</a> is close to 1 other tap targets.

You can check it for yourseft at: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.ts-bee.com%2F

Could you please provide a fix for this?

Thanks in advance.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#705205

Hi

It looks like you already customised in style of this template. The link in above report:

<a href=”/shop/my-basket/view”>Go to cart</a>

is ‘Go to cart’ link when you tap the cart button.

By default, the dropdown menu (which includes this link) is hidden, it shows only when you tap the cart button to open. But at this moment, it always opens on your site and of course the google insights notices above message.

Below is default css style for this button:


#mycart .dropdown-menu {
display: none;
opacity: 0;
right: 0;
transition: none 0s ease 0s ;
}

#mycart.open .dropdown-menu {
display: block;
opacity: 1;
right: 0;
}


[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#751756

Hi

It looks like you already customised in style of this template. The link in above report:

<a href=”/shop/my-basket/view”>Go to cart</a>

is ‘Go to cart’ link when you tap the cart button.

By default, the dropdown menu (which includes this link) is hidden, it shows only when you tap the cart button to open. But at this moment, it always opens on your site and of course the google insights notices above message.

Below is default css style for this button:


#mycart .dropdown-menu {
display: none;
opacity: 0;
right: 0;
transition: none 0s ease 0s ;
}

#mycart.open .dropdown-menu {
display: block;
opacity: 1;
right: 0;
}


[7of9 Friend 7of9Join date: December 2010Posts: 579Downloads:81Uploads:66 Thanks: 162 Thanked: 25 times in 3 posts]

#705524

Hi @saguaros ,

Thanks for your reply.
No I haven’t customized this. If you check the URL: ts-bee.com
The problem started when I added the cart module to the home page, since the home page is replaced with the list of the Joomshopping products.
You will see that the dropdown is not shown, unless you click on it. Most probably Googlebot clicks on it and sees that it conflicts with the content underneath.
I think same problem happens here, when I check the Joomlart demo page: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fja-fixel.demo.joomlart.com%2Findex.php%2Fen%2Fshop

Any ideas?

Thanks for your help.

[7of9 Friend 7of9Join date: December 2010Posts: 579Downloads:81Uploads:66 Thanks: 162 Thanked: 25 times in 3 posts]

#751957

Hi @saguaros ,

Thanks for your reply.
No I haven’t customized this. If you check the URL: ts-bee.com
The problem started when I added the cart module to the home page, since the home page is replaced with the list of the Joomshopping products.
You will see that the dropdown is not shown, unless you click on it. Most probably Googlebot clicks on it and sees that it conflicts with the content underneath.
I think same problem happens here, when I check the Joomlart demo page: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fja-fixel.demo.joomlart.com%2Findex.php%2Fen%2Fshop

Any ideas?

Thanks for your help.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#705708

The cart is displaying above an item so it notices that message, you can change in css:


#mycart {
position: absolute;
right: 0;
top: 100px;
}


*change value for ‘right’ and ‘top’ properties so that it moves near top of page.

P/s: if you want to apply css for mobile only, you can try with media queries

1 user says Thank You to Saguaros for this useful post

1. 7of9

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#752039

The cart is displaying above an item so it notices that message, you can change in css:


#mycart {
position: absolute;
right: 0;
top: 100px;
}


*change value for ‘right’ and ‘top’ properties so that it moves near top of page.

P/s: if you want to apply css for mobile only, you can try with media queries

1 user says Thank You to Saguaros for this useful post

1. 7of9

[7of9 Friend 7of9Join date: December 2010Posts: 579Downloads:81Uploads:66 Thanks: 162 Thanked: 25 times in 3 posts]

#705902

Thanks @saguaros ,

However, despite by best efforts, the cart simply does not fit in the small screen of a mobile. (According to Google’s user experience rules.)
I think it would be best to do the following, only for the mobile size. (please let me know if it is possible):
1. Move the cart icon at the right of the top menu.
2. On click on the cart icon, do not open the drop down, but take us directly to the cart page.

Thanks in advance.

[7of9 Friend 7of9Join date: December 2010Posts: 579Downloads:81Uploads:66 Thanks: 162 Thanked: 25 times in 3 posts]

#752168

Thanks @saguaros ,

However, despite by best efforts, the cart simply does not fit in the small screen of a mobile. (According to Google’s user experience rules.)
I think it would be best to do the following, only for the mobile size. (please let me know if it is possible):
1. Move the cart icon at the right of the top menu.
2. On click on the cart icon, do not open the drop down, but take us directly to the cart page.

Thanks in advance.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#705970

This block in header of your site call cart module:


<?php if($this->countModules('mycart')): ?>
<div class="row">
<div id="mycart" class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;"><i class="icon-shopping-cart"></i></a>
<div class="dropdown-menu">
<jdoc:include type="modules" name="<?php $this->_p('mycart') ?>" style="raw" />
</div>
</div>
</div>
<?php endif; ?>


this will be loaded in all view ports (desktop, mobile) so you will need to find the way to check whether is mobile or desktop layout to load associated content.

For the link, you can remove the data-toggle above and add with

href=”<?php print SEFLink(‘index.php?option=com_jshopping&controller=cart&task=view’, 1)?>”

this will help to redirect to cart instead of dropdown.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#752236

This block in header of your site call cart module:


<?php if($this->countModules('mycart')): ?>
<div class="row">
<div id="mycart" class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;"><i class="icon-shopping-cart"></i></a>
<div class="dropdown-menu">
<jdoc:include type="modules" name="<?php $this->_p('mycart') ?>" style="raw" />
</div>
</div>
</div>
<?php endif; ?>


this will be loaded in all view ports (desktop, mobile) so you will need to find the way to check whether is mobile or desktop layout to load associated content.

For the link, you can remove the data-toggle above and add with

href=”<?php print SEFLink(‘index.php?option=com_jshopping&controller=cart&task=view’, 1)?>”

this will help to redirect to cart instead of dropdown.

[Author]

Posts