The widget we made in the frontend does not invite us to buy some products. It is just a list with the names of the products from a category.
In this recipe, we will finalize the theming of the widget. We will create an HTML output that shows an image, name, and price of the given products.
With a jQuery plugin, we will convert the HTML output to a slider so we can scroll through the products.
Search for a good jQuery carousel on the Internet. In this recipe, we will use http://caroufredsel.dev7studios.com/.
The following steps describe the last set of actions to complete the widget:
Let's generate a good HTML that is usable for the jQuery plugin. Add the following code to the
list.phtml
template:<?php $_productCollection = $this->getLoadedProductCollection() ?> <div class="block-image-slider"> <div class="block-title"> <h2><?php echo $this->getTitle() ?></h2> </div> <div class="productslider...