Argento 1.7.4 - 1.8.0 Manual Upgrade

To switch to new homepage and footer please follow the next steps:

app/design/frontend/argento/argento/template/page/html/footer.phtml

Footer now displays two new cms blocks: footer_toolbar and footer_cms.

Old blocks footer_links, footer_contacts and footer_social are not used anymore, so you can copy your custom content from them into new blocks.

Manual homepage code update

Slider and Banners row:

old code:

<div class="callout-home-top col2-set">
    <div class="col-1">
        {{widget type="easyslide/insert" slider_id="argento_default"}}
    </div>
    <div class="col-2 hidden-tablet hidden-phone">
        {{widget type="easybanner/widget_placeholder" placeholder_name="argento-home-top"}}
    </div>
</div>

new code:

<div class="row">
    <div class="col-md-8">
        <div class="easyslider-wrapper">
            {{widget type="easyslide/insert" slider_id="argento_default"}}
        </div>
    </div>
    <div class="col-md-4">
        {{widget type="easybanner/widget_placeholder" placeholder_name="argento-home-top" banner_css_class="col-xs-4 col-md-12" additional_css_class="row"}}
    </div>
</div>

Category images row:

old code:

{{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="5" template="tm/easycatalogimg/list.phtml"}}

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="5" template="tm/easycatalogimg/list.phtml"}}
    </div>
</div>

Wide banner:

old code:

<div class="hidden-tablet hidden-phone">
{{widget type="easybanner/widget_placeholder" placeholder_name="argento-home-content"}}
</div>

new code:

<div class="row">
    <div class="col-md-12">
        {{widget type="easybanner/widget_placeholder" placeholder_name="argento-home-content"}}
    </div>
</div>

Tabs and Store Achievements blocks:

old code:

<div class="promo-home-content col2-set">
    <div class="col-1">
        <div class="tab-container">
            {{widget type="highlight/product_new" title="New arrivals" products_count="6" column_count="3" template="tm/highlight/product/grid.phtml" class_name="highlight-new" page_title="See all new products &raquo;"}}
            {{widget type="highlight/product_special" title="Sale" products_count="6" column_count="3" template="tm/highlight/product/grid.phtml" class_name="highlight-special" page_title="See all on sale products &raquo;"}}
            {{widget type="highlight/product_attribute_yesno" attribute_code="coming_soon" title="Coming soon" products_count="6" column_count="3" template="tm/highlight/product/grid.phtml" class_name="highlight-attrbiute-coming_soon"}}
        </div>
        <script type="text/javascript">
            new TabBuilder();
        </script>
    </div>
    <div class="col-2">
        {{widget type="highlight/product_bestseller" title="Bestsellers" products_count="3" column_count="3" template="tm/highlight/product/sidebar/list-link.phtml" class_name="highlight-bestsellers" page_title="See all bestsellers &raquo;"}}
        {{widget type="highlight/product_popular" title="Popular Products" products_count="3" column_count="3" template="tm/highlight/product/sidebar/list-link.phtml" class_name="highlight-popular" page_title="See all popular products &raquo;"}}
    </div>
</div>

new code:

<div class="row promo-home-content">
    <div class="col-md-8">
        <div class="tab-container">
            {{widget type="highlight/product_new" title="New arrivals" products_count="6" column_count="3" template="tm/highlight/product/grid.phtml" class_name="highlight-new" show_page_link="1" page_title="See all new products &raquo;"}}
            {{widget type="highlight/product_special" title="Sale" products_count="6" column_count="3" template="tm/highlight/product/grid.phtml" class_name="highlight-special" show_page_link="1" page_title="See all on sale products &raquo;"}}
            {{widget type="highlight/product_attribute_yesno" attribute_code="coming_soon" title="Coming soon" products_count="6" column_count="3" template="tm/highlight/product/grid.phtml" class_name="highlight-attrbiute-coming_soon"}}
        </div>
        <script type="text/javascript">
            new TabBuilder();
        </script>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12 col-sm-6">
                {{widget type="highlight/product_bestseller" title="Bestsellers" products_count="3" column_count="3" template="tm/highlight/product/sidebar/list-link.phtml" class_name="highlight-bestsellers" show_page_link="1" page_title="See all bestsellers &raquo;"}}
            </div>
            <div class="col-md-12 col-sm-6">
                {{widget type="highlight/product_popular" title="Popular Products" products_count="3" column_count="3" template="tm/highlight/product/sidebar/list-link.phtml" class_name="highlight-popular" show_page_link="1" page_title="See all popular products &raquo;"}}
            </div>
        </div>
    </div>
</div>

Brands Slider

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/sony.jpg"}}" alt="" width="128" height="73"/></a></li>
                <li><a href="#"><img src="{{skin url="images/catalog/brands/apple.jpg"}}" alt="" width="70" height="73"/></a></li>
                <li><a href="#"><img src="{{skin url="images/catalog/brands/garmin.jpg"}}" alt="" width="154" height="74"/></a></li>
                <li><a href="#"><img src="{{skin url="images/catalog/brands/htc.jpg"}}" alt="" width="124" height="74"/></a></li>
                <li><a href="#"><img src="{{skin url="images/catalog/brands/intel.jpg"}}" alt="" width="103" height="74"/></a></li>
                <li><a href="#"><img src="{{skin url="images/catalog/brands/motorola.jpg"}}" alt="" width="204" height="76"/></a></li>
                <li><a href="#"><img src="{{skin url="images/catalog/brands/sony.jpg"}}" alt="" width="128" height="73"/></a></li>
                <li><a href="#"><img src="{{skin url="images/catalog/brands/apple.jpg"}}" alt="" width="70" height="73"/></a></li>
                <li><a href="#"><img src="{{skin url="images/catalog/brands/garmin.jpg"}}" alt="" width="154" height="74"/></a></li>
                <li><a href="#"><img src="{{skin url="images/catalog/brands/htc.jpg"}}" alt="" width="124" height="74"/></a></li>
                <li><a href="#"><img src="{{skin url="images/catalog/brands/intel.jpg"}}" alt="" width="103" height="74"/></a></li>
                <li><a href="#"><img src="{{skin url="images/catalog/brands/motorola.jpg"}}" alt="" width="204" height="76"/></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">
            <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/sony.jpg"}}" alt="" width="128" height="73"/></a></li>
                        <li><a href="#"><img src="{{skin url="images/catalog/brands/apple.jpg"}}" alt="" width="70" height="73"/></a></li>
                        <li><a href="#"><img src="{{skin url="images/catalog/brands/garmin.jpg"}}" alt="" width="154" height="74"/></a></li>
                        <li><a href="#"><img src="{{skin url="images/catalog/brands/htc.jpg"}}" alt="" width="124" height="74"/></a></li>
                        <li><a href="#"><img src="{{skin url="images/catalog/brands/intel.jpg"}}" alt="" width="103" height="74"/></a></li>
                        <li><a href="#"><img src="{{skin url="images/catalog/brands/motorola.jpg"}}" alt="" width="204" height="76"/></a></li>
                        <li><a href="#"><img src="{{skin url="images/catalog/brands/sony.jpg"}}" alt="" width="128" height="73"/></a></li>
                        <li><a href="#"><img src="{{skin url="images/catalog/brands/apple.jpg"}}" alt="" width="70" height="73"/></a></li>
                        <li><a href="#"><img src="{{skin url="images/catalog/brands/garmin.jpg"}}" alt="" width="154" height="74"/></a></li>
                        <li><a href="#"><img src="{{skin url="images/catalog/brands/htc.jpg"}}" alt="" width="124" height="74"/></a></li>
                        <li><a href="#"><img src="{{skin url="images/catalog/brands/intel.jpg"}}" alt="" width="103" height="74"/></a></li>
                        <li><a href="#"><img src="{{skin url="images/catalog/brands/motorola.jpg"}}" alt="" width="204" height="76"/></a></li>
                    </ul>
                </div>
                <script type="text/javascript">
                    new Slider("slider-brands-container", "left", "right", {shift: 'auto'});
                </script>
            </div>
        </div>
    </div>
</div>

create footer_toolbar block with the following settings:

Title: footer_toolbar
Identifier: footer_toolbar
Status: Enabled
Content:

<div class="footer-toolbar-container">
    <div class="footer-toolbar">
        {{block type="newsletter/subscribe" template="newsletter/subscribe.phtml"}}
        <div class="footer-social">
            <span class="label">Join our community</span>
            <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>

create footer_cms block with the following settings:

Title: footer_cms
Identifier: footer_cms
Status: Enabled
Content:

<div class="footer-cms-container">
    <div class="footer-cms">
        <div class="row">
            <div class="col-md-9">
                <ul class="footer-links row">
                    <li class="col-md-3 col-xs-6">
                        <div class="h6">About us</div>
                        <ul>
                            <li><a href="{{store direct_url="about"}}">About Us</a></li>
                            <li><a href="{{store direct_url="our-company"}}">Our company</a></li>
                            <li><a href="{{store direct_url="carriers"}}">Carriers</a></li>
                            <li><a href="{{store direct_url="shipping"}}">Shipping</a></li>
                        </ul>
                    </li>
                    <li class="col-md-3 col-xs-6">
                        <div class="h6">Customer center</div>
                        <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="col-md-3 col-xs-6">
                        <div class="h6">Info</div>
                        <ul>
                            <li><a href="{{store direct_url="privacy"}}">Privacy policy</a></li>
                            <li><a href="{{store direct_url="delivery"}}">Delivery information</a></li>
                            <li><a href="{{store direct_url="returns"}}">Returns policy</a></li>
                        </ul>
                    </li>
                    <li class="col-md-3 col-xs-6">
                        <div class="h6">Contacts</div>
                        <ul>
                            <li><a href="{{store direct_url="contacts"}}">Contact Us</a></li>
                            <li><a href="{{store direct_url="location"}}">Store location</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="col-md-3 footer-contacts">
                <div class="h6">Visit Argento  Store</div>
                <address>
                221B Baker Street<br/>
                West Windsor, NJ  08550<br/>
                <strong>1.800.555.1903</strong><br/>
                </address>
                <a href="{{store url="map"}}">get directions</a><br/>
                <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>
    </div>
</div>

Update image dimensions

Homepage top banners size was changed to 311x110.
Slider size was changed to 635x325. You need to upload new images and set new Width and Height in Templates Master > Easyslide.

Argento 1.7.4 - 1.8.0 Manual Upgrade

Delete deprecated footer template

Manual homepage code update

Manual footer update

Update image dimensions