Jump to content

Adding new boxes


Guest LNT

Recommended Posts

Guest dezmundo

Hello folks.

I'm quite new at cubecart but have been getting some customization done and have a quick question.

I'm attempting to add a content box to my skin.

I'm assuming I must edit the /skins/MY-SKIN-NAME/styleTemplates/global/index.tpl file to add the box.

I see the other existing boxes in the code like this: {CATEGORIES}, {LANGUAGE}, etc.

My questions are: where do those tags point to?

and

must I create another .tpl file for my new box? if so, where do I put the file(s)?

Sorry for sounding so nub but I'm trying! Thanks for any help in advance!

~dez

Link to comment
Share on other sites

  • 2 weeks later...

Hello folks.

I'm quite new at cubecart but have been getting some customization done and have a quick question.

I'm attempting to add a content box to my skin.

I'm assuming I must edit the /skins/MY-SKIN-NAME/styleTemplates/global/index.tpl file to add the box.

I see the other existing boxes in the code like this: {CATEGORIES}, {LANGUAGE}, etc.

My questions are: where do those tags point to?

and

must I create another .tpl file for my new box? if so, where do I put the file(s)?

Sorry for sounding so nub but I'm trying! Thanks for any help in advance!

~dez

The tags .......................I see the other existing boxes in the code like this: {CATEGORIES}, {LANGUAGE}, etc.

My questions are: where do those tags point to? .................These point to the index file in the root directory ../index.php

I hope this helps.

Link to comment
Share on other sites

I've asked those same questions before.

Those tags are macros. A macro is a "variable" (sort of). It is a set of commands that can be initiated upon calling the macro during execution.

The macros are defined in Cube Cart's Includes folder. Let me demonstrate how you can create your own box (the HARD way first using PHP and macros).

We will be using the Killer Skin for this demonstration. First, navigate to your skins folder and then styleTemplates/boxes/. In the boxes folder, create a new file called newbox.tpl. This is our content file for our box.

Next, navigate to Includes/boxes/ and create a new file, newbox.inc.php. Leave it empty. This is our PHP file that assigns the macros using the template we made for it (newbox.tpl).

Now, open the newbox.inc.php we created earlier for editing. Insert the following lines (this is our simple protection against hackers):

if (eregi(".inc.php",$HTTP_SERVER_VARS['PHP_SELF']) || eregi(".inc.php",$_SERVER['PHP_SELF'])) {

	echo "<html>\r\n<head>\r\n<title>Forbidden 403</title>\r\n</head>\r\n<body><h3>Forbidden 403</h3>\r\nThe document you are requesting is forbidden.\r\n</body>\r\n</html>";

	exit;

}






Next, insert the next set of lines (this is a little PHP code that tells the browser to look in index.tpl for the layout of the box):


$box_content = new XTemplate ("skins/".$config['skinDir']."/styleTemplates/boxes/newbox.tpl");






Next, insert this line (this is our actual unparsed macro):


$box_content->assign("THE_MACRO","This is our macro's content. Cool eh?");






Finally, this is what we have at the end of the file newbox.inc.php:


$box_content->parse("themacro");

$box_content = $box_content->text("themacro");






newbox.inc.php should look like this if you followed the steps above:


<?php

if (eregi(".inc.php",$HTTP_SERVER_VARS['PHP_SELF']) || eregi(".inc.php",$_SERVER['PHP_SELF'])) {

	echo "<html>\r\n<head>\r\n<title>Forbidden 403</title>\r\n</head>\r\n<body><h3>Forbidden 403</h3>\r\nThe document you are requesting is forbidden.\r\n</body>\r\n</html>";

	exit;

}



// Locate our skin for the macro

$box_content = new XTemplate ("skins/Killer/styleTemplates/boxes/newbox.tpl");



// simple text

$box_content->assign("THE_MACRO","This is our macro's content. Cool eh?");



$box_content->parse("themacro");

$box_content = $box_content->text("themacro");

?>






Now, it's time for our skin. Navigate to the skins/Killer/styleTemplates/boxes/ folder and open newbox.tpl or create it if you have not already. Open it for editing and add this line to it (this tells the browser that the parsed text themacro begins and ends, and between this is our macro that we made):


<!-- BEGIN: themacro -->

{THE_MACRO}

<!-- END: themacro -->




Next, go to Killer/styleTemplates/global/ and open index.tpl for editing. Add the following line under {SHOPPING_CART} (this is our main macro that holds the template and the content):


{themacro}




Now, to actually give the macro its description, you must edit index.php in your root folder. Find the comment "// End content boxes". This should be line 207. Press enter two times to create a gap. Then add the following code. It should look like this:


	include("includes/boxes/siteDocs.inc.php");

	$body->assign("SITE_DOCS",$box_content);



		// THIS IS OUR MACRO! =D

	include("includes/boxes/newbox.inc.php");

	$body->assign("themacro",$box_content);	



		// END CONTENT BOXES




Save index.php. Go to your site and you will see the words This is our macro's content. Cool eh?



To hide the macro, just go to Killer/styleTemplates/global/index.tpl and remove this little piece of code:


{themacro}




Ta daa!



Anyways, if you want a box, simply put, all you have to do is put this code anywhere you want the box. Put this in styleTemplates/global/index.tpl. This is the EASY WAY.


<div class="boxTitleLeft">This is the box's title.</div>

<div class="boxContentLeft">

This is the box's content.

<border="0" >

</div>

<div class="boxFootLeft">&nbsp;</div>

Easy. I hope I cleared things up, because I have a feeling I confused somebody... <_<

AJ Rao

Link to comment
Share on other sites

Hej every1 i did try that 2 add a box but the problem is the new box become bigger then what i want it so i wondring how can i controll how big i want it 2 be thx <_<

Link to comment
Share on other sites

Hi Kifah,

As per my previous post, there are 2 ways to make a new box: Using PHP and includes or HTML/CSS. To make my previous post short and sweet, I recommend you use the HTML/CSS way than the PHP/includes way because of its simplicity.

The "hard way" was the PHP/includes code and the "easy way" was the HTML/CSS code. Which one did you use?

AJ Rao

Link to comment
Share on other sites

  • 2 months later...

Okay I get how to add the box and I have added one successfully but how do I add one to the right side of the page? all the ones I make come up on the left side and I have tried changing the wording in the code to reflect the right side?

Thanks in advance

Link to comment
Share on other sites

  • 4 weeks later...
Guest faireymel

Come on someone help me out here LOL I know it must be something stupid I am not doing.

change left in the code to right!

Link to comment
Share on other sites

  • 1 month later...
Guest Maddog452

I want to use an IFrame from another program to add upcoming events from another program. I am assuming that I would add the code in as shown??

<div class="boxTitleLeft">Upcoming Markets</div>

<div class="boxContentLeft">

***<iframe scrolling="yes" src="upcoming.php"></iframe>***

<border="0" >

</div>

<div class="boxFootLeft">&nbsp;</div>

Also, do I use the full URL to the file or some sort of relative link (Not that I really know how to)

Do I need to assign things like Height and Width and stuff??

Any help is greatly appreciated.

Cheers

Dog

Link to comment
Share on other sites

  • 6 months later...
  • 4 weeks later...

Easy as apple pie. Just add the following code to your index.tpl where you want the box to appear. BTW, the site search function would have given you the answer as well.

<div class="boxTitleRight">Your Title</div>

<div class="boxContentLeft">

code you wish to add

<border="0" >

</div>

<div class="boxFootRight">&nbsp;</div>

Ok you say this is as easy as apple pie lol.

Well what I'm trying to do is add a picture instead of a side box or a picture in a side box.

Your code at the top may very well be correct but what I would like to know is where exactly do i put the jpg picture in my ftp of the site.

Ive tried a few codes like this:

<div class="boxTitleRight"></div>

<div class="boxContentLeft">

code you wish to add

<img src="/images/uploads/true_utility_pic.jpg" alt="http://www.cdmultiservices.co.uk/Shop_Display_Pictures.html, " />

<border="0" >

</div>

<div class="boxFootRight">&nbsp;</div>

The first part of the code <div class="boxTitleRight"></div> I have left without a title because I only want the picture and not a picture with a title above it.

The code for the image is based on the fact that I uploaded the jpg image on a webpage and tired to link it to that so it could be displayed. I'm not really sure if this is a way to add the URL link to be honest and think its very much wrong.

I tried this out and it totally failed to do anything to my cart.

As for just dropping this code into the index.tpl well is there a specific place in there where it should go surely there must be, you cannot just simply stick it anywhere.

I'm using Cubecart 4.3 the latest version.

So if anyone as any ideas of how I can add a picture to a side box or in place of a side box I would be grateful if you could let me know how its done please.

Link to comment
Share on other sites

The syntax for an image to be a link to someplace else is:

<a href="url"><img src="image's location" alt="descriptive wording of image or destination" /></a>

But, are you sure you are using CubeCart 4? Because this conversation you have joined is for CubeCart v3 and the solutions discussed here may not be relevant to your efforts with CC4.

Link to comment
Share on other sites

The syntax for an image to be a link to someplace else is:

<a href="url"><img src="image's location" alt="descriptive wording of image or destination" /></a>

But, are you sure you are using CubeCart 4? Because this conversation you have joined is for CubeCart v3 and the solutions discussed here may not be relevant to your efforts with CC4.

Thanks for the script, and yes your right I'm in the wrong part of the forum oops, thought I was in Cubecart 4 when I originally posted it. I've now posted it in here: http://forums.cubecart.com/index.php?showtopic=37860 if this link works lol.

I tried adding this script and it's still not working all I'm getting is x and the box where the picture should be, so I know I'm not that far away from doing it, its just a case of getting the location right of where my pic as been uploaded onto another webapge.

Link to comment
Share on other sites

  • 1 year later...
Guest krystof78

Hi,

I am trying to customize entirelly Cubecart so that I can pull the information from the database where I want them to appear. The thing is I am very new with cubecart and I don't really get how the information are pulled from the database.

Like for example, I am trying to modify the category template box of the classic skin so that this code:

<!-- BEGIN: categories -->

<div class="boxTitleLeft">{LANG_CATEGORY_TITLE}</div>

<div class="boxContentLeft" style="padding: 0px;">

	<ul id="mainmenu-nav">

		

		<li class="li-nav"> <a href="index.php" class="txtDefault">{LANG_HOME}</a></li>



			<!-- BEGIN: a -->

			<!-- BEGIN: ul_start -->

			<ul class="ul-nav">

				<!-- END: ul_start -->

				<!-- BEGIN: li_start -->

				<li class="li-nav">

				<!-- END: li_start -->

					<a href="index.php?_a=viewCat&amp;catId={DATA.cat_id}">{DATA.cat_name} ({DATA.noProducts})</a>

				<!-- BEGIN: li_end -->

				</li>

				<!-- END: li_end -->

				<!-- BEGIN: ul_end -->

			</ul>

		</li>

		<!-- END: ul_end -->

		<!-- END: a -->

		

		<!-- BEGIN: gift_certificates -->

		<li class="li-nav"> <a href="index.php?_a=giftCert" class="txtDefault">{LANG_GIFT_CERTS}</a></li>

		<!-- END: gift_certificates -->

		

		<!-- BEGIN: sale -->

		<li class="li-nav"> <a href="index.php?_a=viewCat&amp;catId=saleItems" class="txtDefault">{LANG_SALE_ITEMS}</a></li>

		<!-- END: sale -->

	</ul>

	<br clear="all" />

</div>

<!-- END: categories -->




would become this code:




<!-- BEGIN: categories -->

<div class="" style="padding: 0px;">

	<ul id="">

		



		<!-- BEGIN: a -->

		<!-- BEGIN: ul_start -->

		<ul class="">

		<!-- END: ul_start -->

			<!-- BEGIN: li_start -->

			<li class="">

			<!-- END: li_start -->

			<div>

				<h1>{DATA.cat_name}</h1>

				<div>

					<img src="{DATA.cat_name}" />

					<div id="column1_text">

						<p>{DATA.cat_desc}</p>

						<br/>

						<p class="next">[<a href="index.php?_a=viewCat&amp;catId={DATA.cat_id}">More</a>]</p2>

					</div>

				</div>

			</div>

			<!-- BEGIN: li_end -->

			</li>

			<!-- END: li_end -->

		<!-- BEGIN: ul_end -->

		</ul>

		<!-- END: ul_end -->

		<!-- END: a -->

	</ul>

	<br clear="all" />

</div>

<!-- END: categories -->

But apparently, the description does not show up, though I am using the right title for this variable.

Can anyone tell me what I did wrong?

Thanks in advance.

Cheers

Link to comment
Share on other sites

I'm going to say that this code is not part of a standard CubeCart V3 Classic skin.

The BEGIN and END embeds are not CC3 indicators.

For example, CC3 indicators are:

<!-- BEGIN: li -->

<li>abc</li>

<!-- END: li -->

As a first means of troubleshooting, find the php script that assigns the database result record to these placeholders and put:

die(print_r($results)); // or whatever variable holds the results of the query. Then make sure that the results you expect to see are in the dump.

It could be that the column cat_desc is empty for this category/record.

Link to comment
Share on other sites

Guest skinxper

Hi all,

I have added a side box but i noticed that the top of Shopping basket have another end box above...

Untitled-Captured-01.jpg

Any ideas on how to remove??

Link to comment
Share on other sites

  • 1 year later...

Roban, THANKS A MILLION!!!! I have been looking for this for so longggg!!!!!

I even emailed one programmer about the coding and they want to charge me for it.. and they didnt even tell me how to add the content box.. You definitely saved my work!!

Thanks a million.. again.. ;)

Easy as apple pie. Just add the following code to your index.tpl where you want the box to appear. BTW, the site search function would have given you the answer as well.

<div class="boxTitleRight">Your Title</div>

<div class="boxContentLeft">

code you wish to add

<border="0" >

</div>

<div class="boxFootRight">&nbsp;</div>

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