What does/should an original product page example look like?

6 Jun 2014, 7:58 PM

#1

mcpisik

Zen Follower

Join Date:: Jan 2007
Location:: Mount Maunganui, New Zealand
Posts:: 417
Plugin Contributions:: 0

What does/should an original product page example look like?

Hi,
So I started as a total beginner and am now trying to fix my wrongs.

Can someone tell me these easy things below? (I think I stripped out all the good html stuff in the beginning)

Should each product page begin with <!DOCTYPE html> ? (Mine don't)
I type the name of my product at the start of my descriptions. Should this be in an <h1> </h1> ? (I have no h1's in my pages at the moment)
I have one line in each product description that I change the colour of, by doing this on each page: <span style="color: #bd192e;">Size: Extra Large</span>
Should I and can I use CSS to do this instead?

Thanks for your input and any other comments/ideas welcome.

6 Jun 2014, 9:35 PM

#2

stevesh

Black Belt

Join Date:: Feb 2005
Location:: Lansing, Michigan USA
Posts:: 19,793
Plugin Contributions:: 2

Re: What does/should an original product page example look like?

All your pages I looked at properly start with the Doctype line. What made you think they didn't?

You product names are in <h1> tags.

Could you provide an example of a page which uses the inline styling ?

6 Jun 2014, 10:09 PM

#3

mc12345678

Totally Zenned

Join Date:: Jul 2012
Posts:: 16,908
Plugin Contributions:: 2

Re: What does/should an original product page example look like?

mcpisik:

Hi,
So I started as a total beginner and am now trying to fix my wrongs.

Can someone tell me these easy things below? (I think I stripped out all the good html stuff in the beginning)

Should each product page begin with <!DOCTYPE html> ? (Mine don't)

I type the name of my product at the start of my descriptions. Should this be in an <h1> </h1> ? (I have no h1's in my pages at the moment)

I have one line in each product description that I change the colour of, by doing this on each page: <span style="color: #bd192e;">Size: Extra Large</span>
Should I and can I use CSS to do this instead?

Thanks for your input and any other comments/ideas welcome.

So, off the top of my head, I don't know the answer to the first question, though it wouldn't be terribly difficult to identify which leads me to the following before answering the other questions.

Welcome to Zen Cart first of all, glad to have you aboard.

So as a beginner there are a few things to which you will want to get accustomed. One is having a "working" copy of your store on which you can try things before applying them against your production store. Two is not modifying the default template, but instead having aa second template (can be a copy of the default) and in paralel minimizing the changes made to what is called core files. (core files could be considered any file that comes with a clean installation of ZC that also do not have the ability to be be overriden by a file associated/having a template directory.y

So the second question if it hasn't been answered now that I haven't sent this yet, why is the name of the product in the description and not in the field for the product name? What is in the product's field name that isn't being shown to possibly have that tag? Also assuming that you've had the pages reviewed for proper formatting which is the origin of this question.

Third, yes, by all means do what you can to simplify modification of your site. Which is easier, making a one line code change in css, or changing every such product description? And if the change already made is in the code and not the description, good luck finding it again, especially that ZC is going the way of more css related display.

Hope that helps, even if it has been a while since you originally posted this and that there are probably already other answers to help you.

6 Jun 2014, 11:23 PM

#4

mcpisik

Zen Follower

Join Date:: Jan 2007
Location:: Mount Maunganui, New Zealand
Posts:: 417
Plugin Contributions:: 0

Re: What does/should an original product page example look like?

stevesh:

All your pages I looked at properly start with the Doctype line. What made you think they didn't?

You product names are in <h1> tags.

Could you provide an example of a page which uses the inline styling ?
Hey Stevesh :)
Now that you've said that, I've viewed the page source and see the <!DOCTYPE....is added for me at the top.
Just seemed to remember seeing it in my actual HTML Source Editor years ago and wondering if it was ok to remove at the time. (Which I did anyway)
So if it's added automatically I'll leave it out when typing descriptions and let it do it itself.

I note now that the <h1> tag is in the title so that's good.
Just thought the description I type, might need an H1. But now I don't think so, if the main title is one by default.

For the inline styling that I thought should become css, here's a segment marked in red.

<p><span  style="font-weight: bold;">Bond</span> $49<span  style="font-weight: bold; color: #00cc00;"><span style="color:  #66cc00;"><br /><br />[B]<span style="color: #bd192e;">Size: Extra Large</span>[/B]</span></span><br  /><strong><br />20s Cocktail Flapper Costume<br  /></strong><br />Includes:<br /><br />*  Dress<br />* Feather Headband<br /><br /><a  href="/buy-ladies-costumes/view-all-ladies-costumes/buy-20s-cocktail-flapper"><img  src="/images/or_buy_costume_button.gif" alt="This costume is also for  hire!" width="205" height="46"  /></a><strong>$99</strong></p>

Would I be best to change this method of font colour to use css?

:)

6 Jun 2014, 11:32 PM

#5

mc12345678

Totally Zenned

Join Date:: Jul 2012
Posts:: 16,908
Plugin Contributions:: 2

Re: What does/should an original product page example look like?

I think by example of it's use, he was thinking of getting a page link. One thing stevesh can help out with (among many) is providing css related rules from inspecting the page itself.

7 Jun 2014, 1:01 PM

#6

lat9

Administrator

Join Date:: Sep 2009
Location:: Stuart, FL
Posts:: 14,081
Plugin Contributions:: 56

Re: What does/should an original product page example look like?

The in-line styling is most likely from a define-page (like define_main_page.php), edited using the HTML editor in your admin. If you don't like the styling, you could edit (Tools->Define Pages Editor) that page using the built-in text editor and remove the unwanted styling.

8 Jun 2014, 3:25 AM

#7

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,876
Plugin Contributions:: 8

Re: What does/should an original product page example look like?

<p><span  style="font-weight: bold;">Bond</span> $49<span  style="font-weight: bold; color: #00cc00;"><span style="color:  #66cc00;"><br /><br /><span style="color: #bd192e;">Size: Extra Large</span></span></span><br  /><strong><br />20s Cocktail Flapper Costume<br  /></strong><br />Includes:<br /><br />*  Dress<br />* Feather Headband<br /><br /><a  href="/buy-ladies-costumes/view-all-ladies-costumes/buy-20s-cocktail-flapper"><img  src="/images/or_buy_costume_button.gif" alt="This costume is also for  hire!" width="205" height="46"  /></a><strong>$99</strong></p>

I would replace the inline styling in your descriptions with semantically meaningful class tags on the spans, and put the details of the styling in your stykesheet.
Also, you can replace
<span style="font-weight: bold;">Bond</span>
with
<strong>Bond</strong>. (I see you already have that in some places.)

<span style="font-weight: bold; color: #00cc00;"><span style="color: #66cc00;"><br /><br /><span style="color: #bd192e;">Size: Extra Large</span></span></span>
looks like an HTML editor's retention of three different iterations of design; only the last color actually applies to anything, and it could become
<span class="important1">Size:</span>
with a stylesheet rule
.important1 {font-weight: bold; color:#bd192e;}

<p><strong>Bond</strong> $49<span class="important1">Size: Extra Large</span><br  /><strong><br />20s Cocktail Flapper Costume<br  /></strong><br />Includes:<br /><br />*  Dress<br />* Feather Headband<br /><br /><a  href="/buy-ladies-costumes/view-all-ladies-costumes/buy-20s-cocktail-flapper"><img  src="/images/or_buy_costume_button.gif" alt="This costume is also for  hire!" width="205" height="46"  /></a><strong>$99</strong></p>

8 Jun 2014, 5:38 PM

#8

mcpisik

Zen Follower

Join Date:: Jan 2007
Location:: Mount Maunganui, New Zealand
Posts:: 417
Plugin Contributions:: 0

Re: What does/should an original product page example look like?

Perfection thanks GJH42

I've now changed it to a css file as suggested.
I'm not sure if I should bother changing the other few 1000 products?
But I'll at least make new items with this applied.

You are correct on TinyMCE affecting those spans.
As a bit of a guru on the subject, do you use CKeditor if needing one?
(Staff require one, but I'd like to use something that doesn't add those extra spans....)

8 Jun 2014, 9:20 PM

#9

mcpisik

Zen Follower

Join Date:: Jan 2007
Location:: Mount Maunganui, New Zealand
Posts:: 417
Plugin Contributions:: 0

Re: What does/should an original product page example look like?

...in addition. I've just noted that CKeditor is not showing a broken link that's in my description.
Either in html view or source. It's just ommited.

If I switch to Tinymce or Plain Text, I can view it in the Source. Which allows me to delete it.
Glad I spotted it. Maybe I will go through my products one by...gulp...one.