Menu icon Foundation
How do you use Foundation with Magento?

Hello guys,

I've used Foundation a lot with Magento lately, by creating templates from scratch, but every time I include the javascript files(jquery etc) I encounter problems and solve them with different workarounds.

Below is my Foundation libsass setup on a Magento skin.

Screenshot

Now I want to make sure to not use workarounds anymore. Do you know what's the best way to include the javascripts from Foundation?

Thanks in advance,
Klevis

Magento

Hello guys,

I've used Foundation a lot with Magento lately, by creating templates from scratch, but every time I include the javascript files(jquery etc) I encounter problems and solve them with different workarounds.

Below is my Foundation libsass setup on a Magento skin.

Screenshot

Now I want to make sure to not use workarounds anymore. Do you know what's the best way to include the javascripts from Foundation?

Thanks in advance,
Klevis

versedi almost 5 years ago

I'm personally using noconflict.phtml file, injected just before:
HTML
</body>

with content like:

<!-- We put here a script that has to be noconflicted so instead of $ we write jQuery. So we call globally whole foundation library here, if youd like to call individual elements just edit it here. -->
<script>
      jQuery(document).foundation();
 </script>

Also you have to remember of proper order of loading js librariers:

<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>
<action method="addJs"><script>scriptaculous/effects.js</script></action>
<action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action method="addJs"><script>scriptaculous/controls.js</script></action>
<action method="addJs"><script>scriptaculous/slider.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
<action method="addJs"><script>varien/form.js</script></action>
<action method="addJs"><script>varien/menu.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action> 
<block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
<action method="addItem"><type>skin_js</type><name>bower_components/foundation/js/vendor/modernizr.js</name></action>
<action method="addItem"><type>skin_js</type><name>bower_components/foundation/js/vendor/jquery.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/noConflict.js</name></action>
<action method="addItem"><type>skin_js</type><name>bower_components/foundation/js/foundation.min.js</name></action>
<action method="addCss"><stylesheet>css/app.css</stylesheet></action>
//noConflict.js content:

jQuery.noConflict();

Credits are going for some unknown person who found out that way (I don't remember where I've found it, maybe I've put this up from few ways to solve it).

You can find my first prealpha versions of implementing Foundation 5 into Magento in my public repo here:
https://github.com/versedi/Found5Mage

Most things are going to be inspired by nandroid who made Foundation's 3 version:(because they were just good):
https://github.com/nandroid/MagentoFoundation

But generally if you're looking into something deeper like replacing Prototype.js which's Magento default for now...I think it's worthless with Magento 2 coming with jquery instead of prototype.

Rafi Benkual almost 5 years ago

This might also help.
Making Magento Responsive Using Foundation
http://www.demacmedia.com/magento-commerce/making-magento-responsive-using-foundation-part-1/

Klevis Miho almost 5 years ago

@versidi I imported the javascripts with your logic here. But I think that Foundation needs to be included in the bottom to work, or am I wrong?

I would appreciate it if you could give me some insights to this http://ttalbania.dmcs-online.com/ .
What am I doing wrong here? Did I implement your logic?

Thanks in advance,
Klevisi

Armin almuete over 4 years ago

Hi there,

I know my reply is not helpfull anymore. I found this mini extension http://foungento.com
Integration of latest version of foundation 5 and latest version of magento 1.9+ community edition.

Klevis Miho over 4 years ago

@armin almuete, every reply is helpful :)

Armin almuete over 4 years ago

Hi klevis, thank you so much. I hope i will help alot on this thread. Just let me know if you have any question on mini extension above. Im using this on my project its a wireframe and not template. If you love guys prototyping using foundation 5 youll gonna love this mini extension.

Klevis Miho over 4 years ago

@Armin this theme needs SASS support

Armin almuete over 4 years ago

Hello Klevis,

I haven't use to fancy on the styling I only replaced the magento classes and add foundation classes that's all. but if you are looking on the Sass support you can refer on this link http://foundation.zurb.com/docs/using-sass.html foundation have the documentation on how to use sass.

And also its only a wireframe it depends on you how you implement your own style if you want sass perfect if you want native css its fine. The wireframe that I made its only for the foundation of building magento theme responsive.