X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Third Party Add-Ons for X-Cart 4 (https://forum.x-cart.com/forumdisplay.php?f=45)
-   -   X-Cart - reBOOT - Responsive Template (https://forum.x-cart.com/showthread.php?t=66570)

yages 04-12-2013 11:35 PM

Re: X-Cart - reBOOT - Responsive Template
 
Would be great to have new products link showing in the menu or in the tabs acoss top of page

elmirage001 04-13-2013 06:21 AM

Re: X-Cart - reBOOT - Responsive Template
 
You Can :-) If you have Gold you can Purchase the X-CART Hot Products Module http://www.x-cart.com/extensions/modules/hot-products.html

Phil has already built in support because it's included in Gold Plus. Showing New Arrivals and On Sale products in the Specials Menu are check box options in x-cart modules. I have also added a "On Sale" tab in my top menu.

GreenDaze Hydro 04-13-2013 08:21 AM

Re: X-Cart - reBOOT - Responsive Template
 
Do you need to enter a code to apply the $50 discount Phil, my web guy is waiting to add it to his developers license... ;-)

elmirage001 04-13-2013 09:16 AM

Re: X-Cart - reBOOT - Responsive Template
 
I purchased and then Phil did a $50 refund via PayPal.

PhilJ 04-14-2013 11:38 AM

Re: X-Cart - reBOOT - Responsive Template
 
Quote:

Do you need to enter a code to apply the $50 discount Phil, my web guy is waiting to add it to his developers license...

I've PM'd you a coupon code.

elmirage001 04-14-2013 09:40 PM

Re: X-Cart - reBOOT - Responsive Template
 
Hi Phil,

I use image sprites in my Ability template which I now need to modify to be responsive. This page http://tobyj.net/responsive-sprites/ seems to have the easiest technique I've found so far. Do you have a better source or have you found a sprite tool for responsive websites?

Thanks!

Paul

PhilJ 04-15-2013 04:42 AM

Re: X-Cart - reBOOT - Responsive Template
 
That does look like a good technique. There's dozens of sprite generators out there, but few that are responsive. I'll keep an eye out for more. I've recommended InstantSprite in the template docs. Here's another good one.

I did consider using one main sprite image in the template, which is the ideal for cutting down HTTP requests. But not everyone is familiar with them and updating/maintaining the CSS can be tricky.

I would also recommend compressing all images including sprites with the use of PNGGauntlet.

PhilJ 04-16-2013 03:58 AM

Re: X-Cart - reBOOT - Responsive Template
 
reBOOT is not just any template... lots of things you can do without any additional plugins :)

Click here for examples

elmirage001 04-16-2013 09:34 PM

Re: X-Cart - reBOOT - Responsive Template
 
Hi Phil,

Oh Boy! More stuff I get to play with :-) Bad part is I've been so busy the last few days I've had no time to work on reBOOT. In a day or so I'll get back to work on trying to get a responsive sprite to work and I'll post when I do.

Thank you so much!

Paul

elmirage001 04-17-2013 08:32 PM

Re: X-Cart - reBOOT - Responsive Template
 
Hi Phil,

I've finally found a solution that gives responsive sprite images. I used InstantSprite to create the image sprite (great tool!) which in my example is 4 images 209px by 89px each, lined up horizontally for a total horizontal width of 836px. I do not use any of the CSS or code that it generates and instead us the CSS and code below.

The example below displays my 4 sprite promo images in bar.tpl just like I had in Ability except now the images are responsive.

CSS:
Quote:

#promo-wrap {
max-width: 836px;
margin-bottom: 0px;
padding: 4px 4px 0px 4px;
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

#promo-wrap img {max-width: 400%;}

#one {max-width:100%; overflow:hidden; display:inline-block;}
#one img {width:400%;}

#two {max-width:100%; overflow:hidden; display:inline-block;}
#two img {margin-left:-100%; width:400%;}

#three {max-width:100%; overflow:hidden; display:inline-block;}
#three img {margin-left:-200%; width:400%;}

#four {max-width:100%; overflow:hidden; display:inline-block;}
#four img {margin-left:-300%; width:400%;}

My promo.tpl code:
Quote:

{capture name=menu}

<div id="promo-wrap">
<a id="one" href="product_one.html"><img src="images/sprites/promo-sprite.jpg" alt=""></a>
</div>

<div id="promo-wrap">
<a id="two" href="product_two.html"><img src="images/sprites/promo-sprite.jpg" alt=""></a>
</div>

<div id="promo-wrap">
<a id="three" href="product_three.html"><img src="images/sprites/promo-sprite.jpg" alt=""></a>
</div>

<div id="promo-wrap">
<a id="four" href="product_four.html"><img src="images/sprites/promo-sprite.jpg" alt=""></a>
</div>

{/capture}

{include file="customer/menu_dialog_bordered.tpl" title="Promo Items" content=$smarty.capture.menu}


All times are GMT -8. The time now is 01:21 PM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.