Adding & Moving Recommendations
All recommendations are added through the PrestaShop hook system, which means that they are dependent on the existence and positioning of the hooks in the theme.
The module adds a default set of recommendation elements to the shop, that can be moved/removed as you see fit. The following recommendation slots are added:
Front
frontpage-nosto-1
Personalized Recommendations
HOOK_HOME
Front
frontpage-nosto-2
Best Sellers and Trending Products
HOOK_HOME
Front
frontpage-nosto-3
Browsing History
HOOK_HOME
Front
frontpage-nosto-4
Browsing History related Recommendations
HOOK_HOME
Category
nosto-page-category1
Best Sellers and Trending Products
HOOK_TOP
HOOK_CATEGORY_TOP
Category
nosto-page-category2
Browsing History
HOOK_TOP
HOOK_CATEGORY_FOOTER
Product
nosto-page-product1
Cross-Selling and Up-Selling
HOOK_PRODUCT_FOOTER
Product
nosto-page-product2
Cross-Selling and Up-Selling
HOOK_PRODUCT_FOOTER
Product
nosto-page-product3
Cross-Selling and Up-Selling
HOOK_PRODUCT_FOOTER
Cart
nosto-page-cart1
Shopping Cart Recommendations
HOOK_SHOPPING_CART
Cart
nosto-page-cart2
Personalized Recommendations
HOOK_SHOPPING_CART
Cart
nosto-page-cart3
Best Sellers and Trending Products
HOOK_SHOPPING_CART
Search
nosto-page-search1
Search and Visit related Recommendations
HOOK_TOP
HOOK_SEARCH_TOP
Search
nosto-page-search2
Browsing History
HOOK_TOP
HOOK_SEARCH_FOOTER
Order
thankyou-nosto-1
Order Related Recommendations
HOOK_ORDER_CONFIRMATION
Order
thankyou-nosto-2
HOOK_ORDER_CONFIRMATION
404
notfound-nosto-1
Browsing History related Recommendations
HOOK_TOP
404
notfound-nosto-2
Best Sellers and Trending Products
HOOK_TOP
404
notfound-nosto-3
Landing Page Recommendations
HOOK_TOP
Custom Hooks:
Prestashop does not provide it's own top and footer hooks for the category page. In order to overcome this limitation we have provided a workaround:
Autoslots: In order to compensate for the missing hooks, there is a custom JS that finds a DIV element with the class
center-column
and appends and prepends the respective slots before and after this DIV. This DIV element — present on most Prestashop themes — is the container for the main content block.Custom Hooks: We have created four custom hooks that can be explicitly placed on the category and search pages for precise positioning of the top and footer recommendation slots of the category and search pages.
Category Page:
Edit the search template and place the following snippet precisely where you you want the top and footer recommendations to appear.
Top
{if isset($HOOK_CATEGORY_TOP) && $HOOK_CATEGORY_TOP}{$HOOK_CATEGORY_TOP}{/if}
Footer
{if isset($HOOK_CATEGORY_FOOTER) && $HOOK_CATEGORY_FOOTER}{$HOOK_CATEGORY_FOOTER}{/if}
Search Page:
Edit the search template and place the following snippet precisely where you you want the top and footer recommendations to appear.
Top
{if isset($HOOK_SEARCH_TOP) && $HOOK_SEARCH_TOP}{$HOOK_SEARCH_TOP}{/if}
Footer
{if isset($HOOK_SEARCH_FOOTER) && $HOOK_SEARCH_FOOTER}{$HOOK_SEARCH_FOOTER}{/if}
Change position of recommendation elements
In order to change the position of any recommendation element added by Nosto, you can either move the PrestaShop hook position in your theme or unlink the Nosto module from the hook and add the elements directly into your theme. Please refer to the PrestaShop documentation on how to re-position hooks.
During the module installation, some new hooks are also created. These are:
displayCategoryTop
displayCategoryFooter
displaySearchTop
displaySearchFooter
These can be used to position the recommendations on the product category and search result pages, as PrestaShop does not include any hooks out-of-the-box for these pages. The module will automatically add the recommendations without these hooks as well, but for more precise positioning we recommend to include them in your theme. This is as easy as adding a line like {hook h='displayCategoryTop'}
to your theme layout file.
Removing recommendations elements
If you wish to remove one of the default recommendation elements you can easily do so by going to the module configuration page, and for the correct account toggle of the visibility of the recommendation. These settings are found on the Recommendations page of the account management.
Recommendations that are not visible will not be populated with content by Nosto. The recommendation element placeholder will still be added to the site, but it will remain empty and hidden to the users.
Adding new recommendation elements
The easiest way to add your own recommendation elements is to simply add the placeholder "div" in your theme layout, e.g. <div class="nosto_element" id="{id-of-your-choice}"></div>
. Note that you need to register this new element in your Nosto account settings, so that Nosto can start using it.
Last updated