Modification d'une fiche produit

[angelique.comjulien]

Bonjour à tous, 

J'ai voulu modifier un petit peu la mise en page de la fiche produit. Pour ce faire j'ai modifier uniquement la structure html du fichier product.tpl

Je souhaite mettre la partie description et détail du produit sur le côté gauche en dessous des photos. Pour cela j'ai donc créer une nouvelle row et dans cette row, j'ai fait deux col de 6. Sur la col de gauche, j'ai mis le code de la description et du détails du produit et sur la col de droit j'ai mis le code de product-variant, de la quantité et de l'ajout du panier. 

Le problème est, qu'en effectuant cette modification j'ai un problème avec l'input de la quantité (cf photo). Cet input ne fonctionne plus avec la modification (impossible de cliquer dessus pour modifier la quantité) et les flèches ne s'affiche plus.

 

Voici le code modifier.

<div class="row descBouloddo">
      <div class="col-md-6">
        <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>
      </div>
      <div class="col-md-6">
        <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">
              <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}

            {if $product.price_amount eq "0"}
            <p></p>
            {else}
            {block name='product_add_to_cart'}
            {include file='catalog/_partials/product-add-to-cart.tpl'}
            {/block}
            {/if}



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

          {hook h='displayNdkCustomization'}

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

        </div>
      </div>
    </div>

Je vous mettre également le lien d'une fiche non modifier (sous la boutique petanque-web) : Pétanque-web

et le lien modifié (sous une autre boutique Bouloddo, boutique en développement qui remplacera la boutique petanque-web) : Bouloddo

 

Configuration de mes boutiques : 

Version de PrestaShop : 1.7.6.4

URL de la boutique : https://www.petanque-web.com/ et https://bouloddo.com/

Informations sur votre serveur Linux #1 SMP Debian 3.16.56-1+deb8u1 (2018-05-08) x86_64

Version du logiciel serveur : nginx/1.16.1

Version de PHP : 7.1.33

[Polylight]

Une div passe par-dessus, je peux cliquer sur le bas.

Ajouter un z-index sur votre input pour le faire passer par-dessus 

https://developer.mozilla.org/fr/docs/Web/CSS/z-index

essayer ça dans un premier temps

Edited April 5, 2022 by Polylight (see edit history)