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.

enter image description here

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

So please suggest me any solution.

hmm thanks for suggestion currently i work on it. I know need js because i have to display option when i select it. — Jalpesh Patel, Sep 05 '13 at 06:25
@KeyurShah i ask you in the last comment on your answer please check it. — Jalpesh Patel, Oct 04 '13 at 06:23

score 1 · Answer 1 · answered Sep 05 '13 at 06:33

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

answered Sep 05 '13 at 06:33

Keyur Shah

11,043
4
29
48

**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. – Jalpesh Patel Sep 05 '13 at 07:13
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 – Jalpesh Patel Sep 05 '13 at 07:14
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. – Jalpesh Patel Sep 05 '13 at 09:34
Have you check this solution for more than two product? – Jalpesh Patel Sep 05 '13 at 09:38

score 1 · Answer 2 · edited Aug 27 '19 at 00:36

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

score 1 · Answer 3 · answered Oct 25 '13 at 06:18

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

score 1 · Answer 4 · answered Mar 06 '16 at 14:55

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

score 1 · Answer 5 · answered Jul 26 '18 at 06:26

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

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?](https://stackoverflow.com/help/how-to-answer). Thanks — sɐunıɔןɐqɐp, Jul 26 '18 at 06:47

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

5 Answers5