Jump to content

[Resolved] Layout issue on Basket/checkout page using e-tone skin


Recommended Posts

I've been happily using CC3 for a lot of years for my on-line shop (I think it's probably in my sig) and have decided that now would be the time to finally upgrade to CC6 - and the CubeCart tech support team have said they can do that process for me shortly. 

I'm just trying to skin the site and get to know the admin section in advance of a lot of data landing in it, so have done some of my site docs etc and am just fine-tuning appearance and language etc. - and many thanks to the knowledgeable people here who answer questions that I've been able to find in searches that have been a huge help to me, both now and over the years - like using the language section in admin to fine tune wording - that's much easier than editing files and re-uploading, but I wouldn't have found it on my own.

I've gradually fixed most of the details that I wanted to, but I have a remaining niggle that I have reached the stage that I can't see the wood for the trees.  It's a layout issue on the Basket page.  The skin I'm using, which is a slightly tweaked e-tone skin puts a unit price and total price for each line of items in the basket, so if you put two of something in the basket at £10, it would (at least should) show a unit price of £10 and a total price for that line of £20.  There's then a sub-total below that for all items before shipping and coupons.

On the wide version of the site used on a web browser, the headers show unit and price, but the actual numbers are off to the left, not under the headers - but if the page is viewed on a smaller device like a tablet in portrait mode (I narrowed the browser window to mimic it, to show you), the numbers now show adjacent to their now moved titles, together.  I've highlighted the relevant bits on the screengrabs in pink.  In other skins like Foundation, it puts the unit price ahead of the quantity window and the total price to the right.

I think that the e-tone skin uses a file called content.checkout.php for this section.  I've looked at the code for that php page and the associated style sheets (and changed things I thought might be causing it) and I can't sort it out. 

This is the pertinent code in the content checkout.php file - do you need to see the css too?

There's a break after the quantity etc. but removing that just put the product code and unit price that appear in brackets, to the right of the item link.  Then there's a section for options, but as I'm not using any, I find this next bit confusing and don't want to tinker too much as I can sort of understand php when I look at it, but couldn't write it or know how to correct it.  I'm reasonably comfortable with css and html.  I could actually do away with the line altogether as there are very few things that I'm likely to sell more than one of, as long as the subtotal underneath is correct.

Any ideas, what more do I need to show you?

	<div id="basket">
		<div class="row flush basket_header">
			<div class="u8">&nbsp;</div>
			<div class="u2 not-mobile"><span class="price">{$LANG.common.price_unit}</span></div>
			<div class="u2 not-mobile"><span class="price">{$LANG.common.price}</span></div>
		</div>
		
		{foreach from=$ITEMS key=hash item=item}
		<div class="row flush basket_product">
			<div class="u1 remove">
				<a href="{$STORE_URL}/index.php?_a=basket&amp;remove-item={$hash}">
					<span class="icon icon-minus" title="{$LANG.common.remove}"></span>
				</a>
			</div>
			<div class="u1 image">
				<a href="{$item.link}" title="{$item.name}"><img src="{$item.image}" alt="{$item.name}" /></a>
			</div>
			<div class="u6">
				<p>
					<input name="quan[{$hash}]" type="text" value="{$item.quantity}" class="quantity" {$QUAN_READ_ONLY} /> x
					<a href="{$item.link}" class="txtDefault">{$item.name|truncate:60:"&hellip;"}</a> <br />
					{if !empty($item.product_code)}({$item.product_code}){/if} {if $item.base_price_display}({$item.base_price_display}){/if}
				</p>
				{if $item.options}
				{foreach from=$item.options item=option}
				<p class="option"><b>{$option.option_name}</b>: {$option.value_name|truncate:45:"&hellip;":true}{if !empty($option.price_display)} ({$option.price_display}){/if}</p>
				{/foreach}
				{/if}
			</div>
			<div class="u2"><span class="price"><span class="label only-mobile">{$LANG.common.price_unit}:&nbsp;&nbsp;</span>{$item.line_price_display}</span></div>
			<div class="u2"><span class="price"><span class="label only-mobile">{$LANG.common.price}:&nbsp;&nbsp;</span>{$item.price_display}</span></div>
		</div>
		{/foreach}
		
		<div class="row flush subtotal">
			<div class="u10 pricerow-label"><span class="label">{$LANG.basket.total_sub}: </span></div>

 

basketscreengrab1.jpg

 

basketscreengrab2.jpg

Edited by BooJewels
Marked resolved
Link to comment
Share on other sites

I am guessing that you have hidden the left and right sidebars, and then changed the .u6 CSS rule from width:50% to width:100%.

That will corrupt everything that is also using the .u6 CSS rule.

I will recommend that the rules in grid.css not be mucked about with. These grid rules are very specific about how the grid is be structured. That is, the .u1 through .u12 rules define how many twelfths of a row they take up - in percentages of that row.

Having removed a .u3 left sidebar and a .u3 right sidebar, then that leaves .u6 sections left - which is the <div id="content"> in main.php. So, do not make the .u6 show differently, change the <div id="content"> block to use all twelve sections, .u12, using the same criteria that you used to suppress showing the sidebars.

Link to comment
Share on other sites

1 hour ago, Dirty Butter said:

I'm not able to help with your skin, but I can offer a suggestion for "seeing" your skin at different screen sizes. The Developer choice of FireFox offers Responsive Design View, where you can test all the way down to 320x480 screens.

Thank you, I'll look at that.  I only changed the browser size in this instance, to illustrate the point and ease of grabbing a screen shot, as it looked pretty much the same as it does on a tablet or phone, which is where I'd looked at the site, so knew that was how it worked.

26 minutes ago, bsmither said:

May I assume that, for this page at least, you have removed the left and right sidebars?

I've removed the right sidebars on all pages.  My categories, log-in, featured products boxes etc. are all on the left, nothing on the right. I didn't include them on the screen grab in the interests of just showing the pertinent bit.  It never actually occurred to me that showing the sidebar status might impact on the ability to troubleshoot the problem, sorry.  I am however aware that something seemingly far removed on the page can impact elsewhere, but as nothing else has gone awry, I thought maybe it was just some erroneous detail in this one area.  I'm not knowledgeable enough of the code to troubleshoot to that detail.

Link to comment
Share on other sites

2 hours ago, bsmither said:

I am guessing that you have hidden the left and right sidebars, and then changed the .u6 CSS rule from width:50% to width:100%.

That will corrupt everything that is also using the .u6 CSS rule.

I will recommend that the rules in grid.css not be mucked about with. These grid rules are very specific about how the grid is be structured. That is, the .u1 through .u12 rules define how many twelfths of a row they take up - in percentages of that row.

Having removed a .u3 left sidebar and a .u3 right sidebar, then that leaves .u6 sections left - which is the <div id="content"> in main.php. So, do not make the .u6 show differently, change the <div id="content"> block to use all twelve sections, .u12, using the same criteria that you used to suppress showing the sidebars.

Thanks, we must have been typing at the same time.

I haven't changed the grid.css - I figured the 12 grid straight away and decided that was one file to leave alone.  I have periodically changed other files that reference u sizes, to use a larger one to see if it made any difference, but I don't think any of those changes remain. 

I did the initial layout some weeks ago and had to leave it to deal with family issues and to be honest, I can't remember what I actually did.  But I doubt I changed the widths of elements, I think I just commented out the box items I didn't want on the right and the layout worked how I wanted it to.   The bulk of my edits have been to language and colours and my own sitedocs content.

As I said, the layout has been fine on everything else, except those two numbers appearing in the wrong place.  I just temporarily renamed the files I've changed, restored the originals and chose a different version of the e-Tone skin and it still does it.

Link to comment
Share on other sites

Are you asking to look at it, or are you concerned that my poor unsuspecting customers might have to deal with something terrible that I've done?   :lol:

It's distinctly lacking in content yet, but this is the work so far:  http://www.boo-creations.co.uk/store/

It's gone midnight here and I'm off to my bed, so I'll bid you goodnight and look in tomorrow morning.  Thank you.

Link to comment
Share on other sites

The reason it appeared that using different CSS files having the same name is that the browser, seeing that this page resource is already saved in the browser's internal cache, will use it from there and not fetch a fresh copy.

So, force your browser to re-fetch all the page's resources.

Link to comment
Share on other sites

8 hours ago, bsmither said:

I will ask that you double-check grid.css, line 9:

Currently: .u6 { width: 70%; }

The original file is 50%.

And set <div id="content" class="u6"> in main.php to use u9.

 

Good morning and thank you!  That is indeed what has happened.  I can see now looking at the code I posted above that the u6 container with the item photo and link was 20% too wide, forcing the container with the price and unit price - that should snuggle beside it on the right within the larger u8 enclosing them - underneath it.

I never would have found that without a fresh pair of eyes on the job.  I've been returning to it for days and just wasn't thinking in the right way - and now you've pointed it out, it's glaringly obvious.

When I stated confidently above that I hadn't messed with the grid measurements in grid.css, I genuinely believed it to be true.  Within the duration of this thread, I'd done a check of all the files in the skin that I'd altered at all - only a handful as it happens - and I ran a comparison of my open grid.css with the original untouched copy and they were the same - hence I concluded that I hadn't messed with it.  But I'm not sure which version I had open - it clearly wasn't the one on the server - which I must have changed at some time earlier in the year when I first changed the layout and I have no recollection whatsoever of doing that.

So apologies for seemingly misleading you, I am normally meticulous in my methodology for handling files as I tinker with them and something went awry with that grid.css - it looks like the one I had open for reference was a backup of the original, not the one I'd obviously edited and uploaded.  I closed them all down and started again and spotted that 70% in the 'working' copy.

Second issue I've noticed:

Whilst spending hours staring at the basket page, I did spot another very minor issue.  On the left of the site pages there are the boxes that variously contain featured product, basket summary etc.  Once in the basket itself, the box that was the basket summary on other pages is now empty and just shows a block of the background colour.  It appears to do this with all the e-Tone skins, is that correct, or have I messed something else up?  It's not very important, it just feels like it should have something in it.

Many, many thanks for your help.  I never would have found that by myself and I hoped someone else would be able to see where I'd gone amiss or if indeed there was an error in the code for the basket (which was what I was thinking it was).  I can see how my error with the grid just didn't come to light on plainer text pages, but didn't stand up to the more complex grid arrangement on the basket page.

Thank you!

Link to comment
Share on other sites

In the original code of main.php, there is this in the sidebar-right:

<div class="box not-mobile" id="sessionbox">
{$SESSION}
<br />
{$SHOPPING_CART}
</div>

When viewing the checkout pages (including View Basket), {$SHOPPING_CART} is not there. That still leaves {$SESSION} to populate the <div box>.

What I see on your site is that each of {$SHOPPING_CART} and {$SESSION} have been placed in their own respective <div box>. That means, when {$SHOPPING_CART} is not there, what remains is an empty <div box>.

There are several ways to fix this, but I recommend putting {$SESSION} and {$SHOPPING_CART} in the same <div box>, as above.

If you really do not want the two pieces in the same <div box>, we can work out a different solution.

Link to comment
Share on other sites

I've been a bit off colour for a few days and it seems to have turned my brain to mush - yes, that fixed it, thank you. 

If I'd actually engaged my brain before asking I should have been able to figure that one out for myself.  I seem to have been approaching every problem from the wrong direction this week, I was thinking of something else entirely.

I've combined the cart and session within the same div - I put them the other way round from you as I simply liked the result visually better.

If I might ask one more thing.  In main.php where these items appear, there are breaks between some of them and not others.  As they're contained within a u3/25% wrapper, presumably, this constrains them to run underneath one another in a column - does it therefore make any difference whether there is a break between them or not?  I've taken it out from between the categories and search (within the same box div) as this gave rise to quite a big gap and it looks better without it, but that's perhaps not the best reason to remove it.

Your help is appreciated as is your patience in explaining in a way that I've been able to easily grasp, follow and implement.  Thank you.

Link to comment
Share on other sites

"there are breaks between some [placeholders] and not others"

This may be a case of the code author simply not noticing the code difference. Technically, the <br ./> between {$SESSION} and {$SHOPPING_CART} is not necessary, other than to give a visually appealing gap. A <div> tag is a "block-level" element, meaning the browser will always start the content that follows on a new line. (This can be over-ridden with CSS, however.)

You mention having had a <br /> between {$CATEGORIES} and {$SEARCH} (the original code does not). The code author has given the {$CATEGORIES} area a 30px bottom margin, but not so with {$SESSION} - instead using a <br />. The inconsistency will probably never cause a problem.

 

Link to comment
Share on other sites

Thank you for the clarification.  I couldn't remember whether the break was in between categories and search originally as I've changed it back and forth a few times to see if it broke anything on the phone/tablet versions etc.  As you say, it doesn't appear to make any difference either way. 

I'm pretty happy now with the layout and appearance and I'm taking a couple of days off, so I'll get tech support to do the upgrade for me when I'm back, then try and finally knock it into shape and into use.

Thank you for your time, it's appreciated.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...