logo

Použití Cloudinary pro eCommerce

Nic nezlepší prodej na webu než snímky a video. Položku můžete popsat tuctem způsobů, ale jeden obrázek může uživatele přímo vtáhnout, více fotek (včetně pěkné funkce přiblížení) může zajistit prodej. Co to znamená? Je důležité poskytovat uživatelům výkonné, detailní a kvalitní obrázky pro počítače i mobily. Naštěstí Cloudinary poskytuje řadu optimalizačních metod a mediálních funkcí, takže můžete své produkty prezentovat optimalizovaným a přizpůsobitelným způsobem.

Pojďme se podívat na některé funkce a metody, které Cloudinary poskytuje pro optimalizaci, vytváření a doručování obrázků na stránkách elektronického obchodu!

Odstranění pozadí

Pokud nepoužíváte profesionálního fotografa, pravděpodobně budete chtít své fotky upravit, ale to vyžaduje čas a odborné znalosti. Místo toho, abyste vynakládali spoustu času nebo peněz na odstranění pozadí, nahrajte obrázek do Cloudinary pro odstranění pozadí:

// npm install cloudinary
var cloudinary = require('cloudinary');

// Set your API information
cloudinary.config({
	cloud_name: 'david-walsh-blog',
	api_key: '############',
	api_secret: '############'
});

// Upload an image, 
cloudinary.uploader.upload('sample-photos/my-photo.jpg', function(result) {
    // Log out the result to get the URL of the image
    console.log(result);

    // Image url is: result.url / result.secure_url
}, {
    public_id: "my-photo",
    background_removal: "remove_the_background"
});

Pokud v případě potřeby učiníte krok k odstranění pozadí fotografie, připravíte půdu pro další transformace. Vyčištění!

Snadná dynamická velikost obrázku podle adresy URL

Nejjednodušší funkcí transformace obrázku je dynamická změna velikosti obrázku, kterou lze provést mírnou úpravou adresy URL obrázku:

<!-- Size image to 300x300 -->
<img src="https://res.cloudinary.com/david-wash-blog/image/upload/w_300,h_300/usa">

Pokud používáte úžasné React.js API Cloudinary, můžete jednoduše přidat width a height atributy do Image a obrázek bude dynamicky transformován na tuto velikost:

<Image
  publicId="ringo"
  width="300"
  height="300">

Přizpůsobená velikost obrázku optimalizuje jak dobu načítání, tak dobu vykreslování!

Oříznutí podle obsahu

Většina webů dává přednost tomu, aby byly všechny obrázky produktů oříznuty na určité velikosti, díky čemuž je zobrazování obrázků produktů v šablonách snadné a předvídatelné. Někdy však bude potřeba použít miniatury a bylo by hezké, kdyby byl pouze obrázek oříznut na hlavní ohnisko. Cloudinary to dokáže pomocí oříznutí podle obsahu!

<img src="https://res.cloudinary.com/david-wash-blog/image/upload/g_auto/diana">

S ořezáním podle obsahu Cloudinary můžete při ořezávání obrázku na velikost hledat obličej nebo jiné ohnisko!

Vrstvy

Funkce transformace vrstvení je jednou z nejúžasnějších funkcí Cloudinary. Pomocí Cloudinary API můžete nahrávat obrázky, které mohou překrývat jiné obrázky! Představte si obrázek cenovky nad obrázkem produktu spolu s textem ceny:

<Image
  publicId="diana"
  width="400">
  <Transformation raw_transformation="200" />
  <Transformation angle="20" crop="scale" gravity="north_west" overlay="price-tag" width="100" />
  <Transformation angle="20" color="rgb:fff" gravity="north_west" overlay="text:fira%20mono_16_bold:$$(price)" x="45" y="27" />
</Image>

Výsledný <img> a adresa URL vypadá:

https://res.cloudinary.com/david-wash-blog/image/upload/$price_!200!/a_20,c_scale,g_north_west,l_price-tag,w_100/a_20,co_rgb:fff,g_north_west,l_text:fira%20mono_16_bold:$$(price),x_45,y_27/diana

Toto vrstvení můžete doplnit jakoukoli jinou transformací, takže můžete překrýt obrázek a text na oříznutý obrázek dynamické velikosti s ohledem na obsah. To je jedna ze skutečně výkonných funkcí Cloudinary!

Klientské rady

Před několika měsíci jsem vám ukázal nově podporovanou funkci klientských rad v prohlížečích. Klientské rady umožňují vašemu prohlížeči sdílet rozměry zobrazované oblasti v požadavcích, aby servery mohly dynamicky generovat a vracet optimalizovaný obrázek:

<meta http-equiv="Accept-CH" content="DPR, Width">

Cloudinary podporuje klientské rady, takže nezapomeňte přidat <meta> pro jejich povolení!

Stáhnout to všechno dohromady!

Pomocí výše uvedených technik jsem spolu s několika dalšími vytvořil hrubý jednostránkový produktový displej a nákupní košík pomocí cloudinary-react:

import React, { Component } from 'react';
import './App.css';

import { Image, Transformation, CloudinaryContext } from 'cloudinary-react';

let products = [
  { id: 'diana', title: 'Pricess Di', price: '200' },
  { id: 'obama', title: 'President Obama', price: '150' },
  { id: 'usa', title: 'Innauguration', price: '75' }
];

class App extends Component {

  state = { currentProduct: products[0], cart: [] };

  addToCart = (publicId) => {
    this.state.cart.push(this.state.currentProduct);
    this.setState({ cart: this.state.cart });
  }

  render() {
    return (
      <div>
        <CloudinaryContext cloudName="david-wash-blog">
        <div className="detail">
          <h2>Product Detail</h2>
          <Image
            publicId={this.state.currentProduct.id}
            width="400">
            <Transformation raw_transformation={`$price_!${this.state.currentProduct.price}!`} />
            <Transformation angle="20" crop="scale" gravity="north_west" overlay="price-tag" width="100" />
            <Transformation angle="20" color="rgb:fff" gravity="north_west" overlay="text:fira%20mono_16_bold:$$(price)" x="45" y="27" />
          </Image>
          <button onClick={this.addToCart}>Add to Cart</button>
        </div>

        <div className="available">
          <h2>Products in Stock</h2>
          <p>Click the thumbnail below to view a larger image.</p>
          {products.map(product => {
            return <Image key={product.id} onClick={() =>this.setState({ currentProduct: product })} publicId={product.id} width="200"/>;
          })}
        </div>

        <div className="cart">
          <h2>Your Cart</h2>
          {this.state.cart.length ? this.state.cart.map(product => {
            return <Image key={product.id} gravity="auto" crop="crop" publicId={product.id} width="100"/>;
          }) : 'Cart is empty'}
        </div>
      </CloudinaryContext></div>
    );
  }
}

export default App;

Velikost všech obrázků se dynamicky mění, k obrázkům s podrobnostmi o produktu se přidávají překryvné vrstvy s cenou a každý produkt přidaný do košíku poskytne obrázky s ohledem na obsah jako miniatury, takže miniatura může být malá, ale uživatel přesně zná detaily potřebné k tomu, aby zjistil, o jakou položku se jedná. .

I když byly tyto techniky prezentovány jako úžasné využití funkcí elektronického obchodu, pravdou je, že každou z těchto funkcí lze použít v jakékoli situaci ke zlepšení výkonu a viditelnosti. Nezapomeňte, že Cloudinary poskytuje PHP, Node.js, Ruby, Java, Python a další API pro nahrávání, úpravy a zobrazování vašich obrázků. Dejte Cloudinary šanci – nebudete zklamáni!