Modifier la structure du header et page catégorie

jinga · November 23, 2021

Bonjour,

Je travaille sur PS 1.7.8.1 et je me demandais si quelqu'un avait fait ce genre de modifications. (J'imagine que c'est lourd)

1) Ce que j'aimerais faire c'est de mettre le logo du site au dessus du menu et tout centrer. En gros, ne plus avoir deux zones dans le menu mais qu'une seule.

2) Modifier la page catégorie et mettre le bandeau de description de la catégorie sur toute la largeur de la page.

Merci par avance pour vos réponses.

Edited November 23, 2021 by jinga (see edit history)

JulienPct · November 23, 2021

Bonjour,

J'imagine que pour la page catégorie vous voulez quelques choses du même style que l'image ci-dessous ?

Pour cela alors vous pouvez modifier le code directement du fichier "layout-both-column.tpl".

Pour ce qui est du header je n'ai pas regardé mais je pense qu'il suffit de faire la même opération sur le fichier correspondant que vous pouvez obtenir en effectuant une recherche parmi tous les fichiers d'une classe spécifique à votre header.

jinga · November 23, 2021

Merci pour votre réponse c'est l'idée que j'ai en tête mais le problème c'est que je suis raz les pâquerettes en termes de développement. Est ce que vous pensez que c'est complexe à modifier ?

JulienPct · November 23, 2021

10 minutes ago, jinga said:

Est ce que vous pensez que c'est complexe à modifier ?

Tout dépend de ce que veux dire "raz les pâquerettes"

Personnellement j'ai ajouté ce code entre la section et la div content-wrapper (c'est un exemple 1.7.7.8)

Quote

<section id="wrapper">
        {hook h="displayWrapperTop"}

        {if $page.page_name == 'category'}
            <div id="js-product-list-header">
                {if $listing.pagination.items_shown_from == 1}
                    <div class="block-category card card-block">
                        {block name='breadcrumb'}
                            {include file='_partials/breadcrumb.tpl'}
                        {/block}
                        <i class="icon-{$category.link_rewrite}"></i>
                        <h1 class="h1">{$category.name}</h1>
                        {if $category.description}
                            <div id="category-description" class="text-muted">{$category.description|truncate:300:'...' nofilter}</div>
                            {if $category.secondDescription}
                                <a href="#footer" class="category-description-link">Lire la suite</a>
                            {/if}
                        {/if}
                    </div>
                {/if}
            </div>
        {/if}
        {if $page.page_name != 'index'}
        <div id="content-wrapper">

Edited November 23, 2021 by JulienPct (see edit history)

jinga · November 26, 2021

Bonjour, merci. Je vais essayer et vous tiens informé.

jinga · November 30, 2021

Bonjour, J'ai essayé le bout ce bout de code mais cela ne fonctionne pas, je pense que le fichier layout-both-column.tpl n'est pas fait exactement pareil dans la 1.7.8.1

Je suis allé dans la section mais où insérer le bout de code ?

Merci par avance

JulienPct · November 30, 2021

Voici le contenu de mon layout-both-column :

<!doctype html>
<html lang="{$language.iso_code}">

<head>
    {block name='head'}
        {include file='_partials/head.tpl'}
    {/block}
</head>

<body id="{$page.page_name}" class="{$page.body_classes|classnames}">

{block name='hook_after_body_opening_tag'}
    {hook h='displayAfterBodyOpeningTag'}
{/block}

<main>
    {block name='product_activation'}
        {include file='catalog/_partials/product-activation.tpl'}
    {/block}

    <header id="header">
        {block name='header'}
            {include file='_partials/header.tpl'}
        {/block}
    </header>

    {block name='notifications'}
        {include file='_partials/notifications.tpl'}
    {/block}

    <section id="wrapper">
        {hook h="displayWrapperTop"}
-------------------------------------------------------------------------------------------------------------------------------------
        {if $page.page_name == 'category'}
            <div id="js-product-list-header">
                {if $listing.pagination.items_shown_from == 1}
                    <div class="block-category card card-block">
                        {block name='breadcrumb'}
                            {include file='_partials/breadcrumb.tpl'}
                        {/block}
                        <i class="icon-{$category.link_rewrite}"></i>
                        <h1 class="h1">{$category.name}</h1>
                        {if $category.description}
                            <div id="category-description" class="text-muted">{$category.description|truncate:300:'...' nofilter}</div>
                            {if $category.secondDescription}
                                <a href="#footer" class="category-description-link">Lire la suite</a>
                            {/if}
                        {/if}
                    </div>
                {/if}
            </div>
-----------------------------------------------------------------------------------------------------------------------------------
        {elseif $page.page_name == 'cms'}
            <div id="js-product-list-header">
                <div class="block-header card card-block">
                    {block name='breadcrumb'}
                        {include file='_partials/breadcrumb.tpl'}
                    {/block}
                    <h1 class="h1">{$page.meta.title}</h1>
                </div>
            </div>
        {/if}
        {if $page.page_name != 'index'}
        <div id="content-wrapper">
            {/if}
            {block name="left_column"}
                <div id="left-column" class="col-xs-12 col-sm-4 col-md-3">
                    {if $page.page_name == 'product'}
                        {hook h='displayLeftColumnProduct'}
                    {else}
                        {hook h="displayLeftColumn"}
                    {/if}
                </div>
            {/block}

            {block name="content_wrapper"}
                <div class="left-column right-column col-sm-4 col-md-6">
                    {hook h="displayContentWrapperTop"}
                    {block name="content"}
                        <p>Hello world! This is HTML5 Boilerplate.</p>
                    {/block}
                    {hook h="displayContentWrapperBottom"}
                </div>
            {/block}

            {block name="right_column"}
                <div id="right-column" class="col-xs-12 col-sm-4 col-md-3">
                    {if $page.page_name == 'product'}
                        {hook h='displayRightColumnProduct'}
                    {else}
                        {hook h="displayRightColumn"}
                    {/if}
                </div>
            {/block}
            {hook h="displayWrapperBottom"}
            {if $page.page_name != 'index'}
        </div>
        {/if}

        <footer id="footer">
            {if $page.page_name == 'category' && $category.secondDescription}
                <div id="before-footer-category-long-desc">
                    <div class="before-footer-category-long-desc-desc">
                        {$category.secondDescription nofilter}
                    </div>
                </div>
            {/if}
            {block name="footer"}
                {include file="_partials/footer.tpl"}
            {/block}
        </footer>
</main>

{block name='javascript_bottom'}
    {include file="_partials/javascript.tpl" javascript=$javascript.bottom}
{/block}

{block name='hook_before_body_closing_tag'}
    {hook h='displayBeforeBodyClosingTag'}
{/block}
</body>

</html>

La partie qui vous intéresse est entre les "-"

jinga · November 30, 2021

Merci pour votre réponse mais si je comprends bien, il faut que j'ajoute les conditions if ; elseif etc...

JulienPct · November 30, 2021

Les premiers if sont juste pour que mes changements ne s'applique que sur une page de catégorie

{if $page.page_name == 'category'}

{if $page.page_name == 'category'}

Ensuite j'y créer tout simplement mon block avec les élements que je souhaite, si vous voulez seulement un <p>, alors ne mettez qu'un <p>

Sign In

Modifier la structure du header et page catégorie

Recommended Posts

jinga

Link to comment

Share on other sites

JulienPct

Link to comment

Share on other sites

jinga

Link to comment

Share on other sites

JulienPct

Link to comment

Share on other sites

jinga

Link to comment

Share on other sites

jinga

Link to comment

Share on other sites

JulienPct

Link to comment

Share on other sites

jinga

Link to comment

Share on other sites

JulienPct

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com