Jump to content

how to put product description text nx to image?


jerseyjoe

Recommended Posts

Use table with two colum or two DIVs with style property float: left in viewProd.tpl

TABLE:

<!-- BEGIN: prod_true -->

<strong>{LANG_DIR_LOC}</strong> {CURRENT_DIR}

<form action="{CURRENT_URL}" method="post" name="addtobasket" target="_self">

<p class="txtContentTitle"><strong>{TXT_PRODTITLE}</strong></p>

<table><tr><td>

<div style="text-align: center;"><img src="{IMG_SRC}" alt="{TXT_PRODTITLE}" border="0" title="{TXT_PRODTITLE}" /></div>

<!-- BEGIN: more_images -->

<div style="text-align: center;"><a href="java script:openPopUp('extra/prodImages.php?productId={PRODUCT_ID}', 'images', 548, 455, 0);" class="txtDefault">{LANG_MORE_IMAGES}</a></div>

<!-- END: more_images -->

</td><td>

<p>

<strong>{LANG_PRODINFO}</strong>

<br />

{TXT_DESCRIPTION}

</p>

<p>

<strong>{LANG_PRICE}</strong> {TXT_PRICE}

<span class="txtSale">{TXT_SALE_PRICE}</span>

</p>

<ul>

<li class="bulletLrg"><a href="index.php?act=taf&productId={PRODUCT_ID}" target="_self" class="txtDefault">{LANG_TELLFRIEND}</a></li>

</ul>

<!-- BEGIN: prod_opts -->

<br />

<strong>{TXT_PROD_OPTIONS}</strong>

<table border="0" cellspacing="0" cellpadding="3">

<!-- BEGIN: repeat_options -->

<tr>

<td><strong>{VAL_OPTS_NAME}</strong></td>

<td>

<select name="productOptions[]">

<!-- BEGIN: repeat_values -->

<option value="{VAL_ASSIGN_ID}">

{VAL_VALUE_NAME}

<!-- BEGIN: repeat_price -->

({VAL_OPT_SIGN}{VAL_OPT_PRICE})

<!-- END: repeat_price -->

</option>

<!-- END: repeat_values -->

</select>

</td>

</tr>

<!-- END: repeat_options -->

</table>

<!-- END: prod_opts -->

<br />

<strong>{LANG_PRODCODE}</strong> {TXT_PRODCODE}

<div>

{TXT_INSTOCK}<span class="txtOutOfStock">{TXT_OUTOFSTOCK}</span>

<!-- BEGIN: buy_btn -->

<div style="position: relative; text-align: right;">{LANG_QUAN}

<input name="quan" type="text" value="1" size="2" class="textbox" style="text-align:center;" />

<a href="java script:submitDoc('addtobasket');" class="txtButton">{BTN_ADDBASKET}</a>

</div>

<!-- END: buy_btn -->

</div>

<input type="hidden" name="add" value="{PRODUCT_ID}" />

</form>

</td></tr></table>

<!-- END: prod_true -->

DIvs code is almost the same.

Link to comment
Share on other sites

:) This is more difficult than it first appears, if you wish to do it without tables - but depending on what you're doing with the layout, may not matter. I reworked all the divisions in viewProd.tpl to make it work properly for a client awhile back. It looked like it worked when I first did a simple revision, but in fact when adding borders to certain elements the layout was screwed up, until I went through and revised the structure of most of the divisions.

Please feel free to use and adapt my version of this - just remove the .txt extension from the file.

Link to comment
Share on other sites

:D This is more difficult than it first appears, if you wish to do it without tables - but depending on what you're doing with the layout, may not matter. I reworked all the divisions in viewProd.tpl to make it work properly for a client awhile back. It looked like it worked when I first did a simple revision, but in fact when adding borders to certain elements the layout was screwed up, until I went through and revised the structure of most of the divisions.

Please feel free to use and adapt my version of this - just remove the .txt extension from the file.

I mis-spoke when I said "Killer Skin". I'm actually using Legend but I think that's not an issue.

However I am having a nasty problem with this. I downloaded your file, renamed it to remove the txt extension and FTPed it, overwriting the existing file in Legend. After a few futile tries, I deleted the original and then uploaded your version.

As a result, the product page is blank.

http://www.vikolya.com/index.php?act=viewProd&productId=1

I'm not worrried about the lost display. I know that my bottom line is I can simply restore the original TPL from the CC 3.0.10 download zip. But if I could install your mod, I really wish to do that.

May I send you the admin codes for the store - and for the FTP and ask that you take a look at what might be wrong?

TIA

Link to comment
Share on other sites

Dang, Joe!

I don't know if that was the easiest fix I've ever done, but it ranks right up there - :)

As a result, the product page is blank.

Yes, but when I looked at the server, there was no viewProd.tpl there at all!

I uploaded the file I shared with you, and this is how it looks:

http://www.vikolya.com/index.php?act=viewProd&productId=1

:)

Link to comment
Share on other sites

Dang, Joe!

I don't know if that was the easiest fix I've ever done, but it ranks right up there - :)

No fair! I promise next time I'll come up with something to test your skills.

Now, why the hell did I think that the upload had worked - but it hadn't?

I may have to stop taking these little blue pills that make my eyes blurry and . . . and . . . hmmm, never mind. I'll get glasses.

Thanks for the beautiful fix. It's the perfect thing for products whose aspect ratio requires a tall vertical photo as did those.

Link to comment
Share on other sites

  • 3 weeks later...

I had to reinstall that mod because - well, don't ask. Just accept that I did a reinstall of the store.

A few mins ago I took a fresh copy of your mod, renamed it properly and FTP'd it to overwrite the default in the Legend skin. This time, the upload is definitely on the server, in the right folder:

(skin > legend > style templates > content)

But it's not showing up in the browser.

I appreciate you doing it for me - but I'd much rather find out what I've done incorrectly.

Any idea?

The access codes have not changed since I PMd them to you. I just put the store back online for a while to make it easier for you to see (www.vikolya.com - especially the Jewelry Stands).

OOPS - by the way - I'd like that mod even more if it also would put the "(+) More Images" link directly under the prod description. I think that link is not easily seen tucked under long images such as this site needs. Can you do that? I'll pay you for it.

Thanks.

Link to comment
Share on other sites

Joe, I have looked at your site, and I see that you have a number of display problems - but the product page appears to be working fine, e.g.:

http://www.vikolya.com/index.php?act=viewProd&productId=115

I looked at this in both FF and IE, and I do not get a blank page. If you have a blank page, you'll need to empty cache.

Here is what I see, and I've reviewed my code in the mod . . .

1. Image left, Product info and "more" and "buy" buttons are alongside on the right. On your page, the buttons do not appear because the item is out of stock.

2. Text description goes below image. I did that purposefully, but you can change that by removing the <br clear="all" /> that is coded above the text description code.

3. To move the + More Images, you simply move this entire block:

		<!-- BEGIN: more_images -->

		<div style="text-align: left;"><a href="java script:openPopUp('extra/prodImages.php?productId={PRODUCT_ID}', 'images', 548, 455, 0);" class="txtDefault">{LANG_MORE_IMAGES}</a></div>

		<!-- END: more_images -->

IMO, the best place for it would be just before <!-- BEGIN: prod_opts -->

The key is not to place that block inside another set of tags (like the one I just copied above for prod options) or outside the set of tags for <!-- BEGIN: prod_true --> and <!-- END: prod_true -->

Remember, these may look like html comment tags, but in XML XTemplate they are cues for PHP

Link to comment
Share on other sites

POST POST EDIT - ignore this. I now realized I didn't read well enough. Put this on hold until I try what you advised.

I'm stuck at a basic level. It seems that you are seeing the p[age with the description nexrt to the image but even after clearing my cache, I am not. The attched screeshot of

http://vikolya.com/index.php?act=viewProd&productId=3

shows what I am seeing. Note that the description text is below the image, not to its right, which is where I think it should be.

Any idea what's happening?

Also, you said you see other display problems. The only other one I'm seeing, other than this Product Descrition issue, is that in FF, the Category display needs to be fixed. That's on my punch list but I'm not aware of others. If you are seing something, please tell me?

TIA

Link to comment
Share on other sites

Once I started paying attention to what you actually said - but not what I wanted to think you said - it worked!

See: http://vikolya.com/index.php?act=viewProd&productId=38

Thank you for your generous help. You've not only helped my make the page look the way I wanted it to, you've taken my understanding of how these things work one step further.

Now, what other display issues did you see (other than the FF handlling of Categories, which I think I can find in an existing thread)?

Regards, Joe

Link to comment
Share on other sites

Hi Joe, that is exactly the issue I saw (FF & cats).

I'm glad you got it working. I'd have gladly done it for a few pence as you suggested, but it needed so little work you know . . . and if you've gained a greater understanding of the code, the teacher in me is satisfied :P

Link to comment
Share on other sites

Hi Joe, that is exactly the issue I saw (FF & cats).

I'm glad you got it working. I'd have gladly done it for a few pence as you suggested, but it needed so little work you know . . . and if you've gained a greater understanding of the code, the teacher in me is satisfied ;)

Well, I'm stuck on one thing. Take a look at :

http://www.vikolya.com/index.php?act=viewCat&catId=2

in both IE (where it's fine) and FF (where it isn't).

I had the FF version looking good. But somehow, I've changed something that I can't find.

Any ideas?

Joe

Link to comment
Share on other sites

"Any ideas?"

Sure, Joe. IE is ignoring your CSS rules because your images are too wide for the boxes you have set in CSS.

FF is following the CSS rules and created boxes of 150px width, trying to squeeze images of 175px width into the boxes.

Change the width of your boxes in the CSS rules so that the width is greater than 175px (the width of those images). Experiment with the width until IE and FF look the same.

Here is where you need to make the change in CSS (layout.css):

.subCat {

text-align: left;

padding: 5px;

float: left;

width: 150px;

height: 360px

}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...