Navigation Menu

Magento + PrototypeJS + jQuery + noConflict() — The easiest way

Окт 24, 2013

Если тебе надо добавить в Magento проект jQuery то самым простым способом будет следующий: открой local.xml  своей темы найди дерективу <default> , сравни со следующим кодом и внеси изменения к себе XHTML <default> <reference name="head"> <!-- jQuery --> <action method="addItem"><type>skin_js</type><name>js/jquery/jquery.min.js</name></action> <block type="core/text" name="jQuery.noConflict"> <action method="setText"><text><![CDATA[<script type="text/javascript">jQuery.noConflict(); <span class="keyword">var</span> $j = jQuery.noConflict();</script>]]></text></action> </block> </reference> </default> 1234567891011 <default>    <reference name="head">         <!-- jQuery -->        <action method="addItem"><type>skin_js</type><name>js/jquery/jquery.min.js</name></action>        <block type="core/text" name="jQuery.noConflict">            <action method="setText"><text><![CDATA[<script type="text/javascript">jQuery.noConflict(); <span class="keyword">var</span> $j = jQuery.noConflict();</script>]]></text></action>        </block>     </reference></default> Что бы jQuery не конфликтовал с PrototypeJS выше указанный код «переводит» jQuery в «безопасный режим». Путь  js/jquery/jquery.min.js — это путь к файлу, который расположен по адресу, например: magento/skin/frontend/mbootstrap/default/js/jquery/jquery.js Для того что бы применять jQuery в *.phtml шаблонах я, как правило, использую структуру: XHTML <script> jQuery(document).ready(function ($) { /* enter your code here */ }); </script> 12345 <script>    jQuery(document).ready(function ($) {        /* enter your code here */    });</script> А в случае если надо использовать jQuery в рамках PrototypeJS, то может подойти вариант: JavaScript var $form = $j("#login-form"); 1 var $form = $j("#login-form"); Удачи...

Далее

Magento + cms/block + tabs

Фев 9, 2012

В моём случае надо было создать Popup окошко с табами, в содержинии которых находились CMS блоки. Поиск по Гуглу ничего не дал но решение всё же нашлось. Работаю в local.xml Код будет добавлен на страницу Продукта в Блок «before_body_end» (бонус этого решения заключается в том что дочерние блоки генерируются автоматически). И так сразу готовое решение: [code lang=»xml»] lightbox_tab_measure Measure cms/block catalog/product/view/tab/view.phtml cms__test lightbox_tab_system System cms/block catalog/product/view/tab/view.phtml cms__test2 [/code] И теперь по-порядку. 1. <block type=»core/template» name=»product.lightbox» as=»product-lightbox» template=»tmp/product__lightbox.phtml»> — это обычные phtml темплейт в котором будет лежать, в моём случае, Popup. Размещается он в /app/design/frontend/default/theme_name/template/tmp/product__lightbox.phtml 2. далее в него генерируем Табы (кстати, дефолтные Табы можно выдернуть с дефолтной темы Modern. Как это делать я описывать не буду, так как в нете информация по данному вопросу уже есть, да и пост о другом) <block type=»catalog/product_view_tabs» name=»product.lightbox.tabs» as=»lightbox_tabs» template=»catalog/product/view/tabs.phtml» > — этот код даёт возможным вызвать из нашего темплейта (tmp/product__lightbox.phtml) Табы. Кстати что бы это сделать следует в сожержимом темплейта написать: <?php echo $this->getChildHtml(‘lightbox_tabs’) ?> 3. Наполняем табами. [code lang=»xml»] lightbox_tab_measure Measure cms/block catalog/product/view/tab/view.phtml cms__test [/code] <alias>lightbox_tab_measure</alias> — алиас (понядобится ниже) <title>Measure</title> — Заголовок таба <block>cms/block</block> — указываем тип содержимого таба <template>catalog/product/view/tab/view.phtml</template> — тут все равно что писать, я оставил дефолт. Главное что бы этот параметр присутствовал. <action method=»setBlockId» block=»lightbox_tab_measure»><blockId>cms__test</blockId></action> — а вот тут в block=»lightbox_tab_measure» и указывается алиас. Ну а тут <blockId>cms__test</blockId> — идендификатор CMS блока Собственно всё. Ах да, CMS блок должен быть создан и иметь содержимое.   А следующий код генерирует табы внутри «before_body_end» автоматически и не требует дополнительного темплейта: [code lang=»xml»] lightbox_tab_measure Measure cms/block catalog/product/view/tab/view.phtml cms__test lightbox_tab_system System cms/block catalog/product/view/tab/view.phtml cms__test2 [/code]   Have a nice...

Далее