Menu icon Foundation

My Posts

No Content

My Comments

versedi commented on Klevis Miho's post almost 5 years

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.

versedi commented on Karl Ward's post about 5 years

Really nice solution. I'm wondering just about one thing...how to adapt it into php that's adding class name .i.e. "XXX" when something in that menu is active.

<li class="XXX mtree-node mtree-closed">
<a href="#" class="expander" style="cursor: pointer;"></a>
<a href="woodenboxes.html">
Wooden Boxes      
</a>

<ul class="mtree-level-1" style="overflow: hidden; height: 0px; display: none;">
  <li><a href="Elegant">Elegant</a></li>
  <li><a href="Luxury">Luxury</a></li>

</ul>

</li>

So now I'd have to edit something in Javascript so it should check – if parent LI element has class "XXX" then replace 'mtree-closed' with 'mtree-open'. Any thoughts?

I've managed to check for that class 'XXX' but instead of expanding/opening that item, this specific item is the only one that's having classes from JS script. So item with 'XXX'- only one expandable.

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Klevis Miho's post almost 5 years

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.

You commented on Karl Ward's post about 5 years

Really nice solution. I'm wondering just about one thing...how to adapt it into php that's adding class name .i.e. "XXX" when something in that menu is active.

<li class="XXX mtree-node mtree-closed">
<a href="#" class="expander" style="cursor: pointer;"></a>
<a href="woodenboxes.html">
Wooden Boxes      
</a>

<ul class="mtree-level-1" style="overflow: hidden; height: 0px; display: none;">
  <li><a href="Elegant">Elegant</a></li>
  <li><a href="Luxury">Luxury</a></li>

</ul>

</li>

So now I'd have to edit something in Javascript so it should check – if parent LI element has class "XXX" then replace 'mtree-closed' with 'mtree-open'. Any thoughts?

I've managed to check for that class 'XXX' but instead of expanding/opening that item, this specific item is the only one that's having classes from JS script. So item with 'XXX'- only one expandable.

Posts Followed


Following

  • No Content

Followers

  • No Content