Jump to content

Archived

This topic is now archived and is closed to further replies.

bsmither

Dynamic Price Update in CC5 Skins

Recommended Posts

The following are code changes to a skin template and the common javascript that all CC5 skins use. This gives the same functionality as the CC6 Foundation skin.

This requires CC6. CC6 makes new features and functions available to the skin and, while CC6 can use CubeCart's CC5 skins, the skin must be coded to display these new features and functions. Foundation is coded as such, but CubeCart's CC5 skins have yet to be updated. (I am intentionally not mentioning any third-party CC5 skin as I haven't had much exposure to their inner workings.)

The Dynamic Price Update simply gathers the option price differential amounts, and sums the total into the product's base price. This amount is ajax'd to CubeCart where this value is run through the currency stringy-thingy. That is, a hidden 1234.56 is sent out and comes back properly formatted for the currency/locale being used.

Some CubeCart users have expressed a desire to have the display of prices be just a bit more complete, such as having the option selector show the final total product price within the selector mechanism. These edits do not do that. (I am not saying it cannot be done. But when it is, dynamic stock levels and out-of-stock indicators can also be dynamically updated.)

The following edits have been developed against the CC5 skin Kurouto. These same edits should be applicable to any other CC5 skin.

In the CC5 skin template file content.product.php:

Find:
    {foreach from=$option.values item=value}
    <option value="{$value.assign_id}">{$value.value_name}{if $value.price} ({$value.symbol}{$value.price}){/if}</option>
    {/foreach}

Change to:
    {foreach from=$option.values item=value}
    <option value="{$value.assign_id}"
data-price="{$value.decimal_price}"
    >{$value.value_name}{if $value.price} ({$value.symbol}{$value.price}){/if}</option>
    {/foreach}


Find:
    {if $option.type == '1'}
    <input type="text" name="productOptions[{$option.option_id}][{$OPT.assign_id}]" id="option_{$option.option_id}" class="textbox {if $option.required}required{/if}"  />
    {elseif $option.type == '2'}
    <textarea name="productOptions[{$option.option_id}][{$OPT.assign_id}]" id="option_{$option.option_id}" class="textbox {if $option.required}required{/if}"></textarea>
    {/if}

Change to:
    {if $option.type == '1'}
    <input 
data-price="{$option.decimal_price}"
    type="text" name="productOptions[{$option.option_id}][{$OPT.assign_id}]" id="option_{$option.option_id}" class="textbox {if $option.required}required{/if}"  />
    {elseif $option.type == '2'}
    <textarea
data-price="{$option.decimal_price}"
    name="productOptions[{$option.option_id}][{$OPT.assign_id}]" id="option_{$option.option_id}" class="textbox {if $option.required}required{/if}"></textarea>
    {/if}


Find (maybe near the top of the file):
    {if $PRODUCT.ctrl_sale}
    <h1><span class="price_previous">{$PRODUCT.price}</span> <span class="price_sale">{$PRODUCT.sale_price}</span></h1>
    {else}
    <h1>{$PRODUCT.price}</h1>
    {/if}

Change to:
    {if $PRODUCT.ctrl_sale}
    <h1><span class="price_previous"
id="fbp" data-price="{$PRODUCT.full_base_price}"
    >{$PRODUCT.price}</span> <span class="price_sale"
id="ptp" data-price="$PRODUCT.price_to_pay}"
    >{$PRODUCT.sale_price}</span></h1>
    {else}
    <h1
id="ptp" data-price="{$PRODUCT.price_to_pay}"
    >{$PRODUCT.price}</h1>
    {/if}


Find (at the top):
<form action="{$VAL_SELF}" method="post" class="addForm">

Change to:
<form action="{$VAL_SELF}" method="post" class="addForm add_to_basket">

In /js/common.js:

Find (maybe near line 430):

});

var new_option = 0;

function updateStriping(element) {



Change to:

// NEW
    if($('#ptp').length > 0 && $('[name^=productOptions]').length > 0) {
        price_inc_options();
        $("[name^=productOptions]").change(function() {
            price_inc_options();
        });
    }
// FIN

});

// NEW
function price_inc_options() {
    var action = $('form.add_to_basket').attr('action');
    var total = 0;
    var ptp = parseFloat($('#ptp').attr("data-price"));
    var fbp = parseFloat($('#fbp').attr("data-price"));
    var ptp_original = ptp;
    var fbp_original = fbp;
    var parts = action.split("?");
    
    if (parts.length > 1) {
        action += "&";
    } else {
        action += "?";
    }
    action += '_g=ajax_price_format&price[0]=';

    $("[name^=productOptions]").each(function () {
        if($(this).is('input:radio') && $(this).is(':checked')) {
            total += parseFloat($(this).attr("data-price"));
        } else if ($(this).is('select') && $(this).val()) {
            total += parseFloat($(this).find("option:selected").attr("data-price"));
        } else if (($(this).is('textarea') || $(this).is('input:text')) && $(this).val() !== '') {
            total += parseFloat($(this).attr("data-price"));
        }
    });
    ptp += total;

    if($('#fbp').length > 0) {
        fbp += total;
        $.ajax({
            url: action + ptp + '&price[1]='+ fbp,
            cache: true,
            complete: function(returned) {
                var prices = $.parseJSON(returned.responseText);
                $('#ptp').html(prices[0]);
                $('#fbp').html(prices[1]);
            }
        });
    } else {
        $.ajax({
            url: action + ptp,
            cache: true,
            complete: function(returned) {
                var prices = $.parseJSON(returned.responseText);
                $('#ptp').html(prices[0]);
            }
        });
    }
}
// FIN

var new_option = 0;

function updateStriping(element) {

 

Share this post


Link to post
Share on other sites

I actually did this for a store yesterday via tech support. This should work. Great contribution but be careful as the form class in older skins may be different and need changing.

$('form.add_to_basket')

Share this post


Link to post
Share on other sites

×
×
  • Create New...