Hi Guys

Just wondering if there is anyway to easily move the div.detailprice if viewing the website on a mobile...

in CSS its easy to change styles, but i could really do with moving it so its closer to the add to cart button when on small screens...

obviously we have the includes.asp file line: detailpagelayout="navigation,productname,productid,reviewstars,price,listprice,instock,productimage,options,quantity,addtocart,custom1,custom2,custom3,discounts,description,reviews,socialmedia"

but not sure if there is anyway for me to change the above line based on screen size like with CSS?

(i know there is probably a way to do this with jquery - but just looking other ways first)

thanks
James

Your css file should have breakpoints for smaller screens.
It's just a matter of adding some styling to the area of the stylesheet.
https://www.w3schools.com/css/css3_mediaqueries.asp

Check your css file for your site, and see if you see something like this


If you are having troubles sorting this out, post up a link to the site, or add it to your profile if it's not there.
Thanks,
David

Hi David,

Thanks for replying, the CSS is fine, I have set it up to look different on desktop and mobiles etc...

My issue is more, if you look at one of the items on my site ( url in my bio)... on a desktop I have the price near the top as it looks best there imo... but on a mobile as most of my products have 2-4 product options ( which change the price) I think it's better to pt the price div directly above the add to cart button... just so customers can not be in any doubt what price they are paying..

Have a look at one of the "systems" on my website and I think you will see what I mean.

I am pretty handy with CSS but don't know a way to move that div down ( without using jquery).. but wanted to check if there's a simpler way of doing it.

Regards
James

Hi James
You can have more than one price in the detailpagelayout and also, any tags in the layout are displayed as they are. So you can have for instance...

detailpagelayout="navigation,productimage,productname,<div class=""myprice1"">,price,</div>,discounts,shortdescription,<div class=""myprice2"">,price,</div>,previousnext"

Using that idea you could set different styles for the two prices at different breakpoints hiding one and revealing the other maybe.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Thanks vince,

You even answered another question I was going to ask about anyway to show the short description also lol #128518;

hi vince, just working on this - if you are about please check below (will remove link in short while thou if cant fix it)...

My bio website then /hlip412-5mp-hilook-by-hikvision-4-channel-ip-cctv-kit-with-4-turret-cameras

i have set up so if you scroll down the page a fixed div appears showing the name + ID + price...

However if when you scrolled down (so the fixed div has appeared) you change an option with a price change... the price in fixed div changes

but then if you scroll back up and the fixed div hides again - the normal price is still the same as if the option has not been selected...

Any ideas why that would happen?

thanks
James

Hi James,

Looking at your page it seems you are using Bootstrap 3.

If upgrading to 4 or 5 is an option then you should be able to use the order-* class to reorder elements on the page meaning you can easily move the price above your add to cart button on mobile.

We have done this in the past and being able to add tags within detailpagelayout should be fairly easy as you can simply define the elements order at each breakpoint.

Going from Bootstrap 3 to 4/5 would involve a bit of work as quite a few classes were depreciated or renamed so will possibly cause other issues depending on how much your site relies on it for layout but it's an option that means moving elements for different devices should make things much easier moving forward.

The other option would be to hide the price div and then append to a div and show or insertAfter/insertBefore on page load and you should be able to change the div depending on screen width using jQuery.
This could get trickier if you need to handle window resizing after page load but it's an option.

Regards,
David

Hi James

quote:

---

i have set up so if you scroll down the page a fixed div appears showing the name + ID + price...

---

I don't see that fixed div. Did you take it off the site already?

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

yep took it off

but just put back on a second "price" in the includes, this time no hidden div - so that you can see both prices on screen at same time but as soon as you select an option with price change - only 1 of the prices change

any ideas?

Hi James
I see the problem but I think I have a solution. I've added the change to the v7.8 js/ectcart.js file so can you get a new copy of that. You can use the same JS file if you are on v7.7
Once you copy the new JS file to your site please do a <Ctrl>+F5 in your browser to refresh the JS file in the cache.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

seems to have done the trick...

thanks
Vince