Adicionar botão de download para qualquer tipo de arquivo

 < link class = "importar" href = " {{section.settings.file_link}} " rel = "importar" > 
< div class = "downloadContainer" >
 { % para bloco na seção. blocos % }
 { % se seção. configurações . usuário_enabled % } 
{ % se cliente % }
 < arquivo - classe de download = "downloadWrapper" >
 { % se bloco. configurações . download_title != em branco -% } 
< h3 style = "text-align: center" > { { bloco. configurações . download_title } } </ h3 >
 { % fim se % }
 < um
 classe = "arquivo"
 href = "" 
download = " {{block.settings.title | escape }} "
 style = "decoração de texto: nenhum"
 dados - arquivo - type = " {{block.settings.file_type | escape }} "
 dados - arquivo = " {{block.settings.download_link | escape }} "
 > 
< botão classe = "botão btn" > { { bloco. configurações . rótulo_botão | escapar } } </ botão >
 </a> _
 </ arquivo - download > 
{ % outro % }
 < div class = "downloadWrapper" >
 < estilo h3 = "alinhamento de texto: centro" >
 { { bloquear. configurações . mensagem_do_usuário } } 
<a class = "logInText" href = " {{ Routes.account_login_url }} " target = "_blank" > aqui . _ _ {{ routes.account_login_url }} _ _ _ </a> _
 </ h3 >
 < um
 classe = "arquivo"
 href = "" 
baixar = " {{block.settings.title}} "
 style = "decoração de texto: nenhum"
 dados - arquivo = " {{block.settings.download_link }} "
 > 
< botão classe = "botão btn" desabilitado > { { bloco. configurações . botão_label } } </ botão >
 </a> _
 </div> _ _
 { % fim se % } 
{ % outro % }
 < arquivo - classe de download = "downloadWrapper" >
 { % se bloco. configurações . download_title != em branco -% } 
< h3 style = "text-align: center" > { { bloco. configurações . download_title } } </ h3 >
 { %- fim se % }
 < um
 classe = "arquivo"
 href = "" 
download = " {{block.settings.title | escape }} "
 style = "decoração de texto: nenhum"
 dados - arquivo - type = " {{block.settings.file_type | escape }} "
 dados - arquivo = " {{block.settings.download_link | escape }} "
 > 
< botão classe = "botão btn" > { { bloco. configurações . rótulo_botão | escapar } } </ botão >
 </a> _
 </ arquivo - download >
 { % fim se % } 
{ % fim para % }
 </div> _ _
 <estilo> _
 . downloadContainer {
 posição : relativa ;
 preenchimento : 5rem ;
 exibição : flexível ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ; 
lacuna : 2rem ;
 }
 . logInText {
 cursor : ponteiro ;
 decoração de texto : nenhuma ;
 }
 . logInText : pairar {
 opacidade : 0,7 ;
 decoração de texto : sublinhado ;
 }
 . downloadWrapper { 
exibição : flexível ;
 flex - direction : coluna ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }
 . baixarWrapper > a {
 transição : todos os 0,3s facilitam ;
 }
 . downloadWrapper > a : pairar { 
transformar : escala ( 1.1 ) ;
 }
 Tela @media somente e ( largura máxima : 750px ) {
 . downloadContainer {
 flex - direction : coluna ;
 }
 }
 </ estilo > 
{ % esquema % }
 {
 "name" : "Seção de download" ,
 "configurações" : [
 {
 "tipo" : "caixa de seleção" ,
 "id" : "user_enabled" , 
"label" : "Ativar somente para clientes"
 }
 ] ,
 "blocos" : [
 {
 "nome" : "seção de download" ,
 "type" : "seção de download" ,
 "limite" : 4 , 
"configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "download_title" ,
 "label" : "Baixar título" ,
 "default" : "Baixe o arquivo aqui"
 } ,
 { 
"tipo" : "texto" ,
 "id" : "link_download" ,
 "label" : "Link para download" ,
 "info" : "Copie o link que você salvou na sua loja Shopify."
 } ,
 {
 "tipo" : "selecionar" , 
"id" : "tipo_de_arquivo" ,
 "rótulo" : "Tipo de arquivo" ,
 "default" : "imagem/jpeg" ,
 "opções" : [
 {
 "valor" : "imagem/jpeg" , 
"label" : "imagem jpeg"
 } ,
 {
 "valor" : "imagem/png" ,
 "rótulo" : "imagem png"
 } ,
 {
 "valor" : "imagem/gif" , 
"rótulo" : "imagem gif"
 } ,
 {
 "valor" : "aplicativo/pdf" ,
 "rótulo" : "arquivo pdf"
 } ,
 {
 "valor" : "vídeo/mp4" , 
"label" : "arquivo de vídeo"
 } ,
 {
 "valor" : "áudio/mpeg" ,
 "label" : "arquivo de áudio"
 } ,
 {
 "valor" : "texto/csv" , 
"rótulo" : "arquivo csv"
 } ,
 {
 "valor" : "aplicativo/zip" ,
 "rótulo" : "arquivo zip"
 }
 ]
 } ,
 {
 "tipo" : "texto" , 
"id" : "título" ,
 "label" : "Nome do arquivo de download" ,
 "info" : "Altere o nome do arquivo diferente do nome que você tem no seu Shopify"
 } ,
 {
 "tipo" : "texto" , 
"id" : "button_label" ,
 "label" : "Etiqueta do botão de download" ,
 "padrão" : "BAIXAR"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "mensagem_do_usuário" , 
"label" : "Se o cliente estiver habilitado, digite sua mensagem se não for cliente" ,
 "default" : "Por favor, cadastre-se ou faça login para fazer o download"
 }
 ]
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Seção de download"
 }
 ] 
}
 { % termina o esquema % }

 class FileDownload estende HTMLElement {
 construtor ( ) {
 super ( ) ; 
esse . arquivoBox = este . querySelector ( "a" ) ;
 esse . arquivo = isto . caixa de arquivos . conjunto de dados . arquivo ; 
esse . tipo de arquivo = `$ { este . caixa de arquivos . conjunto de dados . tipo de arquivo } ` ;
 esse . requestArquivo ( ) ;
 }
 requestArquivo ( ) { 
buscar ( ` $ { este.arquivo } ` )
 . então ( ( e ) => e. arrayBuffer ( ) )
 . então ( ( e ) => { 
const t = new Uint8Array ( e ) ;
 const i = janela. URL || janela. webkitURL ; 
const s = eu. createObjectURL ( new Blob ( [ t ] , { type : this.fileType } ) ) ;
 esse . caixa de arquivos . href = s ; 
} )
 [ "pegar" ] ( ( e ) => {
 console. erro ( e ) ;
 } ) ;
 }
 } 
elementos personalizados. define ( "download de arquivo" , FileDownload ) ;