1

I have been searching for an answer a long time with no success at all.

I am buildind a drupal commerce website and i would like to show on a specific products the word "Sale" or "Discount" as showing in the picture below (like the green Sale Tag).

Notice the "Sale!" Green Tag

I can do it using photoshop but is really a pain to go over hundred of product just to photoshop a "Sale" text on every product picture in question.

Can someone point me to a specific module that can do such job ?! Note that i know basic CSS so if this could be done using some CSS code, a starting push from any body will be appreciated !

Thank you,

1
  • you can simply assign a "class" to particular products and css will handle the rest. Commented Aug 4, 2016 at 6:53

2 Answers 2

3

With Views Conditional you can make it that if Label Discount Name is equal to Sale then <div class="sale"><img src="...."></div> Otherwise output nothing.

Then do the same for Discount.

Views Conditional is a simple module that allows you to define conditionals (if xxx then yyy) with fields in views. Conditions include:

Equal To
Not Equal To
Greater Than
Less Than
Empty
Not Empty

Views conditional allows you to output text based on the result of the condition.

3
  • 1
    in your answer you mentioned the img src but i am trying to add a "sale" text to the content type so whatever the product or image will be, once the "sale" text exist the design will take effect and once the "sale" text is removed the design just disappear ! Is that possible to be done using your answer above ? Thank you for your help! Commented Aug 4, 2016 at 22:37
  • i am trying to add a "sale" text to the content type so whatever the product or image will be, once the "sale" text exist the design will take effect yes, my answer already takes that into account. As the views conditional checks if the text of Label Discount Name is equal to sale. I read your "answer" so I already knew you already created a field (Label Discount Name) in your content type which will have the sale/clearance text.
    – No Sssweat
    Commented Aug 4, 2016 at 23:42
  • Alright, thank you so much i will go more in deep using the views conditional and revert back here with any issue i face, if any. Commented Aug 5, 2016 at 8:10
0

Finally resolved...

For the sake of anyone having the same question, the trick is to add a "CSS Class" to the field in question and use some CSS codes to achieve whatever the design you like.

1) Create the field in question in the correspondant content type.

2) Goto manage display of that content type, select what "view" you want to use between the available views on the "manage display" page and then make the field in question visible and choose the format to be: Linked and Wrapped and then click on field settings where you should:

_ Wrap the title in tag: DIV

_ Link title to: Nothing

_ Add your class: yourclass

3) Use yourclass and add some CSS Code to design the content of the field in question.

NOTE: The good thing is that when the field in question is empty all the design just disappear and you will see nothing on your product which is awesome.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.