?
Solved

Modify  Theme to Always Show Related Products

Posted on 2011-10-05
8
Medium Priority
?
377 Views
Last Modified: 2012-05-12
Hi Design Experts,

I have a question regarding which files I need to edit to achieve this look (see attached file).

I don't know where to begin on changing how my related products is currently being shown.  Right now it is nested in a menu that changes when you click them.  I want to pull out related products and have them always being shown at the bottom.

Here is the live version:  http://www.hawaiipacificparks.org/store/index.php/tracing-the-past-at-honaunau.html

Which css, xml, or PHTML files will i need to edit?  Is this a BIG job?
Example.gif
0
Comment
Question by:activematx
  • 3
  • 3
  • 2
8 Comments
 
LVL 61

Expert Comment

by:HainKurt
ID: 36920745
how do you display those images under "you also might like..."
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 36920771
I cannot locate those images :)
0
 
LVL 9

Author Comment

by:activematx
ID: 36920783
The image i did above in Photoshop.

However in actual code it pulls the image from our website.  I am using Magento (E-Commerce platform).  Magento has a "related products" section and this theme chooses to nest them on the left.  I want to un-nest them and have them always displayed.   (It does not need to look like my photoshop-mock-up).  Something similar is fine.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 9

Author Comment

by:activematx
ID: 36920824
There  -- I just added that image to our related products section.  You need to click on the "related products link on the left"
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 36920890
look for class names here:

<div class="box-collateral box-description">
<div class="page-title">
<div class="description">
  <div class="std">...</div>
  < --- here you need to add some codes ---->
</div>
</div>
</div>

in your codes...
0
 
LVL 12

Accepted Solution

by:
miked2004 earned 2000 total points
ID: 36925405
It is trivial if you have programmed/themed magneto before.


You have a custom theme that is pulling in multiple data into tabs.

You need to look in your themes layout folder(contains all the layout xml files). Find the catalog.xml file.

Then find the node for the product view page. starts with the following.

<catalog_product_view translate="label">

Open in new window



Then nested in that node is the upsell block
<block type="catalog/product_list_upsell" name="product.info.upsell" as="upsell_products" template="catalog/product/list/upsell.phtml">
                    <action method="setColumnCount"><columns>4</columns></action>
                    <action method="setItemLimit"><type>upsell</type><limit>4</limit></action>
                </block>

Open in new window


Then in you template file for the product view you need to change where this upsell block is called.
/app/design/frontend/YOURTHEME/YOURTHEME/template/catalog/product/view.phtml


Now just put the following code where you want the block to be.
<?php echo $this->getChildHtml('upsell_products') ?>

Open in new window




This will move the block. You will probably need to remove it from the tab interface that it is currently in. so it is notdisplayed in two places.
0
 
LVL 9

Author Comment

by:activematx
ID: 36958160
Thanks Miked2004!!!!

Just one last question.

I now know how to move the block where I want the upsell code to go.  But where do I  modify the actualy html?

I am guessing here.  Is this the file i need to modify for the html?:  "catalog/product/list/upsell.phtml"
0
 
LVL 12

Expert Comment

by:miked2004
ID: 36958195
Yes, You are correct. that is the file that controls the html.

You can tell by looking at the xml that sets up the block. See the template setting.

<block type="catalog/product_list_upsell" name="product.info.upsell" as="upsell_products" template="catalog/product/list/upsell.phtml">

Open in new window

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month13 days, 22 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question