جدول محتوا
مدت زمان خواندن بلاگ: ۵ دقیقه
مقدمه
در این مقاله قصد دارم، مثل تصویر بالا یک برچسب اتمام موجودی محصولات بیاریم تا کاربر متوجه بشه که کدوم محصول ناموجوده و کدوم موجوده.
خوده المنتور و ووکارس همچین آپشنی ندارند و کاربر نیز گیج میشود ولی ما با چند خط کد cssساده اینکار رو میکنیم.
*در این مقاله اموزش ساخت کارت محصول داده نمیشود و فقط آموزش ساخت لیبیل ناموجود رو میگم.
آموزش نمایش برچسب اتمام موجودی در المنتور
برای اینکار وارد طبق عکس بالا ،وارد ویرایشگر پرونده پوسته میشیم ،(حتما توجه داشته باشید که قالب چاید فعال باشد).
سپس وارد style.css میشویم و کد زیر را قرار میدهیم.
// Note: this is simple CSS that can be placed in your custom.css file
//codemoj.ir
//abbaszarnooshe
.e-loop-item.outofstock {
filter: grayscale(1);
}
.e-loop-item.outofstock:after {
content: "ناموجود";
background: #f9392b;
position: absolute;
top: 20%;
color: #fff;
padding: 6px 15px;
width: 80%;
text-align: center;
justify-self: anchor-center;
}
این کد ها چیکار میکنند؟
filter: این کد یک لایه طوسی روی کارت محصول ایجاد میکند تا از بقیه محصولات متمایز شود.
content: محتوایی که میخواییم روی محصول ناموجود نشون بده.
background: رنگ پس زمینه محتوای که نوشتیم
position: نوع موقعیت (نیاز به دانش css بیشتری میخواد و در اینجا بازش نمیکنیم ،این را حتما absolute میزاریم)
top: فاصله اش از بالای کارت
color: رنگ نوشته
padding: فاصله از کنارها
width: عرض برچسب
text-align: موقعیت متن نوشته
justify-self: موقعیت خوده لیبل