Jump to content

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

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...