Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Где допустила ошибку (https://javascript.ru/forum/misc/74918-gde-dopustila-oshibku.html)

Jolly 16.08.2018 16:08

Где допустила ошибку
 
Подскажите пожалуйста, где я допустила ошибку?

// Conversionpirate.com
if (window.location.href.indexOf('checkout') > -1) {
///////
 var html = `<style>
 .cro-block {
    width: 100%;
	position: absolute;
    bottom: 0;
	margin-bottom: 20px;
    }
	</style>
<div class="cro-block">
</div>`;

	document.querySelector('.total-line-table').insertAdjacentHTML('afterEnd', html);
	
 var html = `<style>
		img {
    border: 0;
    max-width: 100%;
    }
	.cro-checkout-trustsection {
    background-color: white;
	border-radius: 5px;
	padding-top: 15px;
	border: 1px solid rgb(229, 229, 229);
	
    }
	.cro-checkout-payment-methods {
	width: 90%;
	margin: 15px auto;
    }
	.cro-checkout-trustsection-title {
    color: rgb(115, 115, 115);
	text-align: center;
	padding-bottom: 15px;
    }
	.cro-guarantee-details-text {
    color: rgb(83, 83, 83);
    line-height: 18px;
    }
    .cro-guarantee-details {    
	border-radius: 5px 5px 0 0;    
    }
   .cro-boleto-details {    
    border-radius: 0 0 5px 5px;
    }
	.cro-gb-details {
	background-color: rgb(250, 250, 250);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 8px 0px;
    border: 1px solid rgb(204, 204, 204);
	width: 90%;
    padding: 10px;
	margin: auto;
	}
   .left {
    float: left;
	width: 30px;
    margin-right: 10px;
    }
	</style>

<div class="cro-checkout-trustsection">
<div class="cro-checkout-trustsection-title">Informações de pagamento e garantias:</div>

<div class="cro-guarantee-details cro-gb-details">
<div class="left">
<img src="https://cdn.shopify.com/s/files/1/2459/3871/files/money-back.png?10304968336471885750" class="fireapps-shipping-icon-item">
</div>
<div class="cro-guarantee-details-text">Suas compras são seguras com devolução gratuita e garantia de reembolso</div>
</div>

<div class="cro-boleto-details cro-gb-details">
<div class="left"><img src="https://cdn.shopify.com/s/files/1/2459/3871/files/boleto-bancario-logo_3x_cc7fde39-1430-45cb-9e51-991fc74b8bb5.png?890146874979855205" class="fireapps-shipping-icon-item"></div>
<div class="cro-guarantee-details-text">Você pode pagar com Boleto Bancario. Os pagamentos expiram em 24 horas</div>
  </div>
<div class="cro-checkout-payment-methods"><img class="cro-checkout-payment-methods-img" src="https://cdn.shopify.com/s/files/1/2569/8774/files/brazil-payment-methods-optimized.jpg?17084784513000531164"></div>
</div>`;

///////
    window.onload = function() {
	window.innerWidth < 1000 && document.querySelector('.step__footer').insertAdjacentHTML('afterEnd', html)
	document.querySelector('.cro-block').insertAdjacentHTML('afterEnd', html);
    };
}

рони 16.08.2018 16:22

Jolly,
скорее всего нет элементов на стрнице с которыми работет скрипт
строка 81 должна идти первой

Artur_Hopf 16.08.2018 16:27

В 82 строке точки с запятой не хватает, не благодари :dance:
Но боже мой, что это? :blink: Чего вы хотите добиться, изменить стили при срабатывании условия? Я не специалист, мне просто интересно.

рони 16.08.2018 16:28

Jolly,
примерно так, при условии, что все элементы есть.
window.addEventListener('load', function() {
    // Conversionpirate.com
    if (window.location.href.indexOf('checkout') > -1) {
        ///////
        var html = `<style>
 .cro-block {
    width: 100%;
	position: absolute;
    bottom: 0;
	margin-bottom: 20px;
    }
	</style>
<div class="cro-block">
</div>`;

        document.querySelector('.total-line-table').insertAdjacentHTML('afterEnd', html);

        var html = `<style>
		img {
    border: 0;
    max-width: 100%;
    }
	.cro-checkout-trustsection {
    background-color: white;
	border-radius: 5px;
	padding-top: 15px;
	border: 1px solid rgb(229, 229, 229);

    }
	.cro-checkout-payment-methods {
	width: 90%;
	margin: 15px auto;
    }
	.cro-checkout-trustsection-title {
    color: rgb(115, 115, 115);
	text-align: center;
	padding-bottom: 15px;
    }
	.cro-guarantee-details-text {
    color: rgb(83, 83, 83);
    line-height: 18px;
    }
    .cro-guarantee-details {
	border-radius: 5px 5px 0 0;
    }
   .cro-boleto-details {
    border-radius: 0 0 5px 5px;
    }
	.cro-gb-details {
	background-color: rgb(250, 250, 250);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 8px 0px;
    border: 1px solid rgb(204, 204, 204);
	width: 90%;
    padding: 10px;
	margin: auto;
	}
   .left {
    float: left;
	width: 30px;
    margin-right: 10px;
    }
	</style>

<div class="cro-checkout-trustsection">
<div class="cro-checkout-trustsection-title">Informações de pagamento e garantias:</div>

<div class="cro-guarantee-details cro-gb-details">
<div class="left">
<img src="https://cdn.shopify.com/s/files/1/2459/3871/files/money-back.png?10304968336471885750" class="fireapps-shipping-icon-item">
</div>
<div class="cro-guarantee-details-text">Suas compras são seguras com devolução gratuita e garantia de reembolso</div>
</div>

<div class="cro-boleto-details cro-gb-details">
<div class="left"><img src="https://cdn.shopify.com/s/files/1/2459/3871/files/boleto-bancario-logo_3x_cc7fde39-1430-45cb-9e51-991fc74b8bb5.png?890146874979855205" class="fireapps-shipping-icon-item"></div>
<div class="cro-guarantee-details-text">Você pode pagar com Boleto Bancario. Os pagamentos expiram em 24 horas</div>
  </div>
<div class="cro-checkout-payment-methods"><img class="cro-checkout-payment-methods-img" src="https://cdn.shopify.com/s/files/1/2569/8774/files/brazil-payment-methods-optimized.jpg?17084784513000531164"></div>
</div>`;



        window.innerWidth < 1000 && document.querySelector('.step__footer').insertAdjacentHTML('afterEnd', html)
        document.querySelector('.cro-block').insertAdjacentHTML('afterEnd', html);
    };
})

рони 16.08.2018 16:31

Цитата:

Сообщение от Artur_Hopf
В 82 строке точки с запятой не хватает

нужна, но проблема не в этом

Jolly 17.08.2018 09:25

Цитата:

Сообщение от Artur_Hopf (Сообщение 492903)
В 82 строке точки с запятой не хватает, не благодари :dance:
Но боже мой, что это? :blink: Чего вы хотите добиться, изменить стили при срабатывании условия? Я не специалист, мне просто интересно.

Спасибо)
Хочу блок добавить с помощью js на сайт, и чтобы в разных разрешениях он находился в разных местах с чуть разным стилем :write:

j0hnik 17.08.2018 09:34

Цитата:

Сообщение от Jolly
Хочу блок добавить с помощью js на сайт, и чтобы в разных разрешениях он находился в разных местах с чуть разным стилем

такое под силу даже css

Artur_Hopf 17.08.2018 09:48

Цитата:

Сообщение от Jolly (Сообщение 492945)
Спасибо)
Хочу блок добавить с помощью js на сайт, и чтобы в разных разрешениях он находился в разных местах с чуть разным стилем :write:

js же работает с css. Напиши что то вроде:
if (window.location.href.indexOf('checkout') > -1) {
     document.getElementsByClassName("cro-block").style.width = "100%";
}


А еще лучше использовать jquery:

if (window.location.href.indexOf('checkout') > -1) {
    $(".cro-block).css({"width":"100%", "position": "absolute","bottom": "0", "margin-bottom": "20px"});
}

Jolly 17.08.2018 12:14

Цитата:

Сообщение от рони (Сообщение 492904)
Jolly,
примерно так, при условии, что все элементы есть.
window.addEventListener('load', function() {
    // Conversionpirate.com
    if (window.location.href.indexOf('checkout') > -1) {
        ///////
        var html = `<style>
 .cro-block {
    width: 100%;
	position: absolute;
    bottom: 0;
	margin-bottom: 20px;
    }
	</style>
<div class="cro-block">
</div>`;

        document.querySelector('.total-line-table').insertAdjacentHTML('afterEnd', html);

        var html = `<style>
		img {
    border: 0;
    max-width: 100%;
    }
	.cro-checkout-trustsection {
    background-color: white;
	border-radius: 5px;
	padding-top: 15px;
	border: 1px solid rgb(229, 229, 229);

    }
	.cro-checkout-payment-methods {
	width: 90%;
	margin: 15px auto;
    }
	.cro-checkout-trustsection-title {
    color: rgb(115, 115, 115);
	text-align: center;
	padding-bottom: 15px;
    }
	.cro-guarantee-details-text {
    color: rgb(83, 83, 83);
    line-height: 18px;
    }
    .cro-guarantee-details {
	border-radius: 5px 5px 0 0;
    }
   .cro-boleto-details {
    border-radius: 0 0 5px 5px;
    }
	.cro-gb-details {
	background-color: rgb(250, 250, 250);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 8px 0px;
    border: 1px solid rgb(204, 204, 204);
	width: 90%;
    padding: 10px;
	margin: auto;
	}
   .left {
    float: left;
	width: 30px;
    margin-right: 10px;
    }
	</style>

<div class="cro-checkout-trustsection">
<div class="cro-checkout-trustsection-title">Informações de pagamento e garantias:</div>

<div class="cro-guarantee-details cro-gb-details">
<div class="left">
<img src="https://cdn.shopify.com/s/files/1/2459/3871/files/money-back.png?10304968336471885750" class="fireapps-shipping-icon-item">
</div>
<div class="cro-guarantee-details-text">Suas compras são seguras com devolução gratuita e garantia de reembolso</div>
</div>

<div class="cro-boleto-details cro-gb-details">
<div class="left"><img src="https://cdn.shopify.com/s/files/1/2459/3871/files/boleto-bancario-logo_3x_cc7fde39-1430-45cb-9e51-991fc74b8bb5.png?890146874979855205" class="fireapps-shipping-icon-item"></div>
<div class="cro-guarantee-details-text">Você pode pagar com Boleto Bancario. Os pagamentos expiram em 24 horas</div>
  </div>
<div class="cro-checkout-payment-methods"><img class="cro-checkout-payment-methods-img" src="https://cdn.shopify.com/s/files/1/2569/8774/files/brazil-payment-methods-optimized.jpg?17084784513000531164"></div>
</div>`;



        window.innerWidth < 1000 && document.querySelector('.step__footer').insertAdjacentHTML('afterEnd', html)
        document.querySelector('.cro-block').insertAdjacentHTML('afterEnd', html);
    };
})

Спасибо за помощь! Ошибка исчезла.

Нашла сайт где проверяют валидность js и подсказывают что не так, вот он

Jolly 17.08.2018 12:17

Цитата:

Сообщение от j0hnik (Сообщение 492946)
такое под силу даже css

css там не воспринимается, только js, поэтому и ломала голову :)


Часовой пояс GMT +3, время: 12:15.