Showing results for 
Search instead for 
Did you mean: 

Plugin to Change Price at Frontend Product in Magento 2 (Jquery/AJAX/PHP?)

Plugin to Change Price at Frontend Product in Magento 2 (Jquery/AJAX/PHP?)


I want to build a Plugin that should work as a "Color Configuration" Plugin. You can pick a certain color from a gallery of color swatches and it should recalculate the price of the product depending on the selected color. Disclaimer: Why I can't use native Magento functions? I have like 8000 colors in three different price categories..


What I'm trying so far: Having sample data (color codes) placed into an .phtml file > Click on a color using JS > Start an AJAX Request to send my variables over to PHP > Change Product Price in my "public function afterGetPrice(\Magento\Catalog\Model\Product $subject, $result)". 


Basically I want to send a string variable and then calculate => $result * $variableSentFromJS


1. My first question: Is this the right way to go ahead?

I'm struggling since four days (Yes, I'm a hobby developer but kind of grew up with magento 1.0 learning basic html Heart) on this simple topic just to change the price with my own variable..


2. If ("1." == 1){ Is it possible to get an specific URL of my Block.php that contains the "afterGetPrice" function for AJAX?}

Sending my variable via AJAX seems to be working (except I don't know the URL of my result .PHP file) but instead its recursevely loading the product page and then giving me the result. 


I've got a lot more questions on this topic but will keep it by these two questions.


Code attached:





namespace Name\Farbtonkonfigurator\Block;

class Product
    public function afterGetPrice(\Magento\Catalog\Model\Product $subject, $result)
	$c1 = 2.0;
	$c2 = 4.0;
	$c3 = 10.0;
	if (isset($_POST['var_color_id'])) {
    $var_color = $_POST['var_color_id'];
	echo $var_color;
	if ($var_color == "C1") {
	echo $result*$c1;
	if ($var_color == "C2") {
	echo $result*$c2;
	if ($var_color == "C3") {
	echo $result*$c3;
	echo 'Not working!';
	return $result*1;



window.loadcolor = function(obj) {

var var_color = document.getElementById("var_color");
var_color.innerHTML = obj.className;

                  type: "POST",
		//url: "localhost/farbengesell_shop/pub/fish.php",
                //url: location.href,
		  url: "<?php echo $block->getHelloWorldUrl() ?>",
                  data: { var_color_id: var_color.innerHTML },
		//context: { var_color_id: obj.className },
		//dataType: "text",
success: function(data) { //jQuery(data).find('#var_color');
//alert(data); //content.html(data); // alert("success!" + data); var_color.innerHTML = data; } }); } </script> <!-- COLORS TO PICK --> <span onclick="loadcolor(this);" id="configurator_button" style="background-color:#c8ac31" class="C1" title="31100"></span> <span onclick="loadcolor(this);" id="configurator_button" style="background-color:#d6b83d" class="C2" title="31101"></span> <span onclick="loadcolor(this);" id="configurator_button" style="background-color:#dfc34e" class="C3" title="31102"></span>  


In case you've got an idea or can lead me in a different or right direction, every answer is welcome. Thanks. Haiko