Jednotlivý produkt - TheSilverRings

Niche prináša nové rozvrhnutie pre jednotlivé produkty zavedením stohovanej galérie pre počítače, presúva Woocommerce breadcrumb a robí zhrnutie Sticky. K tomu bolo potrebné, hádajte čo niektoré prvky Hook a niektoré CSS.

Obsah

Drobky

#Hook 1 - Woo Breadcrumb Jednoduchý produkt

Podobne ako na stránke obchodu pridávame našu omrvinku ručne. Je pripojený k woocommerce_single_product súhrn a umiestniť na začiatok nastavením priority na 0 (nula).

Potom trochu štýlu písma pre drobček a meta produktu a vytvorenie trocha priestoru:

.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;
}

Zásobník galérií a lepené zhrnutie

#Hook 2 - Zásobník galérií

Náš prvý háčik vykonáva všetku ťažkú prácu. Pozrime sa na kód:

<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>

Najprv vytvoríme Wrap

Prvý riadok kódu <div class="woo-summary-wrap"> otvorí obálku okolo galérie, súhrn a karty. Tým sa obmedzí prekrývanie lepiaceho súhrnu s našimi súvisiacimi produktmi na celú šírku.

Znalci kódu si všimnú našu woo-summary-wrap sa v skutočnosti neuzatvára, t. j. nie </div>. Ale neľakajte sa, všetko je v poriadku.

Potom vytvoríme zásobník

Zvyšok kódu skontroluje, či existujú miniatúry, a potom vypíše hlavný obrázok, po ktorom nasleduje slučka obsahujúca ostatné obrázky produktov.

V zásobníku galérie sa používa obrázok v plnej veľkosti. Odporúča sa nahrať obrázky, ktoré zodpovedajú tejto veľkosti. V aktuálnom nastavení máme šírku kontajnera 1320px. Galéria zaberá približne 60% z tejto šírky. To znamená, že optimálny obrázok v plnej veľkosti je široký približne 800px.

Keďže ide o presne tie isté obrázky, ktoré sa používajú v kolotoči galérie ( zväčšenie ), nedochádza k dvojitému načítaniu obrázkov.

#Hook 3 - Záverečný súhrnný obal

No všetko je to v názve a hotový kus kódu v našom prvom háčiku.

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

Štýlovanie CSS na skrytie prvkov a vytvorenie lepkavých bitov

Nasledujúce CSS robí niekoľko vecí:

Skryť predvolený kolotoč galérie Woocommerce na ploche.
Vytvorí dvojstĺpcovú mriežku na oddelenie našich obrázkov a zhrnutia.
Pridá priestor ( spodný okraj ) medzi naše obrázky.
Umiestňuje naše zhrnutie a robí ho lepkavým.
Premiestni nálepku Predaj na obrázok.

@media (min-width: 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;
        pozícia: sticky;
        top: 105px;
        bottom: 100px;
        padding-right: 80px;
    }

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

Všeobecný styling

Len malá úprava horného rozpätia pri tvorbe cien:

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