The product page is also the most crucial, like the checkout page. Customers see a detailed view of each product, including reviews. Hence, this page must be handled carefully to convert the cart into a sale.
The most crucial section of this page is the add-to-cart block. Hence, the most important details should be visible around this block, such as warranty information, EMI information, add-ons, etc.
So we will add our custom block before the add to cart button on this product page in this post.
We need to create catalog_product_view.xml and take product.info.form.content as a reference block.
We can either create catalog_product_view.xml inside the frontend area of the view directory of our custom module or extend the catalog_product_view.xml file of the Magento_Catalog module inside our theme. It will depend on the requirements.
Add Block Before Add To Cart On Product Page
We will go with the first option in this post. So let’s create a catalog_product_vew.xml file.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.form.content">
<block class="Magento\Framework\View\Element\Template" name="block.name" before="-" template="Vendor_ModuleName::custom.phtml" />
</referenceBlock>
</body>
</page>Create a custom.phtml file inside the templates directory of the frontend area of the view directory of the custom module.
<?php
// Your logicIn the above example, I have added a custom PHTML file before add-to-cart on the product page. However, depending on our requirements, we can create a custom block extending the below class.
Magento\Framework\View\Element\TemplateSo Let’s do that.
- catalog_product_view.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.form.content">
<block class="SbDevBlog\Config\Block\CheckAvailability" name="catalog.availability" before="-" template="SbDevBlog_Config::postcode_box.phtml" ifconfig="sbdevblog/qty_postcodes/enable" />
</referenceBlock>
</body>
</page>2) CheckAvailability.php block class which we have defined in the catalog_product_view.xml.
<?php
/**
* @copyright Copyright (c) sbdevblog (http://www.sbdevblog.com)
*/
namespace SbDevBlog\Config\Block;
use Magento\Framework\View\Element\Template;
use SbDevBlog\Config\Services\GetStoreConfigurationService;
use Magento\Framework\Serialize\Serializer\Json;
use Magento\Catalog\Helper\Data as CatalogHelper;
class CheckAvailability extends Template
{
/**
* @var GetStoreConfigurationService
*/
private GetStoreConfigurationService $configurationService;
/**
* @var Json
*/
private Json $json;
/**
* @var CatalogHelper
*/
private CatalogHelper $catalogHelper;
/**
* Constructor
*
* @param Template\Context $context
* @param GetStoreConfigurationService $configurationService
* @param Json $json
* @param CatalogHelper $catalogHelper
* @param array $data
*/
public function __construct(
Template\Context $context,
GetStoreConfigurationService $configurationService,
Json $json,
CatalogHelper $catalogHelper,
array $data = []
)
{
$this->configurationService = $configurationService;
$this->json = $json;
$this->catalogHelper = $catalogHelper;
parent::__construct($context, $data);
}
/**
* Get check availability config
*
* @return mixed
*/
public function getCheckAvailability(): mixed
{
$config = $this->configurationService->getCheckAvailabilityConfig();
if (!empty($config) && is_array($config)) {
return $this->encodeData($config);
}
if($this->decodeData($config)){
return $config;
}
return $this->encodeData([]);
}
/**
* Encode Params
*
* @param array $params
* @return bool|string
*/
private function encodeData(array $params = []): bool|string
{
return $this->json->serialize($params);
}
/**
* Get Current SKU
*
* @return string
*/
public function getCurrentSku(): string
{
return $this->catalogHelper->getProduct()->getSku();
}
/**
* Validate String
*
* @param string $params
* @return bool
*/
private function decodeData(string $params): bool
{
try {
$this->json->unserialize($params);
return true;
} catch (\InvalidArgumentException $exception){
}
return false;
}
}3) postcode_box.phtml
<?php
/**
* @copyright Copyright (c) sbdevblog (http://www.sbdevblog.com)
*/
use SbDevBlog\Config\Block\CheckAvailability;
use Magento\Framework\Escaper;
/**
* @var CheckAvailability $block
* @var Escaper $escaper
*/
?>
<div id="showbox">
<div>
<input id="postcode" type="text" title="<?= $escaper->escapeHtml(__('Enter Postcode')) ?>"
placeholder="<?= $escaper->escapeHtml(__('Enter Postcode')) ?>">
</div>
<div style="margin-top: 10px">
<button id="checkAvail" class="button action primary" type="button">
<span><?= $escaper->escapeHtml(__("Check Availability")) ?></span>
</button>
</div>
</div>
<script type="text/x-magento-init">
{
"#checkAvail": {
"SbDevBlog_Config/js/view/skustatus": {
"skuConfig": <?= /** @noEscape */
$block->getCheckAvailability() ?>,
"productSku": "<?= $escaper->escapeHtml($block->getCurrentSku()) ?>"
}
}
}
</script>We can also use view models, as described in this post: https://sbdevblog.com/magento-2-how-to-use-viewmodels/.
That’s it. Thank you for visiting SbDevBlog. Please use the comment box to provide your feedback. Also, please subscribe and share with your connections.
Note: Please verify the code of this blog and the relevant git repository before using it in production.
🙂 HAPPY CODING 🙂
