E-Com Plus - Carregando images de produtos via Storage API

README.md

E-Com Plus - Carregando images de produtos via Storage API

Recomendamos que as imagens dos produtos sejam carregadas para a Storage API, onde serão normalizadas em tamanhos que comuns para o Storefront, otimizadas para WebP e também salvas em PNG/JPEG para utilização em dispositivos que não suportam o formato WebP.

Source code da Storage API

Upload

Basta enviar um POST autenticado para https://apx-storage.e-com.plus/$store_id/api/v1/upload.json com conteúdo multipart/form-data contendo o arquivo de imagem no corpo da requisição, recomendamos que o arquivo de imagem original seja .png, .jpg ou .jpeg (também serão parseados para .webp).

O cabeçalho é o mesmo utilizado para requisições autenticadas na Store API:

• X-Store-ID
• X-My-ID
• X-Access-Token

Referência:

• Autenticação de usuário
• Autenticação de app

Resposta

A resposta do upload será um JSON como o exemplo abaixo:

{
  "bucket": "abc",
  "key": "@v2-123456-image.png",
  "uri": "https://ecom-abc.sfo2.digitaloceanspaces.com/@v2-123456-image.png",
  "picture": {
    "zoom": {
      "url": "https://ecom-abc.sfo2.digitaloceanspaces.com/@v2-123456-image.png"
    },
    "big": {
      "url": "https://ecom-abc.sfo2.digitaloceanspaces.com/imgs/big/@v2-123456-image.png.webp",
      "size": 700
    },
    "normal": {
      "url": "https://ecom-abc.sfo2.digitaloceanspaces.com/imgs/normal/@v2-123456-image.png.webp",
      "size": 350
    }
  }
}

dropzone-to-storage-api.js

var storeId = 100

// handle dropzone with Storage API
// http://www.dropzonejs.com/#configuration
var dropzone = new Dropzone('#dropzone', {
  url: 'https://apx-storage.e-com.plus/' + storeId + '/api/v1/upload.json',
  headers: {
    'X-Store-ID': storeId,
    'X-My-ID': '5a6757722b66f68dbed44526',
    'X-Access-Token': 'eyJhbGciOi.eyJzdWIi.AFONFh7HgQ'
  }
})

dropzone.on('complete', function (file) {
  try {
    var json = JSON.parse(file.xhr.responseText)
  } catch (e) {
    console.error(new Error('Upload filed'), file)
    return
  }

  if (file.status !== 'success') {
    console.error(new Error('Upload filed'), json)
  } else if (file.type.substr(0, 6) === 'image/' && json.key) {
    var thumb
    // picture object
    // based on product resource picture property
    // https://ecomstore.docs.apiary.io/#reference/products/product-object
    var picture = json.picture

    if (file.height && file.width) {
      // save image dimensions
      var w = file.width
      var h = file.height
      // original sizes
      picture.zoom.size = w + 'x' + h

      // calculate thumbnails sizes
      for (thumb in picture) {
        if (picture[thumb]) {
          var px = parseInt(picture[thumb].size, 10)
          if (px) {
            if (px >= Math.max(w, h)) {
              picture[thumb].size = picture.zoom.size
            } else {
              // resize base
              picture[thumb].size = w > h
                ? px + 'x' + Math.round(h * px / w)
                : Math.round(w * px / h) + 'x' + px
            }
          } else {
            delete picture[thumb].size
          }
        }
      }
    } else {
      for (thumb in picture) {
        if (picture[thumb]) {
          delete picture[thumb].size
        }
      }
    }

    if (file.name) {
      // use filename as default image alt
      // remove file extension
      var alt = file.name.replace(/\.[^.]+$/, '')
      for (thumb in picture) {
        if (picture[thumb]) {
          picture[thumb].alt = alt
        }
      }
    }

    // adicionando o objeto picture ao corpo do produto
    // product.pictures.push(picture)
  }
})

product-with-pictures.json

{
    "visible": true,
    "available": true,
    "manage_stock": true,
    "name": "MacBook Pro Modelo de 16 polegadas",
    "sku": "LHM4086",
    "price": 11976,
    "quantity": 102,
    "pictures": [
        {
            "zoom": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/@v2-1582248533668-v2-1581704579863-chip_static__lj1912v5qhme_large.jpg",
                "size": "980x684",
                "alt": "@v2-1581704579863-chip_static__lj1912v5qhme_large"
            },
            "big": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/imgs/big/@v2-1582248533668-v2-1581704579863-chip_static__lj1912v5qhme_large.jpg.webp",
                "size": "700x489",
                "alt": "@v2-1581704579863-chip_static__lj1912v5qhme_large"
            },
            "normal": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/imgs/normal/@v2-1582248533668-v2-1581704579863-chip_static__lj1912v5qhme_large.jpg.webp",
                "size": "350x244",
                "alt": "@v2-1581704579863-chip_static__lj1912v5qhme_large"
            },
            "_id": "483000158224857022700000"
        },
        {
            "zoom": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/@v2-1581704558843-display_hero_hw__d73ne9vbdmgm_large.jpg",
                "size": "1136x667",
                "alt": "display_hero_hw__d73ne9vbdmgm_large"
            },
            "big": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/imgs/big/@v2-1581704558843-display_hero_hw__d73ne9vbdmgm_large.jpg.webp",
                "size": "700x411",
                "alt": "display_hero_hw__d73ne9vbdmgm_large"
            },
            "normal": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/imgs/normal/@v2-1581704558843-display_hero_hw__d73ne9vbdmgm_large.jpg.webp",
                "size": "350x206",
                "alt": "display_hero_hw__d73ne9vbdmgm_large"
            },
            "_id": "245930158170460930200000"
        },
        {
            "zoom": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/@v2-1581704579863-chip_static__lj1912v5qhme_large.jpg",
                "size": "980x684",
                "alt": "chip_static__lj1912v5qhme_large"
            },
            "big": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/imgs/big/@v2-1581704579863-chip_static__lj1912v5qhme_large.jpg.webp",
                "size": "700x489",
                "alt": "chip_static__lj1912v5qhme_large"
            },
            "normal": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/imgs/normal/@v2-1581704579863-chip_static__lj1912v5qhme_large.jpg.webp",
                "size": "350x244",
                "alt": "chip_static__lj1912v5qhme_large"
            },
            "_id": "245930158170460930200001"
        },
        {
            "zoom": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/@v2-1581704580369-memory_static__c5fogcn85byq_large.jpg",
                "size": "980x684",
                "alt": "memory_static__c5fogcn85byq_large"
            },
            "big": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/imgs/big/@v2-1581704580369-memory_static__c5fogcn85byq_large.jpg.webp",
                "size": "700x489",
                "alt": "memory_static__c5fogcn85byq_large"
            },
            "normal": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/imgs/normal/@v2-1581704580369-memory_static__c5fogcn85byq_large.jpg.webp",
                "size": "350x244",
                "alt": "memory_static__c5fogcn85byq_large"
            },
            "_id": "245930158170460930200002"
        },
        {
            "zoom": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/@v2-1581704588875-ac_video_poster_960x540.jpg",
                "size": "960x540",
                "alt": "ac_video_poster_960x540"
            },
            "big": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/imgs/big/@v2-1581704588875-ac_video_poster_960x540.jpg.webp",
                "size": "700x394",
                "alt": "ac_video_poster_960x540"
            },
            "normal": {
                "url": "https://ecom-jvxboxzk.sfo2.digitaloceanspaces.com/imgs/normal/@v2-1581704588875-ac_video_poster_960x540.jpg.webp",
                "size": "350x197",
                "alt": "ac_video_poster_960x540"
            },
            "_id": "245930158170460930200003"
        }
    ],
    "slug": "macbook-pro-modelo-de-16-polegadas",
    "commodity_type": "physical",
    "ad_relevance": 0,
    "currency_id": "BRL",
    "currency_symbol": "R$",
    "condition": "new",
    "adult": false,
    "auto_fill_related_products": true,
    "views": 0,
    "sales": 3,
    "total_sold": 35928,
    "base_price": 12000
}

upload-to-storage-api.php

<?php
$store_id = 100;
$headers = array(
  "X-Store-ID: $store_id",
  'X-My-ID:  5a6757722b66f68dbed44526',
  'X-Access-Token: eyJhbGciOi.eyJzdWIi.AFONFh7HgQ'
);

function upload_to_storage_api($filename, $filepath, $ext) {
  global $headers;
  global $store_id;

  if ($ext == 'jpg') {
    $ext = 'jpeg';
  }
  $body[] = implode("\r\n", array(
    "Content-Disposition: form-data; name=\"file\"; filename=\"{$filename}\"",
    "Content-Type: image/{$ext}",
    "",
    file_get_contents($filepath)
  ));

  do {
    $boundary = "---------------------" . md5(mt_rand() . microtime());
  } while (preg_grep("/{$boundary}/", $body));

  array_walk($body, function (&$part) use ($boundary) {
    $part = "--{$boundary}\r\n{$part}";
  });

  $body[] = "--{$boundary}--";
  $body[] = "";

  echo "\n$filepath\n";
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  curl_setopt($ch, CURLOPT_URL, "https://apx-storage.e-com.plus/$store_id/api/v1/upload.json");
  curl_setopt($ch, CURLOPT_POST, true);
  curl_setopt($ch, CURLOPT_POSTFIELDS, implode("\r\n", $body));
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch, CURLOPT_HTTPHEADER, array_merge(
    $headers,
    array("Content-Type: multipart/form-data; boundary={$boundary}")
  ));
  $result = curl_exec($ch);
  curl_close($ch);

  $response = json_decode($result, true);
  var_dump($response);

  sleep(1);
  return $response;
}