Configuratore di prezzo

AlessandroMarzocco

Nuovo Utente
3 Dic 2020
7
0
1
Buongiorno a tutti,
premetto col dire che nel campo dell'HTML sono molto poco informato ed ho iniziato a cimentarmi da poco, mi limito a modificare delle piccole cose, ma vorrei imparare.
Vorrei creare una specie di configuratore di un pc (più che per vera necessità, u po' per capire come si fa) che, un po' come quello di Apple, mi permette di partire da una configurazione base ed aggiungere altri componenti o modificarli, aumentando per ognuno di essi il prezzo.
Immagine 2020-12-03 083911.png

Come ho già detto, sono molto poco esperto di HTML, infatti non l'ho creato da zero questo, ma ho preso come spunto uno di quei moduli form, modificandolo con una grafica che mi piacesse, infatti mi scuso se nel codice troverete delle cose che non c'entrano niente e che risalgono alla vecchia funzione del modulo.

Codice:
<div id="cc-m-15994434624" class="j-module n j-formnew">
    <form action="" method="post" id="cc-m-form-15994434624" class="cc-m-form cc-m-form-layout-1" name="cc-m-form-15994434624">
        <div class="cc-m-form-loading">
        </div>

        <div class="cc-m-form-view-sortable">
            <div class="cc-m-form-view-element cc-m-form-select" data-action="element">
                <div>
                    <label for="mc82fc5d8ddef87c40">RAM 3000MHz</label>
                </div>

                <div class="cc-m-form-view-input-wrapper">
                    <select name="mc82fc5d8ddef87c40" class="cc-m-form-element-input" id="mc82fc5d8ddef87c40" style=
                    "font-size: 18px; width: 100%; margin: 5px; border: 2px solid #323232; height: 60px">
                        <option value="16GB">
                            16GB
                        </option>
                        <option value="32GB (+70,00)">
                            32GB (+70,00)
                        </option>
                        <option value="64GB (+190,00)">
                            64GB (+190,00)
                        </option>
                    </select>
                </div>
            </div>

            <div class="cc-m-form-view-element cc-m-form-select" data-action="element">
                <div>
                    <label for="mc82fc5d8ddef87c41">Storage Principale (NVMe)</label>
                </div>

                <div class="cc-m-form-view-input-wrapper">
                    <select name="mc82fc5d8ddef87c41" class="cc-m-form-element-input" id="mc82fc5d8ddef87c41" style=
                    "font-size: 18px; width: 100%; margin: 5px; border: 2px solid #323232; height: 60px">
                        <option value="240GB">
                            240GB
                        </option>
                        <option value="512GB (+30,00)">
                            512GB (+30,00)
                        </option>
                        <option value="1TB (+100,00)">
                            1TB (+100,00)
                        </option>
                    </select>
                </div>
            </div>

            <div class="cc-m-form-view-element cc-m-form-select" data-action="element">
                <div>
                    <label for="mc82fc5d8ddef87c42">Storage Secondario (SATA III)</label>
                </div>

                <div class="cc-m-form-view-input-wrapper">
                    <select name="mc82fc5d8ddef87c42" class="cc-m-form-element-input" id="mc82fc5d8ddef87c42" style=
                    "font-size: 18px; width: 100%; margin: 5px; border: 2px solid #323232; height: 60px">
                        <option value="1TB">
                            1TB
                        </option>
                        <option value="2TB (+80,00)">
                            2TB (+80,00)
                        </option>
                        <option value="480GB (-50,00)">
                            480GB (-50,00)
                        </option>
                        <option value="Nessuno Storage secondario">
                            Nessuno Storage secondario
                        </option>
                    </select>
                </div>
            </div>

            <div class="cc-m-form-view-element cc-m-form-select" data-action="element">
                <div>
                    <label for="mc82fc5d8ddef87c43">Ulteriore Storage Hard Disk</label>
                </div>

                <div class="cc-m-form-view-input-wrapper">
                    <select name="mc82fc5d8ddef87c43" class="cc-m-form-element-input" id="mc82fc5d8ddef87c43" style=
                    "font-size: 18px; width: 100%; margin: 5px; border: 2px solid #323232; height: 60px">
                        <option value="Nessuno storage Hard Disk">
                            Nessuno storage Hard Disk
                        </option>
                        <option value="1TB (+50,00)">
                            1TB (+50,00)
                        </option>
                        <option value="2TB(+65,00)">
                            2TB(+65,00)
                        </option>
                        <option value="4TB(+90,00)">
                            4TB(+90,00)
                        </option>
                        <option value="8TB(+180,00)">
                            8TB(+180,00)
                        </option>
                        <option value="8TB (Raid 2x4TB) (+180,00)">
                            8TB (Raid 2x4TB) (+180,00)
                        </option>
                    </select>
                </div>
            </div>

            <div class="cc-m-form-view-element cc-m-form-select cc-m-required" data-action="element">
                <div>
                    <label for="mc82fc5d8ddef87c44">Microsoft Office</label>
                </div>

                <div class="cc-m-form-view-input-wrapper">
                    <select name="mc82fc5d8ddef87c44" class="cc-m-form-element-input" id="mc82fc5d8ddef87c44" style=
                    "font-size: 18px; width: 100%; margin: 5px; border: 2px solid #323232; height: 60px">
                        <option value="None">
                            None
                        </option>
                        <option value="Microsoft Office 365 (+30,00)">
                            30
                        </option>
                    </select>
                </div>
            </div>
        </div>

        <div class="cc-m-form-view-element cc-m-form-submit" data-action="element">
            <div class="cc-m-form-view-input-wrapper">
                <input type="submit" value="Prosegui" data-action="formButton" />
            </div>
        </div>
    </form>
</div>
Quello che mi servirebbe è, come anticipato, partire da un prezzo iniziale (900 euro), ed aggiungere a questa somma l'equivalente delle personalizzazioni aggiunte (se non è tropo complicato, ci sarebbe anche una variante che abbassa il prezzo, non aggiungere il secondo SSD). E' indifferente se la somma totale viene modificata appena selezionata la personalizzazione o cliccando su un'eventuale tasto.
Grazie mille in anticipo per l'aiuto.
 

Tommy03

Utente Attivo
6 Giu 2018
595
55
28
17
Vicenza
Per questo devi usare Javascript, creando una variabile che contiene il prezzo e la incrementi o decrementi ad ogni selezione. E allo stesso tempo crei un semplice testo HTML in cui mostri il valore aggiornato della variabile dopo ogni selezione,
 

AlessandroMarzocco

Nuovo Utente
3 Dic 2020
7
0
1
Per questo devi usare Javascript, creando una variabile che contiene il prezzo e la incrementi o decrementi ad ogni selezione. E allo stesso tempo crei un semplice testo HTML in cui mostri il valore aggiornato della variabile dopo ogni selezione,
Grazie mille per la risposta,
capisco che se mi vuoi mandare a quel paese hai tutte le ragioni del mondo, ma io di HTML e JAVASCRIPT non ci capisco nulla.
per creare il javascript è possibile inserirlo su un sito creato con jimdo o google sites? Se no, come potrei fare
 

AlessandroMarzocco

Nuovo Utente
3 Dic 2020
7
0
1
Ciao, ho iniziato a cercare e a documentarmi sul javascript. Avendo delle basi di C++, ho capito la parte relativa al variare il prezzo, facendola aumentare con la variabile ecc. l'unico problema che non riesco a risolvere è ce non so come far corrispondere il selezionare una personalizzazione ed il far avviare l'if che aumenta il prezzo e lo scrive.
Potresti aiutarmi??
 

Tommy03

Utente Attivo
6 Giu 2018
595
55
28
17
Vicenza
Innanzitutto ti consiglio di lavorare con la libreria JQuery (ti fa risparmiare codice), quindi includi questa riga tra <head> e </head>:
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Poi, sempre nel tag head, scrivi il codice JQuery:
HTML:
<script>
//quando la pagina è pronta:
$(document).ready(function(){
//inizializzo una variabile con il prezzo
var costo = 0;
//quando cambia la selezione nella prima select:
$("#mc82fc5d8ddef87c40").change(function(){
//controllo qual è il value dell'opzione scelta:
if(this.value == "16GB"){
//aumento di un tot la variabile
costo += 10;
}
//con else if fai cosi anche per le altre possibili scelte
...
});
//fai la stessa cosa per le altre select
});
</script>
Ti consiglio, comunque, di mettere nomi id e value più semplici, senno magari rischi di sbagliare (tanto il value non viene visualizzato, ti serve solo per identificare un'opzione)
 

AlessandroMarzocco

Nuovo Utente
3 Dic 2020
7
0
1
Ciao, è da qualche giorno che sto provando a smanettare con questo codice e a cercare di farlo funzionare, ma sembra che il problema è che il programma non riesca mai a passare la condizione
Codice:
//quando la pagina è pronta:
$(document).ready(function(){
Ho messo tutto il codice racchiuso in fondo nei tag <script></script> ed in cima ho aggiunto i tag <head></head> per la libreria
Ho provato a togliere questa stringa ma il software non riesce ad identificare la variazione di scelta e non modifica la variabile
 

Tommy03

Utente Attivo
6 Giu 2018
595
55
28
17
Vicenza
Se usi il codice che ti avevo messo (dentro a script, a sua volta dentro a head), la console dà errori?
 

Tommy03

Utente Attivo
6 Giu 2018
595
55
28
17
Vicenza
No metti il link della libreria tra <script> e </script>, poi sempre nell head metti un altro <script> e </script> con dentro il codice
 
Discussioni simili
Autore Titolo Forum Risposte Data
M [PHP] Framework per form complessi (configuratore prodotto) PHP 6
F configuratore Javascript 2
M Configuratore Prodotto: come iniziare? Javascript 0
@ Configuratore per personalizzare prodotti Flash 0
M Configuratore PC HTML e CSS 2
C [Offro][Retribuito] Social Media Manager al miglior prezzo! Offerte e Richieste di Lavoro e/o Collaborazione 0
M [SPONSOR] A BASSO PREZZO - PAYPAL Vendere e Acquistare pubblicita' online 0
maxnegri [PHP]Funzione di calcolo prezzo di una camera in un range di date PHP 62
P Vendo pagina 45k prezzo bassissimo Annunci servizi di Social Media Marketing 3
N Pubblicità a prezzo bassissimo Instagram 39 mila Vendere e Acquistare pubblicita' online 0
J Tavoletta grafica per neofiti con buon rapporto qualità/prezzo? Discussioni Varie 0
Elena Lazzarini [Magento] Prezzo variabile in base alla priorità di spedizione Magento 0
Bimbus Profilo Instagram prezzo buono Annunci servizi di Social Media Marketing 0
G [VENDO] Pagina facebook da 230 mila fans italiani prezzo interessante Annunci servizi di Social Media Marketing 1
S Vendo profilo instagram ASTA il prezzo più alto lo prenderà Annunci servizi di Social Media Marketing 0
Aruba Cloud Partner Aruba Cloud VPS Small: prezzo più basso per sempre Server Dedicati e VPS 2
V Vendo a prezzo stracciato pagina Instagram 8,5 K followers Annunci servizi di Social Media Marketing 2
Cavalinho08 [Offro gestione pagine instagram, prezzo bassissimo] Annunci servizi di Social Media Marketing 3
Cavalinho08 [Vendo pagine facebook dai 100 ai 600 iscritti, prezzo stracciato] Annunci servizi di Social Media Marketing 3
Cavalinho08 Vendo a BASSO PREZZO pagina facebook da 13k Annunci servizi di Social Media Marketing 3
adri1234 VENDO PAGINE A UN OTTIMO PREZZO Annunci servizi di Social Media Marketing 6
S Offro creazione sito- ottimo prezzo Offerte e Richieste di Lavoro e/o Collaborazione 0
webmachine [PRESTASHOP] Cambiare ordine prezzo-sconto-prezzoscontato E-Commerce 1
adri1234 [VENDO] PAGINE FACEBOOK A UN PREZZO STRACCIATO Annunci servizi di Social Media Marketing 2
booklisa [PHP] Input type: number, come formattare un PREZZO? PHP 6
F (Vendo) Spazio Banner - Guest Post a poco prezzo su Blog popolare Vendere e Acquistare pubblicita' online 0
Giatenx CERCO pagina facebook prezzo modico Annunci servizi di Social Media Marketing 20
S [VENDO] foremotion.eu ottimo prezzo Compravendita siti e domini 1
M Controllare se il prezzo inserito è espresso in centesimi e non in millesimi PHP 0
F Vendo account facebook verificato,prezzo basso Vendere e Acquistare pubblicita' online 5
F Vendo account facebook 3000 seguaci, prezzo bassissimo ! Annunci servizi di Social Media Marketing 1
matteoraggi Miglior rapporto qualita prezzo con android 5 intorno ai 100 euro? Smartphone e tablet 3
Z Dati strutturati e-commerce: il prezzo quando esce nelle SERP? SEO e Posizionamento 0
A [VENDO] Pagine grandi e piccole dai 4k ai 140k a prezzo economico Annunci servizi di Social Media Marketing 1
I [Vendita]Like stranieri in 24 ore, prezzo fino ad 1€ ogni 1000 Likes MIGLIOR PREZZO Annunci servizi di Social Media Marketing 4
felino [Prestashop 1.5.6.0] Errore visualizzare il prezzo scontato Content Management System (CMS) 0
felino [Prestashop] Prezzo specifico Content Management System (CMS) 1
M php / mysql calcolo prezzo base preventivo per hotel PHP 34
L Vendo like/condivisioni a poco prezzo! Annunci servizi di Social Media Marketing 3
L Vendo fan/seguaci/iscritti/ visualizzazioni a buon prezzo! Annunci servizi di Social Media Marketing 2
M [VENDO] 20.000 fans facebook internazionali, prezzo shock a soli 5... Annunci servizi di Social Media Marketing 0
M [PHP]Ordinare dati secondo prezzo PHP 2
I Come stabilire il prezzo di un sito?? Guadagnare col Sito 15
A Prezzo dinamico carrello e messaggio cancellazione Javascript 1
L [risolto] Campo prezzo float. Elimina lo zero finale.aiuto MySQL 4
promuovimi [Vendo] Fans Facebook, YouTube, Twitter..italiani a miglior prezzo. Annunci servizi di Social Media Marketing 0
M [VENDO] Pagina comica di oltre 1200 fan a prezzo basso e ragionevole Annunci servizi di Social Media Marketing 1
A [Vendo] Spazio pubblicitario basso prezzo +200.000 pagine viste mensili Vendere e Acquistare pubblicita' online 0
S Vendo pagina facebook 3.700 ad un prezzo imbattibile Annunci servizi di Social Media Marketing 2
F Vendo pacchetto pubblicitario su pagina da 776k - Prezzo ottimo. Annunci servizi di Social Media Marketing 1

Discussioni simili