magentoforum.pl • Zobacz wątek - Blok kategorii z lewej strony

Blok kategorii z lewej strony

14 mar 2010, o 00:26

covalic

Posty: 8
Gadu-Gadu: 0

Prywatna wiadomość

Wiem że temat był wałkowany setki razy (jak na każdym supprocie) ale proszę nie odsyłajcie mnie do wyszukiwarki. Wszystko co znalazłem dotyczy poprzednich wersji silnika. Osobiście zdecydowałem się na zainstalowanie wersji 1.4.0.1 i chcąc wyświetlić blok kategorii oraz postępując zgodnie z tutorialami za każdym razem natrafiam na problem :/ Cały czas na plikach css których ta wersja nie posiada np: boxes.css i menu.css :/ Bardzo proszę o jakieś pomoc.

Blok kategorii z lewej strony

Teraz jest 22 lis 2024, o 11:05

Google

Posty: 427
Lokalizacja: Internet

Blok kategorii z lewej strony

14 mar 2010, o 08:41

miko05

Posty: 148
Lokalizacja: Białystok
Gadu-Gadu: 499683

Nie ma plików boxes.css i menu.css ponieważ zostały one zastąpione wspólnym styles.css w którym masz połączoną zawartość owych plików.
Cześć odpowiedzialna za css menu jest w sekcji Navigation

a) W app/design/frontend/default/twoj_motyw/template/catalog/navigation/ tworzymy plik left_menu.phtml o następującej zawartości:

Kod: Zaznacz cały

<?php
/**
 * Top menu for store
 *
 * @see Mage_Catalog_Block_Navigation
 */
?>
<div class="box vert-nav">
<?php $_menu = ''?>
<?php foreach ($this->getStoreCategories() as $_category): ?>
    <?php $_menu .= $this->drawItem($_category) ?>
<?php endforeach ?>
<?php if ($_menu): ?>
<div class="border-creator">
    <ul id="nav_vert">
        <?php echo $_menu; ?>
    </ul>
</div>
<?php endif; ?>
</div>

b) W app/design/frontend/default/twoj_motyw/layout/catalog.xml odnajdujemy:

Kod: Zaznacz cały

 <reference name="left">
            <block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml">
               ...
            </block>
        </reference>

i powyżej dodajemy (pomiędzy znacznikami reference):

Kod: Zaznacz cały

<block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/left_menu.phtml" />

c) Otwieramy skin/frontend/default/twoj_motyw/css/styles.css i znajdujemy sekcje Navigation:

Kod: Zaznacz cały

/********** < Navigation */
.nav-container {}
#nav { border:1px solid #ddd; padding:5px 0; margin:10px 0; font-size:13px; }
...

dodajemy następujący fragment odpowiadający za styl menu (tu również wszystkie kolory itp można definiować według swoich upodobań):

Kod: Zaznacz cały

/************ VERT NAV ************/
.vert-nav .border-creator { border-style:solid; border-color:#848484; border-width:0 1px 1px 1px; }

#nav_vert { background:#CED0CC; padding:0 20px; font-size:1.1em; }
/************** ALL LEVELS  *************/ /* Style consistent throughout all nav levels */
#nav_vert li { position:relative; text-align:left; }
#nav_vert li.over { z-index:999; }
#nav_vert a,
#nav_vert a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav_vert span { display:block; cursor:pointer; white-space:nowrap; }
#nav_vert li ul span {white-space:normal; }

/************ 0 LEVEL  ***************/
#nav_vert li { float:none; }
#nav_vert li.active a { color:#d96708; }
#nav_vert a { float:left; padding:5px 12px 6px 8px; color:#ffffff; font-weight:bold; }
#nav_vert li.over a,
#nav_vert a:hover { color:#d96708; }

/************ 1ST LEVEL ************/
#nav_vert ul li,
#nav_vert ul li.active { float:none; margin:0; padding-bottom:1px; background:#ecf3f6 url(../images/nav_divider.gif) repeat-x 0 100%; }
/*#nav ul li.over { background:#d5e4eb url(../images/nav_divider.gif) repeat-x 0 100%; }*/
#nav_vert ul li.last { background:#ecf3f6; padding-bottom:0; }

#nav_vert ul a,
#nav_vert ul a:hover { float:none; padding:0; background:none; }
#nav_vert ul li a { font-weight:normal !important; }

/************ 2ND LEVEL ************/
#nav_vert ul { position:absolute; width:15em; top:10px; left:-10000px; border:1px solid #899ba5; }

/* Show menu */
#nav_vert li.over > ul { left:115px; }
#nav_vert li.over > ul li.over > ul { left:100px; }
#nav_vert li.over ul ul { left:-10000px; }

#nav_vert ul li a { background:#ecf3f6; }
#nav_vert ul li a:hover { background:#d5e4eb; }
#nav_vert ul li a,
#nav_vert ul li a:hover { color:#2f2f2f !important; }
#nav_vert ul span, #nav_vert ul li.last li span { padding:3px 15px 4px 15px;}

/************ 3RD+ LEVEL ************/
#nav_vert ul ul { top:5px; }

i po dokonaniu owych zmian odświeżamy cache i mamy menu po lewej stronie

SEPTSITE - http://septsite.pl/- Magento developer

Blok kategorii z lewej strony

14 mar 2010, o 13:01

covalic

Posty: 8
Gadu-Gadu: 0

Prywatna wiadomość

b) W app/design/frontend/default/twoj_motyw/layout/catalog.xml odnajdujemy:

i powyżej dodajemy (pomiędzy znacznikami reference):

Jeżeli dobrze zrozumiałem ten punkt to ten fragment ma wyglądać tak

Kod: Zaznacz cały

<reference name="left">
             <block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/left_menu.phtml" /> 
            </block> - tu zamknąłem blok
            <block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml">
            </block>
        </reference>

Czy też zupełnie inaczej bo już się zgubiłem. Sprawdzałem i bez zamkniętego bloku i wyżej i niżej, tworząc dodatkowy <referece> powyżej.

Blok kategorii z lewej strony

14 mar 2010, o 16:25

miko05

Posty: 148
Lokalizacja: Białystok
Gadu-Gadu: 499683

Nie Tak jak wskazałem gdyż są dwa sposoby zamykania Blocków

- jeden za znacznik otwarcia ( <block ) i zamknięcia ( /> ) zawarty w jednym zapisie

Kod: Zaznacz cały

<block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/left_menu.phtml" />

- dwa znacznik otwarcia (<block ) i zamknięcia ( </block> ), i taki zapis stosuje się gdy chcemy jeszcze przekazać jakieś
informacje np.

Kod: Zaznacz cały

 
<block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml">
                <action method="setImgSrc"><src>images/media/col_left_callout.jpg</src></action>
                <action method="setImgAlt" translate="alt" module="catalog"><alt>Our customer service is available 24/7. Call us at (555) 555-0123.</alt></action>
                <action method="setLinkUrl"><url>checkout/cart</url></action>
            </block>

Czyli cały ten fragment powinien prawidłowo wyglądać np tak:

Kod: Zaznacz cały

 <reference name="left">
            <block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/left_menu.phtml" />
            <block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml">
                <action method="setImgSrc"><src>images/media/col_left_callout.jpg</src></action>
                <action method="setImgAlt" translate="alt" module="catalog"><alt>Our customer service is available 24/7. Call us at (555) 555-0123.</alt></action>
                <action method="setLinkUrl"><url>checkout/cart</url></action>
            </block>
        </reference>

SEPTSITE - http://septsite.pl/- Magento developer