Jump to content
  • 0

Pytanie o scroll down do tabs

pele100

Asked by pele100,

 Share

Question

pele100 Newbie

pele100

Posted
Posted

Witajcie, 

Chciałem zapytać w jaki sposób zrobić, aby po kliknięciu w odnośnik przenosiło do tabs 

Dodaje taki odnośnik <a role="tab" href="#fmm_1"><u>Czytaj poniżej</u></a>

A to mój kod product.tpl 

{**
 * 2007-2018 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 <contact@prestashop.com>
 * @copyright 2007-2018 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="{if $postheme.product_thumbnail == 0}col-md-6 {else} col-md-6 {/if}">
        {block name='page_content_container'}
          <section class="page-content" id="content">
            {block name='page_content'}
            
              {block name='product_cover_thumbnails'}
				{include file='catalog/_partials/product-cover-thumbnails.tpl'}
              {/block}           
            {/block}
          </section>
        {/block}
        </div>
        <div class="{if $postheme.product_thumbnail == 0}col-md-6 {else} col-md-6 {/if}">
			<div class="content_info">
				
				{hook h='DisplayReviewsProduct'}
				{block name='page_header_container'}
					{block name='page_header'}
					  <h1 class="h1 namne_details" 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}" class="product-description-short" itemprop="description">{$product.description_short nofilter}
					<div class="control-label">
					Opis: <a href="#product-details"><u>Czytaj poniĹĽej</u></a><br>
					Specyfikacja: <a role="tab" href="#fmm_1"><u>Czytaj poniĹĽej</u></a></div></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}
					  <div class="control-label"><a href="#product-details" role="tab"><u>Tabela rozmiarĂłw</u></a></div>

					  {block name='product_pack'}
						{if $packItems}
						  <section class="product-pack">
							<p class="h4">{l s='This pack contains' d='Shop.Theme.Catalog'}</p>
							{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}

					  {* Input to refresh product HTML removed, block kept for compatibility with themes *}
					  {block name='product_refresh'}{/block}
					</form>
				  {/block}

				</div>

				{block name='hook_display_reassurance'}
				  {hook h='displayReassurance'}
				{/block} 
			</div>
		  </div>
      </div>
    </div>
	<div class="row">
		<div class="col-xs-12">
			{block name='product_tabs'}
            <div class="tabs {if $postheme.product_infotab == 1}tabs-left{else if $postheme.product_infotab == 2} tabs-right {/if}">  
                <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>
				  {hook h='ProductTab'}
                  {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}
				<div class="tab-pane fade in" id="idTab5">
					{hook h='ProductTabContent'}
				</div>	
                 {block name='product_attachments'}
                   {if $product.attachments}
                    <div class="tab-pane fade in" id="attachments" role="tabpanel">
                       <section class="product-attachments">
                         <p class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</p>
                         {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}
		</div>
	</div>
    {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}
	<script>
	
	</script>
  </section>

{/block}

 

Bez tytułu.png

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
endriu107 Grand Master

endriu107

Posted
Posted

Najlepiej jakby tab miało jakieś id typu id_tab wtedy wystarczy dodać taki kod odnośnika: 

<a href="#id_tab">Czytaj poniżej</a>

i na scrolla możesz nadać smooth co by się ładnie przesuwało.

Ostatnio publikowałem poradnik jak zrobić przycisk scroll to top więc możesz sobie podejrzeć jak to jest zrobione z tym że u ciebie będzie prościej bez zmian w js tylko dodanie id w tpl-u i w css odnieść się do scrolla https://www.youtube.com/watch?v=pCJDfJ6DIVw

 

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 question listing
×
×
  • Create New...