X-Cart: shopping cart software

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)

sstillwell@aerostich.com 06-21-2005 08:44 AM

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

GM 06-22-2005 08:43 PM

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

gfiebich 08-14-2005 01:10 PM

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}


groovico 08-14-2005 02:09 PM

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

Dongan 08-14-2005 11:19 PM

Good idea... 8O

RichieRich 08-15-2005 12:12 AM

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

gfiebich 08-15-2005 05:36 AM

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

RichieRich 08-15-2005 05:41 AM

that would be much appreciated! thanks!

gfiebich 08-24-2005 02:06 PM

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]

Dongan 08-24-2005 08:57 PM

gfiebich

Thanx a lot.


All times are GMT -8. The time now is 02:45 PM.

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