Přidání produktových obrázků do formuláře

POZOR - tato nápověda je už zastaralá. FAPI podporuje vkládání obrázků rovnou přes Prodej > Produkty, kde v detailu položky je samostatná možnost pro nahrání obrázku ve formátech JPG, JPEG, PNG, AVIF nebo WEBP.

Více najdete v nápovědě zde.

Jak do prodejního formuláře přidat obrázky?

K jednotlivým produktům ve formuláři a k miniupsellovým položkám můžete přidávat náhledové obrázky. Pro přidání obrázků je potřeba přidat do HTML zdrojového kódu prodejní stránky kód, který podrobně popisujeme níže.

Jde o krátkou část HTML kódu, který načítá obrázky produktů z konkrétní adresy a ty přidává k určeným produktům.

Prodejní formulář potom může vypadat například takhle:

Přidávání obrázků funguje jen v novém vzhledu prodejního formuláře (nastavení prodejního formuláře > krok 6 Vzhled > Vzhled formuláře = Nový vzhled).

Jak na to?

Upravte si následující kód podle instrukcí uvnitř. Obrázky, na které odkazujete, si připravte dopředu v kvalitním rozlišení a nahrajte je na veřejně dostupné úložiště. Ideálně přímo na hosting vašeho webu.

<style>
/* Produktový obrázek pro položky prodejního formuláře */
/* Nahraďte {kód produktu} níže ↓ za kód produktu z FAPI. Ten najdete ve FAPI v části Prodej > Produkty > první sloupec Kód (např. "321967")*/

.fapi-product-{kód produktu}::after {

    /* Nahraďte na URL obrázku, který k produktu chcete zobrazit */
    --product-image-url: url(https://imgur.com/6LcoUN9.png);

    /* Výška (velikost) obrázku */
    --product-height: 200px;

    /* ↓ Tuto část neměnit ↓ */
    background-image: var(--product-image-url);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    content: "";
    display: block;
    width: 100%;
    height: var(--product-height);
    margin-top: 20px;
}

/* ↓ ↓ ↓  POKUD NEMÁTE MINIUPSELL, TAK TUTO ČÁST SMAŽTE ↓ ↓ ↓  */
/* Produktový obrázek pro mini upsell produkt */
/* Nahraďte {kód produktu} níže ↓ za kód produktu z FAPI. Ten najdete ve FAPI v části Prodej > Produkty > první sloupec Kód (např. "321967")*/
.fapi-order-bump-product-{kód produktu}::after {

    /* Nahraďte na URL obrázku, který k produktu chcete zobrazit */
    --product-image-url: url(https://imgur.com/xpwx5ly.png);

    /* Výška (velikost) obrázku */
    --product-height: 200px;

    /* ↓ Tuto část neměnit ↓ */
    background-image: var(--product-image-url);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    content: "";
    display: block;
    width: 100%;
    height: var(--product-height);
    margin-left: 40px;
    margin-bottom: 10px;
}
/* ↑ ↑ ↑   POKUD NEMÁTE MINIUPSELL, TAK TUTO ČÁST SMAŽTE ↑ ↑ ↑   */
</style>

Upravený kód umístěte nad vložený kód prodejního formuláře na Vašem webu. Pokud nahráváte obrázky pro více produktů, přidávání obrázků funguje stále stejně - definujte:
1. který produkt má obrázek mít,
2. jakou fotku pro něj máme použít,
3. jak máme obrázek zobrazit.

Každý produkt musí být definovaný takto:

Upravenou stránku na Vašeho webu uložte tak, aby obsahovala:
1. <style> kód výše, s vyjmenovanými produkty a určenými obrázky,
2. <script> pro vložení prodejního formuláře.
Zkuste stránku znovu načíst a je hotovo! Formulář by nyní měl u konkrétních produktů zobrazovat produktové obrázky.

Pozor: pokud nepoužíváte v daném formuláři miniupsell, odstraňte tu část kódu, která má obsahovat miniupsell obrázky.