Halle T Fashion – Ecommerce Website

Ecommerce Website Project – Halle T Fashion

For this project we had to create a logo that represented Halle T Fashion in an elegant manner but was not too busy. We used the Based on the clients suggestions we came up with a logo that set the theme of the site and the colour scheme. We implemented all of the standard ecommerce features such as product listings, administration for editing products and managing orders, shipping and cart/checkout with payments. We also implemented some custom features that the client requested such as a currency picker, a gift card system where the customer can choose any amount and choose to have the gift card sent to a friend by email.

We also implemented social options and enabled visitors to the site to pin any image to their Pintrest board.

For our currency converter we query the exchange rates daily as exposed by the ECB and convert the price in Euro to the customers chosen currency.

Currency Converter Technical Details

To implement the currency converter functionality, we used a plugin called WooCommerce Currency Switcher which comes with an array of useful shortcodes and functions which enable users to switch product prices to their chosen currency in real time.

After installing the plugin via the WordPress store, it was as simple as going to WooCommerce -> Settings -> Currency where you can then select the Currency eg., USD, EUR, GBP along with the Symbol, Flag & Currency Aggregator such as https://www.google.com/finance or http://finance.yahoo.com/ for on the spot real-time currency conversions.

To simply highlight to the user that “All prices are in EUR“, we used a useful function called get_woocommerce_currency(); which simply returned the users current selection. The plugin could also be used anywhere on the site via the [woocs] shortcode. This shortcode would then display a dropdown containing all the various currencies & flags set by the user in the admin. As the dropdown returned by the shortcode did not suit our design, we used our own custom dropdown. A snippet of which can be seen below.

<span class="currency">
    All prices are in <?php echo get_woocommerce_currency();?> <img
        src="https://www.halletfashion.com/wp-content/themes/Vanilla/images/arrows-1.png">

    <ul class="currency-menu">
        <li>
            <a href="?currency=GBP"> <img
                    src="<?php echo get_bloginfo('template_url'); ?>/images/currency-gb.png"/>British Pound</a>
        </li>
        <li>
            <a href="?currency=AUD"> <img
                    src="<?php echo get_bloginfo('template_url'); ?>/images/au.png"/>Australia</a>
        </li>
    </ul>
</span>

As shown above, by simply passing the currency abbreviation in the URL, the plugin would carry out the conversion.

Pintrest

One of the requirements for Halle T Fashion was to allow users pin products to their pin board on Pintrest via a Pinit button as can be seen above. This was an interesting one as none of the plugins – the free ones at least – could provide us with what we wanted. Considering were Coding Geeks and would much rather figure it out ourselves than pay for plugin, we decided to look into the Pintrest API and in particular the function of which allow the users to pin products. https://developers.pinterest.com/docs/widgets/save/ is a useful link for anyone who may want to get started.

$attachment_ids[0] = get_post_thumbnail_id(get_the_ID()); //get attachment id for this product
$attachment = wp_get_attachment_image_src($attachment_ids[0], 'full'); //get URL for this attachment?>

<span class="pin">
<a data-pin-do="buttonBookmark" data-pin-save="true" href="https://www.pinterest.com/pin/create/button/"
   data-pin-media="<?php echo $attachment[0]; ?>"
   data-pin-description="<?php the_title(); ?>"> </a>
</span>

<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>

As can be seen above, when the user visits the page, we get the featured image which is then passed into the pin it button in the data-pin-media setting. The title is then passed into the data-pin-description setting. Finally, make sure the pinit script is included for this to work.