Merge pull request #34 from leonardocintra/zoom

add click imagem
leonardocintra · Oct 9, 2021 · b0660d1 · b0660d1
2 parents 5bf9cfc + d8044d4
commit b0660d1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/catalogo/views.py b/catalogo/views.py
@@ -58,6 +58,11 @@ def produto(request, slug):
         return redirect(reverse("checkout:carrinho"))
 
     imagens = ProdutoImagem.objects.filter(produto=produto)
+    mockups = {}
+    for imagem in imagens:
+        mock = {imagem.id: imagem.imagem.url}
+        mockups.update(mock)
+
     modelos = ModeloProduto.objects.filter(produto=produto)
     cores = Cor.objects.all().exclude(ativo=False)
     tamanhos = Tamanho.objects.all().exclude(ativo=False)
@@ -72,6 +77,7 @@ def produto(request, slug):
     context = {
         'produto': produto,
         'imagens': imagens,
+        'mockups': mockups,
         'form': form,
         'subcategorias': subcategorias,
         'cores': cores,

diff --git a/templates/catalogo/produto_detalhe.html b/templates/catalogo/produto_detalhe.html
@@ -6,10 +6,21 @@
 
 {% block js_header %}
 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
-<script>    
+<script>
+
     function alterarLabelCorSelecionada(cor) {
         $('#cor-selecionada').text(cor);
     }
+
+    const mockups = {{ mockups|safe }};
+
+    function mostrarModeloSelecionado(e) {
+        for (const [key, value] of Object.entries(mockups)) {
+            if (parseInt(key) === e) {
+                $("#imagemModelo").attr("src", value);
+            }
+        }
+    }
 </script>
 {% endblock js_header %}
 
@@ -26,10 +37,10 @@
 
             <div class="row gx-4 gx-lg-5 align-items-center">
                 <div class="col-md-6 text-center">
-                    <img class="card-img-top mb-5 mb-md-0" src="{{ produto.imagem_principal.url }}" alt="{{ produto.nome }}" />
+                    <img id="imagemModelo" class="card-img-top mb-5 mb-md-0" src="{{ produto.imagem_principal.url }}" alt="{{ produto.nome }}" />
                     <div style="padding-top: 10px;">
                         {% for imagem in imagens %}
-                            <img src="{{ imagem.imagem.url }}" alt="imagem" class="rounded" width="75px;">
+                            <img src="{{ imagem.imagem.url }}" alt="imagem" class="rounded" width="75px;" onclick="mostrarModeloSelecionado({{ imagem.id }})">
                         {% endfor %}
                     </div>
                 </div>