Como podemos ajudar?

Siga os passos abaixo para implantar este recurso:

Clique aqui para baixar ZIP contendo o arquivo scratch-card.js e envie para a pasta HTM/JS

Clique aqui para baixar ZIP contendo o arquivo scratch-card.css e envie para a pasta HTM/CSS

Insira o código abaixo no início da página que exibirá a raspadinha:

<script src='<PathTo file="htm/js/scratch-card.js">'></script>
<link rel="stylesheet" href='<PathTo file="htm/css/scratch-card.css">'>

Copie e cole o código abaixo no local onde a raspadinha será exibida:

<div id="js-container">
  <canvas id="js-canvas"></canvas>
  <div class="discount">
    <img id="discountIMG">
  </div>
</div>

Copie e cole o código abaixo no fim do arquivo, passando dois parâmetros: a imagem principal (ex: imagempararaspar.png) e a imagem que será exibida após raspar (ex: resultadoraspadinha.png)

<script>
scratchCard("<BaseLoja>images/imagempararaspar.png","<BaseLoja>images/resultadoraspadinha.png");
</script>

Envie as imagens imagempararaspar.png e resultadoraspadinha.png para a pasta IMAGES da loja.

ATENÇÃO: As duas imagens devem ter o mesmo tamanho em pixels.

Caso queira alterar o tamanho em pixels da raspadinha, inclua as dimensões X e Y desejadas nos parâmetros da função scratchCard() conforme o exemplo abaixo:

<script>
scratchCard("<BaseLoja>images/imagempararaspar.png","<BaseLoja>images/resultadoraspadinha.png,500,400");
</script>

O exemplo acima exibirá a raspadinha com as dimensões 500px (X) por 400px (Y).

Se as dimensões não forem informadas, as imagens deverão ser quadradas e a raspadinha terá o tamanho máximo informado na propriedade max-width da primeira linha do arquivo scratch-card.css.

ATENÇÃO: Não use fundo preto na imagem exibida antes de raspar. Trechos grandes de pixels na cor preta (#000000) não raspam.