Damn, Magento is difficult, and more than a little fickle. This eCommerce open source package runs on a LAMP stack (Linux, Apache, MySql, php) and seems popular enough, but wow, there’s not much community support. Scary,when you need help but cannot turn to your people.
My client’s Magento site runs on Porto 1.2.0. The front page has a products slider that only displayed “;”. The products slider shows he most recently added products. Like, what? It used to work, I did not even know where the code was located, and now it broke? I tracked down the html with Firefly but even with the identified html could not find it in Magento or the Porto theme. I get a hint from the client that it is the homepage_15. Lo and behold, there is the code.
Porto 1.2.0 uses the open source owl-carousel. They have some documentation under homepage slider but it is pretty sketchy. You need to turn on the slider, under Homepage slider. Then you need to enable the required filter, under Filter products. The docs then give you some partial code, but not enough to implement the slider. Damn.
{{block type=”filterproducts/newproduct_home_list” name=”newproduct_list” product_count=”12″ column_count=”4″ category_id=”23″ template=”filterproducts/grid.phtml”}}
If you’re using owl-slider mode, you should add also the script for owl-slider like this.
Nice, but a little more code would have helped. Here’s the broken code that gave me the “;”:
<![CDATA[</p>
<div id="parallax_03" style="background: #fdfdfd<!--url({{media url=;">; color: #333; margin: 0 auto;”></p>
<div class="parallax-content-15">
<div class="container" style="text-align: left;">
<div style="text-align: left;">
<p style="color: #333; font-size: 20px; margin: 0; font-weight: 600; text-align: center; margin-bottom: 5px;">new arriva</p>
<div id="featured_products_2" class="hide-addtocart hide-addtolinks" style="margin: 0 -10px;">{{block type=”filterproducts/latest_home_list” product_count=”10″ template=”filterproducts/list.phtml”}}
</div>
<p> <script type="text/javascript">// <![CDATA[
jQuery(function($){
$("#featured_products_2 .filter-products .owl-carousel").owlCarousel({lazyLoad: true, itemsCustom: [ [0, 1], [320, 1], [480, 2], [768, 3], [992, 4], [1200, 5] ], responsiveRefreshRate: 50, slideSpeed: 200, paginationSpeed: 500, scrollPerPage: true, stopOnHover: true, rewindNav: true, rewindSpeed: 600, pagination: false, navigation: false, autoPlay: true});
});
// ]]></script>
</div>
</p></div>
</p></div>
</div>
<p>]]>
Here is the code fix that now displays the slider properly.
<![CDATA[<!-- ***** products slider ***** --></p>
<div id="parallax_03" style="background: #fdfdfd<!--url({{media url=}});"> <!-- ; color: #333; margin: 0 auto;"> --></p>
<div class="parallax-content-15">
<div class="container" style="text-align: left;">
<div style="text-align: left;">
<p style="color: #333; font-size: 20px; margin: 0; font-weight: 600; text-align: center; margin-bottom: 5px;">New Arrivals</p>
<p><!-- ***** products slider code ***** --></p>
<div id="featured_products_2" class="hide-addtocart hide-addtolinks" style="margin: 0 -10px;">{{block type=”filterproducts/latest_home_list” product_count=”10″ template=”filterproducts/list.phtml”}}</div>
<p><!-- name="newproduct_list" --></p>
<p><script type="text/javascript">// <![CDATA[
jQuery(function($){
$("#featured_products_2 .filter-products .owl-carousel").owlCarousel({lazyLoad: true, itemsCustom: [ [0, 1], [320, 1], [480, 2], [768, 3], [992, 4], [1200, 5] ], responsiveRefreshRate: 50, slideSpeed: 200, paginationSpeed: 500, scrollPerPage: true, stopOnHover: true, rewindNav: true, rewindSpeed: 600, pagination: false, navigation: false, autoPlay: true});
});
// ]]></script>
</div>
</div>
</div>
</div>
<p>]]>
Here is the errant line:
<![CDATA[</p>
<div id="parallax_03" style="background: #fdfdfd<!--url({{media url=;">; color: #333; margin: 0 auto;”>]]>
Here is the fix:
<![CDATA[</p>
<div id="parallax_03" style="background: #fdfdfd<!--url({{media url=}});"> <!-- ; color: #333; margin: 0 auto;"> --> ]]>
What a difference “}})” makes!
This owl-carousel displays the last 10 items by saved date. It is not very controllable, and the client wishes to mix it up. Here are the options, all from the Filter Extension docs:
In this extensions, you can set options related to filter products such as featured products, best selling products etc.
- Bestsellers Configuration – It shows the products by selling automatically.
{{block type=”filterproducts/bestsellers_home_list” … }}
- Featured Products Configuration – It shows the products which “Is Featured” attribute is “yes”.
{{block type=”filterproducts/featured_home_list” … }}
- Most Viewed Configuration – It shows the products which most viewed automatically.
{{block type=”filterproducts/mostviewed_home_list” … }}
- New Products Configuration – It shows the products which “New from Date” or “New to Date” attributes are inputed.
{{block type=”filterproducts/newproduct_home_list” … }}
- Latest Products Configuration – It shows the products which all products sort by latest input automatically.
{{block type=”filterproducts/latest_home_list” … }}
- Sale Products Configuration – It shows the products which “Special Price” is inputed.
{{block type=”filterproducts/sale_home_list” … “}}
