Post by dookable » Fri Nov 17, 2017 1:05 am

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 :)..

New member

Posts

Joined
Thu Sep 04, 2014 11:29 pm

Post by DigitCart » Fri Nov 17, 2017 1:14 am

Hi,
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.

My Extensions


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by dookable » Fri Nov 17, 2017 1:50 am

Hi there..
Thank you for you speedy reply :).
I have tried this with no luck, hence asking on here :(.

New member

Posts

Joined
Thu Sep 04, 2014 11:29 pm

Post by DigitCart » Fri Nov 17, 2017 1:56 pm

Hi,
Are you using a custom theme or default theme?

My Extensions


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by dookable » Fri Nov 17, 2017 6:49 pm

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 :)..

New member

Posts

Joined
Thu Sep 04, 2014 11:29 pm

Post by DigitCart » Fri Nov 17, 2017 6:56 pm

Glad to hear it.
You're welcome.

My Extensions


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by dookable » Fri Nov 17, 2017 7:00 pm

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 :)..

New member

Posts

Joined
Thu Sep 04, 2014 11:29 pm

Post by DigitCart » Fri Nov 17, 2017 7:14 pm

Can you provide a url to this issue?

My Extensions


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by dookable » Fri Nov 17, 2017 7:26 pm

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 :)..

New member

Posts

Joined
Thu Sep 04, 2014 11:29 pm

Post by DigitCart » Fri Nov 17, 2017 7:46 pm

I pointed to this:
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.
This should work for your current situation:

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>

My Extensions


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by dookable » Fri Nov 17, 2017 7:58 pm

Thank you again. I didn't understand that bit. I will have a play and report back :)..

New member

Posts

Joined
Thu Sep 04, 2014 11:29 pm

Post by dookable » Fri Nov 17, 2017 8:07 pm

Screen Shot 2017-11-17 at 12.11.15.jpg

Screen Shot 2017-11-17 at 12.11.15.jpg (445.55 KiB) Viewed 2426 times

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

Screen Shot 2017-11-17 at 12.10.53.jpg (149.26 KiB) Viewed 2425 times


New member

Posts

Joined
Thu Sep 04, 2014 11:29 pm

Post by DigitCart » Fri Nov 17, 2017 8:27 pm

I do not have mobile right now.
But in the desktop browser and in responsive design mode, everything works fine for me.

My Extensions


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by dookable » Fri Nov 17, 2017 8:34 pm

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 :)..

New member

Posts

Joined
Thu Sep 04, 2014 11:29 pm
Who is online

Users browsing this forum: No registered users and 50 guests