Jump to content
Alzinx

Afficher "Sold out" dans l'affichage du catalog

Recommended Posts

Bonjour,

J'imagine que la question a du être posée pleins de fois, je m'excuse d'avance de la reposer mais je n'ai pas trouvé d'articles y répondant.

 

Je suis en version 1.7.5.2 de prestashop

 site hébérgé chez OVH 

Mon template est à la version 1.7.5.0. et je l'ai généré à l'aide d'un outils payant.

J'ai suivi les différents conseils apportés par ce topic:
https://www.prestashop.com/forums/topic/747093-display-stock-availability-in-product-listing-for-prestashop-173/

J'ai pu remarquer qu'il y avait plusieurs personnes chez qui cela ne fonctionnait pas.

Je vous montre mon code final dans le fichier product.tpl dans: /www/themes/MONTHEME/templates/catalog/_partials/miniatures

{**
 * 2007-2018 PrestaShop
 *...
 *}
{block name='product_miniature_item'}
  <article class="product-miniature js-product-miniature" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}" itemscope itemtype="http://schema.org/Product">
    <div class="thumbnail-container clearfix">
      {block name='product_thumbnail'}
        {if $product.cover}
          <a href="{$product.url}" class="thumbnail product-thumbnail">
            <img
              src = "{$product.cover.bySize.home_default.url}"
              alt = "{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
              data-full-size-image-url = "{$product.cover.large.url}"
            >
          </a>
        {else}
          <a href="{$product.url}" class="thumbnail product-thumbnail">
            <img
              src = "{$urls.no_picture_image.bySize.home_default.url}"
            >
          </a>
        {/if}
      {/block}
	

      <div class="product-description">
        {block name='product_name'}
          {if $page.page_name == 'index'}
            <h3 class="h3 product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:30:'...'}</a></h3>
          {else}
            <h2 class="h3 product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:30:'...'}</a></h2>
          {/if}
        {/block}

        {block name='product_price_and_shipping'}
          {if $product.show_price}
            <div class="product-price-and-shipping">
              {if $product.has_discount}
                {hook h='displayProductPriceBlock' product=$product type="old_price"}

                <span class="sr-only">{l s='Regular price' d='Shop.Theme.Catalog'}</span>
                <span class="regular-price">{$product.regular_price}</span>
              {/if}

              {hook h='displayProductPriceBlock' product=$product type="before_price"}

              <span class="sr-only">{l s='Price' d='Shop.Theme.Catalog'}</span>
              <span itemprop="price" class="price">{$product.price}</span>

              {hook h='displayProductPriceBlock' product=$product type='unit_price'}

            {hook h='displayProductPriceBlock' product=$product type='weight'}
          </div>
        {/if}
      {/block}

      {block name='product_reviews'}
        {hook h='displayProductListReviews' product=$product}
      {/block}
	  
	  {block name='product_miniature_item'}
                {if $product.quantity_all_versions < 1}
                    <span class="availability-list availability-list-out-of-stock">Out Of Stock</span>
                {/if}
             {/block} 
    </div>
    {block name='product_flags'}
    <div class="product-flags-wrapper">
      <ul class="product-flags">
        {foreach from=$product.flags item=flag}
          <li class="product-flag {$flag.type}">{$flag.label}</li>
        {/foreach}
        {if $product.discount_type === 'percentage'}
          <li class="discount-percentage discount-product">{$product.discount_percentage}</li>
        {elseif $product.discount_type === 'amount'}
          <li class="discount-amount discount-product">{$product.discount_amount_to_display}</li>
        {/if}
      </ul>
    </div>
    {/block}

    <div class="highlighted-informations{if !$product.main_variants} no-variants{/if} hidden-sm-down">
      {block name='quick_view'}
        <a class="quick-view" href="#" data-link-action="quickview">
        <i class="material-icons search"></i> {l s='Quick view' d='Shop.Theme.Actions'}
        </a>
      {/block}

      {block name='product_variants'}
        {if $product.main_variants}
          {include file='catalog/_partials/variant-links.tpl' variants=$product.main_variants}
        {/if}
      {/block}
    </div>

  </div>
  </article>
{/block}

J'ai ajouté un CSS Custom.css ici: /www/themes/MONTHEME/assets/css.

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

.availability-list{

padding: 4px;

color:white;

position: Center;

right:0;

bottom:0;

}

.availability-list-in-stock{

background-color: green;

}

.availability-list-out-of-stock{

background-color : red;

}

.thumbnail-container{

position: relative

}

Je sais développer en HTML / CSS / PHP / JavaScript, mais je ne parviens pas à réfléchir comment debug dans ce cas là car je suis nouveau dans prestashop et les CMS.

Je suis prêt à vous partager d'autres informations si nécessaire.

Merci d'avance pour votre aide.

Share this post


Link to post
Share on other sites

Je suis toujours dans l'attente d'aide, je suis conscient qu'en période de fêtes je n'obtiendrai moins de réponses mais je ne trouve vraiment aucunes solutions en ligne.

 

Merci d'avance.

Share this post


Link to post
Share on other sites

Je laisse un exemple dans un magasin en espagnol de ce que j'ai, je ne sais vraiment pas si c'est ce que vous cherchez.
Si c'est le cas, il serait plus facile de vous aider si vous mettez l'URL de votre magasin.

Captura de Pantalla 2019-12-31 a la(s) 11.01.56.png

Share this post


Link to post
Share on other sites

Reboujour et bonne année !

Le code est enfait bel et bien fonctionnel... Je n'avais pas pensé à supprimer le cache depuis le backend (J'avais uniquement clear le cache de mon navigateur 🥴).

SOLDOUT.thumb.PNG.e42b87aa3f5dfc24f3ba4482359c67b2.PNG

Je voudrais encore modifier l'emplacement de mon "sold out" car j'ai l'impression que pour le moment mon CSS n'est pas pris en compte. Cela sors peut être un peu de ma requête initiale mais j'aimerais bien pouvoir ajouter une condition selon la marque du produit, afficher un texte différent. Mon site est également en 3 langues, serait-ce possible de traduire le texte dans ces 3 langues ? Je crois qu'il y a un systême de traduction dans prestashop et que je devrais pas gérer ça à l'aide d'un IF dans mon template. Si quelqu'un pourrait m'éclairer sur mes 3 "demandes":

  1. CSS pas "pris en compte"
  2. Afficher le texte dans 3 langues différentes selon le choix de langue par l'utilisateur.
  3. Inclure dans mon IF la marque du produit afin de faire personnaliser le texte.

Merci d'avance pour toutes réponses ou toutes indications me permettant de faire des recherches pour arriver à une réponse.

 

Share this post


Link to post
Share on other sites
Posted (edited)

Après quelques recherches j'ai arrété de m'embeter avec le CSS pas pris en compte et ai simplement ajouté mon bout de code au bas du css de mon theme:

chemin: /www/themes/MONTHEME/assets/css 

fichier: theme.css (Je voulais créer mon CSS: custom.css)

Le css est maintenant pris en compte.

Pour l'affichage "SOLD OUT" que je recherchais j'ai du créer une DIV et positionner mon code ailleurs.

Mon CSS a également été modifié. 

Je mets donc ici une visualisation du résultat ainsi que mes parties de code : 

SOLDOUT.thumb.PNG.90f6ac6d23817725bf53339d86398cab.PNG

 

mon fichier product.tpl :

/www/themes/MONTHEME/templates/catalog/_partials/miniatures

{block name='product_miniature_item'}
  <article class="product-miniature js-product-miniature" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}" itemscope itemtype="http://schema.org/Product">
	
	
  
    <div class="thumbnail-container clearfix">
		
		{block name='product_miniature_item'}
                {if $product.quantity_all_versions < 1}
                    <div class="Sold-out-box">
                    	<span class="availability-list availability-list-out-of-stock">SOLD OUT</span>
      				</div>
                {/if}
             {/block}
	
      {block name='product_thumbnail'}
        {if $product.cover}
          <a href="{$product.url}" class="thumbnail product-thumbnail">
            <img
              src = "{$product.cover.bySize.home_default.url}"
              alt = "{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
              data-full-size-image-url = "{$product.cover.large.url}"
            >
          </a>
        {else}
          <a href="{$product.url}" class="thumbnail product-thumbnail">
            <img
              src = "{$urls.no_picture_image.bySize.home_default.url}"
            >
          </a>
        {/if}
      {/block}
    ...

Mon fichier theme.CSS:

/www/themes/MONTHEME/assets/css

...

.availability-list {
    text-shadow: 3px 3px 3px black;
    border-style: solid;
    padding: 9px;
    color: #ff0000;
    left: 35px;
    top: 130px;
    position: absolute;
    font-size: xx-large;
    border-color: red;
    box-shadow: 3px 3px 7px 1px black;
}

.thumbnail-container{

position: relative

}

EDIT: Je fais une petite correction technique dans le fichier .tpl pour que la div soit crée seulement en cas de produit sold out, actuellement la div était crée dans tous les cas mais pas le texte sold out.

Edited by Alzinx
Amélioration du code dans le fichier .tpl (see edit history)

Share this post


Link to post
Share on other sites

Bonjour,

Oui résolu je n'ai pas trouvé comment cloturer.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More