Web Design | Ally Morris

Browsing posts in: Web Design

Jul 26, 2015 |

Setting div height the same as width – Responsive Design

Quite a common issue I come across with responsive front end development is setting a height in relation to the width of an element. For example. If you are creating a div that you wish to keep a square. If the site is fixed width you can easily set the height, but when the site responsive the width of the div changes as so fixing the height doesn’t work.

I can’t find any CSS solution for this but its pretty easy to do with jQuery.

All you have to do is grab the width value of the element and set the height as the same value. If you make sure this code is triggered on window.resize it will match the width as you resize the window on the fly.

I have made a jsfiddle as an example which you can see on the link below. Hopefully this can help someone.

https://jsfiddle.net/dgjn40jv/

Jul 14, 2014 |

0 comments

Magento – import tax_class_id not working

I have been having some problems with bulk importing the tax_class_id field in Magento. I was adding a tax class id (For example 2) in the field but for some reason it was making no difference to my products and when I exported the data the field was just blank.

I managed to work out that for some strange reason you have to put in the full text rather than the id.

So for example Taxable Goods rather than 2.

A quick find and replace and I was back up and running again. A really strange one but we got there in the end.

May 6, 2014 |

0 comments

WordPress – adding a shortcode into a template

In WordPress shortcodes are small snippets of code that run more complex functions and logic code. Shortcodes are great as they give the average editor the ability to serve up dynamic code on their site without having to understand any programming.

Shortcodes are designed to be placed in pages and posts, however every now and again you may wish to add a shortcode in a template file directly. To do this you have to add a little bit more code. Lets take the wordpress maps plugin as an example.

The normal shortcode might look something like this:

 [wpgmza id='1']

To add this direct into the template change it to:

<?php echo do_shortcode("[wpgmza id='1']");

There you go – that’s all there is to it!

Apr 30, 2014 |

0 comments

Magento – REATIVE AJAX Add to Cart – Changing notice text and colours

I have used to REATIVE AJAX add to cart addon on a couple of sites but the first thing I always want to do is change the background colour of the pop up notifications to match the style of my site.Finding where to edit this isn’t obvious to start with however the file you are looking for is called growler.js. It can be found in /skin/frontend/base/default/ajaxcart. Scroll down to line 154 and you will see where the background colours are set.

Apr 25, 2014 |

3 comments

Magento – Missing “Header” & “Footer” tabs from Config->Design

If you are wanting to make changes to the header or footer sections in Magento (for example, change the copyright notice or change the logo) then the place to do this is in

Configuration->General->Design

and then under the “Header” and “Footer” tabs. However if you are using a custom theme you might not have these options available to you.

To fix this you need to log into your ftp client and copy the file “system.xml from

app->code->core->Mage->Page->etc

and save a copy into

app->code->local->Mage->Page->etc

Now when you look back into Configuration->Design you should see a header and footer option.

This had me puzzled for a little while and I was wondering if it had just changed for Magento 1.8 but this simple fixed solved the problem.

Apr 24, 2014 |

1 comment

Magento – remove “Be the first to review this product”

Problem

I want to remove the link on the product page that is called “Be the first to review this product” but I don’t want to remove reviews formt he products. (You can still review the product via the review tab)

Solution

Go to [[yourTheme]]/template/catalog/product/view.phtml

Comment out or remove the following line (around line 60)

<?php echo $this->getReviewsSummaryHtml($_product, false, true)?>

Apr 18, 2014 |

0 comments

Magento – Limiting featured products on homepage

The Problem

On a recent Magento project I wanted to create featured products on the home page but limit it to display only three. I then wanted to include a “View More” link which would take you through to the rest of the featured products. I also wanted to be able to specify which three featured products were to appear on the home page.

The Solution

1) I created a new category (hidden from navigation) called Featured Products and added all my featured products to this category

2) I then added a new “yes/no” attribute called “Featured on Homepage” and added it to my default set

3) I Created a new template file called “featured-home” this included all my product attributes and structure I wanted to use. I used /template/catalogue/product/list.phtml as a guide but heavily edited it to my needs.

4) At the top of the document I added the following code which would filter those products marked as “Featured on Homepage”.

<?php
 // some helpers
 $_helper = $this->helper('catalog/output');
 $storeId = Mage::app()->getStore()->getId();
 $catalog = $this->getLayout()->createBlock('catalog/product_list')->setStoreId($storeId);

// get all products that are marked as featured
 $collection = Mage::getModel('catalog/product')->getCollection();
 $collection->addAttributeToSelect('featured');
 $collection->addFieldToFilter(array(
 array('attribute' => 'featured', 'eq' => true),
 ));

// if no products are currently featured, display some text
 if (!$collection->count()) :
 ?>

<p class="note-msg"><?php echo $this->__('There are no featured products at the moment.') ?></p>

<?php else : ?>

5) I edited my loop (that loops through my products) to read

<?php
   $i=0; foreach ($collection as $_product) :
   $_product = Mage::getModel('catalog/product')->setStoreId($storeId)->load($_product->getId());
   if ($i > 2) break;
 ?>

This limits the loop to display just 3 products.

6) I then added :

<?php $i++; ?>

Just before the end of my else statement. 

7) To display my products on my home page I went to CMS->PAGES->HOME inside Magento and added the following block into the design tab.

<reference name="content">
 <block type="core/template" name="home-featured" template="catalog/product/featured-home.phtml"/>
 </reference>

8) I could then add a link through to my featured products category from my featured-home.phtml so visitors can now see all the latest products.

Job done!

Pages:12 ›