Magento: Edit sidebar modules and callouts
- Details
- Created on Wednesday, 19 October 2011 20:16
Left and right column callouts
Have you ever wondered how you change the image in the right and left column in Magento? With a little time and effort, it is very easy to change the left and right callouts on the left and right side of the template. When you are designing a template with a two or three column layout, the callout will appear on either the left or the right side column on the page. Once you know the location of the template code, you will be able to easily change the image, link or comment out the block of code. Both the left and right .PHTML files are located in the same template folder as the actual page template as seen in the screenshot below.
If you want to edit out the actual content that will populate the website container, you will have to edit out the "callout-xml.xml" file. When you open up the XML file you will have to navigate to the location where the code is located then make the desired changes.
If you want to edit out the PayPal or shopping cart modules, you will have to find the template and XML files for these modules and edit them seperately.
Template code location
All of the callout .PHTML files are located in a folder called "callouts", which resides in the following location, "app/design/frontend/tilluminati/callouts", there will be seperate files for the left and right callout, if you want to just disable the callout on the left or right side open the PHTML file and comment out the code in the PHTML file.
THe actual content for the callouts is located in a XML file, you will need to edit or comment out the XML code that resides in this file, navigate to the layout folde rand open the cataloge.xml file to edit the callouts in the left and right column. The layout folder als contains the XML files for all of the layout content in the website, mangento will use the XML files to pull the content from the data base and populate the template with the required content.
Change template code
When you edit the callouts, open the "catalog.xml" file and navigate down to the location of the XML code, you will not have far to go; there will be two reference names for both the right and left columns as highlighted in red. As you can see I commented out the left callout so that this image does not appear in the left column. Later on, when we are ready to reuse the left callout we can just uncomment the code.
If you want to edit the visible callout block, refer to the "action" XML Tags inside of the right callout block setImgSrc, setImgAlt, setLinkUrl actions all contains the information that will be inserted into the PHP include tag in the template PHTML files.
In the below screen shot we will be able to edit out the image source location, and URL link, once you complete all of the changes save and replace the xml and phtml files then update the caches and reindex the eCommerce site.
It is important to remember that this action will change the image that is visible on the "right" and "left" columns in the eCommerce tempate. If you want to add a custom callout onto each page, a custom CMS Block is required, this technique will allow you to only edit out the callout that is visible on all pages.
PayPal icon
The PayPal icon PHTML files are located in the following location "app/design/frontend/tilluminati/paypal" there will be a express folder which controls the content for PayPal Express, partners folder which contains the logo code, the payment folder which controls the layout for the paypal payment redirect and helper system for payypal. Open the logo.phtml file in the partner folder to edit the PayPal logo code.
Just like the template, the PayPal logo has a seperate XML file named "paypal.xml", this file controls what logo is used, and what kind of PayPal service is used for the website.
Sidebar Modules
All magento 2-3 column templates with a sidebar will have widgets, the will appear and disappear depending on what products are added to the cart or what products you have purchased. Most of the time you will be able to just go into the Magento store configuration menu and disable the module, in some cases you will have to manually comment out or remove the code so that a blank model does not appear. In this case you will have to navigate to the location where the sidebar widget code is located create a backup file of the website code and manually edit out the widget code.
the sidebar widges will populate the left and right side of the store's template; by default they will show up on the webpage as seen below, as you add products to the cart or there are related products to buy these modules will show up.
Magento allows you to setup a poll, if you don't want to display a poll, you can just close the poll in the magento admin area.
Navigate to the poll that is active and change the status to closed or you can just delete the poll.
When you are done click save pole.
Below is a list of some of the widgets that are displayed in the left or right sidebar.
- Recently viewed products: "app/design/frontend/tilluminati/reports/product_viewed.phtml"
- Checkout widget: "app/design/frontend/tilluminati/checkout/cart/sidebar.phtml"
- My Orders: "app/design/frontend/tilluminati/sales/reorder/sidebar.phtml"
- Compare products: "app/design/frontend/tilluminati/catalog/product/compare/sidebar.phtml"
- Wishlist: "app/design/frontend/tilluminati/wishlist/sidebar.phtml"
- Newsletter: "app/design/frontend/tilluminati/newsletter/signuphp.phtml"
When you open the file, you will see a bunch of code as show below
Once you have commented out the code or deleted the widget code as shown below, the sidebar widgets will no longer be visible when the caches and indexs are updated. Also, remember to disable the module in the System Configuration menu, otherwise you will get a white screen when you click to view a page, this is especially true if you try and compare products or view the wishlist.
