X-Cart forums

[PC Doctor]

Hello Everyone,

Update 3/18/10 - X-Cart v4.3.1 has fixed this bug below, and now you can use this mod directly, see below.

This mod goes hand-in-hand with a 4.3.0 bug fix (I call it the Product Options Redirect Bug). I have posted this bug and it's fix here: (you MUST apply this fix to use this mod)
http://forum.x-cart.com/showthread.php?t=52053

The bug is confirmed by X-Cart and they provided me with patch files to fix it (see link above). It has to do with an option in X-Cart that is supposed to redirect you to a products' detail page when that product has options and you click the add-to-cart button when viewing it's category listing.

Anyway, that is described and fixed in the post above.

When I was able to finally fix this bug, I wanted to take it a step further by changing the 'Add to Cart' button for products that have options to a button that says 'Select Options', and then display the price separately.

The purpose of this mod is, in the category products listing, for any products that have variants or options, instead of showing the normal 'Buy Now' black button with the price in it, to instead change that button to say 'Select Options' and display 'Starting from: $xx.xx' price above the button. With the reasoning that, using this mod in conjunction with the Admin setting checked: Modules Options > Product Options > Redirect customer who clicks 'Buy Now' or 'Add to Wishlist' button of a product with options to the product details page - because with this option on, for a product with options, clicking its buy now button will not simply add it to the cart, it will redirect to that products detail page. Hence changing that products buy now button to say 'Select Options.

Here is an example of this mod, showing products with and without options:
http://www.fixmypcdoctor.com/home.php?cat=2

This is done by editing skin1/customer/main/buy_now.tpl. Be sure to make a backup of this file before you change it.
Around line 147 where it says:

          {elseif $active_modules.Wishlist && ($config.Wishlist.add2wl_unlogged_user eq "Y" || $login ne "")}
            <div class="button-row">
              {include file="customer/buttons/add_to_wishlist.tpl" href="javascript: submitForm(document.orderform_`$product.productid`_`$product.add_date`, 'add2wl'); return false;"}
            </div>
          {/if}

        {else}

          <div class="buttons-row nopad">

<------------EDIT HERE-------------------->
            {include file="customer/buttons/button.tpl" type="input" additional_button_class="cart-button add-to-cart-button" button_title=$smarty.capture.price_button title=$lng.lbl_add_to_cart}
<------TO HERE - DELETE THIS LINE--------->

            {if $product.appearance.dropout_actions and $js_enabled}
              <div class="button-separator"></div>
              {include file="customer/buttons/add_to_list.tpl" id=$product.productid form_name="orderform_`$product.productid`_`$product.add_date`"}
            {elseif $active_modules.Wishlist && ($config.Wishlist.add2wl_unlogged_user eq "Y" || $login ne "")}
              <div class="button-separator"></div>

Change it to this: Updated 3/18/10 - See post #6 below

          {elseif $active_modules.Wishlist && ($config.Wishlist.add2wl_unlogged_user eq "Y" || $login ne "")}
            <div class="button-row">
              {include file="customer/buttons/add_to_wishlist.tpl" href="javascript: submitForm(document.orderform_`$product.productid`_`$product.add_date`, 'add2wl'); return false;"}
            </div>
          {/if}

        {else}

          <div class="buttons-row nopad">
          
            {*----------------------CHANGE TO SELECT OPTIONS BUTTON FOR PRODUCTS WITH OPTIONS-------------*}
            {if $product.variantid || $product.is_product_options}
                                   
            {include file="customer/buttons/button.tpl" type="input" additional_button_class="cart-button add-to-cart-button" button_title="Select Options" title="Select Options"}
            {else}
            
            {include file="customer/buttons/button.tpl" type="input" additional_button_class="cart-button add-to-cart-button" button_title=$smarty.capture.price_button title=$lng.lbl_add_to_cart}
            
            {/if}
            {*--------------------------------------------------------------------------------------------*}
            
            {if $product.appearance.dropout_actions and $js_enabled}
              <div class="button-separator"></div>
              {include file="customer/buttons/add_to_list.tpl" id=$product.productid form_name="orderform_`$product.productid`_`$product.add_date`"}
            {elseif $active_modules.Wishlist && ($config.Wishlist.add2wl_unlogged_user eq "Y" || $login ne "")}
              <div class="button-separator"></div>

This will detect if a product has options and if so display the "Select Options" button, otherwise it will display the price/cart button. And if you click the "Select Options" button, you will be directed to that products' detail page.

Now, since the button no longer displays the product price, I made another modification to show the price. This is also in skin1/customer/main/buy_now.tpl.
Around line 91 where it says:

      <div class="quantity"><strong>{$lng.txt_out_of_stock}</strong></div>

    {elseif $is_matrix_view}

      <div class="quantity-empty"></div>

    {else}

<---------EDIT HERE------------------>      
      <br />
<-----TO HERE--REMOVE THIS <br />----->
      
    {/if}

    {if $product.appearance.buy_now_buttons_enabled}

      {if $js_enabled}

        {if $product.appearance.has_price}

Change it to this: Updated 3/18/10 - See post #6 below

      <div class="quantity"><strong>{$lng.txt_out_of_stock}</strong></div>

    {elseif $is_matrix_view}

      <div class="quantity-empty"></div>

    {else}
      
      {*-------------------DISPLAY PRICE WHEN USING SELECT OPTIONS BUTTON----------------------*}
      {if $product.variantid || $product.is_product_options}
        <table cellspacing="0" class="product-properties">
          <tr>
            <td class="property-name product-price">
              {$lng.lbl_our_price}:                
              <span class="product-price-value">{include file="currency.tpl" value=$product.taxed_price tag_id="product_price"}</span>
            </td>
          </tr>
        </table>
      {/if}
      {*---------------------------------------------------------------------------------------*}

    {/if}

    {if $product.appearance.buy_now_buttons_enabled}

      {if $js_enabled}

        {if $product.appearance.has_price}

This will display the product price above the "Select Options" button and will only display the price like this if the product has options.

I hope this mod helps someone! Please be sure to view my bug fix post (link at the top) as you will need to apply it before you use this modification (No longer needed in X-Cart v4.3.1). I am using Vivid Dreams - Chromo version of X-Cart 4.3.0, I am not positive if the other templates use the same syntax and parameters for button generation, but if not it should be fairly simple to adapt.

Let me know if anyone has any questions and if you use this mod, I'd like to hear what you think. I don't claim to have the most efficient way of doing this, if anyone has any input I'd certainly like to hear it.

Regards,
Gregory

[PC Doctor]

Hoosierglass suggested that I change this mod so that instead of saying 'Our price: $xx.xx' it should say 'Starting from: $xx.xx' (since the product has variants and they may likely change the price it would be better to say 'Starting from' so the customer is not surprised when the price is higher than stated). I liked this idea so I've edited the mod. You can use either method, or you can make it say anything you would like. Here's how to change it:

First, goto X-Cart Admin, click Languages, click the dropdown menu where it says Languages and select your language (ie English). This will display and let you edit all your text and labels. Then go down to the bottom where it says 'Add new entry'. Set the 'Select Topic' menu to 'Labels', then in 'Variable' type 'lbl_from_price' then in 'Value' type 'Starting from' (or whatever you want it to display).

Now you need to edit a little bit of code in skin1/customer/main/buy_now.tpl.
Around line 98 you should see this: (after you've applied my mods and the bug fix from the 1st post)

      {*-------------------DISPLAY PRICE WHEN USING SELECT OPTIONS BUTTON----------------------*}
      {if $product.variantid || $product.is_product_options}
        <table cellspacing="0" class="product-properties">
          <tr>
            <td class="property-name product-price">
              {$lng.lbl_our_price}:                
              <span class="product-price-value">{include file="currency.tpl" value=$product.taxed_price tag_id="product_price"}</span>
            </td>
          </tr>
        </table>
      {/if}
      {*---------------------------------------------------------------------------------------*}

Where it says "{$lng.lbl_our_price}:" you will need to change it to say "{$lng.lbl_from_price}:"

So the result will look like this:

      {*-------------------DISPLAY PRICE WHEN USING SELECT OPTIONS BUTTON----------------------*}
      {if $product.variantid || $product.is_product_options}
        <table cellspacing="0" class="product-properties">
          <tr>
            <td class="property-name product-price">
              {$lng.lbl_from_price}:                
              <span class="product-price-value">{include file="currency.tpl" value=$product.taxed_price tag_id="product_price"}</span>
            </td>
          </tr>
        </table>
      {/if}
      {*---------------------------------------------------------------------------------------*}

Thats it! It will display the contents of lbl_from_price (and then the price) above the Select Options button, so you can edit this language variable however you would like (you could say 'Starting at' or 'Price' or 'Price starting from' or whatever.) I hope this helps!

Gregory

[gizmo]

One thing though, what if users set there cart to "Not show Add to cart button within that Part"

As there are a few users including me, who like buyers to view full description and to not show "Add to cart" At Products List?

But this being said it works for you as it's your own personal site, unless if disabled "Show buy now on products list" your mod still appears?

[hoosierglass]

I finally got this to work for me but had to move where I put things.
The first part of the code had to go under <div class="buttons-row"> not <div class="buttons-row nopad">

Then for the price I had to swith this to just after {elseif $is_matrix_view}

Everything works great now.

Thanks for all your work on theis one Gregory.

[PC Doctor]

Gizmo,
you are probably right, if you do not have certain options enabled or disabled then the mod will probably not show. You may have to put the code in products.tpl or products_list.tpl if you are not using the 'Add to Cart' buttons (I believe).

hoosierglass,
Not a problem, I'm glad to hear that you got it working. I'd like to see X-Cart officially support something like this in future versions (that would work independent of how all the 'Add to Cart' button settings are set.) Your options are probably set differently than mine, hence you having to put the code inside other {if} statements. Actually it's probably because of your 3 column setup and/or the no-description setup. Thanks for posting where you had to put the code to get it working.

For anyone else trying to use this code, there are about 5 or more {if} statements that are used in buy_now.tpl depending on which options you have set. You may have to try the other ones to get the mod to work properly. Just type in the word 'test' in each {if} statement one at a time to figure out where you'll need to put the code. When 'test' appears near the buttons when you refresh, you know that it's running through that {if} statement to build the page and that's where you need to put the code.

[PC Doctor]

I dug a little deeper into this mod and found out that apparently there are two types of product options - product variants and product options. Why they do it this way I do not know but this may be a partial reason if you have problems getting this mod to work.

When you add a product option, there are three 'Option Group Types' called 'Price Modifier', 'Product Variant' and 'Custom Text Field'. Price Modifier and Custom Text Field are both considered product options, and Product Variant is considered a product variant. I changed my options from 'Product Variant' to 'Price Modifier' and thats when I realized my mod wasn't working completely right. There's a couple reasons I changed the option type, one because X-cart says it's better to use Price Modifier instead of Product Variant if possible because Product Variant takes longer to process and is harder on the server. And two I just didn't like the way Xcart stores Product Variants, it seems very confusing and over complicated, probably why it's so much harder on the server. I changed to Price Modifier but simply didn't code it to change any price so in essence it's still just a variant.

I will update the code above, but using the original code:

{if $product.variantid}

will only detect product variants (if you select 'Product Variant' as the 'Option Group Type'). But then the custom 'Select Options' button would not display if your product option was set as a Price Modifier or Custom Text Field.

I found out using webmaster mode there are a couple ways to detect if there are product options or variants. To detect options, use $product.is_product_options and to detect variants use either $product.variantid or $product.is_variants so here is the update to this select button mod (I will update the original post as well - 3/18/2010)

Change:

{if $product.variantid}

To:

{if $product.variantid || $product.is_product_options}

Do this in both places above.

This will now allow any product you have that has any type of option to show a 'Select Options' black button and directly above it say 'Starting from: $xx.xx', instead of the usual price in the black button. Hope this helps!

[Freakmode]

For some reason when I try this on our 4.3.1 store it shows the "select options" button correctly but has now removed the "add to cart" button for non option items.

Any ideas?

[PC Doctor]

Hmm, check the syntax, make sure you typed everything correctly.. make sure you have all { and }'s.

Where it says {if product.variantid || ... the next line says {include file="customer.... this line makes it display the select options button, and then under that the {else} and then {include file="cust... is how it displays the regular add to cart buttons. Basically, if there are product variants or options, show select options button, or else (no variants or options) show the add to cart button. So yeah, check that you typed everything correctly.

If it still doesn't work right, check the following options:

Admin > General Options > Appearance Options > Under Displaying Products, Check 'Enable Buy Now and Add to Wish List buttons in the product list'
Admin > General Options > Module Options - Product Options > Check 'Redirect a customer who clicks the 'buy now' or 'add to wishlist' buttons of a product with options to the product details page'

That's all I can think of for now, let me know if that helps..