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)

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?

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.

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}

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

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.

Re: Product options in product list

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.

Re: Product options in product list

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.

Re: Product options in product list

Does this work for variants?

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?

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!