Jump to content

Put a block categories in left column and extend the space of despription page product

Andeore

By Andeore
in General topics

 Share

Recommended Posts

Andeore Newbie

Andeore

Posted
Posted

hi friend

 

I have two problem with my prestashop site 1.7.

 

I would put on left column a block with the categories always on screen in all pages.

 

I would extend the space of description of product . Now in stock prestashop 1.7 it is on right page and I would like this space to extend centrally across the entire page.

 

a photo to undestand better

35clm4i.jpg

 

 

 
Very please if you know how help me!
Link to comment
Share on other sites
razaro Proficient

razaro

Posted
Posted

You should open from folder themes/classic/templates/catalog file product.tpl and edit it so it have this code 

{**
 * 2007-2017 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <[email protected]>
 * @copyright 2007-2017 PrestaShop SA
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
{extends file=$layout}

{block name='head_seo' prepend}
  <link rel="canonical" href="{$product.canonical_url}">
{/block}

{block name='head' append}
  <meta property="og:type" content="product">
  <meta property="og:url" content="{$urls.current_url}">
  <meta property="og:title" content="{$page.meta.title}">
  <meta property="og:site_name" content="{$shop.name}">
  <meta property="og:description" content="{$page.meta.description}">
  <meta property="og:image" content="{$product.cover.large.url}">
  <meta property="product:pretax_price:amount" content="{$product.price_tax_exc}">
  <meta property="product:pretax_price:currency" content="{$currency.iso_code}">
  <meta property="product:price:amount" content="{$product.price_amount}">
  <meta property="product:price:currency" content="{$currency.iso_code}">
  {if isset($product.weight) && ($product.weight != 0)}
  <meta property="product:weight:value" content="{$product.weight}">
  <meta property="product:weight:units" content="{$product.weight_unit}">
  {/if}
{/block}

{block name='content'}

  <section id="main" itemscope itemtype="https://schema.org/Product">
    <meta itemprop="url" content="{$product.url}">

    <div class="row">
      <div class="col-md-6">
        {block name='page_content_container'}
          <section class="page-content" id="content">
            {block name='page_content'}
              {block name='product_flags'}
                <ul class="product-flags">
                  {foreach from=$product.flags item=flag}
                    <li class="product-flag {$flag.type}">{$flag.label}</li>
                  {/foreach}
                </ul>
              {/block}

              {block name='product_cover_thumbnails'}
                {include file='catalog/_partials/product-cover-thumbnails.tpl'}
              {/block}
              <div class="scroll-box-arrows">
                <i class="material-icons left"></i>
                <i class="material-icons right"></i>
              </div>

            {/block}
          </section>
        {/block}
        </div>
        <div class="col-md-6">
          {block name='page_header_container'}
            {block name='page_header'}
              <h1 class="h1" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1>
            {/block}
          {/block}
          {block name='product_prices'}
            {include file='catalog/_partials/product-prices.tpl'}
          {/block}

          <div class="product-information">
            {block name='product_description_short'}
              <div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div>
            {/block}

            {if $product.is_customizable && count($product.customizations.fields)}
              {block name='product_customization'}
                {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations}
              {/block}
            {/if}

            <div class="product-actions">
              {block name='product_buy'}
                <form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
                  <input type="hidden" name="token" value="{$static_token}">
                  <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
                  <input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id">

                  {block name='product_variants'}
                    {include file='catalog/_partials/product-variants.tpl'}
                  {/block}

                  {block name='product_pack'}
                    {if $packItems}
                      <section class="product-pack">
                        <h3 class="h4">{l s='This pack contains' d='Shop.Theme.Catalog'}</h3>
                        {foreach from=$packItems item="product_pack"}
                          {block name='product_miniature'}
                            {include file='catalog/_partials/miniatures/pack-product.tpl' product=$product_pack}
                          {/block}
                        {/foreach}
                    </section>
                    {/if}
                  {/block}

                  {block name='product_discounts'}
                    {include file='catalog/_partials/product-discounts.tpl'}
                  {/block}

                  {block name='product_add_to_cart'}
                    {include file='catalog/_partials/product-add-to-cart.tpl'}
                  {/block}

                  {block name='product_additional_info'}
                    {include file='catalog/_partials/product-additional-info.tpl'}
                  {/block}

                  {block name='product_refresh'}
                    <input class="product-refresh ps-hidden-by-js" name="refresh" type="submit" value="{l s='Refresh' d='Shop.Theme.Actions'}">
                  {/block}
                </form>
              {/block}

            </div>

            {block name='hook_display_reassurance'}
              {hook h='displayReassurance'}
            {/block}


        </div>
      </div>
    </div>
    
    <section class="clearfix">
                  {block name='product_tabs'}
                  <div class="tabs">
                    <ul class="nav nav-tabs" role="tablist">
                      {if $product.description}
                        <li class="nav-item">
                           <a
                             class="nav-link{if $product.description} active{/if}"
                             data-toggle="tab"
                             href="#description"
                             role="tab"
                             aria-controls="description"
                             {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a>
                        </li>
                      {/if}
                      <li class="nav-item">
                        <a
                          class="nav-link{if !$product.description} active{/if}"
                          data-toggle="tab"
                          href="#product-details"
                          role="tab"
                          aria-controls="product-details"
                          {if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a>
                      </li>
                      {if $product.attachments}
                        <li class="nav-item">
                          <a
                            class="nav-link"
                            data-toggle="tab"
                            href="#attachments"
                            role="tab"
                            aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a>
                        </li>
                      {/if}
                      {foreach from=$product.extraContent item=extra key=extraKey}
                        <li class="nav-item">
                          <a
                            class="nav-link"
                            data-toggle="tab"
                            href="#extra-{$extraKey}"
                            role="tab"
                            aria-controls="extra-{$extraKey}">{$extra.title}</a>
                        </li>
                      {/foreach}
                    </ul>

                    <div class="tab-content" id="tab-content">
                     <div class="tab-pane fade in{if $product.description} active{/if}" id="description" role="tabpanel">
                       {block name='product_description'}
                         <div class="product-description">{$product.description nofilter}</div>
                       {/block}
                     </div>

                     {block name='product_details'}
                       {include file='catalog/_partials/product-details.tpl'}
                     {/block}

                     {block name='product_attachments'}
                       {if $product.attachments}
                        <div class="tab-pane fade in" id="attachments" role="tabpanel">
                           <section class="product-attachments">
                             <h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3>
                             {foreach from=$product.attachments item=attachment}
                               <div class="attachment">
                                 <h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
                                 <p>{$attachment.description}</p
                                 <a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
                                   {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
                                 </a>
                               </div>
                             {/foreach}
                           </section>
                         </div>
                       {/if}
                     {/block}

                     {foreach from=$product.extraContent item=extra key=extraKey}
                     <div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" role="tabpanel" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
                       {$extra.content nofilter}
                     </div>
                     {/foreach}
                  </div>  
                </div>
              {/block}
    </section>
    {block name='product_accessories'}
      {if $accessories}
        <section class="product-accessories clearfix">
          <h3 class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</h3>
          <div class="products">
            {foreach from=$accessories item="product_accessory"}
              {block name='product_miniature'}
                {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
              {/block}
            {/foreach}
          </div>
        </section>
      {/if}
    {/block}

    {block name='product_footer'}
      {hook h='displayFooterProduct' product=$product category=$category}
    {/block}

    {block name='product_images_modal'}
      {include file='catalog/_partials/product-images-modal.tpl'}
    {/block}

    {block name='page_footer_container'}
      <footer class="page-footer">
        {block name='page_footer'}
          <!-- Footer content -->
        {/block}
      </footer>
    {/block}
  </section>

{/block}

I just moved tabs block outside few divs. Also clear cache in Advanced Parameters > Performance.

  • Like 1
Link to comment
Share on other sites
Andeore Newbie

Andeore

Posted
  • Author
Posted

You should open from folder themes/classic/templates/catalog file product.tpl and edit it so it have this code 

{**
 * 2007-2017 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <[email protected]>
 * @copyright 2007-2017 PrestaShop SA
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
{extends file=$layout}

{block name='head_seo' prepend}
  <link rel="canonical" href="{$product.canonical_url}">
{/block}

{block name='head' append}
  <meta property="og:type" content="product">
  <meta property="og:url" content="{$urls.current_url}">
  <meta property="og:title" content="{$page.meta.title}">
  <meta property="og:site_name" content="{$shop.name}">
  <meta property="og:description" content="{$page.meta.description}">
  <meta property="og:image" content="{$product.cover.large.url}">
  <meta property="product:pretax_price:amount" content="{$product.price_tax_exc}">
  <meta property="product:pretax_price:currency" content="{$currency.iso_code}">
  <meta property="product:price:amount" content="{$product.price_amount}">
  <meta property="product:price:currency" content="{$currency.iso_code}">
  {if isset($product.weight) && ($product.weight != 0)}
  <meta property="product:weight:value" content="{$product.weight}">
  <meta property="product:weight:units" content="{$product.weight_unit}">
  {/if}
{/block}

{block name='content'}

  <section id="main" itemscope itemtype="https://schema.org/Product">
    <meta itemprop="url" content="{$product.url}">

    <div class="row">
      <div class="col-md-6">
        {block name='page_content_container'}
          <section class="page-content" id="content">
            {block name='page_content'}
              {block name='product_flags'}
                <ul class="product-flags">
                  {foreach from=$product.flags item=flag}
                    <li class="product-flag {$flag.type}">{$flag.label}</li>
                  {/foreach}
                </ul>
              {/block}

              {block name='product_cover_thumbnails'}
                {include file='catalog/_partials/product-cover-thumbnails.tpl'}
              {/block}
              <div class="scroll-box-arrows">
                <i class="material-icons left"></i>
                <i class="material-icons right"></i>
              </div>

            {/block}
          </section>
        {/block}
        </div>
        <div class="col-md-6">
          {block name='page_header_container'}
            {block name='page_header'}
              <h1 class="h1" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1>
            {/block}
          {/block}
          {block name='product_prices'}
            {include file='catalog/_partials/product-prices.tpl'}
          {/block}

          <div class="product-information">
            {block name='product_description_short'}
              <div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div>
            {/block}

            {if $product.is_customizable && count($product.customizations.fields)}
              {block name='product_customization'}
                {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations}
              {/block}
            {/if}

            <div class="product-actions">
              {block name='product_buy'}
                <form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
                  <input type="hidden" name="token" value="{$static_token}">
                  <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
                  <input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id">

                  {block name='product_variants'}
                    {include file='catalog/_partials/product-variants.tpl'}
                  {/block}

                  {block name='product_pack'}
                    {if $packItems}
                      <section class="product-pack">
                        <h3 class="h4">{l s='This pack contains' d='Shop.Theme.Catalog'}</h3>
                        {foreach from=$packItems item="product_pack"}
                          {block name='product_miniature'}
                            {include file='catalog/_partials/miniatures/pack-product.tpl' product=$product_pack}
                          {/block}
                        {/foreach}
                    </section>
                    {/if}
                  {/block}

                  {block name='product_discounts'}
                    {include file='catalog/_partials/product-discounts.tpl'}
                  {/block}

                  {block name='product_add_to_cart'}
                    {include file='catalog/_partials/product-add-to-cart.tpl'}
                  {/block}

                  {block name='product_additional_info'}
                    {include file='catalog/_partials/product-additional-info.tpl'}
                  {/block}

                  {block name='product_refresh'}
                    <input class="product-refresh ps-hidden-by-js" name="refresh" type="submit" value="{l s='Refresh' d='Shop.Theme.Actions'}">
                  {/block}
                </form>
              {/block}

            </div>

            {block name='hook_display_reassurance'}
              {hook h='displayReassurance'}
            {/block}


        </div>
      </div>
    </div>
    
    <section class="clearfix">
                  {block name='product_tabs'}
                  <div class="tabs">
                    <ul class="nav nav-tabs" role="tablist">
                      {if $product.description}
                        <li class="nav-item">
                           <a
                             class="nav-link{if $product.description} active{/if}"
                             data-toggle="tab"
                             href="#description"
                             role="tab"
                             aria-controls="description"
                             {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a>
                        </li>
                      {/if}
                      <li class="nav-item">
                        <a
                          class="nav-link{if !$product.description} active{/if}"
                          data-toggle="tab"
                          href="#product-details"
                          role="tab"
                          aria-controls="product-details"
                          {if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a>
                      </li>
                      {if $product.attachments}
                        <li class="nav-item">
                          <a
                            class="nav-link"
                            data-toggle="tab"
                            href="#attachments"
                            role="tab"
                            aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a>
                        </li>
                      {/if}
                      {foreach from=$product.extraContent item=extra key=extraKey}
                        <li class="nav-item">
                          <a
                            class="nav-link"
                            data-toggle="tab"
                            href="#extra-{$extraKey}"
                            role="tab"
                            aria-controls="extra-{$extraKey}">{$extra.title}</a>
                        </li>
                      {/foreach}
                    </ul>

                    <div class="tab-content" id="tab-content">
                     <div class="tab-pane fade in{if $product.description} active{/if}" id="description" role="tabpanel">
                       {block name='product_description'}
                         <div class="product-description">{$product.description nofilter}</div>
                       {/block}
                     </div>

                     {block name='product_details'}
                       {include file='catalog/_partials/product-details.tpl'}
                     {/block}

                     {block name='product_attachments'}
                       {if $product.attachments}
                        <div class="tab-pane fade in" id="attachments" role="tabpanel">
                           <section class="product-attachments">
                             <h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3>
                             {foreach from=$product.attachments item=attachment}
                               <div class="attachment">
                                 <h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
                                 <p>{$attachment.description}</p
                                 <a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
                                   {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
                                 </a>
                               </div>
                             {/foreach}
                           </section>
                         </div>
                       {/if}
                     {/block}

                     {foreach from=$product.extraContent item=extra key=extraKey}
                     <div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" role="tabpanel" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
                       {$extra.content nofilter}
                     </div>
                     {/foreach}
                  </div>  
                </div>
              {/block}
    </section>
    {block name='product_accessories'}
      {if $accessories}
        <section class="product-accessories clearfix">
          <h3 class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</h3>
          <div class="products">
            {foreach from=$accessories item="product_accessory"}
              {block name='product_miniature'}
                {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
              {/block}
            {/foreach}
          </div>
        </section>
      {/if}
    {/block}

    {block name='product_footer'}
      {hook h='displayFooterProduct' product=$product category=$category}
    {/block}

    {block name='product_images_modal'}
      {include file='catalog/_partials/product-images-modal.tpl'}
    {/block}

    {block name='page_footer_container'}
      <footer class="page-footer">
        {block name='page_footer'}
          <!-- Footer content -->
        {/block}
      </footer>
    {/block}
  </section>

{/block}

I just moved tabs block outside few divs. Also clear cache in Advanced Parameters > Performance.

 

 

WOW!!! WoooooW!!!! it is fantastic!

 

Perfect!!!

 

It works!!!

 

 

and for the block with categories to put in left in column??

Link to comment
Share on other sites
razaro Proficient

razaro

Posted
Posted

Missed that part of question sorry. 

 

You need to go to Design > Theme & logo then click on button "Choose layours" on right side.

Then for each type of page you can change layut. For category page it is  " Two columns, small left column".

That layout you want to apply to other pages like product which now have  "Full width". Try it out.

  • Like 1
Link to comment
Share on other sites
Andeore Newbie

Andeore

Posted
  • Author
Posted

Missed that part of question sorry. 

 

You need to go to Design > Theme & logo then click on button "Choose layours" on right side.

Then for each type of page you can change layut. For category page it is  " Two columns, small left column".

That layout you want to apply to other pages like product which now have  "Full width". Try it out.

 

thanks for your help though maybe i did not explain my problem well.

 

I would put to left in column a block (a list) of the categories that display in all page also in homepage.

 

such in this photo:

 

10ol7pz.jpg

Link to comment
Share on other sites
razaro Proficient

razaro

Posted
Posted

If you go to http://fo.demo.prestashop.com/en/3-women you see block categories there.in 1.7 

it is names Category tree links. It have option though to set Category root as home so all categories

will be displayed all time.

 

To display it at home page you can, like I mention in previous post, change layout of homepage. So instead 

Full width you choose Two columns-small left column for page named index. That way whole left column and all blocks

"hooked" there will be visable, with categories list too. http://nimb.ws/yq3uIn

 

Other solution is to transplant "categories tree links" module to displayHome hook and for example move position inside that hook to first place

then some small code editing for that block and slider block to make it in same row  to get this http://nimb.ws/WAKhiP. But that requres also some

testing and style adjustments for mobile.

  • Like 1
Link to comment
Share on other sites
Andeore Newbie

Andeore

Posted
  • Author
Posted

If you go to http://fo.demo.prestashop.com/en/3-women you see block categories there.in 1.7 

it is names Category tree links. It have option though to set Category root as home so all categories

will be displayed all time.

 

To display it at home page you can, like I mention in previous post, change layout of homepage. So instead 

Full width you choose Two columns-small left column for page named index. That way whole left column and all blocks

"hooked" there will be visable, with categories list too. http://nimb.ws/yq3uIn

 

Other solution is to transplant "categories tree links" module to displayHome hook and for example move position inside that hook to first place

then some small code editing for that block and slider block to make it in same row  to get this http://nimb.ws/WAKhiP. But that requres also some

testing and style adjustments for mobile.

ok 

I am more near to the solution

 

I went in Design > Theme & logo then click on button "Choose layours"  and setted "Two columns, small left column" for the pages: index, product and category. 

Then I went to design >position and I entered the module "Category tree links" in left column and then il also then column product page.

 

this is correct procedure??

 

Now the block of categories display in home, in category page and product page.

 

But there is a problem.

 

I setted this module (Category tree links) in current category.

 

So in example http://fo.demo.prestashop.com/en/3-women when i click women then I go in a page where the module display "tops" and "dresses"  but  if in my site I click "home"  or I click on the logo fo the site go in homepage but the module remains stationary on the last category that I've seen.

Link to comment
Share on other sites
Andeore Newbie

Andeore

Posted
  • Author
Posted

Think that option is  not available in module.

Like Current category if category page else  Home category.

Module do keep in cookie last visited category so that is why it displayed on Home too.

so is it better non show the module in homepage?

Link to comment
Share on other sites
razaro Proficient

razaro

Posted
Posted

That is up to you, depending on your categories. I see lot of themes with categories in homepage. 

If you have like really big and different departments it can be a plus. But think you could use first option

in module to have Home category, so all categories are visible on every page and not so dynamic.

  • Like 1
Link to comment
Share on other sites
Andeore Newbie

Andeore

Posted
  • Author
Posted (edited)

That is up to you, depending on your categories. I see lot of themes with categories in homepage. 

If you have like really big and different departments it can be a plus. But think you could use first option

in module to have Home category, so all categories are visible on every page and not so dynamic.

if i set the module  "Category tree links" in fisrt option (main category) it displays all categories in all page.

But in example if i click "women" and then I click "tops" the module show the menu category closed and it not shows that in "tops" there are other categories ( t-shirt, blouses) and the site in center page not show the sub-categories with photo such as in prestashop 1.4.

 

so how does the customer know that there are subcategories? and how the customer can choose the subcategory?

can not I put the choice on the page?

 

EDIT

I I followed this guide https://mypresta.eu/prestashop-17/display-available-subcategories.html and now the page display subcategories.

 

 

only a help, when the guide says "Now it's time to personalize design of list of subcategories that we created. In this case we will modify theme's css file. It is located in this path: /assets/css/theme.css. Please open it and at the end of file paste these css styles:"

 

I not have the directory my site/assets so maybe is the correct position  mysite/themes/classic/assets/css ???

 

Because I edited the file theme.css located in mysite/themes/classic/assets/css 

Edited by Andeore (see edit history)
Link to comment
Share on other sites
Andeore Newbie

Andeore

Posted
  • Author
Posted

You got right path as it can be any theme based ob classic theme.

 

 

please please please, help me!!!

 

 

I have a problem!!!

 

when I visit the my site from a mobile device such as smartphone and I want the desktop versione, the module display this:

 

 

142a83c.png

 

 

pleaseeeee!!!

Link to comment
Share on other sites
razaro Proficient

razaro

Posted
Posted

It depends on code you have and how you placed  that category block.

 

But judging from image you have something like this:  category block have 2 or 3 grid columns and

slider have 10 or 9. Or they are just one next to other. You could use 

col-xs-12 col-sm-12 col-md-3

class to  wrap block categories on home. So on mobile and small screens it is full width (12 columns) and on bit larger screens take just 3 columns (col-md-3)

  • Like 1
Link to comment
Share on other sites
Andeore Newbie

Andeore

Posted
  • Author
Posted

It depends on code you have and how you placed  that category block.

 

But judging from image you have something like this:  category block have 2 or 3 grid columns and

slider have 10 or 9. Or they are just one next to other. You could use 

col-xs-12 col-sm-12 col-md-3

class to  wrap block categories on home. So on mobile and small screens it is full width (12 columns) and on bit larger screens take just 3 columns (col-md-3)

where do I paste this code?

Link to comment
Share on other sites
razaro Proficient

razaro

Posted
Posted

You can do it with css true, with media queries, and make block full width.

@media (max-width: 767px){
    body#index block-categories {
        width: 100%;
    }
}

Or you can try to open themes/classic/modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl

and near bottom edit code to 

<div class="block-categories col-xs-12 col-md-3"> 

and I removed hidden-sm-down  but you have to check categories pages and if that causes any issue.

 

So try something , make sure you backup files you are editing.

  • Like 1
Link to comment
Share on other sites
Andeore Newbie

Andeore

Posted
  • Author
Posted (edited)

You can do it with css true, with media queries, and make block full width.

@media (max-width: 767px){
    body#index block-categories {
        width: 100%;
    }
}

Or you can try to open themes/classic/modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl

and near bottom edit code to 

<div class="block-categories col-xs-12 col-md-3"> 

and I removed hidden-sm-down  but you have to check categories pages and if that causes any issue.

 

So try something , make sure you backup files you are editing.

 

 

I edited  themes/classic/modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl but now If I visit the site in desktop version on my smartphone the block categories is not more.

 

I  not unsderstood the first solution "You can do it with css true, with media queries, and make block full width....."

 

 

but id I visit the demo prestashop 1.7 in desktop version in my smartphone the module of demo version not have this problem

Edited by Andeore (see edit history)
Link to comment
Share on other sites
razaro Proficient

razaro

Posted
Posted

Try with this, ad to custom.css

@media (min-width: 768px) and (max-width:1199px) {

    body#index #left-column {
        padding:0;
    }

    body#index .block-categories .category-sub-menu li[data-depth="0"]>a {
        font-size: 0.8rem;
    }

    body#index .navbar-toggler {
        width: 2.5em;
        height: 2em;
        padding: .1rem .75rem;
        font-size: .8375rem;
    }

}

Note on mobile that block is hidden as you have top menu but if you still want to show it there use 


@media (max-width: 767px) {
body#index .block-categories {
    display: inline-block !important;
    width: 100%;
}
}

P.S. please do not bump topic like 2 post I have deleted.

  • Like 1
Link to comment
Share on other sites
Andeore Newbie

Andeore

Posted
  • Author
Posted (edited)

Try with this, ad to custom.css

@media (min-width: 768px) and (max-width:1199px) {

    body#index #left-column {
        padding:0;
    }

    body#index .block-categories .category-sub-menu li[data-depth="0"]>a {
        font-size: 0.8rem;
    }

    body#index .navbar-toggler {
        width: 2.5em;
        height: 2em;
        padding: .1rem .75rem;
        font-size: .8375rem;
    }

}

Note on mobile that block is hidden as you have top menu but if you still want to show it there use 

@media (max-width: 767px) {
body#index .block-categories {
    display: inline-block !important;
    width: 100%;
}
}

P.S. please do not bump topic like 2 post I have deleted.

 

 

Ok I want show the block on mobile, so do I must past only this code?

@media (max-width: 767px) {
body#index .block-categories {
    display: inline-block !important;
    width: 100%;
}
}

but where do  I paste this?

 

EDIT:

 

so I pasted in mysite/themes/classic/assets/css/custom.css

@media (min-width: 768px) and (max-width:1199px) {

body#index #left-column {
padding:0;
}

body#index .block-categories .category-sub-menu li[data-depth="0"]>a {
font-size: 0.8rem;
}

body#index .navbar-toggler {
width: 2.5em;
height: 2em;
padding: .1rem .75rem;
font-size: .8375rem;
}

}

and now the desktop version of the site in mobile device displays correctly.

 

 

but I not understand when you say:

 

 

Note on mobile that block is hidden as you have top menu but if you still want to show it there use 

 

 

In fact before I pasted in  mysite/themes/classic/assets/css/custom.css

 

only the second code:

@media (max-width: 767px) {
body#index .block-categories {
    display: inline-block !important;
    width: 100%;
}
}

but with only this nothing happens and the module has the same problem.

 

maybe I have to past the second code after the first ?

 

I not understand. :(

 

 

Edited by Andeore (see edit history)
Link to comment
Share on other sites
Andeore Newbie

Andeore

Posted
  • Author
Posted

To me that codes work, it display correct, categories block is visible and 100% width.

Maybe depends on device you are testing.

 

maybe because now  I pasted in  mysite/themes/classic/assets/css/custom.css the fistr code  and immediately below the second code.

 

maybe did you advise me to do this?

Link to comment
Share on other sites
Andeore Newbie

Andeore

Posted
  • Author
Posted

Yes I told you already, looks good for me.

 

Is it possible put the slider image in mobile over the  block categories'

 

but in desktop version the slider must remain in you position.

 

 

If you want help me otherwise don't worry.

 

 

thanks!!

Link to comment
Share on other sites
Andeore Newbie

Andeore

Posted
  • Author
Posted (edited)

Yes I told you already, looks good for me.

please!!

 

in subactegories page there is  the problem still!!

 

I tried to paste this at custom.css but the problem remain

@media (min-width: 768px) and (max-width:1199px) {

    body#category #left-column {
        padding:0;
    }

    body#category .block-categories .category-sub-menu li[data-depth="0"]>a {
        font-size: 0.8rem;
    }

    body#category .navbar-toggler {
        width: 2.5em;
        height: 2em;
        padding: .1rem .75rem;
        font-size: .8375rem;
    }
Edited by Andeore (see edit history)
Link to comment
Share on other sites
razaro Proficient

razaro

Posted
Posted

Because you want to look same on all pages then use this code only in custom.css 

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

@media (min-width: 768px) and (max-width:1199px) {

    #left-column {
        padding:0;
    }

    .block-categories .category-sub-menu li[data-depth="0"]>a {
        font-size: 0.8rem;
    }

    .navbar-toggler {
        width: 2.5em;
        height: 2em;
        padding: .1rem .75rem;
        font-size: .8375rem;
    }

}

@media (max-width: 767px) {
     .block-categories {
        display: inline-block !important;
        width: 100%;
    }
}

Clear browser cache and try again.

 

P.S. Contacting  by PM and just posting link and asking for help by PM is against forum rules.

  • Like 1
Link to comment
Share on other sites
Andeore Newbie

Andeore

Posted
  • Author
Posted (edited)

Because you want to look same on all pages then use this code only in custom.css 

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

@media (min-width: 768px) and (max-width:1199px) {

    #left-column {
        padding:0;
    }

    .block-categories .category-sub-menu li[data-depth="0"]>a {
        font-size: 0.8rem;
    }

    .navbar-toggler {
        width: 2.5em;
        height: 2em;
        padding: .1rem .75rem;
        font-size: .8375rem;
    }

}

@media (max-width: 767px) {
     .block-categories {
        display: inline-block !important;
        width: 100%;
    }
}

Clear browser cache and try again.

 

P.S. Contacting  by PM and just posting link and asking for help by PM is against forum rules.

 

 

I'm sorry. I'm very sorry. I did not want to go against the rules of the forum. I'm very sorry.

 

this code not works as well as the first code because in the block categories menù in desktop version on mobile the "+" sign is very near to the words.

 

I open the site so you can see.

 

EDIT:

 

I editet the string widht of .navbar-toggler.

 

So now I pasted this:

@media (min-width: 768px) and (max-width:1199px) {

    #left-column {
        padding:0;
    }

    .block-categories .category-sub-menu li[data-depth="0"]>a {
        font-size: 0.8rem;
    }

    .navbar-toggler {
        width: 1.5em;
        height: 2em;
        padding: .1rem .75rem;
        font-size: .8375rem;
    }

}

@media (max-width: 767px) {
     .block-categories {
        display: inline-block !important;
        width: 100%;
    }
}

I don't know if I made well. Was this the parameter to modify?

 

a question. If i want display the block category only in homepage I must replace this:

@media (max-width: 767px) {
     .block-categories {
        display: inline-block !important;
        width: 100%;
    }
}

and paste this????

@media (max-width: 767px) {
body#index .block-categories {
    display: inline-block !important;
    width: 100%;
}
}
Edited by Andeore (see edit history)
Link to comment
Share on other sites
razaro Proficient

razaro

Posted
Posted

yes original + is to close, try this then 

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

@media (min-width: 768px) and (max-width:1199px) {

    #left-column {
        padding:0;
    }

    .block-categories .category-sub-menu li[data-depth="0"]>a {
        font-size: 0.8rem;
    }



}

@media (max-width: 767px) {
     .block-categories {
        display: inline-block !important;
        width: 100%;
    }
}

.navbar-toggler {
    width: 1.8em;
    height: 2em;
    padding: .1rem .75rem;
    font-size: .8375rem;
}

You can adjust + position by changing width: 1.8em; ,was 1.5 but maybe too right.

Link to comment
Share on other sites
Andeore Newbie

Andeore

Posted
  • Author
Posted

yes original + is to close, try this then 

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

@media (min-width: 768px) and (max-width:1199px) {

    #left-column {
        padding:0;
    }

    .block-categories .category-sub-menu li[data-depth="0"]>a {
        font-size: 0.8rem;
    }



}

@media (max-width: 767px) {
     .block-categories {
        display: inline-block !important;
        width: 100%;
    }
}

.navbar-toggler {
    width: 1.8em;
    height: 2em;
    padding: .1rem .75rem;
    font-size: .8375rem;
}

You can adjust + position by changing width: 1.8em; ,was 1.5 but maybe too right.

 

WOW!!!

PERFECT!!!

 

Only in mobile theme how put the  slider image first (over) of block category?

Link to comment
Share on other sites
  • 2 months later...
Tomas Newbie

Tomas

Posted
Posted
On 10/4/2017 at 5:48 AM, razaro said:

If you go to http://fo.demo.prestashop.com/en/3-women you see block categories there.in 1.7 

it is names Category tree links. It have option though to set Category root as home so all categories

will be displayed all time.

 

To display it at home page you can, like I mention in previous post, change layout of homepage. So instead 

Full width you choose Two columns-small left column for page named index. That way whole left column and all blocks

"hooked" there will be visable, with categories list too. http://nimb.ws/yq3uIn

 

Other solution is to transplant "categories tree links" module to displayHome hook and for example move position inside that hook to first place

then some small code editing for that block and slider block to make it in same row  to get this http://nimb.ws/WAKhiP. But that requres also some

testing and style adjustments for mobile.

Hello ! 

How I show my home like your example https://s.nimbus.everhelper.me/share/1156709/dbt7pevcsn1pym5pbmo3 ? 

Actually I'm working with the multistore option, but I need show this desing only in one store!

Thanks ! 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...