X-Cart forums - X-Cart - reBOOT - Responsive Template

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)

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

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.

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

Re: X-Cart - reBOOT - Responsive Template

I purchased and then Phil did a $50 refund via PayPal.

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.

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

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.

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

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

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}