Afficher "Sold out" dans l'affichage du catalog

Alzinx · December 30, 2019

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.

Alzinx · December 31, 2019

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.

luishuaymana · December 31, 2019

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.

Alzinx · December 31, 2019

C’est ce que je recherche.

l’URL de mon site web:

https://interest-check.com/en/

Alzinx · January 2, 2020

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 🥴).

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":

CSS pas "pris en compte"
Afficher le texte dans 3 langues différentes selon le choix de langue par l'utilisateur.
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.

Alzinx · January 3, 2020

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 :

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 January 4, 2020 by Alzinx
Amélioration du code dans le fichier .tpl (see edit history)

Andriano · January 7, 2020

Bonjour,

et donc problème résolu ou pas ?

Alzinx · January 7, 2020

Bonjour,

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

BilalDeBordeaux · May 24, 2021

Merci beaucoup pour cette solution et de l'avoir partagé ! Je suis dans le même cas, je vais essayer ça

Sign In

Afficher "Sold out" dans l'affichage du catalog

Recommended Posts

Alzinx

Link to comment

Share on other sites

Alzinx

Link to comment

Share on other sites

luishuaymana

Link to comment

Share on other sites

Alzinx

Link to comment

Share on other sites

Alzinx

Link to comment

Share on other sites

Alzinx

Link to comment

Share on other sites

Andriano

Link to comment

Share on other sites

Alzinx

Link to comment

Share on other sites

BilalDeBordeaux

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