X-Cart forums - Variant chart in product description.

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Variant chart in product description. (https://forum.x-cart.com/showthread.php?t=14705)

Variant chart in product description.

I've had several complaints from customers that they don't like to have to select the different options in the drop down box to see the different prices on products that have variants. Some also got mad that the price was different than what they originally saw (people don't pay attention).

So taking something we did with our last site, I made a chart for the variants.

So in skin1/customer/main/product.tpl add:

Code:

{if $variants}

<table cellspacing="1" cellpadding="0" border="0" class="chart" width="75%">

<tr class="chart_head">

        <td>{$lng.lbl_sku}</td>

        <td>{$lng.lbl_description}</td>

        <td>{$lng.lbl_our_price}</td>

</tr>

{section name=test loop=$variants}

<tr class="{cycle values="chart_dark,chart_light"}">

        <td>{$variants[test].productcode}</td>

{foreach item=item key=key from=$variants[test].options}

        <td>{$item.option_name}</td>

{/foreach}

        <td>${$variants[test].price}</td>

</tr>

{/section}

</table>






{/if}

Right before this section

Code:

<TABLE width="100%" cellpadding="0" cellspacing="0" border="0">

<TR><TD colspan="2"><FONT class="ProductDetailsTitle">{$lng.lbl_details}</FONT></TD></TR>

Then you just need to add this to the bottom of skin1/skin1.css and tweak the colors to your liking.

Code:

table.chart { background-color: black; color: black; }

table.chart tr.chart_light td {background-color: #FFFBDC; padding: 1px 3px;}

table.chart tr.chart_dark td {background-color: #CCCC99; padding: 1px 3px;}

An example can be see here
http://www.aerostich.com/product.php?productid=16376&cat=248&page=1

Use at your own risk, it works with my cart, but who knows what it will do to yours

This could come in handy... nice site sstillwell thanks :wink:

Mr. Stillwell-

Thanks for posting that nice little mod - it was (almost) exactly what I was looking for! I've tweaked it slightly to display the inventory level for each variant. My modification also displays the table on items without variants - something I wanted for product display consistency.

Note that my code will display inventory levels for variants or basic items regardless of the status of "Disable inventory tracking" in the admin. For the site I'm working on, we have this option checked - allowing customers to backorder items.

(this was done on x-cart gold 4.0.14)

-Glen

Code:





{if $variants}



<table cellspacing="1" cellpadding="0" border="0" class="chart" width="75%">

<tr class="chart_head">

   <td>{$lng.lbl_sku}</td>

   <td>{$lng.lbl_description}</td>

   <td>{$lng.lbl_inventory}</td>



   <td>{$lng.lbl_our_price}</td>

</tr>

{section name=test loop=$variants}

<tr class="{cycle values="chart_dark,chart_light"}">

   <td>{$variants[test].productcode}</td>

{foreach item=item key=key from=$variants[test].options}

   <td>{$item.option_name}</td>

{/foreach}

   <td>{if $variants[test].avail < 1}0{else}{$variants[test].avail}{/if}</td>

   <td>${$variants[test].price}</td>

</tr>

{/section}

</table>









{else}



<table cellspacing="1" cellpadding="0" border="0" class="chart" width="75%">

<tr class="chart_head">

   <td>{$lng.lbl_sku}</td>

   <td>{$lng.lbl_inventory}</td>

   <td>{$lng.lbl_our_price}</td>

</tr>

<tr class="{cycle values="chart_dark,chart_light"}">

   <td>{$product.productcode}</td>

   <td>{if $product.avail < 1}0{else}{$product.avail}{/if}</td>

   <td>${$product.price}</td>

</tr>

</table>



{/if}

Nice Idea, suprised x-cart didn't have the prices in the drop down for the variants the same way options have it.

How do you get to appear in products.tpl thumbnail template? and also how do you show the alt_currency?

Richie-
I'll try to address your questions in some updated code sometime later this week. The code above also doesn't account for multiple variants. Eventually, I'd like to make a specific row in the table highlight when the user selects their product options.
-Glen

that would be much appreciated! thanks!

Here is the latest version of my spin on Shane's variant table.

My goal with this was to display SKU, Variant Name(s), Inventory, and Price information in a table on the product.tpl page. For interface consistancy, I want this table to also appear for products that have no variants. Because modifiers do not have unique SKUs or Inventory, they do not appear in the table. The table can handle multiple variants per product by creating a column for each.

Display of inventory levels is independent of Admin inventory preference settings. I want my customers to be allowed to backorder products, so I "Disable inventory tracking" in the admin. Fortunately, this doesn't actuallly turn off X-cart's backend inventory functionality - products and variants still display the inventory fields in the admin and purchases still impact these inventory levels.

Bonus feature: because our sites typically have a mix of both warehoused products and "Just In Time" products (items ordered from our vendors per customer order), we need a way to display this gracefully to the customer. Here's what I did: 1) create an Extra Field (lefthand menu in the admin) called "Inventory Type". 2) in any product that is not warehoused, enter "JIT" in the "Inventory Type" field. My variants table will then display "Unlimited" in the inventory column instead of "0".

Okay, here's the code:
(place this anywhere on the product.tpl page where you would like the table to appear)

Code:



{* Determine if product exists in warehouse - JIT stands for'Just In Time' (ie. not inventoried). This is handled with an Extra Product Field. *}

{section name=field loop=$extra_fields}

{if $extra_fields[field].field_value eq "JIT"}{assign var="JIT" value="yes"}{/if}

{/section}



{* Determine if product has variants *}

{if $variants}

        

        <table cellspacing="1" cellpadding="0" border="0" class="chart" width="100%">

        

        {* Build table header *}

        <tr class="chart_head">

           <td>SKU</td>

        

        {* Loop to handle multiple variant names *}

        {foreach from=$product_options item=v}

                {if $v.is_modifier eq ''}<TD>{if $usertype eq "A"}{$v.class}{else}{$v.classtext|default:$v.class}{/if}</TD>{/if}

        {/foreach}

        

           <td>Qty.</td>

           <td>Price</td>

        </tr>

        

        {* Build table rows *} 

        {section name=test loop=$variants}

                <tr class="{cycle values="chart_dark,chart_light"}">

                   <td>{$variants[test].productcode}</td>

                

                {* Loop to handle multiple variants *}        

                {foreach name=foo item=item key=key from=$variants[test].options}

                        <td>{$item.option_name}</td>

                {/foreach}

                        

                   <td>{if $JIT eq "yes"}Unlimited{else}{if $variants[test].avail < 1}0{else}{$variants[test].avail}{/if}{/if}</td>

                   

                   <td>${$variants[test].price}</td>

                </tr>

        {/section}

        </table>





{else}

{* This product has no variants but we still want a table to display with basic SKU, Qty, and Price info *}



                <table cellspacing="1" cellpadding="0" border="0" class="chart" width="100%">

                <tr class="chart_head">

                   <td>SKU</td>

                   <td>Qty.</td>

                   <td>Price</td>

                </tr>

                <tr class="{cycle values="chart_dark,chart_light"}">

                   <td>{$product.productcode}</td>                

        {if $JIT eq "yes"}<td>Unlimited</td>{else} <td>{if $product.avail < 1}0{else}{$product.avail}{/if}</td>{/if} 

                   <td>${$product.price}</td>

                </tr>

                </table>

        

{/if}

The table makes use of a few custom CSS styles. Add these to your skin1.css file.

Code:

table.chart { background-color: #ffffff; color: black; text-align:center}

table.chart tr.chart_head td {background-color: #556591; padding: 2px 2px 2px 2px; color:#ffffff; font-size:10px}

table.chart tr.chart_light td {background-color: #cccccc; padding: 2px 2px 2px 2px; font-size:10px}

table.chart tr.chart_dark td {background-color: #eeeeee; padding: 2px 2px 2px 2px; font-size:10px} 

table.productoptions { }

table.productoptions td {        white-space:nowrap; border-top:1px; border-top-color:#cccccc; border-top-style:solid; padding:5px;}

Eventually, I'd like to figure out how to make individual rows highlight based on the variant selections made by the customer - but that's a ways down my to-do list.

See it in action here: http://www.napawear.com - LIVE SITE (no test orders, please!)
The mod above was written for X-cart Gold 4.0.13

Happy modding.
-Glen[/url]

gfiebich

Thanx a lot.

any possibility on whether this can be displayed in products.tpl thumbnail template?

Richie-
Sorry, that task is a little over my head. The variants data already exists behind the scenes in product.tpl - so all we had to do was display it nicely. The products.tpl page doesn't contain this data, so the job would involve some more serious tweaking - probably in /products.php. Anyone else willing to take a crack at this?
-Glen

Is it possible to add quantity text box next to each variant and add to cart from there.

(basically, don't use the selection drop down list)

also, I'm on v4.0.17 and it works great.

Great suggestion! I'd love to have that capability for some of my sites. Maybe one of the x-perts can provide a solution - as that job is over my head.

Yeah..
1. all qty. text box should be left empty by default.
2. create a validation to all text box. show error message when customer try to add to cart without enter in number greater than 1 to at least one qty. text box.

anyone?!

nice mod.

Curious why didnt you decide t just go with radio buttons? and not have the drop down or extra table.

Thank you, for the great mod

This is a great mod! It works in v4.0.17.

I have a questions tho?

How can I make sure these 2 new field cost and list can get exported and imported?

how do you show color combinations?

http://www.aerostich.com/product.php?productid=16376&cat=248&page=1
Click swatches to see suit color combinations.

is there any chance of having the coloured boxes graphics - for maybe textures styles of items instead of just colours ?

:o

Stillwell,

The website is great!

Where did you get the "more photos" pop up with the next/previous?

Also, where did you get the color swatch, color swap on the jacket?

Thanks.

Great mod - can it handle unavailable options ?

Wow - this is a great mod - it looks really neat (see signature) - many thanks !!!
If a product option is not available it still shows all the information except the option name.
Can be it amended so that this is consistent - either all the info shows or none of it ?
I presume that the page doesnt see the option name text so it would be eaiser to have a condition that says somnething like 'if option text' empty ignore row ?
Anyway - it's still great as is !

Liam2001,

I believe you can put a background-image on the box.

Try something like this
background-image: url(http://www.yu.com/images/stars.gif);

sstillwell,

Nice mod!

Really though, would you mind sharing if you custom made the Color Variants-mod, or where you picked it up?

It's nice to be able to see the actual color variant image by clicking the swatch.

Please share!!

Sorry if this is a dumb question...

Using sstillwell's code, no size/price data displays in the table for me. Is there something else I am supposed to customize?

I appreciate everyone's help. These forums are great.

I've written up the color swapping info at
http://forum.x-cart.com/viewtopic.php?p=145932#145932

That's a separate issue, go there if you are looking to make color/image swapping.

Quote:

Originally Posted by derekhux

Everyone,

If your site is available on the Internet it would be nice to include a URL as an example of what you looking at.

sstillwell, sorry about that.

I was hesitant to include a URL because we are still very much in the construction phase and we are putting products up and taking them down while we are still learning X-Cart. But here is a link to a page where the variants aren't being displayed in the table:
http://www.arearugs2u.com/product.php?productid=16242&cat=458&page=1

I am guessing that I need to customize something in the code, to call up the variants? Or that the variant tag "names" are different in 4.1.2? Or that we didn't do something correctly entering the variants originally?

The variants for that product work fine in the drop down box and the price is updated correctly, I just can't get that info to display in the table...

Thanks for looking at this for me. I really appreciate it.

I'm running version 4.0.12. I'm not sure if some of the variable names/structures have changes in 4.1.x. I wont be able to troubleshoot the issue at this time, sorry.

I have done this for 4.1.2 and have color swatches and they also change the variant images. Perhaps I will post within the next few days. It's a hack, but it does work.

- Mike

I've just changed (with the help of geckoday) the variant prices so that they are displayed with a comma, instead of a point.

This was done in /skin1/modules/Product_Options/check_options.tpl.
Changing the point on line 276 (price = top+"."+bottom.substr(1,bottom.length) into a comma results in variant prices with a comma.
But that doesn't affect the variant prices in this chart mod.
They still show a point instead of a comma...

Anybody knows where to change this?
Thanks in advance!

Re: Variant chart in product description.

Quote:

Originally Posted by mffowler

I have done this for 4.1.2 and have color swatches and they also change the variant images. Perhaps I will post within the next few days. It's a hack, but it does work.

- Mike

Any chance if a version that works in 4.1.3?

Pretty Please
:)

Kevin

Re: Variant chart in product description.

I believe to change the prices to display correctly with a comma instead of a point when set that way in the admin change {$variants[test].price} to {include file="currency.tpl" value=$variants[test].price}

Re: Variant chart in product description.

Hi
Im tring to show a variants table on the product page. I have added the following code to the skin1/customer/main/product.tpl but it doesnt work. Is there any reason this will not work in 4.1.3. I have tried with no luck.

Code:

{if $variants}

<table cellspacing="1" cellpadding="0" border="0" class="chart" width="75%">

<tr class="chart_head">

        <td>{$lng.lbl_sku}</td>

        <td>{$lng.lbl_description}</td>

        <td>{$lng.lbl_our_price}</td>

</tr>

{section name=test loop=$variants}

<tr class="{cycle values="chart_dark,chart_light"}">

        <td>{$variants[test].productcode}</td>

{foreach item=item key=key from=$variants[test].options}

        <td>{$item.option_name}</td>

{/foreach}

        <td>${$variants[test].price}</td>

</tr>

{/section}

</table>





{/if}

Would really appriciate any help

Regards

Kevin

Re: Variant chart in product description.

Variant images was mentioned a few posts back... I'm hoping to either figure this out or find a post addressing this.... I would like to have an image box next to the options/variants that would show the variant image (instead of it changing the main image at the top) so that the customer could see what he/she was adding on to the product.
Anyone know of a post regarding this?
In the mean time, I'll keep looking and maybe start tinkering ... wish me luck :)

Re: Variant chart in product description.

Refer to this thread....you can see it live here: http://www.taigayarns.net Look at a yarn product....you will see the swatch images that I added.

http://forum.x-cart.com/showthread.php?t=25100

Louise

Re: Variant chart in product description.

Hi
Thanks for your replies, but what I am trying to do is show a table with;

SKU, Description and Price

of all variants for a product in a table and display it on skin1/customer/main/product.tpl thats is.

There is a version at the begining of this thread (This code is also at the top of this page in another post by me) that works, but not with 4.1.3.
Could anyone get this to work.
This one is driving me mad!!! :)

Thanks

Kevin

Re: Variant chart in product description.

Here's a version for 4.1.3 that I've modifed for my own benefit. The update excludes from the table, all exceptions that would otherwise be shown. It's not the prettiest code in the world and someone with more tallent could make it a bit slicker....

This goes in to customer/main/product.tpl

Code:

{* Determine if product has variants *}

{if $variants}

    <table class=inlineSpec>



    {* Build table header *}

    <tr class="specHeader">

       <td>{$lng.lbl_sku}</td>



    {* Loop to handle multiple variant names *}

    {foreach from=$product_options item=v}

        {if $v.is_modifier eq ''}<TD>{if $usertype eq "A"}{$v.class}{else}{$v.classtext|default:$v.class}{/if}</TD>{/if}

    {/foreach}

       <td >{$lng.lbl_stock_quantity}</td>

       <td >{$lng.lbl_price}</td>

    </tr>



    {* Build table rows *}





    {foreach item=variant from=$variants}

        {assign var=exception value="0"}



        {foreach key=ExceptionKey item=exceptionList from=$product_options_ex}

            {assign var=found value=0}

            {assign var=total value=0}

            {foreach item=classException from=$exceptionList}

                {math assign=total equation="x + 1" x=$total}

                {foreach name=l1 item=variantOpt from=$variant.options}

                    {if $variantOpt.optionid eq $classException.optionid}{math assign=found equation="x + 1" x=$found}{/if}

                {/foreach}

            {/foreach}

            {if $found eq $total}{assign var=exception value="1"}{/if}



        {/foreach}

        {if $exception ne "1"}



            <tr class="specItemHeader{cycle values="1,2"}">

               <td class=partnumber>{$variant.productcode}</td>



            {* Loop to handle multiple variants *}

            {foreach name=foo item=variantOpt key=key from=$product_options}

                {if $variantOpt.is_modifier eq ''}

                    <TD>

                    {foreach name=bar item=varOpt from=$variant.options}

                        {if $varOpt.classid == $variantOpt.classid}{$varOpt.option_name}{/if}

                    {/foreach}

                    </TD>

                {/if}



            {/foreach}



                <td>{$variant.avail}</td>

                <td>{if $product.planer_show_price eq 'Y' }{include file="currency.tpl" value=$variant.price}{else}{if $login eq ''}Login{else}Not available{/if}{/if}</td>

            </tr>

        {/if}

    {/foreach}

    </table>

{/if}

Some CSS to make it look pretty

Code:

TABLE.inlineSpec TD{

        border: 1px inset;

}

TR.specHeader{

        font-weight: bold;

        BACKGROUND: #EE44EE;

        color: white;

}

TR.specItemHeader1 td{

        BACKGROUND: yellow;

        font-weight: normal;

}

TR.specItemHeader2 td{

        BACKGROUND: lightblue;

        font-weight: normal;

}

TR td.specItemTitle{

        font-weight: bold;

        BACKGROUND: #EEEEEE;

}

TR td.partnumber{

        font-weight: bold;

        BACKGROUND: #EEEEEE;

        white-space: nowrap;

}

Re: Variant chart in product description.

Simon,
I tried your 4.1.3 version and it shows this
SKU16131 Dark chambray 1000 Not available

... price not availabel although the price is there... any suggestions?
Andy

Re: Variant chart in product description.

Sorry Andy,

Change the line that begins :

<td>{if $product.planer_show_price eq 'Y' }

to read

<td>{include file="currency.tpl" value=$variant.price}</td>

That removes the conditional display of the prices (an internal mod I wrote)