By My Side
By My Side, makers of natural baby products, lotions and creams, were wanting to update their website with a more modern design and easy to edit and manage content management system.
Design by Front Design
Designer Angus Hume from Front Design created a new look and feel for the By My Side website, with bright and clean imagery. Angus is highly skilled in creating 3D renders of objects - all images of products in the site are carefully crafted 3D representations!
From his design we themed and set up a concrete5 5.7 based site.
The theme is fully mobile responsive and includes multiple customised and configured features to ensure ease of editing and use.
Composer
We implemented concrete5’s composer feature for two elements of this build: product pages and news pages.
Composer allows us to set up a ‘form’ for the content for product and news pages, making it easy for new items to be added to the website - the formatting of the information is handled automatically.
Linked Ingredients
Each product on the site features a list of ingredients. We wanted to be able to centrally store information about these ingredients, allowing a visitor to click/tap an ingredient to read more about it.
However, we didn't want the visitor to have to leave the current product page, instead we wanted a 'popup' of the linked information to appear.
We achieved this with custom attribute on the product page type, an attribute where the list of ingredients would be added and link to using the standard page linking controls. On the output of this area, we dynamically search for links within the content and look up the descriptions of the related pages. These descriptions are added to the links and enabled with a jQuery plugin called qTip2.
The code we used to loop through the links in the attribute is as follows:
<div class="ingredients-list"><?php
$ingredients = $c->getAttribute('product_ingredients');
$ingredients = preg_replace_callback("|(https?://[a-z\-.]+)/index.php\?cID=([0-9]+)|", function ($matches) {
$cID = $matches[2];
if ($cID > 0) {
$c = Page::getByID($cID, 'ACTIVE');
$desc = $c->getCollectionDescription();
return '" data-toggle="tooltip" role="button" title="' . h($desc);
}
}, $ingredients);
echo str_replace('href=""', '', $ingredients); ?>
</div>Location Map add-on
This site is also the first website to feature our new Location Map add-on. This custom block was built to allow easy configuration of map information. The block allows for the customisation of the colours and styling of the map and the inclusion of custom map markers. The locations list associated with the map can be grouped according to various address details or alphabetically.
This add-on can be found on the concrete5 marketplace.