New to Magento. My goal with this is to have customer pick price range and sort order from a custom form I created, then when form is submitted have Ajax pass the form data AND load the new page with the list of products within that price range. I am getting no errors when I click submit but new page never loads up. What am I doing wrong?
Vendor/Module/Block/Index.php: Result block
use MagentoFrameworkExceptionNoSuchEntityException;
use MagentoFrameworkViewElementTemplate;
use MagentoFrameworkViewElementTemplateContext;
use MagentoStoreModelStoreManagerInterface;
class Index extends Template
{
private StoreManagerInterface $storeManager;
public function __construct(
Context $context,
StoreManagerInterface $storeManager
) {
$this->storeManager = $storeManager;
parent::__construct($context);
}
protected function _prepareLayout(): Index
{
return parent::_prepareLayout();
}
/**
* @throws NoSuchEntityException
*/
public function getBaseUrl(): string
{
return $this->storeManager->getStore()->getBaseUrl();
}
public function getLowPrice()
{
return $this->getLow();
}
public function getHighPrice()
{
return $this->getHigh();
}
public function getSortOrder()
{
return $this->getOrder();
}
}
Vendor/Module/Controller/Result/Result.php: Result Controller
use MagentoFrameworkAppActionAction;
use MagentoFrameworkAppActionContext;
use MagentoFrameworkViewResultPageFactory;
use MagentoFrameworkControllerResultFactory;
use MagentoFrameworkControllerResultJsonFactory;
class Result extends Action
{
protected PageFactory $resultPageFactory;
protected JsonFactory $resultJsonFactory;
public function __construct(
Context $context,
PageFactory $resultPageFactory,
JsonFactory $resultJsonFactory
){
$this->resultPageFactory = $resultPageFactory;
$this->resultJsonFactory = $resultJsonFactory;
parent::__construct($context);
}
public function execute()
{
$lowPrice = $this->getRequest()->getParam('low');
$highPrice = $this->getRequest()->getParam('high');
$sortOrder = $this->getRequest()->getParam('order');
$result = $this->resultJsonFactory->create();
$resultPage = $this->resultPageFactory->create(ResultFactory::TYPE_JSON);
$block = $resultPage->getLayout()
->createBlock('VendorModuleBlockIndex')
->setTemplate('Vendor_Module::result.phtml')
->setData('low',$lowPrice)
->setData('high',$highPrice)
->setData('order',$sortOrder)
->toHtml();
$result->setData(['output' => $block]);
return $result;
}
}
Vendor/Module/view/frontend/layout/productrange_result_result.xml: Layout for Result page
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<title>Product List</title>
</head>
<body>
<referenceContainer name="content">
<block class="VendorModuleBlockIndex" name="result_result" template="Vendor_Module::result.phtml" />
</referenceContainer>
</body>
</page>
Vendor/Module/view/frontend/templates/productrangeform.phtml: Custom Form
<div class="container">
<div id="main">
<form name="product-range-form"
class="product-range-form"
id="product-range-form"
method="post"
action=""
data-hasrequired="<?php echo __('* Required Fields') ?>"
data-mage-init='{"validation":{}}'>
<fieldset class="fieldset">
<legend class="legend"><span><?php echo __("Product Details") ?></span></legend><br />
<div class="field low-price required">
<label class="label" for="low-price"><span><?php echo __('Low Price') ?></span></label>
<div class="control">
<input name="low-price"
id="low-price"
title="<?php echo __('Input Low Price') ?>"
class="input-text"
type="number"
min="0"
onchange="document.getElementById('high-price').min=this.value;"
data-validate="{required:true}"/>
</div>
</div>
<div class="field high-price required">
<label class="label" for="high-price"><span><?php echo __('High Price') ?></span></label>
<div class="control">
<input name="high-price"
id="high-price"
title="<?php echo __('Input High Price') ?>"
class="input-text"
type="number"
data-validate="{required:true}"/>
</div>
</div>
<div class="field sort-order required">
<label class="label" for="sort-order"><span><?php echo __('Sort Order') ?></span></label>
<div class="control">
<select name="sort-order" id="sort-order" data-validate="{required:true, 'validate-select':true}">
<option value="asc"><?php echo __('Ascending')?></option>
<option value="des"><?php echo __('Descending')?></option>
</select>
</div>
</div>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<input type="hidden" name="hideit" id="hideit" value="" />
<button type="submit" title="<?php echo __('Submit') ?>" class="action submit primary" id="custom_btn">
<span><?php echo __('Submit') ?></span>
</button>
</div>
</div>
</form>
</div>
</div>
<script>
require(['jquery'],function(){
jQuery(document).ready(function() {
jQuery("#product-range-form").submit(function(){
let lowPrice = jQuery("input[name='low-price']").val();
let highPrice = jQuery("input[name='high-price']").val();
let sortOrder = jQuery("input[name='sort-order']").val();
let url = "<?php echo $this->getUrl("productrange/result/result/") ?>";
jQuery.ajax({
url: url,
type: "POST",
data: {low:lowPrice, high:highPrice, order:sortOrder},
dataType: 'json',
showLoader: true,
cache: false
success: function(response){
console.log(response.output);
},
error : function(request,error)
{
alert("Error");
}
});
return false;
});
});
});
</script>
Vendor/Module/view/frontend/templates/result.phtml: Result page(list of products)
Currently just testing to see if I can get any data passed to result.phtml with ajax.
<?php
/** @var $block VendorModuleBlockIndex */
echo $block->getLowPrice();
echo $block->getHighPrice();
echo $block->getSortOrder();
?>
