Jump to content

Editing layout in category view


Guest

Recommended Posts

I'm editing the layout of the category view.

All I want is a list of products with a buy-button on the right.

I use the Kurouto blue skin.

I managed to remove the link for the detail and the price.(in layout.css and content.category.php)

But I cannot get rid of the whitespace, see image:

cubecart-edit-category.jpg

and also cannot get the buybutton behind the product name...

Can I do this in <div class="details"> and where can I find this class?

Thanks in advance!

Link to comment
Share on other sites

Thanks Dirty Butter for pointing me in the right direction.

There is one problem still; I can not get the buy button behind the right product, see image:

cubecart-2.jpg

Beside the padding it has to move up one line...

FYI: I did a lot of customizing version 3.0.4 (!) and I had to update because op a PHP-update. Now in CC is everything different so I have a hard time figuring out what is where etc.

Thanks for your help!

Link to comment
Share on other sites

whatever I change on review or category in common.css it does not work. Could there be somewhere a <BR> so that the buybutton is put on the next line?

Please any help appreciated, this is keeping me awake!

Link to comment
Share on other sites

Dear Dirty Butter (never thought I would say that once in my live...;-)

I can not find any section with review in content.category.php. There are some in common.css but whatever I remove there is no change.

The only code for this section in common.css left is:

{if isset($PRODUCTS)}

{foreach from=$PRODUCTS item=product}

<form action="{$VAL_SELF}" method="post" enctype="application/x-www-form-urlencoded" class="addForm">

<class="category_product">

<h3>{$product.name}</h3>

<class="details">

{if $product.ctrl_purchase && !$CATALOGUE_MODE}

<p class="buy_button"><input type="text" name="add[{$product.product_id}][quantity]" value="1" class="quantity" /> <input type="submit" value="{$LANG.catalogue.add_to_basket}" class="button_white" /></p>

{elseif $product.out}

<p class="buy_button">{$LANG.catalogue.out_of_stock_short}</p>

{/if}

</form>

{/foreach}

{else}

<p>{$LANG.category.no_products}</p>

{/if}

I think it has something to do with the <class="details"> but then I can not find this class...

Could it be a <DIV> or a <P> thing?

Thanks for your help, really appreciated!

Link to comment
Share on other sites

Call me DB if you prefer. LOL! Honest - we don't mean anything dirty by it. We sell vintage collectibles under the name Dirty Butter Estates Collectible Shoppe.

It's not in a css file - if I'm right - and I sure don't know if I am - I'm looking at the yourskin/template/content.category.php


{if $product.review_score}

   <p class="rating">

   {for $i = 1; $i <= 5; $i++}

    {if $product.review_score >= $i}

  <img src="{$STORE_URL}/skins/{$SKIN_FOLDER}/images/common/star.png" alt="" />

  {elseif $product.review_score > ($i - 1) && $product.review_score < $i}

  <img src="{$STORE_URL}/skins/{$SKIN_FOLDER}/images/common/star_half.png" alt="" />

  {else}

  <img src="{$STORE_URL}/skins/{$SKIN_FOLDER}/images/common/star_off.png" alt="" />

  {/if}

	  {/for}

   </p>

   <p class="rating-info">{$LANG_REVIEW_INFO}</p>

{/if}

I was guessing that maybe CC leaves a space for a review, even if there's not one - and since you need all spaces deleted - this might be it. It's the blind leading the blind I fear. Usually by now someone who knows what they're doing joins in and provides a solution.

Link to comment
Share on other sites

Foton,

I think DB is looking along the right lines. A couple of other things to consider:

  • <h3></h3> will put in padding/margins and a line break after the closing tag by default . These can all be controlles by CSS.
  • The page is normally designed to have other details and then the buy button (as DB has noted)

How to get around this (suggestions to try!):

  • changing <h3> tags for something you are more used to styling (<p> tags?)
  • moving the buy button block higher so as to be generated before other content that may be casuing the unwanted space
    For me it would be the following bit of code in content,product.php


<p class="buy_button">

	  <input type="text" name="quantity" value="1" class="quantity required" />

	  <input type="hidden" name="add" value="{$PRODUCT.product_id}" />

	  <input type="submit" value="&nbsp;" class="button_basket" />

    </p>

just make sure that it appears after the opening form tag.

BUT FIRST:

See if you can find the code that is causing this effect and sort it out using styles. If you are using Firefox as you browser of choice make sure you have fire bug installed. If you are using IE9 all you have to do is hit F12.

Both of these are extremely useful tools and will allow you to see which parts of the page are controlled by which bit of CSS, with handy highlights. You may find that it is just something cascading in the style sheet that you were unaware of, or that all you need to do is add an element with a float:right; etc etc

Hope this gives you some pointers

Link to comment
Share on other sites

Dear Hornblower,

Thanks for joining!

I'm am realy sure that it is not in content.product.php because it is a list of prducts in a category.

Putting the buy_button up one line inspired me to pushing arouns some code.

This is the complete code of content.category.php (on this moment):

<h2>{$category.cat_name}</h2>

{if isset($PRODUCTS)}

{foreach from=$PRODUCTS item=product}

{$product.name}<p class="buy_button"><align=left><input class="quantity" name="add[{$product.product_id}][quantity]" value="1" type="text"> <input class="button_white" value="{$LANG.catalogue.add_to_basket}" type="submit"></align=left></p>

{/foreach}

{else}

<p>{$LANG.category.no_products}</p>

{/if}

and its generates this page:

cubecart-03.jpg

When I put the code {$product.name} after the class like this:

<h3>{$category.cat_name}</h3>

{if isset($PRODUCTS)}

{foreach from=$PRODUCTS item=product}

<p class="buy_button"><align=left>{$product.name}<input class="quantity" name="add[{$product.product_id}][quantity]" value="1" type="text"> <input class="button_white" value="{$LANG.catalogue.add_to_basket}" type="submit"></align=left></p>

{/foreach}

{else}

<p>{$LANG.category.no_products}</p>

{/if}

its generates almost the result I would die for, like this:

cubecart-04.jpg

The ''only'' thing that has to happen is to get the productnames on the left again.

I think it is almost there...

Regards, Foton

Link to comment
Share on other sites

Guest Viola

There's no "align" tag in HTML5. Also, your <input> tags aren't closed; it should be

<input class="quantity" name="add[{$product.product_id}][quantity]" value="1" " type="text" />

The products on category pages are each in a form element in the default templates - I suspect without that form the Buy buttons won't work.

Try something like this:

HTML


{foreach from=$PRODUCTS item=product}

<form action="{$VAL_SELF}" method="post" enctype="application/x-www-form-urlencoded" class="addForm">

    {$product.name}

    <input class="quantity" name="add[{$product.product_id}][quantity]" value="1" type="text" />

    <input class="button_white" value="{$LANG.catalogue.add_to_basket}" type="submit" />

</form>

{/foreach}





CSS



.addForm{

display: block;

text-align:right;

}

Link to comment
Share on other sites

Hi Viola,

Thanks for pointing to the missing tag for closing.

I messed up the content.category.php for searching why this could not line up after each other.

I use your code quickly to see what would happen, and this happened:

cubecart-05.jpg

I self was searching in the classes and put a extra class in the common.css lijke this:

p.cattext {

float: left;

}

and put it in the content.category.php like this:

{foreach from=$PRODUCTS item=product}

<p class="cattext">{$product.name}<p class="buy_button"><input type="text" name="add[{$product.product_id}][quantity]" value="1" class="quantity" /> <input type="submit" value="{$LANG.catalogue.add_to_basket}" class="button_white" /></p>

{/foreach}

and suddently it appears like this:

cubecart-06.jpg

and that the way it should look!

Now I have to clean up the mess and make sure the button works again.

Thanks for the contrubutions!

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