Product Selector Installation

Home » Product Selector Installation

Overview

The goal of this product is to implement search function where a visitor may select the category filter as well as product search filter Manufacturer, Model, and Year of their desired products using simple drop-downs and then view a list of products of his/her interest to order.

Video Tutorial

Are you familiar with Magento extension installation? If so, you can quickly watch this Video tutorial to perform the installation.

Watch Video Tutorial

Installation Steps for Product Selector Extension

1. Take a backup of the Magento files before replacing

2. Extract the files inside Magento Installation Root Magento_App_Root folder is same as your Magento Installation directory

3. Folder structure for default theme \Magento_App_Root\app\design\frontend\default\<default>\template Where <default> folder is based on default theme. Please copy the template folder into your specific theme folder

Note:
For Magento 1.3.x, the template folder structure is
Magento_App_Root/app/design/frontend/default/default/template/catalog/product

For Magento 1.4.x, 1.5.x, 1.6.x, 1.7.x, 1.8.x, 1.9.x the template folder structure would be
Magento_App_Root/app/design/frontend/base/default/template/catalog/product

Steps to be followed in admin panel to setup attributes

Step 1: Create Attribute
Catalog -> Attributes -> Manage Attribute

product-selector-1

 

Click the button “Add New Attribute”

product-selector-2

 

Attribute code: year
Unique value: No
Values Required: Yes
Select all option yes for Use in quick search, Use in advanced search, Comparable on Front-end, Use In Search Results Layered Navigation, Allow HTML-tags on Front-end,Visible on Product View Page on Front-end, Used in product listing, Used for sorting in product listing

Similarly Create attributes “make” and “model”.

Please make a note of the Attribute Code. It should be (year,make,model)

Step 2: Create Attribute Set

Catalog -> Attributes -> Manage AttributeSet

product-selector-3

Click on Default

product-selector-4

 

Click the button Add New under Groups
You can find a pop up Explore User Prompt. Please enter the group name “Product Selector”

A group will be created at the end you can drag and drop to your respective location.
product-selector-5

And kindly drag and drop the attributes Unassigned Attributes to the group “Product Selector” you have created.

Step 3: Add Products

Catalog -> Manage Products -> Add Product
product-selector-6

 

You can find a new tab Product Selector added. Fill in all the required details and assign the product to a category.(Follow the require steps to add products in order to make the product display in client panel).

Step 4: Add a new page for Product Selector

CMS -> Manage Pages -> Add New Page

Page Title: Product Selector
Self URL: product-selector
Status: Enabled

Content: {{block type=”catalog/product_list” template=”catalog/product/category-search.phtml”}}

After placing the category-search.phtml file in the respective page you can view the url http://<your website>/index.php/ product-selector

Optional:
If you use a different Attribute code when creating the attributes, you need to change in the following lines in
<Magento_App_Root>/app/code/local/Globalecom/Productselector/controllers/CategorysearchController.php file (Step 1: Screen 2)

<Magento_App_Root>/app/design/frontend/base or (Your Theme Folder)/default/template/catalog/product/category-search.phtml

Changes required in CategorysearchController.php and category-search.phtml

$makeattribute_code=”make”;
$modelattribute_code=”model”;
$yearattribute_code=”year”;

Optional:
To make the search display in your leftbar/rightbar, follow steps (a) and (b) described below:

a) Move to the location app/design/frontend/default/<theme>/layout/
select catalog.xml file

b) Find the following text “<reference name=”right”>” for right bar. Place the below code inside your reference for the “right”. Similar procedure can be followed for “left”

<block type=”catalog/product” name=”product_category-searchsidebar” template=”catalog/product/category-search.phtml” before=”-“/>

c) How to change style and width of Product Selector drop down field?

If the magento version is 1.4 edit style.css with this code. Add this code atlast in style.css
If the magento version is 1.3 edit boxes.css with this code. Add this code atlast in boxes.css

#subcategorydiv select{ width: 150px; }
#maincategorydiv select{ width: 150px; }
#makediv select{ width: 150px; }
#modeldiv select{ width: 150px; }
#yeardiv select{ width: 150px; }

Step 5: Refresh Magento cache.
Admin Panel – System – Cache Management – Select all Check boxes – Flush Magento Cache

product-selector-7

 

How to uninstall the Product Selector extension

Please follow the instructions below to uninstall Product Selector Extension and remove from your website.
Step 1:Go to the location app/etc/modules/ Globalecom_Productselector.xml.
Find the line of code true
and change it to false
Refresh the Cache in admin panel->System->Cache Management
Step 2: Remove the file category-search.phtml in the following location.
app/design/frontend/base/default/template/catalog/product/
This path maybe vary as per the website theme/template used.
app/design/frontend/default/(Your Theme Folder)/template/catalog/product
Step 3: Please disable or delete the Product Selector CMS Page or Product Selector Static Block in your admin panel.

 Questions

If you have any questions or issues, please contact technical support team via http://mage-extensions-themes.com/support/