Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Learning to Design for Magento - A Thread of Questions and Answers. 
 
Napier
Member
 
Total Posts:  47
Joined:  2008-05-24
 

Hey Guys,
So I am going to start this thread because as I design for Magento - I tend to post my questions in the forums then find the answers before anyone has a chance to help me solve it.  So as I begin to edit the free theme I received from ecommerce-themes.com, I will post my questions / problems and how I solved them!  (You never know, I might not have any!)

I started with getting Internal Server Errors - please make sure you permissions are set to 755 to fix these issues! (Magento folder and index.php)

Screen Shot posted of the beginning of my project!

My Project can be viewed at http://www.mindstatedistribution.com

I hope that eventually this log of my struggles and accomplishments will become a good tutorial for some of you!

PS. After beginning to fix a few things - I LOVE the way magento is setup!  It will be easy to learn if you understand the basic structure of HTML and CSS.  Awesome program guys!

Planned Changes / Tutorials:

- Tabbed Browsing
- Placement of “Featured Products” (or any custom attribute) on the homepage
- Editing the top menu bar to be more efficient

- Highly configurable items

Image Attachments
start.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
Napier
Member
 
Total Posts:  47
Joined:  2008-05-24
 

Ok - one thing I noticed right away with this layout - is that when the design is set to “3 columns” the designer made it so that all the information from the template was put on the left bar instead of both sides - I definitely want it to be this way for my categories.  However - there was a problem and the column on the right is still showing up

I will post when this is fixed

How I Fixed the right column showing up blank when no code was present there:

Went to app > design > frontend > default > electronics3 > template > page > 3columsn.shtml

<div class="middle col-3-layout">

Using firebug - I looked around for the problem and see that they did successfully delete the third column - which wasn’t making sense to me.  Further looking into firebug - I discovered this:

.side-col { width:195px}
.col-left { float:leftpadding-left:10px}
.col-main { float:left}
.col-right { float:leftpadding-right:10pxpadding-left:10px}
.col-1-layout .col-main { float:nonemargin:0padding-left:25pxpadding-right:25pxline-height:30px}
.col-2-right-layout .col-main { float:rightwidth:740pxpadding-right:20px;_ padding-right:10px}
.col-2-left-layout .col-main { float:rightwidth:685px}
.col-3-layout .col-main { width:475pxmargin-left:17px}

I found this in boxes.css in the skin folder > default > electronics3 > css > boxes.css - I noticed they left the boxes.css.theirs (the backup) in the folder which is helpful for many cases, thanks for that!’

If you look at the code you will notice the

.col-3-layout .col-main {width:475pxmarginleft17px;}

Changing this to 100% caused the whole category to fall below the content all together (obviously so I changed the code to 740px which was the correct size to make it fit and came up with the correct results!

Final CSS Replace of above code:

.side-col { width:195px}
.col-left { float:leftpadding-left:10px}
.col-main { float:left}
.col-right { float:leftpadding-right:10pxpadding-left:10px}
.col-1-layout .col-main { float:nonemargin:0padding-left:25pxpadding-right:25pxline-height:30px}
.col-2-right-layout .col-main { float:rightwidth:740pxpadding-right:20px;_ padding-right:10px}
.col-2-left-layout .col-main { float:rightwidth:685px}
.col-3-layout .col-main { width:740pxmargin-left:17px}

Easy enough!

Time for fix: 30 minutes - estimate time to fix yourself: 1-2 minutes.

Not bad for the first time ever looking into Magento’s code!

Image Attachments
rightcolumn.jpgrightcolumnfixed.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
Napier
Member
 
Total Posts:  47
Joined:  2008-05-24
 

Ok it is quite obvious that Image Resizing is going to be an issue so I am going to install the Image Resizing modification found in the Magneto Connect next!  I’ll let you know any problems / solution and a basic tutorial and how I completed it next.

Ok - after eating dinner I was ready to tackle this problem!

I got the key and installed it easily using the Magento Connect option.

http://www.magentocommerce.com/extension/153/direct-resize

After installation - I was aware I needed to make some changes - so for testing purposes - we will do the catalog changes!

I did as instructed and went to:

app > design > default > {your_template} > template > catalog > product > list.phtml

Initially - I found the resize (x,y) option on the top of the page.. THIS IS FOR LIST VIEW

Grid view is down around line 93 on my template. 

Initially I simply added the x,y,r (where r stands for ratio code (see bottom of page) and, because I don’t follow instructions very well it didn’t work

So I looked and discovered I needed to get rid of the pre-defined size and width built into the HTML first.  I did this and I had code that looked like this:

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
                <
img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135, 135, 3); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/>

This was on about line 45.  It wasn’t until I re-read the instructions that I discovered I needed to change resize to directresize

I did this on both line 45 and line 93.  so my code looked like this on line 45:

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
                <
img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->directresize(135, 135, 3); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/>
            </
a>

The result was a switch from the initial screen shot (for which I uploaded something I knew would distort, to the second screen shot for which the problem was fixed

Time to install and configure basics of extension: 5 minutes.

PS: thought I would post the ratio codes here (they may change if he/she updates this extension).  I also fixed his spelling error on the connect page :-D

The ratio options are :
0 - none proportional. The image will be resized at the Width and Height values.
1 - proportional, based on the Width value
2 - proportional, based on the Height value
3 - proportional for the new image can fit in the Width and the Height values.
4 - proportional. The new image will cover an area with the Width and the Height values.

Image Attachments
problemsizing.jpgproblemsizingfixed.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
Napier
Member
 
Total Posts:  47
Joined:  2008-05-24
 

Yay!  Another problem!  It looks like when I was fixing the product list box - I ruined the product list details page.  My first assumption is that i accidentely deleted the wrong div - so I am going to install a few backups to start of files that didn’t need to be changed that I may have changed while fixing the above issue (first order of fixing a problem that wasn’t there before, no?)

Fixed: This one sucked!  It was caused when I went in and did a custom design for the category and set it to electronics3 and 3 columns - went to No Layout updates in admin cp and “please select” for set design and it was fixed.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Napier
Member
 
Total Posts:  47
Joined:  2008-05-24
 

Alright - it is time to add tabs to the product description!

While I found MANY good scripts here: http://www.noupe.com/javascript/37-great-ajax-css-tab-based-interfaces.html

For tabs, I originally planned to go with CSS Only tabs - the problem with this… is all the details would be on seperate HTML pages - I would have to generate seperate meta tags and descriptions for each page as well as for the main page and to my knowledge, Google would not consider my keywords as “relevant” for the product descriptions pages” without people searching and finding the blank pages with descriptions, images, etc!

So I ended up doing this script, and decided to modify it to not rotate:
http://stilbuero.de/jquery/tabs_3/rotate.html

Let’s see what I can come up with!

My First order of business is to save all the .js files I will need into the templates js folder.

skin > blah blah blah > js >

There are three script files called in the source of the page linked:

<script src="jquery-1.2.4b.js" type="text/javascript"></script>
        
<script src="ui.core.js" type="text/javascript"></script>
        
<script src="ui.tabs.js" type="text/javascript"></script>

So I navigate to the three pages to save the files (knowing I will probably have to edit javascript even though I have never done this, scary)!

To make it easier on you:

http://stilbuero.de/jquery/tabs_3/jquery-1.2.4b.js - JQuery is needed for a lot of Javascripts.
http://www.stilbuero.de/jquery/tabs_3/ui.tabs.js - The actual tabs script
http://stilbuero.de/jquery/tabs_3/ui.core.js - The core script

We also need to get the css file (and make some changes to fit my style) for the tabs

Found at: http://stilbuero.de/jquery/tabs_3/ui.tabs.css

Uploaded in the CSS folder found in the same root folder as the js folder.

I uploaded a picture of the ftp structure that should be placed in the ftp folder “js”

Now I need to link to the css/scripts in the HEAD of my page.  It would seem XML is auto-adding to the head.  I added the codes into the XML and playing with it to see which file must be updated.

Finally got the CSS and JS to link editing PAGE.XML

After CSS linked and the code was placed in the product description (so I could edit it based on product and not automatically have it generated) - nothing happened.

Now I am looking into editing catalog/product/view.phtml to make it automatically seperate information.  Any clarification on how to do this appreciate (I opened up a seperate thread asking for help on this).

I will post here when its fixed.

Image Attachments
productdescript.jpgjsftp.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
Napier
Member
 
Total Posts:  47
Joined:  2008-05-24
 

Next order of business: integrating lightbox when you click on one of the “more images” buttons.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Tom75
Jr. Member
 
Total Posts:  2
Joined:  2008-05-28
 

Hi Napier,

Did you change anything to have more “Shop by” option, like category, price, size… Did you add some attributes? change code?
How did you customized it?

Thank you wink

Or if an admin could show me the way…
I read a lot of post, the designer s guide and try some different way to figure it out but i’m stuck…

 
Magento Community Magento Community
Magento Community
Magento Community
 
Napier
Member
 
Total Posts:  47
Joined:  2008-05-24
 

its done automatically when you create attributes - i didnt change anything :-D

 
Magento Community Magento Community
Magento Community
Magento Community
 
Tom75
Jr. Member
 
Total Posts:  2
Joined:  2008-05-28
 

Your categories were on Anchor: yes, and your attributes in Use In Layered Navigation on filterable(with result).

I’ve done it smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
castus
Member
 
Total Posts:  64
Joined:  2008-06-04
 

Hi Napier,

Good work on noting your process so far!

Have you had any joy with lightbox? I think would simply be a case of linking the thumbnails in /product/view/media.phtml to the actual JPG and adding the rel attribute to activate lightbox. Obviously adding the lightbox script in the head too.

I haven’t tried it yet, but i think lightbox would be better than the zoom/open in new window.

 
Magento Community Magento Community
Magento Community
Magento Community
 
brianpat
Member
 
Total Posts:  44
Joined:  2008-04-05
 

Hi,

I am very new to magento. Has anybody implemented tabbed style view in product decription page? I guess lot of people have already done this. I would like to know the steps how to do this? Please help me in this.

Thanks
Brian

 
Magento Community Magento Community
Magento Community
Magento Community
 
Miizuu
Jr. Member
 
Total Posts:  2
Joined:  2008-06-26
 

Hello!

I hope anyone can help! Though it shouldn’t be very difficult I just can’t add the tabs in my product description.
I’ve read a lot of threads, but nothing worked. And i tried for some days! I don’t know where the problem is but i thing it’s adding the js. I added it in the head.phtml but nothing happened! I know the modern theme uses the tabs and it worked fine (also adding my own tabs) but I don’t want to use the modern theme because I’ve already customised the default theme.
So I compared the files from modern theme and default theme and wanted to add the differences to my default theme. But that didn’t work, too!
So I hope anyone can tell me where my mistakes are and prevent me of customising the modern theme!
Thanks a lot!

 
Magento Community Magento Community
Magento Community
Magento Community
 
style118
Jr. Member
 
Total Posts:  22
Joined:  2008-06-18
 

i too want to get rid of the zoom-in/zoom-out image feature. anyone know how i can do so?

have you tried implementing the lightbox yet?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Miizuu
Jr. Member
 
Total Posts:  2
Joined:  2008-06-26
 

to get rid of the zoom feature look here: http://www.magentocommerce.com/boards/viewthread/628/

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top