IPAD/Tablet - LANDSCAPE issue

On Tablets when in landscape mode there is no add to cart or purchase or buy button viewable with the products and so the only way to add is to enter into the product details page. this is very poor a when viewing mutiple product you would want to add on the multi product display page.

This issue is also on computers when landscape i.e. always but here because of hover hover it corrects it a bit.

I think I may have bought the wrong theme for my needs.

Hi winebear,

Can you send us a link to the page where you see this problem?

I am asking because I want to see what products you have on that page.
In nopCommerce in general there are cases when the Add to Cart button is no visible at all i.e grouped products etc. 
With the help of our Ajax Cart plugin that comes with the theme, we show the add to cart button for all kind of products and show a popup when the button is clicked.
But on mobile devices it is not a good user experience to show popups, so we disable the Ajax Cart on mobile devices.
So I wonder if this is the case or not. That is why I want you to send us a link to see the exact page and which product don't have Add to cart buttons.

It is just a general design of Traction - it is not like this with Motion. Unfortuantley I do not like it and it doesnt work for me.

http://185.35.150.55/wine

On smart phones you add a purchase button to each product but on tablet it copies what it does on a computer unfortuately in a compute the way to access the quick add to cart button is to hover over the image which is not available on a tablet.

So the only way to add that product to cart is to enter into the product detail page, add to cart there and then click the back button to return to your product catalog page. this is time consuming and doesnt allow fast selection of various products.

In a theme like motion this is resolved by having a permamnent add to cart button but not in themes such as Lavela or Traction etc.

Hi again,

I see what you mean and agree that is should not be like that. We will fix that so that the add to cart button is always visible as on smaller mobile devices and will let you know how to integrate the fix. I hope to have it by the end of the day!

Thank for your understanding!

Any progress please?

Hi winebear,


We have identified the issue and have fixed the issue with the ajax cart. The reason was the the ajax cart was integrated on tablet when it should not because 
it is not a good practice to have popups on mobile. Instead the default nopCommerce's ajax cart is being used. In order to integrate the fix you need to do the following:


1. Download the latest Nop Traction Theme from your My Downloads section.
2. Replace the SevenSpikes.Core plugin with the one from the downloaded package
3. Replace the SevenSpikes.Nop.Plugins.AjaxCart plugin with the one from the downloaded package
4. Replace the Themes/Traction/Content/scripts/traction.js file with the one from the downloaded package.
5. Replace the Themes/Traction/Content/css/980.css and Themes/Traction/Content/css/980.rtl.css files with the ones from the downloaded package. If you have modified these files you will need
just to paste the following css in the 980.css file


.product-grid .item-box.mobile-box .add-info{
    position: static;
    border: none;
    box-shadow: none;
    background: none;
    opacity: 1;
    height: auto !important;
}
.item-box.mobile-box .prices {
    margin: 0 0 15px;
    font-size: 12px;
}
.product-grid .item-box.mobile-box .description{
    display: none;
}
.product-grid .item-box.mobile-box .product-rating-box{
    opacity: 1;
    text-align: left;
    background: none;
    padding: 0;
    margin: 0 0 20px;
}
.product-grid .item-box.mobile-box .buttons{
    position: static !important;
    opacity: 1;
}
.item-box.mobile-box .buttons .compare-products{
    display: none;
}
.item-box.mobile-box .buttons input[type="button"] {
    height: auto;
    padding: 10px 20px;
    font: normal 16px 'eurostile';
    width: auto;
}

on line 736 in the 980.css


and the following:


.product-grid .item-box.mobile-box .add-info{
    position: static;
    border: none;
    box-shadow: none;
    background: none;
    opacity: 1;
    height: auto !important;
}
.item-box.mobile-box .prices {
    margin: 0 0 15px;
    font-size: 12px;
}
.product-grid .item-box.mobile-box .description{
    display: none;
}
.product-grid .item-box.mobile-box .product-rating-box{
    opacity: 1;
    text-align: right;
    background: none;
    padding: 0;
    margin: 0 0 20px;
}
.product-grid .item-box.mobile-box .buttons{
    position: static !important;
    opacity: 1;
}
.item-box.mobile-box .buttons .compare-products{
    display: none;
}
.item-box.mobile-box .buttons input[type="button"] {
    height: auto;
    padding: 10px 20px;
    font: normal 16px 'eurostile';
    width: auto;
}

on line 740 in the 980.rtl.css file.




Please let us know if after integrating the fix, the issue still occurs.

There is no traction.js file in the downloaded package, what am I missing?

Hi winebear,

Maybe you are not looking in the correct folder.
In the package for 3.5 there should be a folder Themes then folder Traction then Content then Scripts then a file called traction.js.
If you haven't made any modifications then it is best to update the theme as described in this article or video.

Hi Winebear,

We have merged all the changes back to version 3.4. So you can download the theme from your My Account section and follow the instructions from above.

Please let us know if there are still any issues.

When we use the Ajax filters. in landscape the add to basket button disappears. If you rotate the ipad to portrait it appears and then if you rotate it back to landscape it remains.





Please fix this bug.
You can use an ipad and go to our site to see the bug IP is 185.35.150.55