Jump to content

Is this possible, with just changing skin files?


Guest

Recommended Posts

I'm wondering if what I want to do can be done by changing the skins files (css and tpl), or if I will have to go into the php files.

I'd like to have the product image not the thumbnail but the larger actual product image set as the background, then have the title of the product written over the image, along with the description and price. Sort of like in this picture.

Jen

Link to comment
Share on other sites

Jen, getting the larger image requires a small change in php. I know much of my site looks gaudy to you, but you will notice I'm using a larger image for featured product.

Once you pull this larger image into styleTemplates/boxes/randomProd.tpl, you can use styles and templates to format it as you wish. I wish I had thought of your idea; it's a great idea, and I may have to steal it :unsure:

Anyway, here is the source file change that is necessary:

Look in includes/boxes/randomProd.inc.php

FIND at around line 66:

$box_content->assign("IMG_SRC","images/uploads/thumbs/thumb_".$randProd[0]['image']);




REPLACE WITH:




$box_content->assign("IMG_SRC","images/uploads/".$randProd[0]['image']);




It is also a good idea to change the second line beneath it, just in case a product turns up with no image . . .

FIND at around line 68:




$box_content->assign("IMG_SRC","skins/".$config['skinDir']."/styleImages/thumb_nophoto.gif");




REPLACE WITH:




$box_content->assign("IMG_SRC","skins/".$config['skinDir']."/styleImages/nophoto.gif");

Now the random prod will display the photo from /uploads rather than the one from /thumbs and you can add statements in stylesheets to size it whatever you want in the broeser :)

Link to comment
Share on other sites

Thank you so much! I know we all inspire each other, so if you want to incorporate the idea in a skin that is fine. :unsure: I really would not have known where to change what you told me, so I probably would have just given up in the end. Thanks again!

Jen

Link to comment
Share on other sites

Ooops! I just noticed, you wrote "along with description and price."

I have done this also, but there are more changes required. In includes/boxes/randomProd.inc.php

FIND around line 49:

$randProd= $db->select("SELECT name, image, productId FROM ".$glob['dbprefix']."CubeCart_inventory ".$whereClause." ORDER BY RAND(".$seed.") LIMIT 1");




REPLACE with:




$randProd= $db->select("SELECT name, image, productId, price, sale_price, description FROM ".$glob['dbprefix']."CubeCart_inventory ".$whereClause." ORDER BY RAND(".$seed.") LIMIT 1");




(added after productId     , price, sale_price, description)



FIND around line 63:




$box_content->assign("PRODUCT_NAME",$randProd[0]['name']);




ADD AFTER:




$box_content->assign("TXT_DESCRIPTION",$randProd[0]['description']);




NOW, you can use {TXT_DESCRIPTION} in your randomProd.tpl to place the description.



You could put another line similar to that one for the price - but in that case, you could only show the price of your default currency. Changing currency in the skin would not change the currency in the featured product box.



Not Tested



To get the currency symbol in front of price without hard-coding it into the template, and to show sale price if applicable and be able to change currencies, more coding is required, similar to what is in viewProd.inc.php. I am not a php programmer, so I can only suggest this block of code, which is untested. We would need a convict or Sir William or Estelle to correct what I might miss or mess up:




	if(salePrice($randProd[0]['price'], $randProd[0]['sale_price'])==FALSE){



  $random_prod->assign("TXT_PRICE",priceFormat($randProd[0]['price']));



	} else {



  $random_prod->assign("TXT_PRICE","<span class='txtOldPrice'>".priceFormat($randProd[0]['price'])."</span>");



	}



	$salePrice = salePrice($randProd[0]['price'], $randProd[0]['sale_price']);



	$random_prod->assign("TXT_SALE_PRICE", priceFormat($salePrice));




Once you get the code actually sorted out, you would use something similar to this, taken from viewProd.tpl, to show prices correctly:




	<p>

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

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

	</p>

Link to comment
Share on other sites

Guest estelle

The only thing I'm not sure about is what priceFormat() would return if $salePrice was FALSE. Personally i would bump those last two lines into the else{} statement.

And salePrice() only needs to be called once, not that it really matters :unsure:

Link to comment
Share on other sites

Guest estelle

randomProd.tpl is going to have to have some CSS style defined within it, to dynamically set the background image to IMG_SRC. And you may need to set the height of the div, because if the div is not big enough part of the image will disappear. Probably easiest just to make the height big enough to fit any image, but I'm not sure how this would look for your site.

This is untested ;)

<style>

.className {

	height: 300px;

	background-image: url({IMG_SRC});

	background-repeat: no-repeat;

}

</style>

Link to comment
Share on other sites

The only thing I'm not sure about is what priceFormat() would return if $salePrice was FALSE.
return FALSE {blank character on screen}

Code optimization is required as you are writting like this

$salePrice = salePrice($randProd[0]['price'], $randProd[0]['sale_price']);



if($salePrice==FALSE){



 $random_prod->assign("TXT_PRICE",priceFormat($randProd[0]['price']));



} else {



 $random_prod->assign("TXT_PRICE","<span class='txtOldPrice'>".priceFormat($randProd[0]['price'])."</span>");



}



$random_prod->assign("TXT_SALE_PRICE", priceFormat($salePrice));

last line - blank is much better as unassigned ;)

Link to comment
Share on other sites

Guest sunshine

In your style I think you add image absolute, no-repeat and using CSS layer method of X and Y which results Z coordinate. The one with the higher Z index will be on top. Something like this. But it has to be positioned absolute for the layers

{ position: absolute;

                    fonta-family: arial, helvetica, san-serif;

                    top: 100px; left: 90px;

                    height: 50px; width: 100px;

                    

                    z-index: 2; 

                    }

                    

div.two           { position: absolute;

                    background-image: xxx/xxx/xxxxx;

                    top: 80px; left: 80px;

                    height: 400px; width: 600px;

                    

                    z-index: 1;

Link to comment
Share on other sites

I would differ on the background image need . . . You can display the image by calling it in randomProd.tpl and you can cause the divisions containing text to display over the image by assigning absolute, or even relative positions to those divisions.

Using this method, you can also control the size of the image by specifying a size in the stylesheet, so that the viewer's browser resizes the image.

This is what I'm presently doing with randomProd images, in the stylesheet I have added below .randomContent:

.randomContent image{

	height: 120px;

	border: 5px groove #B62931;

}

.randomContent img{

	height: 120px;

	border: 5px groove #B62931;

}




Image can be sized this way to suit the display space.



EDIT - - - Actually, I think I may have added the entire .randomContent class, since I no longer had the randomProd displayed in the .boxContent format:




.randomTitle {

	text-align:center;

	font-family: Lucida Calligraphy, Arial, Helvetica, sans-serif;

	font-size: 150%;

	color: #B62931;

	font-weight: bold;

	background-color: #C2D5FC;

	border-top: 1px solid #5E85CF;

	border-left: 1px solid #5E85CF;

	border-right: 1px solid #5E85CF;

	width: 453px;

	height:40px;

	padding-top: 5px;

}

.randomContent {

	width: 453px;

	height: 165px;

	background-color: #C2D5FC;

	padding: 0px;

	border-left: 1px solid #5E85CF;

	border-right: 1px solid #5E85CF;

	border-bottom: 1px solid #5E85CF;

	padding: 0px;

	margin-bottom: 10px;

}

.randomContent image{

	height: 120px;

	border: 5px groove #B62931;

}

.randomContent img{

	height: 120px;

	border: 5px groove #B62931;

}

Link to comment
Share on other sites

Guest sunshine

Personally, I would keep it absolute. How large do you really want the pic? When it's too large it's really hard to focus on a product as a whole. I wouldn't go large than 800 width. Plus, keeping it absolute ensures the text format is in the same place all the time. The imge background is hypothetically speaking.

Well, there a differant methods, personally have tried it, but I do think it's ood if you don't have too many products.

EDIT: Keep in my the load time to gather and show.

Link to comment
Share on other sites

Wow, never thought this would get so much attention! ;)

I'm going to have to go through all of this.

I was going through my folder of websites that are my favs when it comes to layout and design, seeing if I could take some of the elements and apply them to CubeCart, and I came up with the idea. Sounds way more in depth than what I had imagined.

The product images, I was assuming would be cut off if set as background, just so that you got a glimpse of the product and not whole the entire image. The person who eventually used the cart would have to keep the featured product box in mind when uploading product images . . .

I don't know, I guess I'll just have to tinker around with it, but thanks everyone for all your help and suggestions. :(

Jen

Link to comment
Share on other sites

@ sunshine, I wasn't responding to you, just posting in general . . .

What I meant was that the image need not be specified as a background. It could be called from randomProd.tpl as normal, only formatted in stylesheet to whatever size you wish . . . you could fill the element with it if you desire, as though it were a background . . . then, the text is made to appear over the image by assigning either absolute or relative positions to the divisions containing text. :(

Just a suggestion of one way to do it, maintaining control of image size B)

@ grassmeyer, what do you expect? You post very interesting questions and ideas ;)

Link to comment
Share on other sites

Guest ambassador

-------

Oct 27, 2005

I have never used CubeCart - but I am considering it.

Would it help to use

background-image: url(your_image.jpg);

in the CSS? This method would eliminate the need to use CSS layers which may cause current search engines to frown on the page due to the assumed covering/hiding of key words with the CSS layers. Further, it is quite easy to overlay any text whatsoever atop a CSS background image - doing so is no different than placing the text as though the CSS background image did not even exist.

As I said, I have not used CubeCart (yet) but I wanted to help here if possible. So, this suggestion comes with that caveat.

Ambassador

-------

Link to comment
Share on other sites

Guest sunshine

Hi Ambassador,

Good suggestion there and I agree to have the image considred 'bkrd'. Though with layering here, as far as I know is not a deterrant because what you are doing essentially is having a product item or such, display as the background while the text remains to the fore. On the OTHER hand, utilizing type over type can be a problem.

BTW: It doesn't hurt to download CC and check it out. You can run it a few subs down and it won't bother your existing. ;)

Link to comment
Share on other sites

Guest estelle

Yeah, please do post pics if anyone implements this.

The only thing that concerns me is that it would be hard to find a text colour which would be readable on top of every image. But of course you could use one of the free mods which define exactly which product(s) can be displayed in the Featured Product box, and then it wouldn't be so hard.

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...