Jump to content
Vanessa Andrade

Modificando o carrinho no menu da loja virtual tray com CSS

Recommended Posts

BOA NOITE PESSOAL,

 

ESTOU COM UMA DÚVIDA POR FAVOR SE PUDEREM ME AJUDAR.

 

COMO FAÇO PARA ALTERAR O CARRINHO DA MINHA LOJA UTILIZANDO O CSS, O TEMA TEM ESSA SACOLINHA COM PATINHA DE CACHORRO, QUERO TROCAR POR UMA CARRINHO NORMAL....

QUANDO COLOCO PARA INSPECIONAR ELEMENTO APARECE ESSE MONTE DE INFORMAÇÃO...

NÃO SEI COMO FAÇO.

1.JPG

Share this post


Link to post
Share on other sites

Boa noite, Vanessa tudo bem?

 

sou iniciante com a plataforma da tray tambem e estou quebrando a cabeça para editar meu tema kk.

 

mais tenta ai vai que da certo, vai em > Inicio > Minha Loja > Design da Loja.

 

o layout que ta ativado clica em duplicar tema e salvar volte novamente para > Inicio > Minha Loja > Design da Loja.

 

e click em Edita HTML no tema . Cópia Animais de Estimação la dentro do codigo de fonte voce vai em " img > icone-carrinho.png;

 

e tenta editar por la desse salva e sobe novamente a pagina click na seta para baixo do lado de botão azul publicar e abre visualizar tema.

 

aguarde uns 10 a 15 minutos que e o tempo de reset dos cache se de certo vai ta la o novo icon do carrinho.

Share this post


Link to post
Share on other sites

Bom dia Thales, 

Muito obrigada pela sua resposta, me desculpe não sou muito leiga no assunto.

Só não entendi essa parte Cópia Animais de Estimação la dentro do codigo de fonte voce vai em " img > icone-carrinho.png;

 

Se for onde estou pensando que é não deu certo, 

22.JPG

Share this post


Link to post
Share on other sites

deixa eu explicar melhor acabei de olhar a respeito desse tema.

 

os ícones de ilustração desse tema e composto de código "SVG", eu não sou programador apenas estou montando uma loja na plataforma da tray também.

 

oque ocorre para você conseguir tirar aquele ícone dali de cima ou mudar você terá que acessar o código fonte dele e fazer essa alteração.

 

esse código abaixo e o dele.

 

para que você consiga fazer a alteração do icon carrinho vai ser nessa área

 

local:

 

elements/snippets/customer.html

e

elements/header.html

 

http://www.kadunew.com/blog/html/svg-sprite-como-criar-um-arquivo-de-icones-usando-svg

<div class="carrinhotopo">
    <a href="{{ links.cart }}">
        <div class="row">
            <div>
                <svg viewBox="0 0 1024 1024">
                    <path class="path1" d="M351.958 794.997h522.773c0.361-1.779 0.677-3.703 1.060-5.245 16.692-69.899 63.846-309.948 3.069-587.889-2.498-11.425-4.084-30.061-3.345-41.718l8.272-129.663c0.741-11.657-6.155-15.338-15.422-8.208l-61.541 47.346c-9.265 7.13-23.758 6.515-32.391-1.376l-52.868-48.278c-8.63-7.869-22.807-8.102-31.69-0.487l-70.279 60.229c-8.865 7.595-22.637 6.94-30.718-1.48l-62.091-64.587c-8.102-8.42-21.219-8.42-29.32 0l-62.091 64.587c-8.104 8.42-20.966 8.188-28.752-0.529l-63.253-70.828c-7.785-8.717-20.924-9.203-29.322-1.102l-68.268 65.731c-8.42 8.104-23.081 9.371-32.749 2.814l-78.339-53.058c-9.668-6.557-13.455-3.301-9.54 7.699 8.672 24.371 21.070 70.576 20.902 131.375h459.772c11.677 0 21.154 9.478 21.154 21.154s-9.478 21.154-21.154 21.154h-462.038c-0.381 3.872-0.529 7.553-1.035 11.528-6.221 49.736-61.224 185.936 3.343 574.497 1.925 11.531 3.133 30.338 2.496 41.992-2.053 38.227-7.15 119.083-15.528 163.83-2.157 11.486 2.772 15.081 12.312 8.354l89.763-63.361c9.542-6.748 23.272-4.865 30.654 4.21l53.735 65.943c7.383 9.055 19.504 9.179 27.079 0.296l56.676-66.534c7.573-8.887 19.272-8.44 26.128 1.038l51.979 71.779c6.854 9.456 19.104 10.429 27.375 2.179l72.478-72.481c8.27-8.27 21.387-8.018 29.32 0.573l62.684 67.698c7.933 8.568 20.396 8.208 27.798-0.825l57.246-69.709c7.425-9.033 20.564-10.133 29.384-2.451l81.469 70.954c8.803 7.679 15.168 4.442 14.239-7.192-3.108-38.61-9.562-120.588-11.951-167.615h-519.474c-11.677 0-21.154-9.478-21.154-21.154-0.002-11.714 9.478-21.192 21.154-21.192zM689.705 431.545c23.971 7.657 34.442 41.846 23.42 76.35s-39.393 56.273-63.339 48.614c-23.971-7.659-34.442-41.824-23.42-76.35 11.022-34.504 39.371-56.271 63.339-48.614zM534.445 388.051c11.509-36.070 42.333-58.432 68.817-49.968 26.488 8.462 38.61 44.554 27.101 80.602-11.531 36.070-42.333 58.432-68.819 49.968-26.484-8.462-38.63-44.532-27.099-80.602zM525.074 477.666c0 0 102.458 17.369 101.969 135.373 0.319 69.306-57.308 39.371-57.308 39.371s-24.351-24.519-44.638-24.519l-5.184 0.465c-20.289 0-44.66 24.519-44.66 24.519s-57.627 29.535-57.311-39.751c-0.529-118.004 101.949-135.457 101.949-135.457h5.184zM440.262 336.833c25.132-7.615 55.596 16.247 68.036 53.333 12.462 37.085 2.179 73.326-22.953 80.941s-55.596-16.247-68.036-53.333c-12.44-37.085-2.159-73.323 22.953-80.941zM356.042 429.050c23.926-7.214 52.972 15.506 64.883 50.731 11.889 35.245 2.137 69.664-21.792 76.879-23.926 7.214-52.972-15.506-64.883-50.729s-2.157-69.666 21.792-76.881z"></path>
                </svg>
                <div class="contadorcarrinho" data-cart="amount">{{ cart.amount }}</div>
            </div>
            <div>
                <span class="nomecarrinho">Minha Sacola</span>
                <div class="precocarrinho">R$ <span data-cart="price">{{ cart.price }}</span></div>
            </div>
        </div>
    </a>
</div>

 

Share this post


Link to post
Share on other sites

Nosssssa, isso é muito dificil.

Tentei gerar o svg no site que me indicou:

<link rel="stylesheet" href="https://i.icomoon.io/public/temp/da4553b091/UntitledProject/style-svg.css">
<script defer src="https://i.icomoon.io/public/temp/da4553b091/UntitledProject/svgxuse.js"></script>

 

Mas depois dai não foi para lugar nenhum fiquei travada.

 

Obrigada mais uma vez, infelizmente não vou conseguir só sei copiar e colar rsrrs.

icons8-carrinho-de-compras-50.png

icons8-compras-do-saco-cheio-50.png

Um desses dois que eu queria usar!!!

 

Share this post


Link to post
Share on other sites
<div class="carrinhotopo">
    <a href="{{ links.cart }}">
        <div class="row">
            <div>
                <svg viewBox="0 0 1032 1032">
                    
                    <path class="path1" d="M409.6 1024c-56.464 0-102.4-45.936-102.4-102.4s45.936-102.4 102.4-102.4 102.4 45.936 102.4 102.4-45.936 102.4-102.4 102.4zM409.6 870.4c-28.232 0-51.2 22.968-51.2 51.2s22.968 51.2 51.2 51.2 51.2-22.968 51.2-51.2-22.968-51.2-51.2-51.2z"></path><path class="path2" d="M768 1024c-56.464 0-102.4-45.936-102.4-102.4s45.936-102.4 102.4-102.4 102.4 45.936 102.4 102.4-45.936 102.4-102.4 102.4zM768 870.4c-28.232 0-51.2 22.968-51.2 51.2s22.968 51.2 51.2 51.2 51.2-22.968 51.2-51.2-22.968-51.2-51.2-51.2z"></path><path class="path3" d="M898.021 228.688c-12.859-15.181-32.258-23.888-53.221-23.888h-626.846l-5.085-30.506c-6.72-40.315-43.998-71.894-84.869-71.894h-51.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6h51.2c15.722 0 31.781 13.603 34.366 29.112l85.566 513.395c6.718 40.314 43.997 71.893 84.867 71.893h512c14.139 0 25.6-11.461 25.6-25.6s-11.461-25.6-25.6-25.6h-512c-15.722 0-31.781-13.603-34.366-29.11l-12.63-75.784 510.206-44.366c39.69-3.451 75.907-36.938 82.458-76.234l34.366-206.194c3.448-20.677-1.952-41.243-14.813-56.424zM862.331 276.694l-34.366 206.194c-2.699 16.186-20.043 32.221-36.39 33.645l-514.214 44.714-50.874-305.246h618.314c5.968 0 10.995 2.054 14.155 5.782 3.157 3.73 4.357 9.024 3.376 14.912z"></path>
                </svg>
                <div class="contadorcarrinho" data-cart="amount">{{ cart.amount }}</div>
            </div>
            <div>
                <span class="nomecarrinho">Meus Produtos</span>
                <div class="precocarrinho">R$ <span data-cart="price">{{ cart.price }}</span></div>
            </div>
        </div>
    </a>
</div>

 

https://static.eventials.com/media/e55e91b2cc22ba117ba8d1546537f7a4c037cf67/792c87461ea57aa1563e32672785fedb0620e474/1464099001/trayopencodetreinamentoparceiros.pdf

Share this post


Link to post
Share on other sites

eu esqueci de remover o nome segue o codigo sem ele

 

<div class="carrinhotopo">
    <a href="{{ links.cart }}">
        <div class="row">
            <div>
                <svg viewBox="0 0 1032 1032">
                    
                    <path class="path1" d="M409.6 1024c-56.464 0-102.4-45.936-102.4-102.4s45.936-102.4 102.4-102.4 102.4 45.936 102.4 102.4-45.936 102.4-102.4 102.4zM409.6 870.4c-28.232 0-51.2 22.968-51.2 51.2s22.968 51.2 51.2 51.2 51.2-22.968 51.2-51.2-22.968-51.2-51.2-51.2z"></path><path class="path2" d="M768 1024c-56.464 0-102.4-45.936-102.4-102.4s45.936-102.4 102.4-102.4 102.4 45.936 102.4 102.4-45.936 102.4-102.4 102.4zM768 870.4c-28.232 0-51.2 22.968-51.2 51.2s22.968 51.2 51.2 51.2 51.2-22.968 51.2-51.2-22.968-51.2-51.2-51.2z"></path><path class="path3" d="M898.021 228.688c-12.859-15.181-32.258-23.888-53.221-23.888h-626.846l-5.085-30.506c-6.72-40.315-43.998-71.894-84.869-71.894h-51.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6h51.2c15.722 0 31.781 13.603 34.366 29.112l85.566 513.395c6.718 40.314 43.997 71.893 84.867 71.893h512c14.139 0 25.6-11.461 25.6-25.6s-11.461-25.6-25.6-25.6h-512c-15.722 0-31.781-13.603-34.366-29.11l-12.63-75.784 510.206-44.366c39.69-3.451 75.907-36.938 82.458-76.234l34.366-206.194c3.448-20.677-1.952-41.243-14.813-56.424zM862.331 276.694l-34.366 206.194c-2.699 16.186-20.043 32.221-36.39 33.645l-514.214 44.714-50.874-305.246h618.314c5.968 0 10.995 2.054 14.155 5.782 3.157 3.73 4.357 9.024 3.376 14.912z"></path>
                </svg>
                <div class="contadorcarrinho" data-cart="amount">{{ cart.amount }}</div>
            </div>
            <div>
                <span class="nomecarrinho"></span>
                <div class="precocarrinho">R$ <span data-cart="price">{{ cart.price }}</span></div>
            </div>
        </div>
    </a>
</div>

 

Share this post


Link to post
Share on other sites

Boa tarde Thales,

 

Tudo bem? Espero que sim.

Quando puder acessa minha página já ativei o tema modificado, mas ainda estou ajustando....

No pc aparece o banner normal, mas quando acesso do meu celular j7 ele corta o banner na versão mobile, você tem idéia de como ajusto, estranho não alterei nada na versão mobile...

Obrigada, mais uma vez .

E como está indo na sua página????

Share this post


Link to post
Share on other sites

Oi, vi que vcs estão conversando sobre o Tema da tray de animais de estimação.

Também uso esse tema e na home quando passamos o mouse em cima do produto, aparece a patinha escrito Quero Esse!

Gostaria de mudar essa imagem, e não estou achando no html, você podem me ajudar?

Obg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By thailangodoy
      Boa tarde amigos,
       
      Quero copiar o efeito hover, que aparece na foto de perfil do login, o qual consiste em uma borda externa, que não influencia no tamanho.
       
      Tentei atribuiu o box-sizing:border-box; // ele diminui a imagem e traz a borda para dentro.
       


    • By leandro123456789
      <div id="direito">
             
             <?php 
                      
                 $link = filter_input(INPUT_GET, 'link');
                 
                 $pag[1] = "../admin/home.php";
                 $pag[2] = "../admin/classes/Lista.php";
                 
              
              
                 if(!empty($link)){
                     
                     if(file_exists($pag[$link]))
                        
                      {
                         include $pag[$link];
                      
                      }
                        
                      else
                      { 
                         
                          include "home.php";
                      
                      }
                     
                 }else{
                     include "home.php";
                 }
              
              ?>
             
          </div>
       
       
      Estou tentando colocar a paginação do meu banco em $ pag [2] na minha página: ../admin/classes/Lista.php tem o seguinte código de paginação:

      <? php
          
          include_once ("../ admin / classes / ClassConexao.php");
          
          
          // verifique a página atual se informado no URL, caso contrário, ela será atribuída como 1ª página
          $ pagina = (isset ($ _ GET ['link = 2']))? $ _GET ['link = 2']: 1;
       
          // seleciona todos os itens da tabela
          $ cmd = "selecione * da categoria";
          $ produtos = mysqli_query ($ conn, $ cmd);
          
          // conta o total de itens
          $ total = mysqli_num_rows ($ produtos);
       
          // seta o número de itens por página, neste caso, 2 itens
          $ registros = 2;
       
          // calcula o número de páginas arredondando o resultado
          $ numPaginas = teto ($ total / $ registros);
       
          // variável para calcular o início da visualização com base na página atual
          $ inicio = ($ registros * $ pagina) - $ registros;
       
          // seleciona itens por página
          $ cmd = "selecione * da categoria limite $ inicio, $ registros";
          $ produtos = mysqli_query ($ conn, $ cmd);
          $ total = mysqli_num_rows ($ produtos);
           
          // exibe produtos selecionados
          while ($ produto = mysqli_fetch_array ($ produtos)) {
              echo $ produto ['id_categoria']. "-";
              echo $ produto ['categoria']. "-";
              echo $ produto ['ativo_categoria']. "<br />";
          }

      // Não sei como consertar esta parte para mostrar a paginação nesse $ pag [2] = "../admin/classes/Lista.php";
           
          // exibe paginação
          para ($ i = 1; $ i <$ numPaginas + 1; $ i ++) {
              
             echo "<a href='?pagina=$i'>". $ i. "</a>";
          }
                  
      ?>
      Meu menu fica assim:

      <div id = "sessao"> Categoria </div>
         <ul>
             
            
             <li> <a href="index.php?link=3"> Cadastro </a> </li>
             <li> <a href="index.php?link=2"> Listar / Editar </a> </li>
         
        </ul>
    • By Camilavip
      Oi, tenho um flip para virar a imagem, bem pequeno e funcional, mas ao colocar um rodapé, ele simplesmente invade esse rodapé
      Creio que tem haver alguma coisa com o position: absolute, mas não entendo nada de css
       
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> </head> <body> <!-- CSS DO FLIP --> <style> .flip-container:hover .flipper{ transform: rotateY(180deg); /* se quiser uma animação na vertical, troque por rotateX(180deg) */ } .flipper{ width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } .front, .back{ position: absolute; width: 100%; height: 100%; } .back{ transform: rotateY(180deg); } </style> <center> <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" /> </div> <div class="back"> <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" /> </div> </div> </div> <!-- AQUI COMEÇA O RODAPÉ --> <!-- CSS DO RODAPÉ --> <style> @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; color: #d9d9d9; box-sizing: border-box; font-family: 'Poppins', sans-serif; } .content1{ position: relative; margin: 130px auto; text-align: center; padding: 0 20px; } .content1 .text{ font-size: 2.5rem; font-weight: 600; color: #202020; } .content1 .p{ font-size: 2.1875rem; font-weight: 600; color: #202020; } footer{ position: fixed; bottom: 0px; width: 100%; background: #111; } .main-content{ display: flex; } .main-content .box{ flex-basis: 50%; padding: 10px 20px; } .box h2{ font-size: 1.125rem; font-weight: 600; text-transform: uppercase; } .box .content{ margin: 20px 0 0 0; position: relative; } .box .content:before{ position: absolute; content: ''; top: -10px; height: 2px; width: 100%; background: #1a1a1a; } .box .content:after{ position: absolute; content: ''; height: 2px; width: 15%; background: #f12020; top: -10px; } .left .content p{ text-align: justify; } .left .content .social{ margin: 20px 0 0 0; } .left .content .social a{ padding: 0 2px; } .left .content .social a span{ height: 40px; width: 40px; background: #1a1a1a; line-height: 40px; text-align: center; font-size: 18px; border-radius: 5px; transition: 0.3s; } .left .content .social a span:hover{ background: #f12020; } .center .content .fas{ font-size: 1.4375rem; background: #1a1a1a; height: 45px; width: 45px; line-height: 45px; text-align: center; border-radius: 50%; transition: 0.3s; cursor: pointer; } .center .content .fas:hover{ background: #f12020; } .center .content .text{ font-size: 1.0625rem; font-weight: 500; padding-left: 10px; } .center .content .phone{ margin: 15px 0; } .right form .text{ font-size: 1.0625rem; margin-bottom: 2px; color: #656565; } .right form .msg{ margin-top: 10px; } .right form input, .right form .msgForm{ width: 100%; font-size: 1.0625rem; background: #151515; padding-left: 10px; border: 1px solid #222222; } .right form input:focus, .right form .msgForm:focus{ outline-color: #3498db; } .right form input{ height: 35px; } .right form .btn{ margin-top: 10px; } .right form .btn button{ height: 40px; width: 100%; border: none; outline: none; background: #f12020; font-size: 1.0625rem; font-weight: 500; cursor: pointer; transition: .3s; } .right form .btn button:hover{ background: #000; } .bottom center{ padding: 5px; font-size: 0.9375rem; background: #151515; } .bottom center span{ color: #656565; } .bottom center a{ color: #f12020; text-decoration: none; } .bottom center a:hover{ text-decoration: underline; } @media screen and (max-width: 900px) { footer{ position: relative; bottom: 0px; } .main-content{ flex-wrap: wrap; flex-direction: column; } .main-content .box{ margin: 5px 0; } } </style> <div class="content1"> <div class="text"> Fully Responsive Footer Section</div> <div class="p"> HTML and CSS (Flexbox)</div> </div> <footer> <div class="main-content"> <div class="left box"> <h2> About us</h2> <div class="content"> <p> CodinNepal is a YouTube channel where you can learn web designing, web development, ui/ux designing, html css tutorial, hover animation and effects, javascript and jquery tutorial and related so on.</p> <div class="social"> <a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a> <a href="#"><span class="fab fa-twitter"></span></a> <a href="https://instagram.com/coding.np"><span class="fab fa-instagram"></span></a> <a href="https://youtube.com/c/codingnepal"><span class="fab fa-youtube"></span></a> </div> </div> </div> <div class="center box"> <h2> Address</h2> <div class="content"> <div class="place"> <span class="fas fa-map-marker-alt"></span> <span class="text">Birendranagar, Surkhet</span> </div> <div class="phone"> <span class="fas fa-phone-alt"></span> <span class="text">+089-765432100</span> </div> <div class="email"> <span class="fas fa-envelope"></span> <span class="text">abc@example.com</span> </div> </div> </div> <div class="right box"> <h2> Contact us</h2> <div class="content"> <form action="#"> <div class="email"> <div class="text"> Email *</div> <input type="email" required> </div> <div class="msg"> <div class="text"> Message *</div> <!-- NOTE: Due to more textarea tag I got an error. So I changed the textarea name to changeit. Please change that changeit name to textarea --> <changeit id=".msgForm" rows="2" cols="25" required></changeit> <!-- replace this changeit name to textarea --> <br /> <div class="btn"> <button type="submit">Send</button> </div> <div class="bottom"> <center> <span class="credit">Created By <a href="https://youtube.com/c/codingnepal">CodingNepal</a> | </span> <span class="far fa-copyright"></span> 2020 All rights reserved. </center> </div> </body> </html>  
    • By Kemily
      Eu preciso de ajuda para poder publicar meu site.
      O professor mandou faze-lo em HTML e CSS e eu fiz mas eu não sei postar e manter as imagens.
      Quando consegui postar as imagens não foram junto.
      O link q consegui fazer sem as imagens ficou assim:
       
      http://hyundai.droppages.com/
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.