Jednotný produkt

Niche přináší nové rozvržení Jednotlivého produktu zavedením skládané galerie pro stolní počítače, přesouvá drobečkovou navigaci Woocommerce a přehled se stává Sticky. K tomu bylo zapotřebí, hádejte, co některé prvky Hook a některé CSS.

Drobečky

#Hook 1 - Woo Breadcrumb Jednoduchý produkt

Stejně jako na stránku obchodu přidáváme drobeček ručně. Je připojen k woocommerce_single_product summary a umístí se na začátek díky nastavení priority na 0 (nula).

Pak trochu stylizace písma pro drobeček a meta produktu a vytvoření trochu prostoru:

.product_meta>span,
.woocommerce-breadcrumb {
    text-transform: velká písmena;
    font-size: 12px !important;
    font-weight: 500;
}

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

Galerie Stack a Sticky Shrnutí

#Hook 2 - Zásobník galerií

Náš první hák zvládne všechnu těžkou práci. Podívejme se 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>

Nejprve vytvoříme Wrap

První řádek kódu <div class="woo-summary-wrap"> otevře obálku kolem galerie, shrnutí a karty. Tím se omezí překrývání samolepícího souhrnu s našimi souvisejícími produkty na celou šířku.

Znalci kódu si všimnou, že naše woo-summary-wrap se ve skutečnosti neuzavírá, tj. žádný </div>. Ale nelekejte se, vše je v pořádku.

Poté vytvoříme zásobník

Zbytek kódu zkontroluje, zda existují náhledy, a poté vypíše hlavní představovaný obrázek, po kterém následuje smyčka obsahující ostatní obrázky produktů.

Zásobník galerie používá obrázek v plné velikosti. Doporučujeme nahrávat obrázky odpovídající této velikosti. V aktuálním nastavení máme šířku kontejneru 1320px. Galerie zabírá přibližně 60% této šířky. To znamená, že optimální obrázek v plné velikosti je široký přibližně 800px.

Protože se jedná o stejné obrázky, které jsou použity v kolotoči galerie ( zvětšení ), nedochází k dvojímu načítání obrázků.

#Hook 3 - Závěrečný souhrnný obal

No, všechno je to v názvu a dokončeném kusu kódu v našem prvním háčku.

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

Stylování CSS pro skrývání prvků a lepení bitů

Následující CSS tedy dělá několik věcí:

Skrytí výchozího karuselu galerie Woocommerce na ploše.
Vytvoří mřížku o 2 sloupcích, která oddělí naše obrázky a shrnutí.
Přidá mezi naše obrázky určitý prostor ( spodní okraj ).
Umístí naše shrnutí a učiní ho lepkavým.
Přemístí nálepku Prodej na obrázek.

@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;
        position: sticky;
        top: 105px;
        bottom: 100px;
        padding-right: 80px;
    }

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

Obecný styling

Jen malá úprava horního rozpětí v cenách:

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