X-Cart forums - Product options in product list

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

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Product options in product list (https://forum.x-cart.com/showthread.php?t=63615)

tomsell

05-14-2012 05:18 AM

Product options in product list

Hi, is there a change to add product option (price modifier etc...) to show in products list? For example under {$product.descr}? Thanks for advance!

totaltec

05-14-2012 05:46 AM

Re: Product options in product list

I haven't tested this yet, but it should work fine to display the options. Written for 4.4.5, you may need to modify it for your version. I also assumed you would be placing it within a table, you may need to adjust or remove the row and column tags.

PHP Code:


		
			
{if $active_modules.Product_Options ne "" and $product.is_product_options eq 'Y'}
      <tr>
        <td>
          <h2>Product Options</h2>
          {foreach from=$product_options item=options}
            <b>{$options.classtext}</b> - 
            {foreach from=$options.options item=option name=option_loop}
              {$option.option_name}{if not $smarty.foreach.option_loop.last},{/if}
            {/foreach}<br />
          {/foreach}
        </td>
      </tr>
    {/if}

tomsell

05-14-2012 06:12 AM

Re: Product options in product list

Thanks a lot for the quick answer! Well, it just displays the titel "Product Options" not the options itself. Do You have a hint, what would be wrong?

totaltec

05-14-2012 06:25 AM

Re: Product options in product list

Tom, I just tested it on my test site: http://trainingpen.com/Acer-TravelMate-212T.html it is working just as I expected it to. I would try and look at the variables in webmaster mode, and see if they are set or not.

Product option variables may have different names or arrangement in your version. I am using 4.4.5.

When you fire up webmaster mode, click the button that shows the variables instead of template names. Then check the variable names. Do you have an array named $product_options? Use control-F to search the debug console window.

tomsell

05-14-2012 07:08 AM

Re: Product options in product list

In my version there is not possible to show variables instead of template names I guess. But yes, the array named $product options is present

totaltec

05-14-2012 07:20 AM

Re: Product options in product list

It is probably possible for you to see the variables, but you need to apply a patch, or set the debug mode in config.php (I think)

Look at this thread: http://forum.x-cart.com/showthread.php?t=44543&highlight=debug

You can also choose to print the entire array with the smarty command:
{$product_options|@print_r}

Then you can see the variables that you need to access, and figure out why the code isn't working. Your version must refer to the options differently. I suspect it might not have the classtext part, maybe it is optiontext or something else in 4.1.11.

SamuraiCoder

05-14-2012 08:01 AM

Re: Product options in product list

Hi,

Does anyone have any ideas on how to add product variants to the product list page. I'm having a look at the customer_options.php page but can't seem to find how to make sure its added on the product list page.

xcellere

06-21-2012 10:31 AM

Re: Product options in product list

I have the same problem as the OP. When I add the code, the title is all that shows, just no drop down. I did check the variables and $product_options isn't there. How do I load that array?

totaltec

06-21-2012 12:31 PM

Re: Product options in product list

Quote:

Originally Posted by xcellere

I have the same problem as the OP. How do I load that array?

After reading back through this thread, I realized that I never understood what the thread was really about. You guys are trying to display the options on the product list, for instance on category pages. I was showing you code that should work on the product page itself. Sorry. Just going too fast, I need to slow down.

You can load the array yourself in php, but you need to determine where the values are pulled from, and access them in the DB. I don't have a quick answer for you unfortunately, I have no idea how product options are handled in 4.1.X

But lets start figuring it out! First lets see how the product options are pulled on the product page. We already have a clue from SamuraiCoder: customer_options.php. Do you have that file in 4.1.X? I think we can assume it is referenced in product.php. So when we pull up the product page, we are really accessing product.php, and then in turn it is including or requiring customer_options.php.

My first step would be to verify that the assumptions I have made above are true, by looking through product.php. Then if so, I would pull open customer_options.php and take a look at how the options were being accessed. Armed with that knowledge we can start determining where we need to add code to pull these options on the page in question.

I believe that the products list is generated by search.php. The actual page we are on when looking at a category is home.php?cat=(somenumber). When ?cat= is included it sets a variable $cat, and the value which is the categoryid. If this is the case it includes search.php (I think) and the database is queried for the products in that category. Our mission is to understand the inner workings of that query, and add the lines that we found in customer_options.php or some variation of those lines. What we are trying to do is pull the product option values for each product found, and assign them to the $products array.

Sorry for the long post, just trying to make sure even a noob could understand. Hopefully that helps.

xcellere

06-21-2012 12:36 PM

Re: Product options in product list

Thank you for such a detailed post Mike. I should note that I just updated my signature to show my current version: 4.5. :) No longer 4.1.

EDIT: This is the code in customer_options.tpl:

Code:

{*

$Id: customer_options.tpl,v 1.4.2.1 2010/12/15 09:44:41 aim Exp $

vim: set ts=2 sw=2 sts=2 et:

*}

{if $product_options ne '' or $product_wholesale ne ''}



  {if $nojs ne 'Y'}

    <tr style="display: none;">

      <td colspan="3">



<script type="text/javascript">

//<![CDATA[

var alert_msg = '{$alert_msg|wm_remove|escape:javascript}';

//]]>

</script>

        {include file="modules/Product_Options/check_options.tpl"}

      </td>

    </tr>

  {/if}



  {foreach from=$product_options item=v}

    {if $v.options ne '' or $v.is_modifier eq 'T' or $v.is_modifier eq 'A'}

      <tr>

        <td class="property-name product-input">

          {if $usertype eq "A"}

            {$v.class}

          {else}

            {$v.classtext|escape|default:$v.class}

          {/if}

        </td>

        <td class="property-value" colspan="2">



          {if $cname ne ""}

            {assign var="poname" value="$cname[`$v.classid`]"}

          {else}

            {assign var="poname" value="product_options[`$v.classid`]"}

          {/if}



          {if $v.is_modifier eq 'T'}



            <input id="po{$v.classid}" type="text" name="{$poname}" value="{$v.default|escape}" />



          {elseif $v.is_modifier eq 'A'}



            <textarea id="po{$v.classid}" name="{$poname}">{$v.default|escape}</textarea>



          {else}



            <select id="po{$v.classid}" name="{$poname}"{if $disable} disabled="disabled"{/if}{if $nojs ne 'Y'} onchange="javascript: check_options();"{/if}>



              {foreach from=$v.options item=o}



                <option value="{$o.optionid}"{if $o.selected eq 'Y'} selected="selected"{/if}>

                {strip}

                  {$o.option_name|escape}

                  {if $v.is_modifier eq 'Y' and $o.price_modifier ne 0}

                    &nbsp;(

                    {if $o.modifier_type ne '%'}

                      {currency value=$o.price_modifier display_sign=1 plain_text_message=1}

                    {else}

                      {$o.price_modifier}%

                    {/if}

                    )

                  {/if}

                {/strip}

                </option>



              {/foreach}

            </select>

          {/if}



        </td>

      </tr>

    {/if}



  {/foreach}



{/if}



{if $product_options_ex ne ""}



  <tr>

      <td class="warning-message" colspan="3" id="exception_msg" style="display: none;"></td>

  </tr>



  {if $err ne ''}



    <tr>

      <td colspan="3" class="customer-message">{$lng.txt_product_options_combinations_warn}:</td>

    </tr>



    {foreach from=$product_options_ex item=v}

      <tr>

        <td colspan="3" class="poptions-exceptions-list">



          {foreach from=$v item=o}



            {strip}

            <div>

              {if $usertype eq "A"}

                {$o.class}

              {else}

                {$o.classtext|escape}

              {/if}

              : {$o.option_name|escape}

            </div>

            {/strip}



          {/foreach}



        </td>

      </tr>

    {/foreach}



  {/if}



{/if}

xcellere

06-21-2012 10:52 PM

Re: Product options in product list

I got it to "kind of" work. You have to hit the Add to Cart button, and then after like 5 seconds, it loads the product options. Anyone know how I can get the product options to be there when the page loads? http://www.medilogic-collective.com/xcart/indica/

When the page loads, the $product_options array isn't loaded. Thoughts?

totaltec

06-22-2012 09:46 AM

Re: Product options in product list

Okay here is step 1 to solving the problem in 4.4.X:

Open up /products.php and near line 135 insert this code:

PHP Code:


		
			
if (isset($cat) && isset($products) && !empty($active_modules['Product_Options'])) {
    foreach ($products as $k => $v) {
        if ('Y' == $v['is_product_options']) {
            $products[$k]['options'] = func_get_product_classes($v['productid']);
        }
    }
}

Insert it right after:

PHP Code:


		
			
if (!empty($active_modules['Subscriptions'])) {

    include $xcart_dir . '/modules/Subscriptions/subscription.php';

}

But before:

PHP Code:


		
			
$smarty->assign('cat_products',      isset($products) ? $products : array());
$smarty->assign('navigation_script', "home.php?cat=$cat&sort=$sort&sort_direction=$sort_direction");
?>

This will get the options assigned to the product list in a category.

Now you should be able to view the options in webmaster mode.

totaltec

06-22-2012 10:10 AM

Re: Product options in product list

Okay, now lets get our options to display in the template.

Edit /common_files/customer/main/buy_now.tpl

Near line 54:

After:

PHP Code:


		
			
{if $product.appearance.buy_now_cart_enabled}

Insert:

PHP Code:


		
			
{if $active_modules.Product_Options ne ""}
       <div class="quantity">{include file="modules/Product_Options/customer_options.tpl" disable=$lock_options product_options=$product.options}</div>
{/if}

Before:

PHP Code:


		
			
{if $product.appearance.force_1_amount}

Please note you will need to have the Buy Now buttons enabled in the admin.

Also if this change throws off your template, try replacing the <div class="quantity"> and the </div> with table tags. So the added code would read:

PHP Code:


		
			
{if $active_modules.Product_Options ne ""}
       <table>{include file="modules/Product_Options/customer_options.tpl" disable=$lock_options product_options=$product.options}</table>
{/if}

totaltec

06-22-2012 12:33 PM

Re: Product options in product list

When testing this, my client and I discovered that the product options disappeared once the add to cart button was pressed.

To fix this, edit /include/func/func.ajax.php:

Around line 105,

After:

PHP Code:


		
			
$product = array_shift($products);

Insert:

PHP Code:


		
			
if ('Y' == $product['is_product_options']) {
  $product['options'] = func_get_product_classes($product['productid']);
}

Before:

PHP Code:


		
			
unset($products);

totaltec

06-28-2012 01:28 PM

Re: Product options in product list

Going even further, here is how to modify the javascript to get the product price to update when the product option is changed. //This will not work with product variants, or with wholesale prices

We begin by submitting the product id with the onchange event:
In /my_skin/modules/Product_Options/customer_options.tpl near line 48:
Replace:

PHP Code:


		
			
<select id="po{$v.classid}" name="{$poname}"{if $disable} disabled="disabled"{/if}{if $nojs ne 'Y'} onchange="javascript: check_options();"{/if}>

With:

PHP Code:


		
			
<select id="po{$v.classid}" name="{$poname}"{if $disable} disabled="disabled"{/if}{if $nojs ne 'Y'} onchange="javascript: check_options({$product.productid});"{/if}>

Note: we are simply passing the productid to the check_options() function.

Next before we dive into the JS, lets set the span ID to include the productid on the product page:
In /customer/main/product_details.tpl near line 80:
After:

PHP Code:


		
			
{if $product.taxed_price ne 0 or $variant_price_no_empty}

Insert:

PHP Code:


		
			
{capture name="product_price_id"}product_price{$product.productid}{/capture}

And

Replace:

PHP Code:


		
			
<span class="product-price-value">{currency value=$product.taxed_price tag_id="product_price"}</span>

With:

PHP Code:


		
			
<span class="product-price-value">{currency value=$product.taxed_price tag_id=$smarty.capture.product_price_id}</span>

Note: the below code references the product price in the template products_list.tpl, you may be using products_t.tpl instead, if your products are arranged in multiple columns. This depends on the settings under General Settings/Appearance - Displaying products. In this case, look near line 116 and make the edit to the span as described below, and include the capture above it.

And on the category page:
In /customer/main/products_list.tpl near line 70:
After:

PHP Code:


		
			
<div class="price-row{if $active_modules.Special_Offers ne "" and $product.use_special_price ne ""} special-price-row{/if}">

Insert:

PHP Code:


		
			
{capture name="product_price_id"}product_price{$product.productid}{/capture}

And

Replace:

PHP Code:


		
			
<span class="price">{$lng.lbl_our_price}:</span> <span class="price-value">{currency value=$product.taxed_price}</span>

With:

PHP Code:


		
			
<span class="price">{$lng.lbl_our_price}:</span> <span class="price-value">{currency value=$product.taxed_price tag_id=$smarty.capture.product_price_id}</span>

Next we will edit the JS to reference our newly passed productid, and subsequently change the corresponding span where we appended the productid above.

totaltec

06-28-2012 02:28 PM

Re: Product options in product list

1 Attachment(s)

Here is where things get a bit tricky. :-)

Let's start modifying the product options Javascript.

In /modules/Product_Options/check_options.tpl near line 27:
Before:

PHP Code:


		
			
var variants = [];

Insert:

PHP Code:


		
			
var productid = {$product.productid};

This just sets a value that we'll use later to prevent errors on the product page.

Then, near line 76:
After:

PHP Code:


		
			
/*

modifiers array: as clasid => array: as optionid => array:

  0 - price_modifier

  1 - modifier_type

  2 - taxes array: as taxid => tax amount

*/

Replace:

PHP Code:


		
			
var modifiers = [];

/* names array: as classid => class name */

var names = [];

{foreach from=$product_options item=v key=k}

names[{$v.classid}] = {ldelim}class_name: "{$v.class_orig|default:$v.class|wm_remove|escape:javascript}", options: []{rdelim};

{foreach from=$v.options item=o name=opts}

names[{$v.classid}]['options'][{$o.optionid}] = "{$o.option_name_orig|default:$o.option_name|wm_remove|escape:javascript}";

{/foreach}

{if $v.is_modifier eq 'Y'}

modifiers[{$v.classid}] = {ldelim}{rdelim};

{foreach from=$v.options item=o name=opts}

modifiers[{$v.classid}][{$o.optionid}] = [{strip}

  {$o.price_modifier|default:"0.00"}, 

  '{$o.modifier_type|default:"$"}',

  {ldelim}{rdelim}

{/strip}];

{foreach from=$o.taxes item=t key=id name=optt}

modifiers[{$v.classid}][{$o.optionid}][2][{$id}] = {$t|default:0};

{/foreach}

{/foreach}

{/if}

{/foreach}

With:

PHP Code:


		
			
var modifiers{$product.productid} = [];

/* names array: as classid => class name */

var names = [];

{foreach from=$product_options item=v key=k}

names[{$v.classid}] = {ldelim}class_name: "{$v.class_orig|default:$v.class|wm_remove|escape:javascript}", options: []{rdelim};

{foreach from=$v.options item=o name=opts}

names[{$v.classid}]['options'][{$o.optionid}] = "{$o.option_name_orig|default:$o.option_name|wm_remove|escape:javascript}";

{/foreach}

{if $v.is_modifier eq 'Y'}

modifiers{$product.productid}[{$v.classid}] = {ldelim}{rdelim};

{foreach from=$v.options item=o name=opts}

modifiers{$product.productid}[{$v.classid}][{$o.optionid}] = [{strip}

  {$o.price_modifier|default:"0.00"}, 

  '{$o.modifier_type|default:"$"}',

  {ldelim}{rdelim}

{/strip}];

{foreach from=$o.taxes item=t key=id name=optt}

modifiers{$product.productid}[{$v.classid}][{$o.optionid}][2][{$id}] = {$t|default:0};

{/foreach}

{/foreach}

{/if}

{/foreach}

Note: We are simply assigning the modifiers with the productid appended to the end.

Next, near line 159:
Replace:

PHP Code:


		
			
var default_price = {$product.taxed_price|default:"0"};

With:

PHP Code:


		
			
var default_price{$product.productid} = {$product.taxed_price|default:"0"};

Note: Again, just appending the productid to the variable to make it unique.

I have attached the whole file with the edits just in case.

totaltec

06-28-2012 03:26 PM

Re: Product options in product list

1 Attachment(s)

Now we dive into the actual script itself, lot of edits to make here.

In /my_skin/modules/Product_Options/func.js near line 21:
After:

PHP Code:


		
			
/**

 * Rebuild page if some options is changed

 */

Replace:

PHP Code:


		
			
function check_options() {

With:

PHP Code:


		
			
function check_options(id) {

  var product_price_id = 'product_price'+id;

Note: We are doing two things here, allowing input of the id variable that we set in our onchange event earlier, and setting a new variable, that just consists of the string "product_price" with the id tacked on the end. We'll use this to reference our span ID with the same unique name.

Next, near line 35:
After:

PHP Code:


		
			
if (typeof(taxes) != 'undefined') {

    for (var t in taxes) {

      if (hasOwnProperty(taxes, t))

        local_taxes[t] = taxes[t][0];

    }

  }

Insert:

PHP Code:


		
			
if(typeof(id) != "undefined" && id !== null) {

    price = eval("default_price" + id);

  } else {

    price = eval("default_price" + productid);

  }

Note: This sets the price variable to the default_price again with the productid appended. The extra else statement is to prevent an error on the product page.

Next, near line 162:
After:

PHP Code:


		
			
/* Find modifiers */

Replace:

PHP Code:


		
			
var _tmp = modi_price(price, local_taxes, orig_price);

With:

PHP Code:


		
			
var _tmp = modi_price(price, local_taxes, orig_price, id);

Note: We are passing on the id to the modi_price() function.

Next, near line 198:
After:

PHP Code:


		
			
/* Update form elements */

  /* Update price */

Replace:

PHP Code:


		
			
if (document.getElementById('product_price'))

    document.getElementById('product_price').innerHTML = price_format(Math.max(price, 0));

With:

PHP Code:


		
			
if (document.getElementById(product_price_id))

    document.getElementById(product_price_id).innerHTML = price_format(Math.max(price, 0));

Note: Just referring to the span ID using the variable we set above.

Then, near line 315:
After:

PHP Code:


		
			
/**

 * Calculate product price with price modificators 

 */

Replace:

PHP Code:


		
			
function modi_price(_price, _taxes, _orig_price) {

  var return_price = round(_price, 2);

With:

PHP Code:


		
			
function modi_price(_price, _taxes, _orig_price, id) {

  var return_price = round(_price, 2);

  if(typeof(id) != "undefined" && id !== null) {

    var modifiers = eval("modifiers"+id);

  } else {

    var modifiers = eval("modifiers"+productid);

  }

Note: Accepting the passed ID into the modi_price() function, and defining the modifiers variable. Again the else statement is to prevent an error when the variable is not set.

Well that's it! Hope it has been enlightening and entertaining. Remember this is just a quick little hack, it will not work in all instances, and there are certainly better ways to do this if you spent more time investigating it than I have. But it should get you started towards a more robust solution if that is your intention.

I have again uploaded the whole func.js file just in case I missed something. I renamed it to func.tpl so the forum would accept it.

RichieRich

04-21-2013 05:26 AM

Re: Product options in product list

Does this work for variants?

mcanitano

02-10-2015 05:33 AM

Re: Product options in product list

Any way we can use this code to show product options in new arrivals & on sale module product lists?

totaltec

02-10-2015 06:34 PM

Re: Product options in product list

@Richard,
I'm not really sure! I'd have to test it. Sorry for the 2 year late reply. :-)

@Marcello,
I don't see why not. This code is pretty old now, I haven't used it again or tested in several years. I'm sure that large portions of it still apply, but it would need to be tested along the way as you were implemented, not just blindly followed. It should point you in the right direction at least!

mcanitano

02-12-2015 05:23 AM

Re: Product options in product list

We've gotten it to at least pass the product options to product list.

What we're basically trying to do, is use the code you added to /products.php in post #12 in this thread. We're using this to show an image that says "Options Available!" over top of the product thumbnails in any product list on our site (we use products_t.tpl). But since New Arrivals and On Sale products are populated in a different area, we can't get it to work with them.

Tried putting the code from products.php into new_arrivals.php and on_sale.php but it didn't work. Though it did work for manufacturers.php (but I think that's because the manufacturers.php product array may be pulled from the same array products.php uses).

See: silverhorseracing.com to view what we are doing.

Right now we have if statements:

Code:

{if $product.is_product_options eq "Y"}

  

  {foreach from=$product_options item=v}

    {if $v.options ne '' or $v.is_modifier eq 'T' or $v.is_modifier eq 'A'}

{show image div here}...

...

...

Bradgl

06-10-2015 11:42 AM

Re: Product options in product list

Thanks TotalTec. I added the modification to my website (x-cart 4.1), and it works great. It only shows the product options on the category pages, and I'd like to see if there is a easy way to make it show on all of the pages that show a product list (ex. search, featured products etc).

I used to code out of the post dated 06-22-2012, 09:46 AM and 06-22-2012, 10:10 AM.

finestshops

02-02-2017 12:29 PM

Re: Product options in product list

Hi Mike,

How is it going?
thanks for posting this mode.
did you manage to make it work with variants and wholesale prices?

totaltec

02-02-2017 03:50 PM

Re: Product options in product list

Anton,
Good to hear from you friend! I have not messed with this for years, I don't think I ever worked on variants and wholesale prices for this.

It is something I could code for sure if a client was interested. These days though, its hard to find the time to do stuff like this without having a paying client to do it for.

finestshops

02-02-2017 03:54 PM

Re: Product options in product list

yes, free is overrated nowadays :)
we are almost done with it anyway.
see you soon in Chicago.

All times are GMT -8. The time now is 09:03 AM.