Post by Boppe » Mon May 27, 2019 2:40 pm

OC 2.3.0.2
Default theme

Hi community.
Regarding products pages. In desktop version it looks fine displaying price and add to cart button at the top part.

However on the mobile version both price and add to cart button is at the bottom after the product description. This is a major problem if you have a long product description. Even more as customers doesn't really care to read a lot of text. From a sales point of view this is really bad.

What is the best solution to move the price, quantity and add to cart button above the product description?
Last edited by Boppe on Tue May 28, 2019 4:03 pm, edited 2 times in total.

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by cyclops12 » Mon May 27, 2019 5:57 pm

This thread may give you some pointers

Active Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by Boppe » Mon May 27, 2019 6:22 pm

Thanks cyclops12.

I understand that I should add the code below to the end of the stylesheet for the default theme.

I should edit this one?
catalog/view/theme/yourtheme/stylesheet/stylesheet.css

Code: Select all

@media (max-width: 768px) {
   div.row {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;
       -webkit-box-orient: vertical;
       -moz-box-orient: vertical;
       -webkit-flex-direction: column;
       -ms-flex-direction: column;
       flex-direction: column;
       /* optional */
       -webkit-box-align: start;
       -moz-box-align: start;
       -ms-flex-align: start;
       -webkit-align-items: flex-start;
       align-items: flex-start;
   }

   div.row .col-sm-8 {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;

   }

   div.row .col-sm-4 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;

   }


}
I find it strange that OC doesn't have, by default, the price and add to cart button at the top in the mobile version.
I'm also surprised that no developers, in the marketplace, is selling an extension for solving this.

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by Boppe » Mon May 27, 2019 7:23 pm

I did the recommended changes, refreshed cache (Admin/Extensions/Modifications), deleted content of cache (except index) in system/storage and cleared the cache in the web browser.

The recommended changes didn't change anything at all. It looks just the same with the price and add to cart button after the product description.

Any other ideas?

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by Boppe » Mon May 27, 2019 8:32 pm

I've tried a suggestion from DigitCart in another old thread:
viewtopic.php?t=199689

In product.tpl, just before <?php echo $footer; ?>: I added:

Code: Select all

<script>
    $(function(){
        function moveCart(){
            if($(window).width() < 768 ){
                $('#content > .row > .col-sm-4').removeClass('col-sm-4').addClass('moved-div');
                $('.moved-div').insertAfter('.thumbnails');
            } else {
                if($('.moved-div').length){
                    $('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div');
                }
            }
        }
        moveCart();
        $(window).resize(function(){
            moveCart();
        })
    });
</script>
It didn't work, nothing changed.

I've run out of ideas.

Any bright ideas how to solve the problem?

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by Boppe » Tue May 28, 2019 12:58 am

I've been reading the forum all day.
Editing stylesheet didn't work and neither did editing product.tpl.

Is there anything that looks strange with the code I added in product.tpl?

Code: Select all

<script>
    $(function(){
        function moveCart(){
            if($(window).width() < 768 ){
                $('#content > .row > .col-sm-4').removeClass('col-sm-4').addClass('moved-div');
                $('.moved-div').insertAfter('.thumbnails');
            } else {
                if($('.moved-div').length){
                    $('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div');
                }
            }
        }
        moveCart();
        $(window).resize(function(){
            moveCart();
        })
    });
</script>

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by Boppe » Tue May 28, 2019 11:17 am

Cyclops12 or any other veteran, do you have any ideas?

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by pprmkr » Tue May 28, 2019 3:31 pm

Edit product.tpl and add before <?php echo $footer; ?>

Code: Select all

<script type="text/javascript"><!--

function moveCart(){
	if($(window).width() < 768 ){
		$('#content > .row > .col-sm-4').removeClass('col-sm-4').addClass('moved-div');
		$('.moved-div').insertAfter('.thumbnails');
    } else {
		if($('.moved-div').length){
			$('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div');
		}
    }
}

moveCart();
       
$(window).resize(function(){
	moveCart();
})
//--></script>
After that Refresh Modifications and try again. It works here with default theme.

User avatar
Active Member

Posts

Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands

Post by Boppe » Tue May 28, 2019 4:03 pm

pprmkr wrote:
Tue May 28, 2019 3:31 pm
Edit product.tpl and add before <?php echo $footer; ?>

Code: Select all

<script type="text/javascript"><!--

function moveCart(){
	if($(window).width() < 768 ){
		$('#content > .row > .col-sm-4').removeClass('col-sm-4').addClass('moved-div');
		$('.moved-div').insertAfter('.thumbnails');
    } else {
		if($('.moved-div').length){
			$('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div');
		}
    }
}

moveCart();
       
$(window).resize(function(){
	moveCart();
})
//--></script>
After that Refresh Modifications and try again. It works here with default theme.
Pprmkr, you're fantastic! I really appreciate your help. I must have spent 20 hours trying to figure it out.

It works excellent. What an improvement on the product page, no more scrolling down to see the price and add to cart button.

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm
Who is online

Users browsing this forum: No registered users and 4 guests