Το ενιαίο προϊόν

Η Niche φέρνει μια νέα διάταξη στο Ενιαίο προϊόν εισάγοντας μια στοιβαγμένη γκαλερί για την επιφάνεια εργασίας, μετακινεί το breadcrumb του Woocommerce και κάνει την περίληψη Sticky. Για να γίνει αυτό απαιτείται, μαντέψτε τι κάποια στοιχεία Hook και κάποια CSS.

Πίνακας περιεχομένων

Breadcrumb

#Hook 1 - Woo Breadcrumb Ενιαίο προϊόν

Όπως και στη σελίδα του καταστήματος, προσθέτουμε χειροκίνητα το breadcrumb μας. Είναι συνδεδεμένο με το περίληψη woocommerce_single_product και τοποθετείται στην κορυφή θέτοντας την προτεραιότητα σε 0 (μηδέν).

Στη συνέχεια, ένα μικρό στυλ γραμματοσειράς για το breadcrumb και το προϊόν meta και τη δημιουργία ενός μικρού χώρου:

.product_meta>span,
.woocommerce-breadcrumb {
    text-transform: uppercase,
    font-size: 12px !important,
    font-weight: 500,
}

.woocommerce div.product div.summary .woocommerce-breadcrumb {
    margin-bottom: 40px,
}

Gallery Stack και αυτοκόλλητη περίληψη

#Hook 2 - Στοίβα γκαλερί

Το πρώτο μας άγκιστρο κάνει όλη τη βαριά δουλειά. Ας ρίξουμε μια ματιά στον κώδικα:

<div class="woo-sumamry-wrap"><!-- open wrap -->
<div class="woo-gallery-stack hide-on-mobile">
<?php if ( has_post_thumbnail( $product->id ) ) {
    $attachment_ids[0] = get_post_thumbnail_id( $product->id );
    $attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' ); ?>    
    <img src="<?php echo $attachment[0] ; ?>"/>
<?php }	

global $product;
$product_image_ids = $product->get_gallery_image_ids();

foreach( $product_image_ids as $product_image_id ) {
    $image_url = wp_get_attachment_url( $product_image_id );
    echo '<img src="'.$image_url.'">';
}?>
</div>

Πρώτα δημιουργούμε το Wrap

Η πρώτη γραμμή κώδικα <div class="woo-summary-wrap"> ανοίγει ένα περιτύλιγμα γύρω από τη γκαλερί, τη σύνοψη και τις καρτέλες. Αυτό είναι που περιορίζει την αυτοκόλλητη περίληψη από το να επικαλύπτεται με τα σχετικά προϊόντα μας πλήρους πλάτους.

Οι μυημένοι στον κώδικα θα παρατηρήσουν το woo-summary-wrap δεν κλείνει στην πραγματικότητα, δηλαδή δεν </div>. Αλλά μην ανησυχείτε, όλα είναι εντάξει.

Στη συνέχεια δημιουργούμε το Stack

Ο υπόλοιπος κώδικας ελέγχει για να δει αν υπάρχουν μικρογραφίες και στη συνέχεια εξάγει την κύρια χαρακτηρισμένη εικόνα ακολουθούμενη από έναν βρόχο που περιέχει τις άλλες εικόνες προϊόντων.

Η στοίβα της γκαλερί χρησιμοποιεί την εικόνα πλήρους μεγέθους. Συνιστάται να ανεβάζετε εικόνες που ταιριάζουν σε αυτό το μέγεθος. Στην τρέχουσα ρύθμιση έχουμε ένα πλάτος δοχείου 1320px. Η γκαλερί καταλαμβάνει περίπου 60% αυτού του πλάτους. Αυτό σημαίνει ότι η βέλτιστη εικόνα πλήρους μεγέθους έχει πλάτος περίπου 800px.

Καθώς πρόκειται για τις ίδιες ακριβώς εικόνες που χρησιμοποιούνται στο καρουζέλ της γκαλερί ( Μεγέθυνση ), δεν υπάρχει διπλή φόρτωση εικόνων.

#Hook 3 - Κλείσιμο περιτύλιγμα περίληψης

Λοιπόν, είναι όλα στον τίτλο και τελείωσε το κομμάτι του κώδικα στο πρώτο μας άγκιστρο.

</div>
<!-- Close gallery wrap -->

CSS Styling για να αποκρύψετε στοιχεία και να κάνετε τα κομμάτια κολλώδη

Έτσι, το ακόλουθο CSS κάνει διάφορα πράγματα:

Απόκρυψη του προεπιλεγμένου καρουσέλ της γκαλερί Woocommerce στην επιφάνεια εργασίας.
Δημιουργεί ένα πλέγμα 2 στηλών για τον διαχωρισμό των εικόνων και της σύνοψης.
Προσθέτει λίγο χώρο ( κάτω περιθώριο ) μεταξύ των εικόνων μας.
Τοποθετεί την περίληψή μας και την κάνει κολλώδη.
Επανατοποθετεί το αυτοκόλλητο πώλησης πάνω από την εικόνα.

@media (ελάχιστο πλάτος: 768px) {
    .woocommerce-product-gallery {
        display: none,
    }

    .woo-sumamry-wrap {
        display: grid,
        grid-template-columns: 60% 40%,
        grid-template-rows: auto,
        margin-bottom: 80px,
    }

    .woo-gallery-stack {
        grid-column: 1,
        grid-row: 1 / 3,
    }

    .woo-gallery-stack img {
        margin-bottom: 20px,
    }

    .woocommerce-tabs {
        grid-column: 1,
    }

    .woocommerce div.product div.summary {
        grid-column: 2,
        grid-row: 1,
        margin-left: 80px,
        position: -webkit-sticky,
        position: sticky,
        top: 105px,
        bottom: 100px,
        padding-right: 80px,
    }

    .single-product span.onsale {
        position: absolute,
        top: 0,
    }
}

Γενικό Styling

Απλά μια μικρή προσαρμογή στο ανώτερο περιθώριο στην τιμολόγηση:

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product p.price ins {
    margin-top: 10px,
}