Argento 1.8.4 - 1.8.5 Manual Upgrade
To switch to new homepage
and footer
please follow the next steps:
Delete deprecated footer template
app/design/frontend/argento/pure/template/page/html/footer.phtml
Old footer
block is not used anymore, so you can copy your custom
content from it into new footer_cms
block.
Manual homepage code update
-
Slider row:
old code:
<div class="homeslider"> {{widget type="easyslide/insert" slider_id="argento_pure"}} </div>
new code:
<div class="row"> <div class="col-md-12"> <div class="homeslider"> {{widget type="easyslide/insert" slider_id="argento_pure"}} </div> </div> </div>
-
Categories row:
old code:
<div class="hidden-phone-off"> {{widget type="easycatalogimg/widget_list" category_count="4" column_count="4" show_image="1" resize_image="1" image_width="180" image_height="180" subcategory_count="1" template="tm/easycatalogimg/list.phtml"}} </div>
new code:
<div class="row"> <div class="col-md-12"> {{widget type="easycatalogimg/widget_list" category_count="4" column_count="4" show_image="1" resize_image="1" image_width="180" image_height="180" subcategory_count="1" template="tm/easycatalogimg/list.phtml"}} </div> </div>
-
Banner row:
old code:
<div class="hidden-tablet hidden-phone"> {{widget type="easybanner/widget_placeholder" placeholder_name="argento-home-content"}} </div>
new code:
<div class="row hidden-tablet hidden-phone"> <div class="col-md-12"> {{widget type="easybanner/widget_placeholder" placeholder_name="argento-home-content"}} </div> </div>
-
Tabs row:
old code:
<div class="tab-container"> {{widget type="highlight/product_new" title="New arrivals" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-new" show_page_link="1" page_title="All new products »" img_width="200" img_height="200"}} {{widget type="highlight/product_bestseller" title="Bestsellers" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-bestsellers" show_page_link="1" page_title="All bestsellers »" img_width="200" img_height="200"}} {{widget type="highlight/product_attribute_yesno" attribute_code="recommended" title="Recommended products" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-attribute-recommended" img_width="200" img_height="200"}} {{widget type="highlight/product_special" title="On sale" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-special" show_page_link="1" page_title="All on sale products »" img_width="200" img_height="200"}} <div class="block-about block-highlight"> <div class="block-title"><span>About Us</span></div> <div class="block-content" style="padding: 7px 7px;"> <div class="col3-set"> <div class="col-1"> <p style="line-height:1.2em;"><small>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede.</small></p> <p style="color:#888; font:1.2em/1.4em georgia, serif;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede. Cras vel libero id lectus rhoncus porta.</p> </div> <div class="col-2"> <p><strong style="color:#de036f;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit.</strong></p> <p>Vivamus tortor nisl, lobortis in, faucibus et, tempus at, dui. Nunc risus. Proin scelerisque augue. Nam ullamcorper. Phasellus id massa. Pellentesque nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc augue. Aenean sed justo non leo vehicula laoreet. Praesent ipsum libero, auctor ac, tempus nec, tempor nec, justo. </p> <p>Maecenas ullamcorper, odio vel tempus egestas, dui orci faucibus orci, sit amet aliquet lectus dolor et quam. Pellentesque consequat luctus purus. Nunc et risus. Etiam a nibh. Phasellus dignissim metus eget nisi. Vestibulum sapien dolor, aliquet nec, porta ac, malesuada a, libero. Praesent feugiat purus eget est. Nulla facilisi. Vestibulum tincidunt sapien eu velit. Mauris purus. Maecenas eget mauris eu orci accumsan feugiat. Pellentesque eget velit. Nunc tincidunt.</p> </div> <div class="col-3"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede. Cras vel libero id lectus rhoncus porta. Suspendisse convallis felis ac enim. Vivamus tortor nisl, lobortis in, faucibus et, tempus at, dui. Nunc risus. Proin scelerisque augue. Nam ullamcorper </p> <p><strong style="color:#de036f;">Maecenas ullamcorper, odio vel tempus egestas, dui orci faucibus orci, sit amet aliquet lectus dolor et quam. Pellentesque consequat luctus purus.</strong></p> <p>Nunc et risus. Etiam a nibh. Phasellus dignissim metus eget nisi.</p> <div class="divider"></div> <p>To all of you, from all of us at Magento Demo Store - Thank you and Happy eCommerce!</p> <p style="line-height:1.2em;"><strong style="font:italic 2em Georgia, serif;">John Doe</strong><br/><small>Some important guy</small></p> </div> </div> </div> </div> </div> <script type="text/javascript"> new TabBuilder(); new IScroll($$('.tab-container .tabs-wrapper')[0], { click: true, tap : true, bindToWrapper: true, scrollX: true, scrollY: false }); </script>
new code:
<div class="row tab-container"> {{widget type="highlight/product_new" title="New arrivals" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-new" show_page_link="1" page_title="All new products »" img_width="200" img_height="200"}} {{widget type="highlight/product_bestseller" title="Bestsellers" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-bestsellers" show_page_link="1" page_title="All bestsellers »" img_width="200" img_height="200"}} {{widget type="highlight/product_attribute_yesno" attribute_code="recommended" title="Recommended products" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-attribute-recommended" img_width="200" img_height="200"}} {{widget type="highlight/product_special" title="On sale" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-special" show_page_link="1" page_title="All on sale products »" img_width="200" img_height="200"}} <div class="block-about block-highlight"> <div class="block-title"><span>About Us</span></div> <div class="block-content" style="padding: 7px 7px;"> <div class="row"> <div class="col-md-4 col-sm-4"> <p style="line-height:1.2em;"><small>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede.</small></p> <p style="color:#888; font:1.2em/1.4em georgia, serif;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede. Cras vel libero id lectus rhoncus porta.</p> </div> <div class="col-md-4 col-sm-4"> <p><strong style="color:#de036f;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit.</strong></p> <p>Vivamus tortor nisl, lobortis in, faucibus et, tempus at, dui. Nunc risus. Proin scelerisque augue. Nam ullamcorper. Phasellus id massa. Pellentesque nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc augue. Aenean sed justo non leo vehicula laoreet. Praesent ipsum libero, auctor ac, tempus nec, tempor nec, justo. </p> <p>Maecenas ullamcorper, odio vel tempus egestas, dui orci faucibus orci, sit amet aliquet lectus dolor et quam. Pellentesque consequat luctus purus. Nunc et risus. Etiam a nibh. Phasellus dignissim metus eget nisi. Vestibulum sapien dolor, aliquet nec, porta ac, malesuada a, libero. Praesent feugiat purus eget est. Nulla facilisi. Vestibulum tincidunt sapien eu velit. Mauris purus. Maecenas eget mauris eu orci accumsan feugiat. Pellentesque eget velit. Nunc tincidunt.</p> </div> <div class="col-md-4 col-sm-4"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede. Cras vel libero id lectus rhoncus porta. Suspendisse convallis felis ac enim. Vivamus tortor nisl, lobortis in, faucibus et, tempus at, dui. Nunc risus. Proin scelerisque augue. Nam ullamcorper </p> <p><strong style="color:#de036f;">Maecenas ullamcorper, odio vel tempus egestas, dui orci faucibus orci, sit amet aliquet lectus dolor et quam. Pellentesque consequat luctus purus.</strong></p> <p>Nunc et risus. Etiam a nibh. Phasellus dignissim metus eget nisi.</p> <div class="divider"></div> <p>To all of you, from all of us at Magento Demo Store - Thank you and Happy eCommerce!</p> <p style="line-height:1.2em;"><strong style="font:italic 2em Georgia, serif;">John Doe</strong><br/><small>Some important guy</small></p> </div> </div> </div> </div> </div> <script type="text/javascript"> new TabBuilder(); new IScroll($$('.tab-container .tabs-wrapper')[0], { click: true, tap : true, bindToWrapper: true, scrollX: true, scrollY: false }); </script>
-
Brands slider row:
old code:
<div class="block brands-home hidden-phone"> <div class="block-title"> <span>Featured Brands</span> </div> <div class="block-content"> <a href="#" id="left">Left</a> <a href="#" id="right">Right</a> <div id="slider-brands-container" class="slider-wrapper"> <ul class="list-brands slider-brands" id="slider-brands"> <li><a href="#"><img src="{{skin url="images/catalog/brands/gucci.jpg"}}" alt="" width="150" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/lv.jpg"}}" alt="" width="100" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/ck.jpg"}}" alt="" width="130" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/chanel.jpg"}}" alt="" width="170" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/guess.jpg"}}" alt="" width="130" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/versace.jpg"}}" alt="" width="145" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/gucci.jpg"}}" alt="" width="150" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/lv.jpg"}}" alt="" width="100" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/ck.jpg"}}" alt="" width="130" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/chanel.jpg"}}" alt="" width="170" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/guess.jpg"}}" alt="" width="130" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/versace.jpg"}}" alt="" width="145" height="80"/></a></li> </ul> </div> <script type="text/javascript"> new Slider("slider-brands-container", "left", "right", {shift: 'auto'}); </script> </div> </div>
new code:
<div class="row"> <div class="col-md-12"> <div class="block brands-home hidden-phone"> <div class="block-title"> <span>Featured Brands</span> </div> <div class="block-content"> <a href="#" id="left">Left</a> <a href="#" id="right">Right</a> <div id="slider-brands-container" class="slider-wrapper"> <ul class="list-brands slider-brands" id="slider-brands"> <li><a href="#"><img src="{{skin url="images/catalog/brands/gucci.jpg"}}" alt="" width="150" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/lv.jpg"}}" alt="" width="100" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/ck.jpg"}}" alt="" width="130" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/chanel.jpg"}}" alt="" width="170" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/guess.jpg"}}" alt="" width="130" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/versace.jpg"}}" alt="" width="145" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/gucci.jpg"}}" alt="" width="150" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/lv.jpg"}}" alt="" width="100" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/ck.jpg"}}" alt="" width="130" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/chanel.jpg"}}" alt="" width="170" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/guess.jpg"}}" alt="" width="130" height="80"/></a></li> <li><a href="#"><img src="{{skin url="images/catalog/brands/versace.jpg"}}" alt="" width="145" height="80"/></a></li> </ul> </div> <script type="text/javascript"> new Slider("slider-brands-container", "left", "right", {shift: 'auto'}); </script> </div> </div> </div> </div>
Manual footer update
-
create
footer_cms
block with the following settings:1. Title: footer_cms 2. Identifier: footer_cms 3. Status: Enabled 4. Content:
<div class="footer-cms-container"> <div class="footer-cms"> <div class="row footer-set"> <div class="col-md-5 col-sm-6 col-customer-info"> <div class="block block-footer-links"> <div class="block-title"><span>Customer Information</span></div> <div class="block-content"> <ul class="footer-links"> <li> <ul> <li><a href="{{store direct_url="block"}}">Blog</a></li> <li><a href="{{store direct_url="location"}}">Store locator</a></li> <li><a href="{{store direct_url="media"}}">Media</a></li> <li><a href="{{store direct_url="help-center"}}">Help Center</a></li> </ul> </li> <li> <ul> <li><a href="{{store direct_url="customer/account"}}">My Account</a></li> <li><a href="{{store direct_url="sales/order/history"}}">Order Status</a></li> <li><a href="{{store direct_url="wishlist"}}">Wishlist</a></li> <li><a href="{{store direct_url="exchanges"}}">Returns and Exchanges</a></li> </ul> </li> <li class="last"> <ul> <li><a href="{{store direct_url="our-company"}}">Our Company</a></li> <li><a href="{{store direct_url="about"}}">About us</a></li> <li><a href="{{store direct_url="careers"}}">Careers</a></li> <li><a href="{{store direct_url="shipping"}}">Shipping</a></li> </ul> </li> </ul> </div> </div> <img width="200" height="60" style="margin-top: 10px;" src="{{skin url="images/security_sign.gif"}}" srcset="{{skin url="images/security_sign@2x.gif"}} 2x" alt="Security Seal"/> </div> <div class="col-md-3 col-sm-6 col-about"> <div class="block footer-about"> <div class="block-title"><span>About us</span></div> <div class="block-content"> <p>Argento is more than just another template created for Magento. It was created right from the ground based on the best ecommerce stores practices.</p> </div> </div> <div class="block footer-social"> <div class="block-title"><span>Join our community</span></div> <div class="block-content"> <ul class="icons"> <li class="facebook"><a href="facebook.com">Facebook</a></li> <li class="twitter"><a href="twitter.com">Twitter</a></li> <li class="youtube"><a href="youtube.com">YouTube</a></li> <li class="rss"><a href="rss.com">Rss</a></li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-12 col-contact"> {{block type="newsletter/subscribe" name="newsletter.footer" template="newsletter/subscribe.phtml"}} <div class="block footer-call-us"> <div class="block-title"><span>Call us</span></div> <div class="block-content"> <p class="footer-phone">1.800.555.1903</p> <p>We're available 24/7. Please note the more accurate the information you can provide us with the quicker we can respond to your query.</p> </div> </div> </div> </div> </div> </div>
Remove compatibility css
-
open file
app/design/frontend/argento/pure/layout/theme.xml
and remove line 8 with code:
<action method="addItem"><type>skin_css</type><name>css/old-pure.css</name></action>
-
delete css file
skin/frontend/argento/pure/css/old-pure.css