Magento : How to display selected custom option price in product detail page In price box

Question

I want to display custom option price with name in price box in product detail page.

I also try this link but not getting success this is link i use

So please suggest me any solution.

Nigrosine

i think this task can be done using javascript – Tucci

hmm thanks for suggestion currently i work on it. I know need js because i have to display option when i select it. – Nigrosine

@KeyurShah i ask you in the last comment on your answer please check it. – Nigrosine

Answer 1

first of all you have to put button calculateprice

then onclick of calculateprice you have to call function chkprice()

        function chkpice()
    {
        var a=document.getElementById("options_1_text").value; 
        var b=document.getElementById("options_2_text").value; 
        var c=document.getElementById("options_3_text").value; 
        var d=document.getElementById("options_4_text").value; 
        var e=<?php echo $_product = $this->getProduct()->getPrice()?>;       
        var f=(a+b+c+d)+e;
        var e=document.getElementById(('product-price-'+<?php echo $_product = $this->getProduct()->getId()?>)).innerHTML;
        $('product-price-'+<?php echo $_product = $this->getProduct()->getId()?>).innerHTML =''+e.replace(<?php echo $_product = $this->getProduct()->getPrice()?>,d)+'</span>';
    }

insted of options_1_text,options_2_text,options_3_text,options_4_text put your id it will get your result

Tucci

insted of options_1_text,options_2_text,options_3_text,options_4_text put your id it will get your result but id is genrated dynamically by magento so i cant put id here. If you check that custom option in magento has diffrent id for each product and i need this facility in each and every product so we can not put id here. – Nigrosine

Please create two product in single magento and assign set custom option and check that is your solution is work? I checked that and its not work – Nigrosine

I already told you in above comment dropdown id is dynamically genrated by magento. Same If have have 4 dropdown for product A and 4 dropdown for product B. if i use your logic than i have to set 8 getElementById() and i have 5000 product so this is not possible fom me to use this kind of script. – Nigrosine

Have you check this solution for more than two product? – Nigrosine

Answer 2

Open page: app\code\core\Mage\Catalog\Block\Product\View\Options.php find protected function _getPriceConfiguration($option) function and add $data['title'] = $option->getTitle(); before return $data; statement.

Now, open app\design\frontend\YOUT_TEMPLATE_PATH\default\template\catalog\product\view\options.phtml

Add <div id="optiontitle"></div> top of the page.

Then find this:

$A(element.options).each(function(selectOption){
    if ('selected' in selectOption && selectOption.selected) {
        if (typeof(configOptions[selectOption.value]) != 'undefined') {
            curConfig = configOptions[selectOption.value];

        }
    }
});

Replace by:

$A(element.options).each(function(selectOption){
    if ('selected' in selectOption && selectOption.selected) {
        if (typeof(configOptions[selectOption.value]) != 'undefined') {
            curConfig = configOptions[selectOption.value];
            optionTitle = curConfig.title + "<br>";
            $("optiontitle").insert(optionTitle);
        }
    }
});

Tadpole

Answer 3

First you do the function that takes care of updating the charges:

function updateCharges(){
   var tmpText="";
   $("input[type='select']").each(function{
   tmpText+=$("#"+this.id+"option:selected").text()+"<br>";    
   });
   $("#detailDiv").html(tmpText)
}

Then you just bind the selects to that function

$("input[type='select']").change(updateCharges)

Now you just have to make sure to include in your template a <div id="detailDiv"></div>

I would just create a custom block with the above code and place it inside the product detail page. Also you should check the selectors used, they will look for absolutelty ALL selects on the page, so thats not what you may want. But its just a matter of firebug-ging untill the aproppiate selector is found

Cloud

Answer 4

Recently I need something similar. Perhaps it is helpful for you.

Block class:

class Foo_Bar_Block_Baz extends Mage_Catalog_Block_Product_View {    
    protected function getOptionDataCollection($options) {
        $optionDataCollection = array();
        foreach ($options as $option) {
            $optionDataCollection[$option->getData('option_id')] = array_filter($option->getData());
        }
        return $optionDataCollection;
    }

    protected function getOptionValueDataCollection($options) {
        $optionValueDataCollection = array();
        foreach ($options as $option) {
            $optionType = $option->getType();
            if ($optionType == 'drop_down') {
                $optionValues = $option->getValues();
                foreach ($optionValues as $valueItem) {
                    // here you could also use the option_type_id (in my case  I needed the sku)
                    $optionValueDataCollection[$valueItem->getData('sku')] = array_filter($valueItem->getData());
                }
            } else {
                //Mage::throwException('Unexpected input. Processing for this optionType is not implemented');
            }
        }
        return $optionValueDataCollection;
    }

    public function getOptionsJson() {
        $data = array(
            'options' => array(),
            'optionValues' => array()
        );
        $options = $this->getProduct()->getOptions();
        array_push($data['options'], $this->getOptionDataCollection($options));
        array_push($data['optionValues'], $this->getOptionValueDataCollection($options));
        $optionsJson = json_encode($data);

        return $optionsJson;
    }
}

Template

<script id="optionsJson" type="application/json">
    <?php echo $this->getOptionsJson(); ?>
</script>

JS

var json = JSON.parse(document.getElementById("optionsJson").innerHTML),
    options = json.options[0],
    optionValues = json.optionValues[0];

    optionValues['<optionValueSKU>'].default_title
    optionValues['<optionValueSKU>'].price

Cara

Answer 5

        -----------Create controller-------------

         <?php
class Magento_Guys_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
        echo "Thank you !";
    }
     public function genCartAction()
    {
        $id = $this->getRequest()->getParam('pid');
        $_product = Mage::getModel('catalog/product')->load($id);
        $buy = Mage::helper('checkout/cart')->getAddUrl($_product);
        echo $qty = (int) Mage::getModel('cataloginventory/stock_item')->loadByProduct($_product)->getQty();

        //echo $id;
        //echo $this->getRequest()->getParam('id');;
    }
}
?>

    ----------------Change Add to cart code-------------------

    <?php if ($_product->isAvailable()): ?>
              <b class="available_quanity" style="display: none">Available Quantity :</b> <span id="simplestock" class="simplestock">Please select a color to view the quantity</span>
            <?php endif; ?>
            </div>
            <?php if(!$_product->isGrouped()): ?>
            <div class="qty">
                <label for="qty"><?php echo $this->__('Qty:') ?></label>
                  <?php $i = 0; ?>
                  <select id="qty" class="input-text" name="qty" style="width:50px;">
                    <?php while($i<=(int) Mage::getModel('cataloginventory/stock_item')->loadByProduct($_product)->getQty()):?>
                      <option value="<?php echo $i; ?>"><?php echo $i++; ?></option>
                    <?php endwhile; ?>
                  </select>
            </div>
            <?php endif; ?>

    ----------------Add Ajax for get Quantity---------------

    <script>
    jQuery(document).ready(function() {
        jQuery(".product-options select[id^='attribute']").on('change', function() {
            var id = getSimpleProductId();
            var qty = "";
            jQuery('.available_quanity').show();
            jQuery("#fancybox-loading").show();
            jQuery.ajax({      
                type: "POST",
                data: 'pid=' + id,
                url:'https://www.thewirelesscircle.com/guys/index/genCart',
                success:function(response){ 
                    if (response) {
                        qty = response;
                        var x = document.getElementById("qty");
                        var i;
                        removeOptions(x);
                        for(i=1;i<=qty;i++) {
                            var option = document.createElement("option");
                            option.text = i;
                            option.value = i;
                            x.add(option);
                        }
                    }
                    jQuery("#fancybox-loading").hide();
                }
            });

        });
    });

    </script>

    ---------------Get Selected Option Id in Magento-------------------

    <script type="text/javascript">
        function removeOptions(selectbox)
        {
            var i;
            for(i = selectbox.options.length - 1 ; i >= 0 ; i--)
            {
                selectbox.remove(i);
            }
        }
        function getSimpleProductId() {
            var productCandidates = [];
            jQuery.each(spConfig.settings, function (selectIndex, select) {
                var attributeId = select.id.replace('attribute', '');
                var selectedValue = select.options[select.selectedIndex].value;

                jQuery.each(spConfig.config.attributes[attributeId].options, function(optionIndex, option) {

                    if (option.id == selectedValue) {
                        var optionProducts = option.products;

                        if (productCandidates.length == 0) {
                            productCandidates = optionProducts;
                        } else {
                            var productIntersection = [];
                            jQuery.each(optionProducts, function (productIndex, productId) {
                                if (productCandidates.indexOf(productId) > -1) {
                                    productIntersection.push(productId);
                                }
                            });
                            productCandidates = productIntersection;
                        }
                    }
                });
            });
            return (productCandidates.length == 1) ? productCandidates[0] : null;
        }
    </script>

Inductive

Welcome to Stack Overflow! Please don't answer just with source code. Try to provide a nice description about how your solution works. See: How do I write a good answer?. Thanks – Swanky