Little Confused on starting out
 

Please note this is my first time working with xcart and any CMS system for that matter but I'm determined to learn it.

I've read several posts on the .tpl files and understand you have to edit the main.css file in the skin1 to style elements etc. And I also understand that to get your own logo in you can just edit the head.tpl file in the customer folder etc..

But my question is where is the HTML file to edit the actual HTML Code. I'd like to get my own customized search bar to search for products in the top right corner of my skin1 (http://jacquelinezinn.com/xcart/) where the Home, Shopping Cart, and Contact Us is. It seems like I could edit the tabs.tpl file but I'm not sure thats right. So I basically need to know how do I start editing this skin?

How did everyone start out? My theory was go through this skin step by step changing bits and pieces of the existing code although I'm not sure thats the best way as some of the items I don't understand. I also don't understand how to edit the HTML in DW etc... I'm using a demo version so I can login to my admin account via the storepanel login but past that I don't use any of the editors Xcart provides.

I've read a couple intro posts on starting out that are stickied but none actually give you a hey this is the first thing I did I started from scratch and made my own template or I modified in existing template the way I'm currently doing it etc.. I have fairly strong knowledge in CSS / XHTML etc.. but everything else is new to me.

Thanks for any help provided hope everyone had a safe and fun Holiday!

Re: Little Confused on starting out
 

There are no html files. HTML files are generated on the fly from the template files - they are put together as a final html file by Smarty Engine. You need to edit the templates. And you need to know not only html but smarty as well to be able to do so successfuly. In your version for customer stor side templates look in skin1/customer - most of them are there

Re: Little Confused on starting out
 

Although it is for Xcart v4.1.xx you can still clean a lot of useful information from Padraic's thread here

Re: Little Confused on starting out
 

Ok great so I need to understand how Smarty Templates work is there any good resources out there to learn these? Also how did most people start out? Did they first edit an existing skin or just create their own from scratch.

I also noticed a designer also posted they usually down in 750 width but I was looking for some clarification on why 750.

Thanks again for the help everyone wish I could provide some help back but once I learn the system I plan on using my knowledge to help others

Re: Little Confused on starting out
 

www.smarty.net

You can edit the existing skin or build your own. You are new to this so editing the existing one will be a lot easier.

For width: if you want fixed width for the site stay on 1000px or less. Fits pretty good even on netbooks without horizontal scollbar

Re: Little Confused on starting out
 

When I started, I read around a bit and looked at the files.

I believe I'm fairly proficient in skinning, so I'll tell you what I know:

1) The firebug plugin for firefox can be equated to finding out how to travel faster than light. AKA, its epic and you need it.

2) Develop your site using firefox as the primary browser and then once finished go back and check it in other browsers. You can also drop support for IE6 as major sites have as well, so its not a small drop of sites forcing people to upgrade.

3) Keep debugging console active while developing.

4) When you can't figure out which template you're needing to edit, turn on webmaster mode and then highlight the .tpl names in the debug window and then the content inside that template will "pop"

5) If you're not comfortable with starting from a base skin, then you should buy a template from someplace that sort of looks like what you want and then customize from there.

6) Brush up on CSS if you're not fluent in it. For starting out, all you'll need to really know without looking is padding, margin, color, background color/image, positioning.

7) I would suggest using an IDE or text editor (I love notepad++) that will highlight and show HTML easier. This is so you know if you've closed all your tags and such.

8) When working with smarty it's a good idea to read a crash course on it.http://www.smarty.net/crashcourse.php

The basics are this:
Smarty's delimeters are { and } so any inline javascript should be surronded by {literal}{/literal} tags so smarty doesnt try to parse it.
Variables are called like {$variable}
Arrays are called like {$variable.name2.name3}
Operators are eq,neq,lt,lte,gt,gte or the standard php type of == >= <= etc

9) You will need to clear your xcart cache frequently. www.yoursite.com/cleanup.php

10) If you need help, post on the forums in the right area.

11) Search is a better button to use than the new topic button. Use the search before posting :-P



Right now I'm in the process of updating one of my mods to work with 4.2 and 4.1, but if you need to know a little bit more about smarty {if}{elseif}{else} statements, lemme know and I'll give you a link to an unfinished article I have that relates to X-cart.

Re: Little Confused on starting out
 

"1) The firebug plugin for firefox can be equated to finding out how to travel faster than light. AKA, its epic and you need it."

I'm familiar with firebug but other then mousing over divs to see which each div does and then referring to the templates what can I use firebug for?

" 3) Keep debugging console active while developing."
I've got the debugging console open but I see files like head_admin.tpl instead of just head.tpl4) When you can't figure out which template you're needing to edit, turn on webmaster mode and then highlight the .tpl names in the debug window and then the content inside that template will "pop"

I noticed in webmaster mode you can click on text and replace it with things but you can't actually delete the text but haven't found to much use for it yet.

I've read the smarty crashcourse and most of that makes sense but I'm not 100% how it relates to the .tpl I believe you but I'm having a difficult time relating it to the .tpl files.

I understand these files in the head.tpl

{include file="customer/tabs.tpl"}

{include file="customer/phones.tpl"}

control part of the skin1 where the buttons are in the top right and the phone #'s but I'm having a difficult time understanding how to modify that data or remove it completely obviously I could just remove those lines but I want to make sure I do it properly.


Thanks for any help you've been really helpful in getting me started!!

Re: Little Confused on starting out
 

By pulling their hair out and gnashing their teeth.

Other than what Tal covered, I'd recommend downloading Notepad++ if you don't already have it.
http://sourceforge.net/projects/notepad-plus/

Then back up everything you plan to edit. That way you can go in and change code and see what does what, or doesn't, cause it's overridden by code somewhere else. Then when stuff goes cattywompous, you can just copy the code back and go back to cussing.

Like you, I also have background in HTML and I'm slowly getting CSS, but it's pretty different. I'm currently trying to stretch / scroll my background, which is simple in HTML and next to impossible in CSS.

Might want to prepare for stuff like that.

Good luck man! If I see anything I've already banged my head on, I'll try to help ya out.

Re: Little Confused on starting out
 

background: url("path/to/image.jpg") repeat-x scroll 0 0 transparent

You can use repeat-y as well :)

Re: Little Confused on starting out
 

Still scrolls from the left, but not the right. Gives me something to play with though. Thanks man :-)

Don't wanna highjack the mans thread.

-sid

Re: Little Confused on starting out
 

Firebug tells you where the css can be found - either the css file or inline in the template - you never have to waste time searching around, it provides the exact location information.

You can make css and html edits on-the-fly in real time, in the browser window. You can experiment with different css and html settings without committing them to your server. Then, when you are happy with the changes, you can update your files.This saves lots of time.

Firebug clearly shows you what css is being applied to a particular element. Since css cascades, styles can be redefined by settings later in the cascade. Firebug shows you all the settings that have been applied to a particular element. It crosses out styles that have been overcome by another setting. This is very helpful in debugging complex css.

Look around in Firefox - click on the Layout and DOM tabs and see all the information they provide - this comes in handy when you are debugging.

(It is also a powerful javascript debugger if you ever need it.)

Re: Little Confused on starting out
 

Be careful, the pop up goes with the page that was last loaded - including administrative pages. When you turn it on - the pop up applies to the administration page where you turned it on. You need to go to the page you care about, and reload it - then the pop up will reload for that page. So - the pop up gets reloaded as you move around and applies to the last page loaded.


Look up Language Variables in the documentation - that will explain the text you are editing in Webmaster mode. (While you are at it - take a look at the webmaster mode documentation.)


The web master mode console also has another important function that hopefully will help you to get what the smarty is doing. In the section called "assigned template variables" of the webmaster mode pop up, you are provided all the smarty variables that are being passed to the template, and what each of those variable's value is set to. Smarty is the template designers tool for manipulating the variables to get the effect they want.

Think of it this way - Say you have two people working on your project - A php programmer who does not care too much about the look-and-feel, but is very interested in getting data from the database and programming the functionality to control all the page builds. You also have a designer who does not have time to learn php, but really wants to focus on the the site layout and presentation. (You can take the designer role in this scenario).

The webmaster mode console is one of the ways that the php programmer tells you all the variables that she has made available to you on a particular page load, as well as, all the templates used to build the page.

An example: Say you are the designer again, and you are on the product page, and you want to display a pretty image if the product has been assigned to the main category 2. You already know the html and css to do it, but you don't know how to tell when the product is from the category in question, and you don't know what template to edit.

First - you reload a product page while in webmaster mode - and take a look at the pop up.

The "Included templates & config files" section is among all the good advise Tal has provided to you. You run your mouse over the file names and find the one that puts a border around where you want to place the image. You go look at that template and you can recognize the html and css classes because you have firebug open and are also looking at the html/css of the generated page. You also see smarty code in the template that is making if/than type decisions and looping through arrays and displaying variables. You save understanding that for later.

Now you scroll down in the webmaster mode pop up to the "assigned template variables" section to see all the variables your php programmer has made available to you on this page. You see that she has given you a variable called $cat that is set to the products main category. You snoop around a little more, and see she has given you an array called $current_category with other information about the category that you might be able to use later. You remember that you had seen the variable {$ImagesDir} in one of your templates - and you see it in here and that it is set to /skin1/images, and you recognize that this is the path to where you have been putting your graphics.

Now, you don't even have to call her, she is kind of grumpy. You can use smarty to do what you want with the category in your design of the product page. You add something like this to your template:
{if $cat eq 2}<img src="{$ImagesDir}/we-love_this_category_{$cat}.jpg" alt="We Love This Category" /></if}
Then, on the product pages when the products are in category 2 - this is the html that gets generated:
<img src="skin1/images/we-love_this_category_2.jpg" alt="We Love This Category" />

Then you decide you want to get fancy and have a different background image for every category and set up css classes for every category. You already know css, so you discover this may not be so hard to do.
<div class="image_{$cat}"><p>We need different backgrounds and images per category here!</p></div>

So you can set up unique css for different images for different products, depending on which main category they are in. You add this to your css file and use firebug to get everything just right:
.image_1 { height: 20px; width:30px; background: #ffffff url(images/we-love_this_category_1.jpg);float:left;}
.image_1 p {color:#cc0000;}
.image_2 { height: 30px; width:50px; background: #000000 url(images/we-love_this_category_1.jpg) no-repeat left top;;float:right;}
.image_2 p {color:#ff0000;}
...

You are having so much fun now that you look more at your webmaster mode smarty variables, and you see an array called $product with lots of good stuff in it. You see that the manufacturer is in there, which is great, because you wanted to put that somewhere on the page. You add this to the appropriate template:
<p>This product is made by {$product.manufacturer}.</p>

Do you feel the power? This give you lots of flexibility in your design - without having to know php, or how to query the database. If you don't see the variable you need in the console - then you have to call up your php programmer and tell her what you want to do, and she may be able to pass you the information you need.

When starting - just make sure to keep backups and dive in. Try things and if it does not work - you can always revert to the back up


I wouldn't wait until finished to check other browsers. I'd advise keeping IE open and looking at it fairly often while developing. IE is less forgiving with css and html errors, and you can see them as soon as you make them, rather than much later when it may be more difficult to find and fix. Also - advisable to check W3C verification frequently. The templates start out generating css and html compliant to the standards. Best to keep your changes compliant and not stray too far.



Good Luck!