https://multiplo.com.ar/wp-content/plugins/garantias/assets/js/frontend-v2.js?ver=2.0.1791426363

1/**
2 * Garantías Frontend JavaScript v2
3 * Usa clases propias: grt-active, grt-item-active (evita conflictos con temas)
4 */
5(function($) {
6    'use strict';
7
8    var GRT = {
9        init: function() {
10            this.$wrap = $('#grt-wrap');
11            if (!this.$wrap.length) return;
12
13            this.$grid = $('#grt-grid');
14            this.$detail = $('#grt-detail');
15            this.$body = $('#grt-body');
16            this.$brandName = $('#grt-brand-name');
17            this.$select = $('#grt-select');
18
19            this.bindEvents();
20        },
21
22        bindEvents: function() {
23            var self = this;
24
25            // Click en tarjeta de marca (grid view)
26            this.$wrap.on('click', '.grt-brand-card', function() {
27                self.showDetailView($(this).data('marca'));
28            });
29
30            // Click en item de marca (detail sidebar)
31            this.$wrap.on('click', '.grt-brand-item', function() {
32                var $item = $(this);
33                var marca = $item.data('marca');
34                if ($item.hasClass('grt-item-active')) return;
35
36                self.loadBrandContent(marca);
37                self.$wrap.find('.grt-brand-item').removeClass('grt-item-active');
38                $item.addClass('grt-item-active');
39                self.$select.val(marca);
40            });
41
42            // Cambio en select móvil
43            this.$select.on('change', function() {
44                var marca = $(this).val();
45                self.loadBrandContent(marca);
46                self.$wrap.find('.grt-brand-item').removeClass('grt-item-active');
47                self.$wrap.find('.grt-brand-item[data-marca="' + marca + '"]').addClass('grt-item-active');
48            });
49
50            // Click en botón volver
51            this.$wrap.on('click', '#grt-back', function(e) {
52                e.preventDefault();
53                self.showGridView();
54            });
55        },
56
57        showDetailView: function(marca) {
58            var self = this;
59
60            this.$grid.css('opacity', '0');
61
62            setTimeout(function() {
63                self.$grid.removeClass('grt-active');
64                self.$detail.addClass('grt-active').css('opacity', '0');
65
66                setTimeout(function() {
67                    self.$detail.css('opacity', '1');
68                }, 50);
69
70                // Activar item
71                self.$wrap.find('.grt-brand-item').removeClass('grt-item-active');
72                self.$wrap.find('.grt-brand-item[data-marca="' + marca + '"]').addClass('grt-item-active');
73                self.$select.val(marca);
74
75                // Cargar contenido
76                self.loadBrandContent(marca);
77
78                // Scroll
79                $('html, body').animate({
80                    scrollTop: self.$wrap.offset().top - 80
81                }, 400);
82            }, 200);
83        },
84
85        showGridView: function() {
86            var self = this;
87
88            this.$detail.css('opacity', '0');
89
90            setTimeout(function() {
91                self.$detail.removeClass('grt-active');
92                self.$grid.addClass('grt-active').css('opacity', '0');
93
94                setTimeout(function() {
95                    self.$grid.css('opacity', '1');
96                }, 50);
97
98                $('html, body').animate({
99                    scrollTop: self.$wrap.offset().top - 80
100                }, 400);
101            }, 200);
102        },
103
104        loadBrandContent: function(marca) {
105            var self = this;
106
107            this.$body.css('opacity', '0.5');
108
109            setTimeout(function() {
110                self.$body.html('<div class="grt-loading">Cargando información</div>');
111                self.$body.css('opacity', '1');
112            }, 150);
113
114            $.ajax({

115                url: garantias_ajax.ajax_url,
116                type: 'POST',
117                data: {
118                    action: 'get_garantia_marca',
119                    marca: marca,
120                    nonce: garantias_ajax.nonce
121                },
122                success: function(response) {
123                    if (response.success) {
124                        self.$body.css('opacity', '0');
125                        self.$body.html(response.data.contenido);
126                        self.$brandName.text(response.data.nombre);
127
128                        self.$wrap.find('.grt-detail-heading').html(
129                            '¿Cómo tramito la garantía con <span>' +
130                            $('<span>').text(response.data.nombre).html() +
131                            '</span>?'
132                        );
133
134                        setTimeout(function() {
135                            self.$body.css('opacity', '1');
136                        }, 50);
137                    } else {
138                        self.$body.html('<p>Error al cargar la información.</p>');
139                        self.$body.css('opacity', '1');
140                    }
141                },
142                error: function() {
143                    self.$body.html('<p>Error de conexión.</p>');
144                    self.$body.css('opacity', '1');
145                }
146            });
147        }
148    };
149
150    $(function() {
151        GRT.init();
152
153        // Transiciones suaves
154        $('#grt-wrap .grt-section').css('transition', 'opacity 0.2s ease');
155        $('#grt-body').css('transition', 'opacity 0.15s ease');
156    });
157
158})(jQuery);