Recently a client approached us with a requirement for their Magento 1.9.x.x site, to display a dynamic message on the product page based upon three stock statuses.
A unique message would need to be displayed for products that have the in stock or back order stock status within Magento. The final stipulation for this Magento development was to not display a message if the product currently had an out of stock status.
Approaching this development, we need to consider two major factors, firstly the Magento catalog inventory collection data to then extend and query the particular items stock. Secondly, this data will need to be queried against the current product page to detect the items stock status.
Thankfully the catalog inventory collection data has already been retrieved at product level as the main product page template is calling and displaying the stock status on the front end. This makes the task at hand pretty simple as our query that will be added to our product page template contained within our active theme will simply query the stock status and display each message based on this as part of an if statement, which we will write in php.
Before proceeding it is always advisable to implement any modifications on a development environment and thoroughly test them prior to pushing them to a production environment.
The first step to proceeding with our development is to ensure that the product page template file that we are required to edit is present in our current theme and if it is not, copy the file from the base Magento theme to our active theme.
For those whom are experienced with Magento development, we obviously want to follow Magento’s best practices, avoiding edits to core files or the base theme.
Firstly, navigate to the following location within your Magento installation from your public root directory:
/app/design/frontend/<yourpackage>/<yourtheme>/template/catalog/product/
Within this directory we are looking for the following file:
view.phtml
If the file is already present within your active / bespoke theme, then open the file within your preferred text editor. If the file is not present, then copy from the following location to your bespoke theme in the location outlined above:
/app/design/frontend/base/default/template/catalog/product/view.phtml
Now that we have ensured or have copied the file to the location required and opened it in our text editor we can proceed with implementing our dynamic code.
Within our view.phtml file we are going to implement an if statement to query the stock status of the product and echo our desired text. To ensure that the information is available to query, our code will need to be implemented after the following statements at the start of this file:
<?php $_helper = $this->helper('catalog/output'); ?>
<?php $_product = $this->getProduct(); ?>
The first method is retrieving the catalog data, the second retrieves the individual products data. With the product data already at our disposal, we can query it within our if statement to detect the product stock status and echo out our text.
For this particular example, I would like the dynamic text to display as a banner above the product’s title which is usually within a container using the ‘product-name’ class. This will usually be contained within the ‘product-shop’ container at around line 57.
Within the aforementioned container we are firstly going to write a comment in html so that we have a reference point to find our code quickly in the future:
<−−Start Code – Dynamic Delivery Messaging based on Stock Status−−>
<Code To Go Here>
<!−−End Code – Dynamic Delivery Messaging based on Stock Status−−>
So now that we are ready to implement the code to dynamically display our messaging, lets outline the logic behind it. Magento has the method ‘isSaleable’ available which checks to see if a product is enabled and in stock. We will utilise this method to determine if a product is in stock to display our first message and if it is not, the method will not display anything, which is exactly what our brief is from the client.
The second stipulation from the client is to display a different message if the product is available to order, but has the ‘back order’ status enabled. Luckily we can query the Magento inventory with the getBackorders method to detect if the product has that particular status set.
With these two points in mind the easier way to structure our php logic would be:
The initial part of our php statement is going to call the inventory function by extending Magento’s inventory model, so let’s open our php statement and the first line to execute this:
<?php
$inventory = Mage::getModel('cataloginventory/stock_item')->loadByProduct($_product);
The next step is to add our initial if statement to our php that will determine if the product has a backorder status:
if ($inventory->getBackorders() )
{
echo ‘<div class=”prod-page-del-ban”><h4>Pre Order This Product Today</h4></div>’;
}
Our secondary if statement is our elseif, which will determine if a product is available for sale or not in the instance that our initial if statement is not matched:
elseif ($_product->isSaleable())
{
echo '<div class="prod-page-del-ban"><h4>Order Today – FREE Next Day Delivery</h4></div>';
}
The final step is to close our php statement:
?>
With all of the above code implemented we should have a complete php statement that should look like the following:
<!−−Start Code – Dynamic Delivery Messaging based on Stock Status−−>
<?php
$inventory = Mage::getModel('cataloginventory/stock_item')->loadByProduct($_product);
if ($inventory->getBackorders() )
{
echo '<div class="prod-page-del-ban"><h4>Pre Order This Product Today</h4></div>';
}
elseif ($_product->isSaleable())
{
echo '<div class="prod-page-del-ban"><h4>Order Today – FREE Next Day Delivery</h4></div>';
}
?>
<!−−End Code – Dynamic Delivery Messaging based on Stock Status−−>
As you can see contained within our two if statements we have a container with the class ‘prod-page-del-ban’ which can be styled however you see fit. There is also a <h4>
tag within the container which contains our text to be displayed on the front end, which can again be styled and text adjusted as required.
With our code implemented and the file saved, the only thing remaining is to test our code by viewing the front end of the site.
Ensure that you have a product with the backorder status set, a second product with the in stock status and a final product with the out of stock status in the Magento admin. When viewing each product your related messaging should be displayed with the exception of the out of stock product which should not display any messaging.
If all the testing proves to be successful and the implemented code functions sufficiently, then push the modified changes from your development environment to the live environment.
Finally log in to Magento and clear the front end block caches and test again.
A 14 year industry veteran that specialises in wide array of online marketing areas such as PPC, SEO, front end web development, WordPress and Magento development.
Accredited Google Partner & Bing Ads qualifications, BA (Hons) in Digital Marketing. One half of the Director duo at Kumo.