Jump to content

Latest Products


Guest degsey69

Recommended Posts

Guest degsey69

Hi There

I want to add info and buy buttons to the products showing in Latest Products on the index page, I have modded them to be in boxes already but would think that this extra addition in the bottom of the box would be very proffesional.

Has anybody done this or is there a mod?

My site is http://www.mpc-direct.com

Thanks

Degsey :unsure:

Link to comment
Share on other sites

Guest Alkaye

Hello!

I cant help you much..but wanted to say how nice yoiur site is. I'm just gattting started with CC and its nice to see the changes peopel can make to it so it looks better...

can yoi tell me how harf dit was ort change the look? was it done by a web designer or yourself and what mods did you buy or use?

Al

Hi There

I want to add info and buy buttons to the products showing in Latest Products on the index page, I have modded them to be in boxes already but would think that this extra addition in the bottom of the box would be very proffesional.

Has anybody done this or is there a mod?

My site is http://www.mpc-direct.com

Thanks

Degsey :unsure:

Link to comment
Share on other sites

Guest degsey69

Thank you for the compliment!

The skin design was done for me by markscarts who can be found in cubecart.org, I have about 20 mods on the site (maybe more?) Some bought, some from the free contributions and one or two things that I came up with.

I did at one point get another programmer to look at the code when I was putting the mod in for the product on the front page, which did clean up the site somewhat.

I am always looking for new features and ideas to make the website better and compete with the big boys out there, hence my call for help on the post.

I did find out very recently that my website with cubecart was popular with my customers (long story, tried oscommerce as a trial lost two thirds of my traffic and sales) and I want it to be the best for them.

Regards

Degsey :unsure:

Link to comment
Share on other sites

Guest bradyjfrey

I've done this for all of my cc sites, http://www.kamalaspa.com/store/, http://pinkpinstripes.com and a few others. I believe all you need to do is add the javascript values for the form, and link to the ID - here's my kamalaspa code (it's been completely redone, so ignore the HTML if you have too - you'll also notice I removed the equal sign in the ID - this was for validation, you don't have to do that):

<!-- BEGIN: index -->

<!-- BEGIN: latest_prods -->



		<h3>{LANG_LATEST_PRODUCTS}</h3>

		<div id="prodpage">

		<ul id="products">

		<!-- BEGIN: repeat_prods -->

			<li><a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}"><img src="{VAL_IMG_SRC}" alt="{VAL_PRODUCT_NAME}" title="{VAL_PRODUCT_NAME}" /></a>

				<h3><a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}">{VAL_PRODUCT_NAME}</a></h3>

				<p>{TXT_DESCRIPTION}</p>

				<form action="{CURRENT_URL}" method="post" id="productId{VAL_PRODUCT_ID}" name="productId{VAL_PRODUCT_ID}">

				<p><strong>{TXT_PRICE}</strong> <em>{TXT_SALE_PRICE}</em>

				<input type="hidden" name="add" value="{VAL_PRODUCT_ID}" /><input type="hidden" name="quan" value="1" />

				<a href="java script:submitDoc('productId{VAL_PRODUCT_ID}');"><img src="http://yourdomain.com/pic.gif" alt="Add to Cart" width="126" height="24" /></a>

				<a href="index.php?act=taf&amp;productId={VAL_PRODUCT_ID}"><img src="http://yourdomain.com/pic.gif" alt="Tell A Friend" width="114" height="24" /></a></p>

				</form>

			</li>

		<!-- END: repeat_prods -->

		</ul>

		</div>

<!-- END: latest_prods -->

<!-- END: index -->




I also add the 'tell a friend' you don't have to do that either if you don't want too of course.



If you also want descriptions on your latest products, here's the hack for that as well.

The trick is that you'll have to edit the index.php include:

/includes/content/index.inc.php



Line 49 change too:


$latestProducts = $db->select("SELECT productId, description, image, price, name, sale_price FROM ".$glob['dbprefix']."CubeCart_inventory WHERE `showFeatured` = 1 ORDER BY productId DESC LIMIT ".$config['noLatestProds']);




Then after line 91 add: 


$index->assign("TXT_DESCRIPTION",$latestProducts[$i]['description']);

Edit note: I don't know why that code tag screws up the word 'java script' in my post, but that should be one full word in my code. Also, it takes you to the product when you click add, as well as add's it automatically - this is to make sure you don't have to select options for the product. If you do have to select options, it'll simply take you to the individual product and wait for you to select and add again accordingly. Let me know if you have any questions:)

Link to comment
Share on other sites

Guest degsey69

Thanks for that contribution bradyjfrey.

I will now very nervously and slowly work on the project.(Think I will do in on my test site first)

I will let you know the outcome.

Regards

Degsey :unsure:

Link to comment
Share on other sites

Guest bradyjfrey

Thanks for that contribution bradyjfrey.

I will now very nervously and slowly work on the project.(Think I will do in on my test site first)

I will let you know the outcome.

Regards

Degsey :unsure:

Anytime:) Adding the form + javascript elements to the index.tpl file shouldn't be a huge concern - but editing that includes/content/index.php can always be a little scary. Remember that you only need to edit that index.php file if you want descriptions on the home page as well - if you don't need descriptions, all you need to do is edit the index.tpl file to get your 'add to basket' or 'tell a friend'.

Link to comment
Share on other sites

Guest degsey69

Ok

I altered my index.tpl file as follows

<!-- BEGIN: index -->

<div class="boxContent">

<span class="txtContentTitle">{HOME_TITLE}</span>

<br />

{HOME_CONTENT}

</div>

<!-- BEGIN: latest_prods -->

	<div class="boxContent">

	<span class="txtContentTitle">{LANG_LATEST_PRODUCTS}</span>

		<br />

		

		<div>

		<!-- BEGIN: repeat_prods -->

			<div class="featured"><a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}" class="txtCopy">{VAL_PRODUCT_NAME}</span></a>

				<br />

				<br />

				<a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}"><img src="{VAL_IMG_SRC}" alt="{VAL_PRODUCT_NAME}" border="0" /></a>

				<br /> 

				<br />

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

						<a href="java script:submitDoc('productId={VAL_PRODUCT_ID}');"><img src="http://www.mpc-direct.com/temp/buy.gif" alt="Add to Cart" width="90" height="12" /></a>

				  </div>

			

		<!-- END: repeat_prods -->

		<br clear="all" />

		</div>

		<br clear="all" />

		

		

	</div>

<!-- END: latest_prods -->

<!-- END: index -->

I get the button with the image but I probaly need to use some html to center it and space it down below the prices in my boxes, but the javascript is not adding the product to the cart, it is going to my domain instead and getting a 404 error.

Any ideas

Degsey :unsure:

Link to comment
Share on other sites

Guest bradyjfrey

One of the important elements to this is that you're still using a form to call an element - as my original code had in this portion:

<form action="{CURRENT_URL}" method="post" id="productId{VAL_PRODUCT_ID}" name="productId{VAL_PRODUCT_ID}">

				<p><strong>{TXT_PRICE}</strong> <em>{TXT_SALE_PRICE}</em>

				<input type="hidden" name="add" value="{VAL_PRODUCT_ID}" /><input type="hidden" name="quan" value="1" />

				<a href="java script:submitDoc('productId{VAL_PRODUCT_ID}');"><img src="http://yourdomain.com/pic.gif" alt="Add to Cart" width="126" height="24" /></a>

				<a href="index.php?act=taf&amp;productId={VAL_PRODUCT_ID}"><img src="http://yourdomain.com/pic.gif" alt="Tell A Friend" width="114" height="24" /></a></p>

				</form>






That javascript is not going to work unless you put it within the form, calling the form ID/Name. So, it should look like this:


<!-- BEGIN: index -->

<div class="boxContent">

<span class="txtContentTitle">{HOME_TITLE}</span>

<br />

{HOME_CONTENT}

</div>

<!-- BEGIN: latest_prods -->

	<div class="boxContent">

	<span class="txtContentTitle">{LANG_LATEST_PRODUCTS}</span>

		<br />

		

		<div>

		<!-- BEGIN: repeat_prods -->

			<div class="featured"><a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}" class="txtCopy">{VAL_PRODUCT_NAME}</span></a>

				<br />

				<br />

				<a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}"><img src="{VAL_IMG_SRC}" alt="{VAL_PRODUCT_NAME}" border="0" /></a>

				<br /> 

				<br />

				<form action="{CURRENT_URL}" method="post" id="productId={VAL_PRODUCT_ID}" name="productId={VAL_PRODUCT_ID}">

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

				<input type="hidden" name="add" value="{VAL_PRODUCT_ID}" /><input type="hidden" name="quan" value="1" />

				<a href="java script:submitDoc('productId={VAL_PRODUCT_ID}');"><img src="http://www.mpc-direct.com/temp/buy.gif" alt="Add to Cart" width="90" height="12" /></a>

				</form>

			</div>

			

		<!-- END: repeat_prods -->

		<br clear="all" />

		</div>

		<br clear="all" />

		

		

	</div>

<!-- END: latest_prods -->

<!-- END: index -->

See how I've added:

- form and all it's attributes

- two hidden input tags

- then the javascript

I haven't demoed this with your own code, so I might have a typo, just a warning - but you can't process without the form, as the individual 'viewprod.tpl' pages should show.

As a side note, if you use CSS you wouldn't need all those breaks or clearing breaks - or some of those worthless spans/divs that are called. I recommend http://htmldog.com/ for html/xhtml and css tutorials, it also has some quality input on semantics, and how you can make your code leaner and cleaner.

Edit: side note, for some reason this forum splits the word 'javascript' when you post it - make sure you don't copy and paste it as 'java script'... I haven't figured out why it does that:)

Link to comment
Share on other sites

Guest degsey69

Yup

Got it working BIG THANKS

I had to add a couple of <br /> to seperate the button from the price.

I also had to edit the style css with

img

{  border-style: none;

}

because I was getting a blue border around the image.

The one perffect end to this solution would be to position the button relative to he bottom of the box rather than the image and price.

Then it would all look uniform.

Aby ideas? :rolleyes:

Regards

Degsey :D

Link to comment
Share on other sites

Guest bradyjfrey

You don't need break tags at all, if you learn CSS you could do this:

http://codingforums.com/ is a good site to learn html/xhtml/css and beyond, http://simplebits.com/publications/ has some great books to get you making high end websites, as does the famous http://zeldman.com/dwws/ and the htmldog.com site I referenced. But I'm serious, it'll be lots of hacking till the xhtml/html gets semantic and valid.

.feature a {padding: 0 0 20px 0;}




Since break tags here have no actual relevance to content, you're just using them to push things around... which is what CSS is for. That also allows you to change things on the fly without having to touch your html.



If the container div had a positioning element, you could position the button to be uniform without problem. 



I can give you hacks for this, but your code (or the code you're using from those nasty default templates) is a bit of a mess - compare yours to me rewriting yours:


<!-- BEGIN: index -->



<h1>{HOME_TITLE}</h1>



{HOME_CONTENT}



<!-- BEGIN: latest_prods -->

    <h2>{LANG_LATEST_PRODUCTS}</h2>

        

        <!-- BEGIN: repeat_prods -->

            <div class="featured">

				<h3><a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}">{VAL_PRODUCT_NAME}</a></h3>

				<p><a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}"><img src="{VAL_IMG_SRC}" alt="{VAL_PRODUCT_NAME}" border="0" /></a>

				<p>{TXT_PRICE} <em>{TXT_SALE_PRICE}</em></p>

				<p><a href="java script:submitDoc('productId={VAL_PRODUCT_ID}');"><img src="http://www.mpc-direct.com/temp/buy.gif" alt="Add to Cart" width="90" height="12" /></a></p>

            </div>

        <!-- END: repeat_prods -->

        

<!-- END: latest_prods -->

<!-- END: index -->




Mine would look decent without styles, to a handicap user would make sense if they were blind or could not navigate without a mouse, would look proper on a mobile device even if that device didn't accept style sheets, and the code is smaller than yours. Since there's less id's or worthless classes, you could just style things like:


.featured h3 {font-size: 1.5em;color: black;}




So even your CSS file would be leaner. 
I also had to edit the style css with

because I was getting a blue border around the image.

img

{  border-style: none;

}

That's common - you know it happens in firefox and IE but not Konqueror or Safari - it's to bring focus to images that are links, similar to and underline for a link, you surround the image with a blue line. I always thought that was odd, no one I know ever leaves it on there :rolleyes: !

Link to comment
Share on other sites

Guest degsey69

I really appreciate your help here.

I will go away and try some new changes that you suggest, I am over the moon with what I have but there is always room for improvement.

Thanks again and I will post later.

PS the new buttons have not put anybody off yet as orders are still coming in LOL

Degsey :rolleyes:

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 months later...
  • 7 months later...

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