RapidCart 3 Layout Nightmare

RaycerX · May 2011

So, I purchased RapidCart 3 over Cartloom because it seemed like a more robust shopping cart solution. What I didn't count on was how limited the layout options were when it comes to spacing your products out, adjusting font sizes, adding dividers, etc.

I know with the proper CSS you can overcome a lot of these issues. I just didn't realize was how badly the standard, out-of-the-box layout would completely suck. There's no real WYSIWG settings for anything as far as I can tell.

In any case, if you guys can look at the screenshot I uploaded and tell me what I can do to improve the layout that would be great. The product rows are way too close to each other despite setting the layout for the width of the page.

I'm not sure how to move the CSS line I added in there so that sits in between the product rows and isn't butted up against the product above it.

Also, their headline option puts your header just a few pixels above your products. Why the developers thought this was useful from a layout point of view is beyond me.

Anyway, if anyone has some good tips, tricks, code, etc. that will help me overcome these obstacles it would be much appreciated. Otherwise, I'll have to ditch RapidCart and try something else.

Thanks for your help.

Ray

3mors · May 2011

Please send me the link to a test page and I'll tell you how to customize it.

robbe123 · November 2011

Has anyone ever tried/or knows if it is possible to get a vertical product??? For example, the product name above the picture and the price and description below the picture?

3mors · November 2011

on 1321007532:

Has anyone ever tried/or knows if it is possible to get a vertical product??? For example, the product name above the picture and the price and description below the picture?

Enable Custom Layout in Options-]Style window and paste this code.

[div class="rcItem column%COLUMN_STYLE%" id="rcItem%ID%"] <input type="hidden" name="sku" value="%SKU%" /> <input type="hidden" name="name" value="%NAME%" /> <input type="hidden" name="price" value="%PRICE%" /> <input type="hidden" name="taxes" value="%TAXES%" /> <input type="hidden" name="shipping_1" value="%SHIPPING_1%" /> <input type="hidden" name="shipping_2" value="%SHIPPING_2%" /> <input type="hidden" name="limit" value="%PURCHASE_LIMIT%" /> <input type="hidden" name="weight" value="%WEIGHT%" /> [table] [tr] [td] [div class="rcItemName" style="text-align: center; margin-bottom: 1.5em;"]%NAME%[/div] [/td] [/tr] [tr] [td class="rcItemImage"] [div class="rcItemThumb" style="text-align: center;"] [a href="%IMAGE_PATH%" rel="remooz"][img id="rcThumb%ID%" src="%THUMB_PATH%" alt="%NAME%" /][/a] [/div] [/td] [/tr] [tr] [td] [div class="rcItemDescription" style="text-align: center; margin-top: 1.5em;"][code][div class="rcItem column%COLUMN_STYLE%" id="rcItem%ID%"]
<input type="hidden" name="sku" value="%SKU%" />
<input type="hidden" name="name" value="%NAME%" />
<input type="hidden" name="price" value="%PRICE%" />
<input type="hidden" name="taxes" value="%TAXES%" />
<input type="hidden" name="shipping_1" value="%SHIPPING_1%" />
<input type="hidden" name="shipping_2" value="%SHIPPING_2%" />
<input type="hidden" name="limit" value="%PURCHASE_LIMIT%" />
<input type="hidden" name="weight" value="%WEIGHT%" />
[table]
[tr]
[td]
[div class="rcItemName" style="text-align: center; margin-bottom: 1.5em;"]%NAME%[/div]
[/td]
[/tr]
[tr]
[td class="rcItemImage"]
[div class="rcItemThumb" style="text-align: center;"]
[a href="%IMAGE_PATH%" rel="remooz"][img id="rcThumb%ID%" src="%THUMB_PATH%" alt="%NAME%" /][/a] [/div] [/td] [/tr] [tr] [td] [div class="rcItemDescription" style="text-align: center; margin-top: 1.5em;"]

robbe123 · November 2011

Thank you for the fast reply. It works very well!

I attached a screenshot to show the formatting of Headline, Picture, Price... -> Do you know if there's a way to align all the elements left (or center, and right)?

robbe123 · November 2011

Here goes the screenshot!

3mors · November 2011

Replace all

text-align: center;

strings in my code with

text-align: left;

or

text-align: right;

robbe123 · November 2011

Thanks, 3mors - works smooth!

robbe123 · December 2011

Hi there,

I am having some more experience with RapicCart so far and have to say, it's my favourite solution for RW.

There is an amazing code for an auto drop down of the cart, which I found here:
http://support.omnidea.it/kb/rapidcart-tips-n-tricks/how-to-show-an-auto-drop-down-cart-after-adding-a-product

The problem is, that this code (in 2 columns) makes the Headline, Price and 'add to card' button next to the thumbnail. In my custom code below I have these elements over each other. But despite what I tried, I cant combine these too codes.

Can someone help?

[div class="rcItem column%COLUMN_STYLE%" id="rcItem%ID%"]
<input type="hidden" name="sku" value="%SKU%" />
<input type="hidden" name="name" value="%NAME%" />
<input type="hidden" name="price" value="%PRICE%" />
<input type="hidden" name="taxes" value="%TAXES%" />
<input type="hidden" name="shipping_1" value="%SHIPPING_1%" />
<input type="hidden" name="shipping_2" value="%SHIPPING_2%" />
<input type="hidden" name="limit" value="%PURCHASE_LIMIT%" />
<input type="hidden" name="weight" value="%WEIGHT%" />
[table]
[tr]
[td]
[div class="rcItemName" style="text-align: left; margin-bottom: 1.5em;"]%NAME%[/div]
[/td]
[/tr]
[tr]
[td class="rcItemImage"]
[div class="rcItemThumb" style="text-align: left;"]
[a href="%IMAGE_PATH%" rel="remooz"][img id="rcThumb%ID%" src="%THUMB_PATH%" alt="%NAME%" /][/a] [/div] [/td] [/tr] [tr] [td] [div class="rcItemInfo" style="margin-top: 1.5em;"] %TEMPLATE_OLD_PRICE% [div class="rcItemPrice" style="text-align: left;"]%I18N_PRICE%[/div] [div class="rcItemDescription" style="text-align: left; margin-top: 1.5em;"]

Realmac Software

RapidCart 3 Layout Nightmare

Comments

Leave a Comment