Edit History

Alzinx · January 4, 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.

Alzinx · January 3, 2020