support for template JSv2

[sandipparekh29]

@sandipklevu

[sandipklevu]

@sandipparekh29 Magento 1 module does not have support for Template docs aka JSv2 by default because of no active development on the module. As a workaround, we are mentioning steps to implement Smart Search(Quick Search and Search Results Landing Page).

Step 1. Create two Layout XML files on the below directory level on the active theme.

<magento-root>/app/design/frontend/rwd/default/layout/klevu For e.g. rwd/default is an active theme

• create a Search Layout XML file named search.xml and take contents from here.
  • create a Content Layout XML file named content.xml and take contents from here.

Step 2. Create two Templates phtml files on the below directory level on the active theme

<magento-root>/app/design/frontend/rwd/default/template/klevu/search/v2 For e.g. rwd/default is an active theme

• create a JS Init Quick Search Template file named js-init.phtml and take contents from here.
• create a Search Landing Template file named search.phtml and take contents from here.

Step 3. Change variable value: Replace variable value var APIv2CloudSearchURL. Variable value to change You can take value from this path available on box.klevu.com > Store Settings > APIv2 Cloud Search URL:

[sandipklevu]

@sandipparekh29

Here are the notes for the category navigation prepared based on Quickstart : Smart Category Merchandising.

Step 1. Configure the layout event on the frontend level in config.xml.

<?xml version="1.0"?>
<config>
    ...
    <frontend>
        ...
            <events>
                ...
                <controller_action_layout_load_before>
                    <observers>
                        <update_category_page_layout_before>
                            <type>singleton</type>
                            <class>klevu_search/category_page</class>
                            <method>updateCategoryPageLayout</method>
                        </update_category_page_layout_before>
                    </observers>
                </controller_action_layout_load_before>
                ...
            </events>
        ...
    </frontend>
    ...
</config>

Step 2. Create an observer class named Page.php in app/code/community or local/Klevu/Search/Model/Category directory.

<?php

class Klevu_Search_Model_Category_Page extends Varien_Object
{
    public function updateCategoryPageLayout(Varien_Event_Observer $observer)
    {
        try {
            $layout = $observer->getData('layout');
            $storeEvent = $observer->getEvent()->getStore();
            $front = Mage::app()->getRequest()->getRouteName();
            $controller = Mage::app()->getRequest()->getControllerName();
            $action = Mage::app()->getRequest()->getActionName();

            // Do not perform this operation if we're not on a category view page
            if (($front !== 'catalog' || $controller !== 'category' || $action !== 'view')) {
                return;
            }

            $store = Mage::app()->getStore($storeEvent);
            // Do not perform this operation if not valid store found
            if (!$store) {
                return;
            }

            $isSearchEnabled = Mage::helper("klevu_search/config")->isExtensionEnabled($store->getId());
            if ($layout && $isSearchEnabled) {
                $this->addHandleCatNav($layout);

                return;
            }
        } catch (Exception $e) {
            // Catch the exception that was thrown, log it.
            Mage::helper('klevu_search')
                ->log(Zend_Log::CRIT,
                    sprintf("Exception thrown in %s::%s - %s", __CLASS__, __METHOD__, $e->getMessage()));
        }
    }

    private function addHandleCatNav($layout)
    {
        /* @var $layout Mage_Core_Model_Layout */
        //Instance check for current category
        $category = Mage::registry('current_category');
        if (!$category instanceof Mage_Catalog_Model_Category) {
            return;
        }
        if ($category->getData('display_mode') === "PAGE") {
            return;
        }
        $layout->getUpdate()->addHandle('klevu_category_index');
    }
}

Step 3. Add code for layout handle klevu_category_index in xml file i.e. <magento-root>/app/design/frontend/rwd/default/klevu/search.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    ...
    ...
    <klevu_category_index>
        <reference name="left_first">
            <remove name="catalog.leftnav"/>
            <action method="unsetChild">
                <name>catalog.leftnav</name>
            </action>
        </reference>
        <reference name="head">
            <block type="core/template"
                   name="klevu.search.v2.js.init"
                   template="klevu/search/v2/js-init.phtml"/>
        </reference>
        <reference name="root">
            <action method="setTemplate">
                <template>page/1column.phtml</template>
            </action>
            <action method="addBodyClass">
                <class>klevu-category-view</class>
            </action>
        </reference>
        <reference name="content">
            <block type="core/template" name="klevu.search.v2.category.index.index"
                   template="klevu/search/v2/category.phtml"/>
            <action method="unsetChild">
                <name>category.products</name>
            </action>
            <remove name="category.products"/>
        </reference>
    </klevu_category_index>
</layout>

Step 4. Create a category.phtml under <magento-root>/app/design/frontend/rwd/default/klevu/search/v2 with the below contents.

<script src="https://js.klevu.com/theme/default/v2/category-page.js"></script>
<div class="klevuLanding"></div>
<?php $category = Mage::registry('current_category'); ?>
<?php if ($category): ?>
    <script type="text/javascript">
        var klevu_pageCategory = '<?php echo trim(Mage::helper('klevu_search')->getFullCategoryPath($category));?>';
        sessionStorage.setItem("klevu_pageCategory", klevu_pageCategory);
    </script>
<?php endif; ?>

Step 5. Add the below method responsible for the category full path. As an example, we have added to the app/code/community/Klevu/Search/Helper/Data.php file.

public function getFullCategoryPath($category)
{
    $fullCategoryPath = '';
    if ($category instanceof Mage_Catalog_Model_Category) {
        $categoryPathIds = array_map('intval', $category->getPathIds());
        unset($categoryPathIds[0], $categoryPathIds[1]);

        $categoryCollection = Mage::getModel('catalog/category')->getCollection();
        $categoryCollection->addAttributeToSelect('name')
            ->addAttributeToSelect('is_active')
            ->addAttributeToFilter('entity_id', ['in' => $categoryPathIds]);

        $categoryNames = [];
        foreach ($categoryPathIds as $categoryId) {
            $category = $categoryCollection->getItemById($categoryId);
            $categoryNames[$categoryId] = $category
                ? (string)$category->getDataUsingMethod('name')
                : '';
        }

        $categoryNames = (count($categoryPathIds) === 1)
            ? [$category->getName()]
            : $categoryNames;

        $fullCategoryPath = implode(';', $categoryNames);
    }

    return $fullCategoryPath;
}

Above-mentioned set of instructions prepared based on Klevu_Search.xml module.