Hi all..
First post in a long time, so please be gentle ..
I am currently upgrading my store from OC 1.5.5.1 to 2.3.0.2 so I can be mobile optimised. One issue I have come across in mobile view is the placement of add to cart, qty, options etc. Both myself and others feel this is in the wrong place, especially when there is a long description.
What I am looking to do is move add to cart etc so it sits above the description while in mobile view. The desktop layout is fine.
I have had a poke around the internet and ftp files, product.tpl with no joy.
Can anyone please help me with this.
Many thanks ..
First post in a long time, so please be gentle ..
I am currently upgrading my store from OC 1.5.5.1 to 2.3.0.2 so I can be mobile optimised. One issue I have come across in mobile view is the placement of add to cart, qty, options etc. Both myself and others feel this is in the wrong place, especially when there is a long description.
What I am looking to do is move add to cart etc so it sits above the description while in mobile view. The desktop layout is fine.
I have had a poke around the internet and ftp files, product.tpl with no joy.
Can anyone please help me with this.
Many thanks ..
Hi,
I answered a similar question here:
https://stackoverflow.com/questions/407 ... uct-page-i
I answered a similar question here:
https://stackoverflow.com/questions/407 ... uct-page-i
You can use jquery, I tested this in default theme.
Add this to your product.tpl before <?php echo $footer; ?>:
<script>
$(function(){
// We create a function
function moveCart(){
// If user screen is smaller than 768 pixel
if($(window).width() < 768 ){
/*
select cart area including cart button, options, product title and ...
if you want to only move cart button use '#product' instead of '#content > .row > .col-sm-4'
*/
$('#content > .row > .col-sm-4').removeClass('col-sm-4').addClass('moved-div');
// now move it
$('.moved-div').insertAfter('.thumbnails');
} else {
/*
if user resized his/her screen width and now screen is wider than 767 pixel and we moved cart area before, move it to its original place.
*/
if($('.moved-div').length){
$('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div');
}
}
}
// run function
moveCart();
$(window).resize(function(){
// run function again if user resized screen
moveCart();
})
});
</script>
note that if you assign any modules to column-right or column left in your product page Opencart change these two classes:col-sm-4, col-sm-8 so you must edit my code, or you can add your manual classes.
Thanks again for replying.
Right, silly me, after a long long day trying to sort this, I had modified another file that stopped this from working. Changed the modified file and boom, this is now working.
A perfect little bit of code, has made my mobile site far more appealing, thank you very much indeed ..
Right, silly me, after a long long day trying to sort this, I had modified another file that stopped this from working. Changed the modified file and boom, this is now working.
A perfect little bit of code, has made my mobile site far more appealing, thank you very much indeed ..
Found a new issue. If categories are selected as on in the left in product view, then this pops the price back down to the bottom, so can't have category menu on the left in a product on a desktop as it will move the order around on mobile. Any ideas lease ..
The site is a current test site. if you go to a product, the price has dropped below the description as I have categories on the left enabled from layout/product.
An example.If I turn the categories on the left or right off, it works again.
http://securecab.co.uk/macbook
If you look on this site, the categories on the left and right and have been turned off and the price etc is above the description.
http://dooka2.dooka.co.uk/ocs/2302/desktops/macbook
Once sorted and populated, I will transfer to the new domain.
I appreciate all your help ..
An example.If I turn the categories on the left or right off, it works again.
http://securecab.co.uk/macbook
If you look on this site, the categories on the left and right and have been turned off and the price etc is above the description.
http://dooka2.dooka.co.uk/ocs/2302/desktops/macbook
Once sorted and populated, I will transfer to the new domain.
I appreciate all your help ..
I pointed to this:
This should work for your current situation:note that if you assign any modules to column-right or column left in your product page Opencart change these two classes:col-sm-4, col-sm-8 so you must edit my code, or you can add your manual classes.
Code: Select all
<script>
$(function(){
function moveCart(){
if($(window).width() < 768 ){
$('#content > .row > .col-sm-6:last-child').removeClass('col-sm-6').addClass('moved-div');
$('.moved-div').insertAfter('.thumbnails');
} else {
if($('.moved-div').length){
$('.moved-div').insertAfter('#content > .row > .col-sm-6').addClass('col-sm-6').removeClass('moved-div');
}
}
}
moveCart();
$(window).resize(function(){
moveCart();
})
});
</script>
It kind of works. It moves the price which is awesome but the product just disappears after a few seconds or as soon as I scroll on the mobile phone. Works fine when I shrink my desktop screen. I will upload an image of what is going on off my phone in two secs..
Attachments
Screen Shot 2017-11-17 at 12.10.53.jpg (149.26 KiB) Viewed 2425 times
I do not have mobile right now.
But in the desktop browser and in responsive design mode, everything works fine for me.
But in the desktop browser and in responsive design mode, everything works fine for me.
Not on my desktop when I shrink for some reason. I have will try another computer and other phones, just in case, it is my end. The screenshots were on my desktop as couldn't work out how to upload off my phone.
I will have a play and get back to you. Once again, many thanks for all your help, you have been a superstar ..
I will have a play and get back to you. Once again, many thanks for all your help, you have been a superstar ..
Who is online
Users browsing this forum: No registered users and 50 guests