Jump to content

Hover Effect Στα Products Με Description Και Combinations


gianvas

Recommended Posts

Καλησπέρα φίλε μου. Να σε καλοσορίσω από μεριάς μου στην ελληνική κοινότητα του Forum.

Αν και δεν έχεις ψάξει καθόλου στο διαδίκτυο, διότι είναι πολύ απλή η διαδικασία (πρόκειται για απλή CSS), ορίστε η εξήγηση:

Όταν δε βρίσκεσαι εντός του div class="product-item" το div class="product-description" έχει opacity=0. Ενώ όταν βρίσκεσαι εντός του div class="product-item" (χωρίς να πατάς κάτι με το ποντίκι), όταν κάνεις "hover" δηλαδή όπως λέγεται με την τεχνική ορολογία του, μεταβάλλεται το opacity του div class="product-description" και παίρνει την τιμή 1

Αυτό το διαπιστώνεις από το αρχείο css και συγκεκριμένα τη σειρά 8101. Εκεί έχεις την εξής εντολή:

.product-item-column .product-item:hover .product-image .product-description {
    opacity: 1;
}

Που είναι αυτό ακριβώς που σε εξήγησα περιφραστικά.

Αν χρειαστείς κάτι άλλο θα είμαι στη διάθεση σου, απλώς ψάξε λίγο περισσότερο ώστε να επεμβαίνουμε σε πιο ψαγμένα προβλήματα. Διότι ως χώρα έχουμε μείνει πίσω (αναφέρομαι καθαρά στην κοινότητα της PrestaShop)

Φιλικά,

Κωνσταντίνος Α. Κογκαλίδης

Link to comment
Share on other sites

 σε ευχαριστώ πολύ για την απάντηση αλλά νομίζω δεν με κατάλαβες τι θέλω να κάνω.Είμαι κιόλας κάπως καινούργιος στην prestashop. Την παραμετροποίηση με css ξέρω να την κάνω.

 

Φτιάχνω ένα site όπου τα products στην homepage αυτή την στιγμή όταν κάνεις hover εμφανίζει την δεύτερη image του product .παραθέτω link https://www.oilparts.gr/

 

Θέλω,όπως στο site που έβαλα παραπάνω, να μου εμφανίζει το description του προιοντος και τά combinations ξεχωριστά για κάθε προιον. μεσω κάποιου tpl file δεν γίνεται αυτό?

 

Σε ευχαριστώ πολύ και πάλι 

Link to comment
Share on other sites

Χρειάζεται επέμβαση τόσο στο tpl όσο και προσθήκη κατάλληλων εντολών στο κατάλληλο αρχείο css.

Πρέπει να αφαιρέσεις απ' το tpl του πρόσθετου που προβάλει τα προϊόντα (featured ή κάτι τέτοιο) το span class="product-aditional"

και στη συνέχεια να πετάξεις το block, που θέλεις να εμφανίζεται στο hover, μέσα στο div class="product-block" και δώσ' του μια ειδική κλάση

έστω div class="tapanda", μετά θα πας στο css και θα προσθέσεις ένα .tapanda{display:none; [ΚΑΙ ΟΤΙ ΑΛΛΟ ΚΩΔΙΚΑ ΘΕΣ]} κι ένα .product-block:hover .tapanda{display:block}

 

Αναμένω νέα σου

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...