X-Cart forums

[MoonDog]

X-Cart v4.1.8

When you click on 'Books' in the 'Categories' menu, and then click on the 'Software' link, four products will show up in the center.

Now when you scroll down, you will see that the 'Buy now' button lines up for the first, second and fourth product. But for the third product the 'Buy now' button is not aligned and offsets to the right.

It seems that if you use bullets in the product description, it causes this mis-alignment. If you click on 'Software' in the 'Categories' menu, the first product item also has a mis-aligned 'Buy now' button with the one below. And the first item also seem to use bullets in the description.

Is there any way to fix this without elimating bullets in the description?

- MoonDog -

[balinor]

Moving to Template Editing. Please be sure to read the guidelines for posting in the bugs forum. Also, a link to your store would help so we can see the issue

[MoonDog]

Hi balinor,

I just bought this X-cart software a couple of weeks ago, so I'm just testing this program for bugs on my own server before I go online.

Unfortunately, I'm unable to give you a link of the problem from my site, but here is a link of a store online that has the same problem.

http://www.xcartdesigner.com/home.php?cat=24

Look at the 'Buy now' button. It doesn't line up with the 'Buy now' button of the product above nor the 'Buy now' button of the next product.

If I find many bugs with this software, I like to be still able to return it for a full refund.

Thanks,

- MoonDog -

[balinor]

That is not a bug with the software, the is a poorly coded product description, as the <ul> tag isn't closed. Since product descriptions are entered by the user, if you properly code the description you will not have any issues.

[MoonDog]

Hi balinor,

Thanks for the reply. The product decription does seem to be coded properly, because there is a closing unordered list tag </ul> at the end of the code.

Here is the code of the product description:

<b>Features:</b><ul type="disc"><li>NOTE: In-Box Upgrade Rebate valid only for previous licensed users of Microsoft Windows 95 or later (see product description for complete list)<li>Allows users to easily create Web sites exactly the way they want<li>Makes site management easyMakes site management easy<li>Updates sites quickly<li>Works together with Microsoft Office</ul>

By the way, when I bought X-cart this is the test data that came with the software. I had not added, deleted or altered any of the code for this 'Buy now' button issue to show up. All I'm doing now is trying to get familiar with this software so that I can eventually put my own data into it.

- MoonDog -

[balinor]

Ok, there are no closing </li> tags then In any event, the issue is definitely related to the description, as it would not do that if the description were formatted correctly was my point.

[MoonDog]

Well, I've put closing </li> tags to the list items and it's still not working.

Evidently, this problem lies when you place bullets in the product description.

When I click on 'Software' in the 'Categories' menu, there is another product that has bullets in the description.

http://www.xcartdesigner.com/home.php?cat=26

As you can see, the 'Buy Now' button doesn't line up here either.

I have got the 'Buy Now' button to line up. But only when I have two bullets in my description. Once I start using a third or more bullets, the buttons won't line up anymore.

- MoonDog -

[balinor]

Interesting. Check the stylesheet and see if there is anything that may adversely affect li or ul tags.

[MoonDog]

I'm fairly new at this balinor, but I looked at the skin1.css file and can't seem to find anything that might affect the <ol>, <ul> or <li> tags.

From what I can gather, it seems that I'm not the only one who has this problem. I've found several other x-cart sites on the web that has this button alignment problem. Here's another one:

http://www.7danademo.com/xcart/home.php?cat=24

What do I do now?

- MoonDog -

[MoonDog]

After a lot of searching, reading, printing, more reading, editing, etc. I finally figured out how to fix this 'bug'. Since I'm new at this I'm pretty sure I've done it correctly, since I don't have this problem anymore. But for any experts out there, please let me know if I did something incorrectly, cause I do believe in constructive criticism.

Anyway, the products page has a condensed description of the product that is limited to 300 characters and then it places the three dots ... at the end of the description. This only happens if the description is longer than three hundred characters. Now, when there are bullets in the description, and the description is longer than 300 characters, it never sees the closing </ul> at the end of the full description. So after the 300th character it still behaves as if though it still needs to be offset as if though it still has bullets.

So this is what I did:

Open the skin1/customer/main/products.tpl file

and find:

 
{$products[product].descr|truncate:300:"...":true}
<br />

and change <br /> to </ul>

So the code looks like this:

 
{$products[product].descr|truncate:300:"...":true}
</ul>

Save file, run and you can now see that the 'Buy Now' button lines up with all the other products 'Buy Now' buttons.

I still think this is a 'bug' with the software, because I had to actually had to change the code to make it work properly.

O.K., since this is the Storefront Design & Template Editing forum I've also made some minor changes to the look of the products page to make it more pleasing to the eye.

What I did was to remove the horizontal line underneath the partial description and placed the horizontal line between the different products.
I then added color to the line and changed the location of the three dots ... at the end of the condensed description to be placed at the end of a word instead of somewhere in the middle of a word.

First, find the (horizontal line under the description) code:

<hr class="PListLine" size="1" />

Cut that code and place it right after:

<table width="100%">

Now put <tr> before and </tr> after this code, so it should look like this:

 
<table width="100%">
<tr>
<hr class="PListLine" size="1" />
</tr>

The above code places the horizontal line between the different products.

Then find the code </table> and delete two <br /> after this code.

 
</table>
<br />
<br />

What the above code does when you delete the two <br /> is you place the horizontal line closer to the 'Buy Now' button.

Now, to make sure that the three dots does not get placed after 300 chararcters, in the middle of a word , but at the end of a word, we have to look for the same code we used at the top:

{$products[product].descr|truncate:300:"...":true}

and remove ':true' at the end, so it looks like this:

{$products[product].descr|truncate:300:"..."}

O.K., now let's give the horizontal bar a color.

Open up the file skin1/skin1.css, find HR.PListLine and add this code below:

COLOR: #FF9900 or whatever color you want to use.

So it should look like this:

 
HR.PListLine {
 WIDTH: 100%;
 HEIGHT: 1px;
 BORDER-BOTTOM-WIDTH: 0px;
 BORDER-LEFT-WIDTH: 0px;
 BORDER-RIGHT-WIDTH: 0px;
 COLOR: #FF9900
}

Hopefully, this will help somebody.

- MoonDog -