Magento - reloadPrice() modifications

Magento - reloadPrice() modifications - javascript

My client needs to make an operation on products custom options.
Using Magento CE, I create a product, and give it some custom options from within the built-in left hand side menu in "Manage products" > "Add new product", such as "mm" (millimeters) and "mt" (meters)
This product will have both radio options and a textbot input.
Let's say we have
Base price: 0
MM:
Radio option A which costs 0,9
Radio option B which costs 1,2
Radio option C which costs 2,3
MT:
Textbox value = unknown yet
Let's say user chooses Radio option B and enters 10 in the textfield
Price should be updates as such:
1,2 * 10 + 0
Which is
radio value cost * textbox value + base price
Is there any way to tell the code to take the value of the radio button, multiply it for the value of the textbox and sum it all to the base price?
Where could I look to see the current behavior of a product's custom options?
EDIT
I saw that whenever a value is selected, the reloadPrice() function is called.
I thought to check if both inputs are radio and text, then get the value of the text and multiply it for the value of the radio.
Is that right? Can you point me better?

This helps me, I hope this will also helps you
initialize : function(config){
this.config = config;
this.reloadPrice();
document.observe("dom:loaded", this.reloadPrice.bind(this));
},
reloadPrice : function(){
price = new Number();
config = this.config;
skipIds = [];
skipIds = [];
relatedword = [];
relatedvalue = [];
relatedid = [];
counter_each=0;
counter=1;
first=0;
areaValue=1;
submitbutton=true;
$$('body .product-custom-option').each(function(element){
var optionId = 0;
element.name.sub(/[0-9]+/, function(match){
optionId = match[0];
});
if (this.config[optionId]) {
if (element.type == 'checkbox' || element.type == 'radio')
{
if (element.checked)
{
if (config[optionId][element.getValue()])
{
<?php if(Mage::getVersion() >= 1.7): ?>
price += parseFloat(config[optionId][element.getValue()].price);
<?php else: ?>
price += parseFloat(this.config[optionId][selectOption.value]);
<?php endif; ?>
}
}
}
}

reloadPrice() does not update product price at server level. One way to do this product price update is by implementing checkout_cart_product_add_after event.
Do you custom logic at client level with javascript in detail page. Assign this value to some hidden variable under the form product_addtocart_form. A better way is to save to session to reduce client side vulnerabilities or you can find your own better way. Or Implement your login only in Observer method. Whatever you find secure.
Rewrite the class Mage_Checkout_Model_Cart to modify as,
public function addProduct($productInfo, $requestInfo=null)
{
...
Mage::dispatchEvent('checkout_cart_product_add_after', array('quote_item' => $result, 'product' => $product,'request_data'=>$request));
...
}
In your yourmodule/etc/config.xml:
<config>
...
<frontend>
...
<events>
<checkout_cart_product_add_after>
<observers>
<unique_name>
<class>modulename/observer</class>
<method>customPrice</method>
</unique_name>
</observers>
</checkout_cart_product_add_after>
</events>
...
</frontend>
...
</config>
And then create an Observer class at yourmodule/Model/Observer.php
class <namespace>_<modulename>_Model_Observer
{
public function customPrice(Varien_Event_Observer $observer)
{
// Get the quote item
$item = $observer->getQuoteItem();
$request=$observer->getRequestData();
// Ensure we have the parent item, if it has one
$item = ( $item->getParentItem() ? $item->getParentItem() : $item );
// Load the custom price
$price = "custom price logic";//whatever from your hidden value or by some other mean.
// Set the custom price
$item->setCustomPrice($price);
$item->setOriginalCustomPrice($price);
// Enable super mode on the product.
$item->getProduct()->setIsSuperMode(true);
}
}
For more information check here

Related

Value Given when tick box is checked :Undefined Array Key

When check box is selected, it copies value from customer to invoice party. So I am assuming that when check box selected. value is automatic. but it is saying undefined array key.
function EnableDisableTextBox(tickSame) {
var shipper = document.getElementById("iP");
var customer = document.getElementById("consignee").value;
document.getElementById("iP").value=customer;
shipper.disabled = tickSame.checked ? true : false;
if (shipper.enabled) {
shipper.blur();
}
}

I hope you are submitting the form to the server side. Disabled inputs will not submit data when submitting the form. Instead you can use readonly attribute to make to non editable (Even you can make it look like disabled with css)
function EnableDisableTextBox(tickSame) {
var shipper = document.getElementById("iP");
var customer = document.getElementById("consignee").value;
document.getElementById("iP").value=customer;
shipper.readonly= tickSame.checked ? true : false;
if (shipper.readonly) {
shipper.blur();
}
}

How to populate the form fields based on drop down selection?

I have a form with input fields: name and description. The name field is a drop down. based on the name selected the description needs to change. I have made the drop down to populate the names already.
<form>
<select name="name" >
#foreach($books as $book)
<option value="{{$book->name}}">{{$book->name}}</option>
#endforeach
</select>
how do i change the description field based on the selected drop down?
<input type="text name="description" value="{{ $book->description }}>

Updated version:
You should store somewhere all $books as JavaScript variable. After that when you select name of the book, you can find book object (with description and other fields) and do whatever you want with them. You can achive by implementing these steps:
1) Make sure you have jQuery on your page
2) Add this JS code somewhere on the page (see comments)
<script type="text/javascript">
// 2.1 "Store" all books in some place on the page, for example, you can pass PHP variable into JS variable like this
var books = <?= json_encode($books); ?>;
/*
* 2.2 Create function for search book by its name
* (if each value of the field "name" in the $books is unique) or by some unique field, for example, "id"
*/
// get book by name
var getBookByName = function (bookName) {
if (typeof books === 'object') {
for (var key in books) {
if (typeof books[key].name !== 'undefined' && books[key].name === bookName) {
return books[key];
}
}
}
return false;
}
$(document).ready(function () {
// add event listener on the select with the attribute name="name"
$('select[name="name"]').on('change', function (e) {
// get book by selected name of the book
var selectedBook = getBookByname($(e.target).find('option:selected').text());
if (selectedBook) {
// set new value for the input with the attribute name="description"
$('input[name="description"]').val(selectedBook.description);
}
// we can't find book by it's name
else {
alert("Sorry, we can find description for this book");
}
});
});
</script>

Change Label by value in dropdown

I have a BuddyPress profile form that currently has fields being shared between different member types, so they can be forced to be mandatory.
I would like field A (highlighted) to be able to change the labels/legends highlighted with B, so that once a user selects a value I can show the relevant text (which needs to change for each drop down value)
I already have PHP code to control these labels AFTER the user has selected a member type, I just need to know what to before hand, before they save these values.
The first field is field_6.
The second is field_19
The third is field_505
The fourth is field_56
I believe a javascript piece of code would make this work appropriately, but is not my strong suit programming language wise.
UPDATE:
The requirements have since changed, but I have found the solution, and sharing for others to use. This also includes changing labels on an input box as well.
If anyone has a better way of writing this code, happy to take advice
$(document).ready(function(){
$('#field_6').change(
function () {
var membertype = $('option:selected', this).text();
var cphmtp = document.getElementsByClassName("field_56");
var cphmtp_label = cphmtp[0].getElementsByTagName("label");
var age_ranges = document.getElementsByClassName("field_505");
var age_ranges_legend = age_ranges[0].getElementsByTagName("legend");
var age_ranges_option = document.getElementById("field_1120_0");
if (membertype == 'Babysitter or Nanny') {
$("#field_56").val("");
cphmtp_label[0].innerHTML = "Cost Per Hour (required)";
$('.field_56').show();
age_ranges_legend[0].innerHTML = "Age ranges of children able to sit (required)";
$("label[for='field_1120_0']").html('<input type="checkbox" name="field_505[]" id="field_1121_0" value="I don\'t mind">I don\'t mind');
$('.field_505').show();
} else if (membertype == 'Parent') {
$("#field_56").val("1");
$('.field_56').hide();
age_ranges_legend[0].innerHTML = "Age that my children are (required)";
$("label[for='field_1120_0']").html('<input type="checkbox" name="field_505[]" id="field_1121_0" value="I don\'t mind">I\'d rather not say');
$('.field_505').show();
} else {
$('.field_56').hide();
$('.field_505').hide();
}
});
});

passing primary key instead of attribute on submit

I have an input tag that takes a users input that calls an AJAX dynamically outputs suggestions from my database. The issue is I want to store the primary key associated with that attribute.
I have figured out a way set it to the primary key when the user selects a value; however I would rather only have the attribute displayed on the front end. Essentially what I was thinking about doing was using the option tag and setting the value to the primary key, but after reading the documentation for it, that doesnt look like it would work.
HTML:
<input type="text" id = "zip_id" class="tftextinput2" autocomplete = "off" name="zip" placeholder="Zip Code" onkeyup = "autocompleter()">
<ul id = "zip_codes_list_id"></ul>
JS:
function autocompleter()
{
var min_length = 1; // min caracters to display the autocomplete
var keyword = $('#zip_id').val();
if (keyword.length >= min_length) {
$.ajax({
url: 'ajax_refresh.php',
type: 'POST',
data: {keyword:keyword},
success:function(data){
$('#zip_codes_list_id').show();
$('#zip_codes_list_id').html(data);
}
});
} else {
$('#zip_codes_list_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item(item)
{
// change input value
$('#zip_id').val(item);
// hide proposition list
$('#zip_codes_list_id').hide();
}
PHP:
<?php
//connect to db here
$keyword = '%'.$_POST['keyword'].'%';
$sql = "SELECT * FROM zip_codes WHERE zip LIKE (:keyword) ORDER BY zip_codes_id ASC LIMIT 0, 10";
$query = $pdo->prepare($sql);
$query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs)
{
// put in bold the written text
$zip = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['zip']);
// add new option
// echo '<li onclick="set_item(\''.str_replace("'", "\'", $rs['zip']).'\')">'.$zip.'</li>'; (this one only passes the attribute)
echo '<li " onclick="set_item(\''.str_replace("'", "\'", $rs['zip_codes_id']).'\')">'.$zip.'</li>';
//this one passes the attribute but changes the displayed value to the primary key.
}
?>
As you can see from the PHP file, what I am trying to do is pass in the primary key value but keep the displayed value the attribute. I am not sure how to do that. Should I be using the UL tag?

The issue in your code is that you try to the zip_id value for the input, but this input contains the zip field value - I assume it's the textual representation. There are a few ways how you could save the zip_id on the frontend - either store it in the model (if you're using some MVC framework, but I gues it's not the case) or simply add a hidden input field:
<input type="hidden" id="actual_zip_id" name="zip_id">
And
function set_item(item)
{
// change input value
$('#actual_zip_id').val(item);
// hide proposition list
$('#zip_codes_list_id').hide();
}
UPD
Speakng about the entire idea of autocompleting zip codes, it looks pretty nasty, as pointed by Darren Gourley (check the comments).
So you'd rather validate it with regex first, and then do your db-related logic like that:
$('#zip_id').on('change', function(){
// your stuff
})
Best regards, Alexander

How to populate a dropdown list based on values of the another list?

I want to implement a search box same as this, at first, just first dropdown list is active once user selects an option from the first dropbox, the second dropdown box will be activated and its list will be populated.
<s:select id="country" name="country" label="Country" list="%{country} onchange="findCities(this.value)"/>
<s:select id="city" name="city" label="Location" list=""/>

Jquery chained plugin will serve your purpose,
https://plugins.jquery.com/chained/
usage link - http://www.appelsiini.net/projects/chained
this plugin will chain your textboxes.

Try this code where based on your needs you have to populate it with your options:
var x;
$('#pu-country').on('change', function () {
if (this.value != '0') {
$('#pu-city').prop('disabled', false);
$('#pu-city').find("option").not(":first").remove();
$('#pu-location').prop('disabled', true);
$('#pu-location').val("Choose");
switch (this.value) {
case 'A':
x = '<option value="A.1">A.1</option><option value="A.2">A.2</option><option value="A.3">A.3</option>'
}
$('#pu-city').append(x)
} else {
$('#pu-location').prop('disabled', true);
$('#pu-location').val("Choose");
$('#pu-city').prop('disabled', true);
$('#pu-city').val("Choose");
}
});
$('#pu-city').on('change', function () {
if (this.value != '0') {
$('#pu-location').prop('disabled', false);
$('#pu-location').find("option").not(":first").remove();
switch (this.value) {
case 'A.1':
x = '<option value="A.1.1">A.1.1</option><option value="A.1.2">A.1.2</option><option value="A.1.3">A.1.3</option>'
break;
case 'A.2':
x = '<option value="A.2.1">A.2.1</option><option value="A.2.2">A.2.2</option><option value="A.2.3">A.2.3</option>'
break;
case 'A.3':
x = '<option value="A.3.1">A.3.1</option><option value="A.3.2">A.3.2</option><option value="A.3.3">A.3.3</option>'
break;
}
$('#pu-location').append(x)
} else {
$('#pu-location').prop('disabled', true);
$('#pu-location').val("Choose");
}
});
I have also set up and a demo to see the functionallity with more options.
FIDDLE

Your code should be something like this:
$(country).change(function(){
var l=Document.getElementByID("country");
for(i=0;i<=l.length;i++)
{
if(l.options[i].selected?)
{
text_array=[HERE YOU NEED TO ADD THE CITIES OF l.options[i].text];
val_array=[HERE YOU NEED TO ADD THE VALUES OF THECITIES OF l.options[i].text];
}
}
var c=Document.getElementByID("city");
c.options.text=[];
c.options.value=[];
//You now should have an empty select.
c.options.text=text_array ;
c.options.value=val_array ;
});
As I don't know, what kind of DB you use, to have the cities connected to their countrys, I can't tell you, what to put into the uppercase text...

Ciao j888, in this fiddle i tried to reconstruct the same system as the site you provided the link
the number of states cityes and locality is less but the concept remains the same
If you want to add a new state you must enter a new html options in select#paese with an id.
Then you have add in obj.citta a property with this id name and an array of cityes for a value.
The same thing for obj.localita where you will create an array of arrays.
The jQuery code you need is
<script type="text/javascript">
$(document).ready(function(){
var obj={
citta:{ //value is the same of option id
albania:['Durres','Tirana'],
austria:['Vienna','innsbruck','Graz'],
},
localita:{//for every city create a sub array of places
albania:[['località Durres1','località Durres 2'],['località Tirana','località Tirana 2']],
austria:[['località Vienna','località Vienna 2'],['località innsbruck','località innsbruck 2'],['località Graz','località Graz 2','località Graz 3']],
}
}
$('#paese').on('change',function(){
$('#località').attr('disabled','disabled').find('option').remove()
var quale=$(this).find('option:selected').attr('id')
var arr=obj.citta[quale]
if(arr){
$('#citta').removeAttr('disabled')
$('#citta option.added').remove()
for(i=0;i<arr.length;i++){
$('<option class="added">'+arr[i]+'</option>').appendTo('#citta')
}
}
})
$('#citta').on('change',function(){
var ind=($(this).find('option:selected').index())-1
var quale=$('#paese').find('option:selected').attr('id')
var arr=obj.localita[quale][ind]
if(arr){
$('#località').removeAttr('disabled')
$('#località option.added').remove()
for(i=0;i<arr.length;i++){
$('<option class="added">'+arr[i]+'</option>').appendTo('#località')
}
}
})
})
</script>
If this solution does not suit your needs, i apologize for making you lose time.

Hi i have done this for license and its dependent subject in yii 1.
The license dropdown
//php code
foreach($subject as $v) {
$subj .= $v['licenseId'] . ":" . $v['subjectId'] . ":" . $v['displayName'] . ";";
}
Yii::app()->clientScript->registerScript('variables', 'var subj = "' . $subj . '";', CClientScript::POS_HEAD);
?>
//javascript code
jQuery(document).ready(function($) {
//subject. dependent dropdown list based on licnse
var ty, subjs = subj.split(';'), subjSel = []; //subj register this varible from php it is
for(var i=0; i<subjs.length -1; i++) { //-1 caters for the last ";"
ty = subjs[i].split(":");
subjSel[i] = {licId:ty[0], subjId:ty[1], subjName:ty[2]};
}
//dropdown license
jQuery('#license#').change(function() {
$('#add').html(''); //clear the radios if any
val = $('input[name="license"]:checked').val();
var selectVals = "";
selectVals += '<select>';
for(var i=0; i<subjSel.length; i++) {
if(subjSel[i].licId == val) {
if(subjSel[i].subjId *1 == 9) continue;
selectVals += '<option value="'+subjSel[i].subjId+'">'+subjSel[i].subjName+'</option>';
}
}
selectVals += '</select>';
$("#subject").html(selectVals);
});
});

You seem to be asking two questions:
QUESTION 1. How to have a disabled select box (the second and third select boxes in the case of your example) which is activated upon the selection of an option from the first select box.
ANSWER 1:
simply use the disabled=true/false as below...
<select id="country" name="country" label="Country" onchange="document.getElementById('city').disabled=false; findCities(this.value)"/>
<select id="city" name="city" label="Location" disabled=true/>
NOTE: I changed "s:select" to "select" on the basis that your question does not make reference or tag the Struts framework that uses this syntax.
QUESTION 2: How to populate the second select box when a selection is made in the first.
ANSWER 2: There are many ways to do this, and the choice depends on where you have the data to populate the lists with. In the case of your Rentalcars example, if you chose Barbados, the browser sends an ajax GET request to "http://www.rentalcars.com/AjaxDroplists.do;jsessionid=5DCBF81333A88F37BC7AE15D21E10C41.node012a?country=Barbados&wrapNonAirports=true" -try clicking on this link and you will see what that request is sending back. This '.do' address is a server side file of a type used with the Struts framework I mentioned above.
A more conventional approach, which would be included in your function findCities(country)would be to send an AJAX request to a PHP script which queries a database and sends back an array of place names to the browser. The AJAX javascript code includes instructions as to what to do with the response. Without knowing more about where you want to store your list, giving an example of this would most likely not be useful.
Alternatively, the whole list of places could be included in the javascript script as an array (as demonstarated by Devima, above), in a text document on the server as comma separated values, or you could save it to a browser database like WebSQL or IndexedDB if offline use would be useful.
When you have got your list, probably as an array of values, you could save the array as a variable eg. var cities=result (in the case of a simple ajax request). You will then need to iterate through cities, for example
for (var i = 0; i < cities.length; i++){
var place=cities[i];//an individual city name
document.getElementById("city").innerHTML+="<option value='" + place + "'>" + place + "</option>";//adds an 'option' with the value being the city name and the text you see being the city name
}

IMO this is the base case AngularJS was designed to completely alleviate. Check it out!

Develop Reference

JavaScript is the programming language of the Web.

Magento - reloadPrice() modifications - javascript

Related

Value Given when tick box is checked :Undefined Array Key

How to populate the form fields based on drop down selection?

Change Label by value in dropdown

passing primary key instead of attribute on submit

How to populate a dropdown list based on values of the another list?

Categories

Resources