[solved] Configuring blockcart Location

[jleesaxon]

Something in the coding of blockcart requires it to be located in

<div id="header">

and freak out when I try to put it in just

<header>

 

I'm re-doing the HTML of my theme to add HTML5 semantics, so I'd really like to be able to make that change. I'm frustrated because this is the only module that's given me trouble with it.

 

Anything past the HTML and CSS is beyond my coding skill; can anyone make this change for me? Or would it be a huge project?

[vekia]

but you can put this module anywhere you want. i don't know what you exactly expect.

can you clarify it a bit please?

[jleesaxon]

That doesn't seem to be the case. Look at http://www.elliscamera.com/presta/ . I have made only one change to that site, changing:

 

<div id="header"> ... </div>

 

to

 

<header> ... </header>

 

in header.tpl

Edited July 19, 2013 by jleesaxon (see edit history)

[NemoPS]

Of course, you have to give that header tag the same id if the div, otherwise it will lose styling

[vekia]

that's right, you can use id for elements like <header> so just use <header id="header">

[jleesaxon]

Okay I guess I didn't explain what I was asking well.

 

I realize there's some required styling and/or code somewhere applied to the ID "header," and that I can get it back by simply putting "id="header"" back in the code.

 

However, <header id="header"> is obnoxiously redundant. I'd like to find that styling and apply it to the header ELEMENT instead of the ID "header" so I can use simply <header> in the HTML.

 

The problem is that I can't find it.

[NemoPS]

Aw.

Well in this case open global.css, look for #header (all instances) and replace them with header

[vekia]

open your theme directory, next css/global.css and search for #header

[jleesaxon]

This is really strange. I'm pretty sure It's not in global.css.

 

On http://www.elliscamera.com, I have one theme with an unmodified global.css. On the other, I deleted global.css and started from scratch and have no header or #header definitions. Both themes work with or without "id=header" in the HTML.

 

On the new test site http://www.elliscamera.com/presta, I haven't modified anything. Cartblock will not work without "id=header" in the HTML.

 

The only difference is that on the first site, I've deleted a bunch of modules (and their .tpl and .css files) that I didn't need. Whatever was screwing it up must've been in one of them.

 

It works, though, so I'm happy for now. If I ever figure out exactly where the issue is, I'll update this thread in case anyone in the future needs to know.

 

Thanks guys.

Edited July 19, 2013 by jleesaxon (see edit history)

[NemoPS]

Well if in the new one you didn't change anything, there's still that refernce to #header in the css, isn't it? if so, that's the reason why it's not working without the id applied (or css change)

[jleesaxon]

To summarize the thread so far for anyone worrying about this in the future, changing header.tpl's <div id="header"></div> to a <header></header> without breaking blockcart requires finding some "#header" id definitions in the CSS and changing them to "header" element definitions.

 

It turns out those definitions aren't in global.css. The only part of blockcart styled in global.css is the "Checkout" button. Blockcart works perfectly with a completely blank global.css file (while header.tpl still contains "id=header," that is).

 

The definitions you must change aren't even in your theme folder, but /modules/blockcart/blockcart.css. Also, to position blockcart effectively, you must define "position:relative" on its container.

 

Once you make those changes, blockcart will open and display correctly, but will not close. It's my belief that "id=header" is utilized not just in blockcart's css but somewhere in its actual code (which I lack the skills to examine).

Edited July 20, 2013 by jleesaxon (see edit history)

[jleesaxon]

The answer is actually pretty simple. You must change "#header" to "header" not just in "/modules/blockcart/blockcart.css" but also in "/modules/blockcart/ajax-cart.js"

[vekia]

many thanks for information

 

im going to mark this thread as [solved]

 

best regards