Adicionar mais um campo em loja .jS
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Adicionar mais um campo em loja .jS
Detalhes da questão
Endereço do fórum: http://master-publicitario.forumeiros.com/
Versão do fórum: PhpBB3
Descrição
Olá!
Estou a utilizar este código para a minha loja:
- Código:
<script type="text/javascript">
texto = '';
final = '';
total = 0;
$(function() {
var produtos = {
// Nota: Adicione uma vírgula ao final de cada nova entrada
'Divulgação por Assinatura': {
icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/profile_edit.png',
preco: '150',
descricao: 'Poderá colocar uma pequena assinatura com um breve texto e ícone/logo do seu serviço, com um máximo de 1000 caracteres.'
},
'Divulgação por Mensagem Privada': {
icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/attachment_add.png',
preco: '250',
descricao: 'Irá ser divulgado por mensagem privada a todos os usuários do seu serviço, com uma breve informação e ícone/logo do seu serviço.'
},
};
var content = $('.content .itens');
$.each(produtos, function (key, value) {
content.append(
'<tr class="item">' +
' <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
' <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
' <td>' +
' <ul>' +
' <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
' <br />' +
' <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
' </ul>' +
' </td>' +
'</tr>'
);
});
});
var $total = 0;
function addToCart(item) {
var getItem = $(item).parents('.item').find('.nome').text();
var getPrice = parseFloat($(item).parents('.item').find('.preco').attr('data-myprice'));
$total += getPrice;
$('.total').html('Valor total: ' + $total + ' pontos');
$('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
}
function removeFromCart(item) {
var getPrice = parseFloat($(item).attr('data-myprice'));
$total -= getPrice;
$('.total').html('Valor total: ' + $total + ' pontos');
$(item).remove();
}
function buyItems() {
$('.item-cart').each(function() {
var item = $(this).text();
var preco = parseInt($(this).attr('data-myprice'));
texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
//add line break at the end
+ ':[/b] ' + preco + " pontos\n";
total += preco;
});
final = texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
jQuery.post('/privmsg', {
'mode': 'post',
'post': '1',
'folder': 'inbox',
'usergroup': '1',
'subject': 'Master Publicitário - Pedido da Loja',
'message': texto
}).done(function() {
alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
});
}
</script><style type="text/css">
table.content {
background: #fafafa;
border: 1px solid #eaeaea;
border-collapse: separate;
empty-cells: show;
table-layout: fixed;
width: 100%;
}
.itens .nome, #rank {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
height: 50px;
width: 50px;
}
.item-cart {
background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
margin: 3px 4px;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 5px;
padding-left: 25px;
color: white;
border-radius: 3px;
}
.item-cart2 {
background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
margin: 3px 4px;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 5px;
padding-left: 25px;
color: white;
border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
background: #333;
text-align: center;
padding: 10px;
}
#cart {
background: #f0f0f0;
border: 1px solid #e0e0e0;
margin-top: 5px;
padding: 5px;
}
.cart {
background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
min-height: 50px;
padding-left: 55px;
border: 1px solid #ddd;
}
.total {font-size: 13px;margin-top: 5px;display: block;font-style: italic;font-weight: bold;}
.warn {
background: #f3e3e6 url(http://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
border: 1px solid #e599aa;
margin: 3px 0;
padding: 1em;
}
fieldset.form-div dt {
padding: 5px 0;
}
fieldset.form-div dt {
float: left;
font: 15px bold arial, tahoma, georgia;
width: 13em;
}
fieldset.form-div dd {
margin-left: 10em;
}
fieldset.form-div dl:nth-child(odd) {
background: #f5f8fa !important;
}
fieldset.form-div dl:nth-child(even) {
background: #fff;
}
fieldset.form-div input {
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
outline: none;
border: 1px solid #f0f0f0;
padding: 5px;
}
#countitle {
background: white;
color: #D60B8C;
border: 1px solid #e0e0e0;
padding: 5px;
border-radius: 3px;
}
fieldset.form-div dl {padding: 11px;border-bottom: 1px solid #F3F3F3;}
fieldset.form-div dl:after {
clear: both;
content: '.';
display: block;
height: 0px;
visibility: hidden;
}
#form-send .area .buttons {
-moz-background-clip: padding;
-moz-border-radius: 3px 3px 0 0;
-moz-user-select: none;
-ms-user-select: none;
-webkit-background-clip: padding-box;
-webkit-border-radius: 3px 3px 0 0;
-webkit-user-select: none;
background: #f7f7f7;
background-clip: padding-box;
border: 1px solid silver;
border-radius: 3px 3px 0 0;
line-height: 0;
width: 100%;
overflow: hidden;
padding: 3px 5px 2px;
}
#form-send .area {
display: inline-block;
min-height: 330px;
z-index: 3;
width: 63%;
}
#form-send .description {
display: inline-block;
z-index: 3;
min-height: 200px;
position: absolute;
background: white;
margin: 0 0 0 20px;
line-height: 18px;
color: #000000;
font-family: Calibri, sans-serif;
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: normal;
padding: 1em;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid silver;
width: 17%;
}
#form-send .area .buttons .button2 {
background: white;
cursor: pointer;
outline: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #e0e0e0;
padding: 3px;
}
#form-send .area .buttons .button2:hover {border-color: #707070;}
#form-send .textarea_nc #textarea {
min-height: 200px;
color: #111;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
overflow: auto;
border: 0;
outline: none;
width: 100%;
}
#form-send .btns {
background: #f5f5f5;
border-top: 1px solid #d7d7d7;
padding: 10px;
text-align: center;
}
#form-send .area .textarea_nc {
background: white;
min-height: 200px;
cursor: se-resize;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
overflow: hidden;
padding: 3px 5px 2px;
border: 1px solid silver;
border-top: 0;
width: 100%;
}
#pr-modal {
position: fixed;
background-color: #3e3e3e;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
z-index: 100;
opacity: 0.5;
}
#pr-questao {
background-color: #464646;
background-color: rgba(70, 70, 70, 0.6);
padding: 4px;
-webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7 );
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: absolute;
z-index: 101;
width: 70%;
left: 14.5%;
top: 50%;
margin-top: -58px;
}
#pr-questao .postm {
background: #fff;
border: 1px solid #eee;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#pr-questao .pr-clo {
background: url(http://i.imgur.com/qRr3WvV.png) no-repeat;
cursor: pointer;
height: 16px;
width: 16px;
float: right;
}
</style>
<div class="warn">
Ao realizar compras na nossa loja tem alguns aspectos fundamentais a ter conhecimento:<br /><br />• Antes de efetuar a sua compra leia a seguinte <strong><a href="http://master-publicitario.forumeiros.com/t694-faq-funcionamento-da-loja#2619">FAQ</a></strong> para não ter dúvidas;<br />• Só poderá comprar apenas <strong>um tipo de divulgação</strong>;<br />• Depois o tempo de divulgação ter expirado, só poderá realizar novamente outra compra passado <strong>1 mês</strong> da última compra;<br /><br />Caso tenha alguma dúvida contate a equipa de moderação.
</div><br />
<div class="daemon">
<span style="color: white;font-size: 28px;font-weight: bold;"><span style="color: #00A4CD;">Master</span> <span style="color: #86B125;">Publicitário</span> - Loja</span>
</div>
<table class="content">
<tbody class="itens">
</tbody>
</table>
<div id="cart">
<div class="cart">
</div>
<span class="total"></span>
</div>
<div class="daemon">
<input onclick="buyItems()" value="Concluir compra" type="button" />
</div>
Só que queria adicionar outro campo e tentei copiar e colar assim abaixo:
- Código:
'Divulgação Social': {
icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/attachment_add.png',
preco: '250',
descricao: 'texto texto'
},
Só que não resultou, alguém sabe como colocar?
Re: Adicionar mais um campo em loja .jS
Olá querido administrador,
Altere o código pra este:
Até mais,
Cutie
Altere o código pra este:
- Código:
<script type="text/javascript">
texto = '';
final = '';
total = 0;
$(function() {
var produtos = {
// Nota: Adicione uma vírgula ao final de cada nova entrada
'Divulgação por Assinatura': {
icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/profile_edit.png',
preco: '150',
descricao: 'Poderá colocar uma pequena assinatura com um breve texto e ícone/logo do seu serviço, com um máximo de 1000 caracteres.'
},
'Divulgação por Mensagem Privada': {
icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/attachment_add.png',
preco: '250',
descricao: 'Irá ser divulgado por mensagem privada a todos os usuários do seu serviço, com uma breve informação e ícone/logo do seu serviço.'
},
'Divulgação Social': {
icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/attachment_add.png',
preco: '250',
descricao: 'texto texto'
},
};
var content = $('.content .itens');
$.each(produtos, function (key, value) {
content.append(
'<tr class="item">' +
' <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
' <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
' <td>' +
' <ul>' +
' <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
' <br />' +
' <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
' </ul>' +
' </td>' +
'</tr>'
);
});
});
var $total = 0;
function addToCart(item) {
var getItem = $(item).parents('.item').find('.nome').text();
var getPrice = parseFloat($(item).parents('.item').find('.preco').attr('data-myprice'));
$total += getPrice;
$('.total').html('Valor total: ' + $total + ' pontos');
$('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
}
function removeFromCart(item) {
var getPrice = parseFloat($(item).attr('data-myprice'));
$total -= getPrice;
$('.total').html('Valor total: ' + $total + ' pontos');
$(item).remove();
}
function buyItems() {
$('.item-cart').each(function() {
var item = $(this).text();
var preco = parseInt($(this).attr('data-myprice'));
texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
//add line break at the end
+ ':[/b] ' + preco + " pontos\n";
total += preco;
});
final = texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
jQuery.post('/privmsg', {
'mode': 'post',
'post': '1',
'folder': 'inbox',
'usergroup': '1',
'subject': 'Master Publicitário - Pedido da Loja',
'message': texto
}).done(function() {
alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
});
}
</script><style type="text/css">
table.content {
background: #fafafa;
border: 1px solid #eaeaea;
border-collapse: separate;
empty-cells: show;
table-layout: fixed;
width: 100%;
}
.itens .nome, #rank {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
height: 50px;
width: 50px;
}
.item-cart {
background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
margin: 3px 4px;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 5px;
padding-left: 25px;
color: white;
border-radius: 3px;
}
.item-cart2 {
background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
margin: 3px 4px;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 5px;
padding-left: 25px;
color: white;
border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
background: #333;
text-align: center;
padding: 10px;
}
#cart {
background: #f0f0f0;
border: 1px solid #e0e0e0;
margin-top: 5px;
padding: 5px;
}
.cart {
background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
min-height: 50px;
padding-left: 55px;
border: 1px solid #ddd;
}
.total {font-size: 13px;margin-top: 5px;display: block;font-style: italic;font-weight: bold;}
.warn {
background: #f3e3e6 url(http://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
border: 1px solid #e599aa;
margin: 3px 0;
padding: 1em;
}
fieldset.form-div dt {
padding: 5px 0;
}
fieldset.form-div dt {
float: left;
font: 15px bold arial, tahoma, georgia;
width: 13em;
}
fieldset.form-div dd {
margin-left: 10em;
}
fieldset.form-div dl:nth-child(odd) {
background: #f5f8fa !important;
}
fieldset.form-div dl:nth-child(even) {
background: #fff;
}
fieldset.form-div input {
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
outline: none;
border: 1px solid #f0f0f0;
padding: 5px;
}
#countitle {
background: white;
color: #D60B8C;
border: 1px solid #e0e0e0;
padding: 5px;
border-radius: 3px;
}
fieldset.form-div dl {padding: 11px;border-bottom: 1px solid #F3F3F3;}
fieldset.form-div dl:after {
clear: both;
content: '.';
display: block;
height: 0px;
visibility: hidden;
}
#form-send .area .buttons {
-moz-background-clip: padding;
-moz-border-radius: 3px 3px 0 0;
-moz-user-select: none;
-ms-user-select: none;
-webkit-background-clip: padding-box;
-webkit-border-radius: 3px 3px 0 0;
-webkit-user-select: none;
background: #f7f7f7;
background-clip: padding-box;
border: 1px solid silver;
border-radius: 3px 3px 0 0;
line-height: 0;
width: 100%;
overflow: hidden;
padding: 3px 5px 2px;
}
#form-send .area {
display: inline-block;
min-height: 330px;
z-index: 3;
width: 63%;
}
#form-send .description {
display: inline-block;
z-index: 3;
min-height: 200px;
position: absolute;
background: white;
margin: 0 0 0 20px;
line-height: 18px;
color: #000000;
font-family: Calibri, sans-serif;
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: normal;
padding: 1em;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid silver;
width: 17%;
}
#form-send .area .buttons .button2 {
background: white;
cursor: pointer;
outline: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #e0e0e0;
padding: 3px;
}
#form-send .area .buttons .button2:hover {border-color: #707070;}
#form-send .textarea_nc #textarea {
min-height: 200px;
color: #111;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
overflow: auto;
border: 0;
outline: none;
width: 100%;
}
#form-send .btns {
background: #f5f5f5;
border-top: 1px solid #d7d7d7;
padding: 10px;
text-align: center;
}
#form-send .area .textarea_nc {
background: white;
min-height: 200px;
cursor: se-resize;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
overflow: hidden;
padding: 3px 5px 2px;
border: 1px solid silver;
border-top: 0;
width: 100%;
}
#pr-modal {
position: fixed;
background-color: #3e3e3e;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
z-index: 100;
opacity: 0.5;
}
#pr-questao {
background-color: #464646;
background-color: rgba(70, 70, 70, 0.6);
padding: 4px;
-webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7 );
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: absolute;
z-index: 101;
width: 70%;
left: 14.5%;
top: 50%;
margin-top: -58px;
}
#pr-questao .postm {
background: #fff;
border: 1px solid #eee;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#pr-questao .pr-clo {
background: url(http://i.imgur.com/qRr3WvV.png) no-repeat;
cursor: pointer;
height: 16px;
width: 16px;
float: right;
}
</style>
<div class="warn">
Ao realizar compras na nossa loja tem alguns aspectos fundamentais a ter conhecimento:<br /><br />• Antes de efetuar a sua compra leia a seguinte <strong><a href="http://master-publicitario.forumeiros.com/t694-faq-funcionamento-da-loja#2619">FAQ</a></strong> para não ter dúvidas;<br />• Só poderá comprar apenas <strong>um tipo de divulgação</strong>;<br />• Depois o tempo de divulgação ter expirado, só poderá realizar novamente outra compra passado <strong>1 mês</strong> da última compra;<br /><br />Caso tenha alguma dúvida contate a equipa de moderação.
</div><br />
<div class="daemon">
<span style="color: white;font-size: 28px;font-weight: bold;"><span style="color: #00A4CD;">Master</span> <span style="color: #86B125;">Publicitário</span> - Loja</span>
</div>
<table class="content">
<tbody class="itens">
</tbody>
</table>
<div id="cart">
<div class="cart">
</div>
<span class="total"></span>
</div>
<div class="daemon">
<input type="button" value="Concluir compra" onclick="buyItems()" />
</div>
Até mais,
Cutie
Re: Adicionar mais um campo em loja .jS
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas". |
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos