Skip to content

J
joshine
Commit 7eb2ab56 by dhn
Options

改版结算页shopify样式

parent 205e5955
Showing with 1745 additions and 643 deletions
app/code/Magento/Checkout/Block/Onepage.php
......@@ -73,6 +73,7 @@ class Onepage extends \Magento\Framework\View\Element\Template
$this->serializer = $serializerInterface ?: \Magento\Framework\App\ObjectManager::getInstance()
->get(\Magento\Framework\Serialize\Serializer\JsonHexTag::class);
$this->_scopeConfigInterface = $_scopeConfigInterface;
$this->_urlBuilder = $context->getUrlBuilder();
}
/**
......@@ -116,7 +117,13 @@ class Onepage extends \Magento\Framework\View\Element\Template
$price = $_helper->currency($full_free, true, false);
return $price;
}
public function getLogoUrl()
{
$path = $this->_scopeConfigInterface->getValue('design/header/logo_src','stores',1);
$logoUrl = $this->_urlBuilder
->getBaseUrl(['_type' => \Magento\Framework\UrlInterface::URL_TYPE_MEDIA]) .'logo/'. $path;
return $logoUrl;
}
public function getFullFreeShip()
{
return $this->_scopeConfigInterface->getValue('carriers/freeshipping/free_shipping_subtotal');
......
app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml
......@@ -35,18 +35,42 @@
<item name="component" xsi:type="string">Magento_Ui/js/view/messages</item>
<item name="displayArea" xsi:type="string">messages</item>
</item>
<item name="authentication" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/authentication</item>
<item name="displayArea" xsi:type="string">authentication</item>
<item name="customer-email" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item>
<item name="displayArea" xsi:type="string">customer-email</item>
<item name="tooltip" xsi:type="array">
<item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item>
</item>
<item name="children" xsi:type="array">
<!--Additional authentication fields-->
<item name="errors" xsi:type="array">
<item name="sortOrder" xsi:type="string">0</item>
<item name="component" xsi:type="string">Magento_Checkout/js/view/authentication-messages</item>
<item name="displayArea" xsi:type="string">messages</item>
<item name="before-login-form" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">before-login-form</item>
<item name="children" xsi:type="array">
<!-- before login form fields -->
</item>
</item>
<item name="additional-login-form-fields" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">additional-login-form-fields</item>
<item name="children" xsi:type="array">
<!-- additional login form fields -->
</item>
</item>
<item name="authentication" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/authentication</item>
<item name="displayArea" xsi:type="string">authentication</item>
<item name="children" xsi:type="array">
<!--Additional authentication fields-->
<item name="errors" xsi:type="array">
<item name="sortOrder" xsi:type="string">0</item>
<item name="component" xsi:type="string">Magento_Checkout/js/view/authentication-messages</item>
<item name="displayArea" xsi:type="string">messages</item>
</item>
</item>
</item>
</item>
</item>
<!--
<item name="progressBar" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/progress-bar</item>
......@@ -70,29 +94,6 @@
</item>
</item>
-->
<item name="cart_items" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-items</item>
<item name="displayArea" xsi:type="string">estimation</item>
<item name="children" xsi:type="array">
<item name="details" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item>
<item name="children" xsi:type="array">
<item name="thumbnail" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
<item name="displayArea" xsi:type="string">before_details</item>
</item>
<item name="subtotal" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
<item name="displayArea" xsi:type="string">after_details</item>
</item>
<item name="message" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/message</item>
<item name="displayArea" xsi:type="string">item_message</item>
</item>
</item>
</item>
</item>
</item>
<item name="steps" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">steps</item>
......@@ -142,29 +143,7 @@
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="sortOrder" xsi:type="string">10</item>
<item name="children" xsi:type="array">
<item name="customer-email" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item>
<item name="displayArea" xsi:type="string">customer-email</item>
<item name="tooltip" xsi:type="array">
<item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item>
</item>
<item name="children" xsi:type="array">
<item name="before-login-form" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">before-login-form</item>
<item name="children" xsi:type="array">
<!-- before login form fields -->
</item>
</item>
<item name="additional-login-form-fields" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">additional-login-form-fields</item>
<item name="children" xsi:type="array">
<!-- additional login form fields -->
</item>
</item>
</item>
</item>
<item name="before-form" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">before-form</item>
......@@ -379,6 +358,29 @@
</item>
</item>
<item name="children" xsi:type="array">
<item name="cart_items" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-items</item>
<item name="displayArea" xsi:type="string">estimation</item>
<item name="children" xsi:type="array">
<item name="details" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item>
<item name="children" xsi:type="array">
<item name="thumbnail" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
<item name="displayArea" xsi:type="string">before_details</item>
</item>
<item name="subtotal" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
<item name="displayArea" xsi:type="string">after_details</item>
</item>
<item name="message" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/message</item>
<item name="displayArea" xsi:type="string">item_message</item>
</item>
</item>
</item>
</item>
</item>
<item name="summary" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary</item>
<item name="displayArea" xsi:type="string">summary</item>
......
app/code/Magento/Checkout/view/frontend/templates/onepage.phtml
......@@ -9,13 +9,6 @@
?>
<div id="checkout" data-bind="scope:'checkout'" class="checkout-container">
<div id="checkout-loader" data-role="checkout-loader" class="loading-mask" data-mage-init='{"checkoutLoader": {}}'>
<div class="loader">
<img src="<?= $block->escapeUrl($block->getViewFileUrl('images/loader-1.gif')) ?>"
alt="<?= $block->escapeHtmlAttr(__('Loading...')) ?>">
</div>
</div>
<?= /* @noEscape */ $secureRenderer->renderStyleAsTag("position: absolute;", "#checkout-loader img") ?>
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
......@@ -35,10 +28,8 @@ script;
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
<?php $scriptString = <<<script
require([
'mage/url',
'Magento_Ui/js/block-loader'
], function(url, blockLoader) {
blockLoader("{$block->escapeJs($block->escapeUrl($block->getViewFileUrl('images/loader-1.gif')))}");
'mage/url'
], function(url) {
return url.setBaseUrl('{$block->escapeJs($block->escapeUrl($block->getBaseUrl()))}');
})
script;
......
app/code/Magento/Checkout/view/frontend/web/js/model/quote.js
......@@ -42,6 +42,7 @@ define([
totals = ko.observable(totalsData),
collectedTotals = ko.observable({});
return {
totals: totals,
shippingAddress: shippingAddress,
......@@ -53,7 +54,6 @@ define([
paymentMethod: paymentMethod,
paymentMethodlist:paymentMethodlist,
guestEmail: null,
/**
* @return {*}
*/
......@@ -119,12 +119,6 @@ define([
getPaymentMethod: function () {
return paymentMethod;
},
setShippingSaveMethod: function (Method) {
shippingSaveMethod(Method);
},
getShippingSaveMethod: function () {
return shippingSaveMethod;
},
setPaymentMethodList: function (MethodList) {
paymentMethodlist(MethodList);
},
......@@ -132,6 +126,15 @@ define([
return paymentMethodlist;
},
setShippingSaveMethod: function (Method) {
shippingSaveMethod(Method);
},
getShippingSaveMethod: function () {
return shippingSaveMethod;
},
/**
* @return {*}
*/
......
app/code/Magento/Checkout/view/frontend/web/js/model/shipping-rate-processor/new-address.js
......@@ -57,6 +57,10 @@ define([
).done(function (result) {
var new_sh = [];
new_sh.push(result[0]);
if(result.length > 1)
{
quote.setShippingSaveMethod(result[1]);
}
rateRegistry.set(address.getCacheKey(), result);
shippingService.setShippingRates(new_sh);
}).fail(function (response) {
......
app/code/Magento/Checkout/view/frontend/web/js/view/billing-address.js
......@@ -178,14 +178,14 @@ define([
}
}
var data = setBillingAddressAction(globalMessageList);
if(data.status == 200)
{
this.isAddressDetailsVisible(true);
}
else
{
this.isAddressDetailsVisible(false);
}
// if(data.status == 200)
// {
// this.isAddressDetailsVisible(true);
// }
// else
// {
// this.isAddressDetailsVisible(false);
// }
this.updateAddresses();
......
app/code/Magento/Checkout/view/frontend/web/js/view/checkout-footer.js 0 → 100644
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'uiComponent',
'mage/mage'
], function ($, Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Magento_Checkout/checkout-index-footer'
}
});
});
app/code/Magento/Checkout/view/frontend/web/js/view/form/element/email.js
......@@ -54,6 +54,7 @@ define([
isCustomerLoggedIn: customer.isLoggedIn,
forgotPasswordUrl: window.checkoutConfig.forgotPasswordUrl,
emailCheckTimeout: 0,
visible: ko.observable(window.checkoutConfig.addressVisible),
/**
* Initializes regular properties of instance.
......@@ -79,7 +80,6 @@ define([
return this;
},
/**
* Callback on changing email property
*/
......
app/code/Magento/Checkout/view/frontend/web/js/view/logo-nav.js 0 → 100644
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'uiComponent',
'ko',
'Magento_Checkout/js/model/quote',
'mage/mage'
], function ($, Component,ko,quote) {
'use strict';
return Component.extend({
defaults: {
template: 'Magento_Checkout/logo-nav'
},
visible: ko.observable(!quote.isVirtual()) && ko.observable(window.checkoutConfig.addressVisible),
shippingVisible: ko.observable(window.checkoutConfig.shippingVisible),
paymentVisible: ko.observable(window.checkoutConfig.paymentVisible),
getLogoSrc: function(){
return window.checkoutConfig.logosrc;
},
breadcrumbReturnToCart: function(){
$.mage.redirect(window.checkoutConfig.cartUrl);
},
isMobile: function(){
return window.checkoutConfig.isMobile;
}
});
});
app/code/Magento/Checkout/view/frontend/web/js/view/part.js
define([
'jquery',
'ko',
'uiComponent',
'uiRegistry',
'Magento_Checkout/js/model/checkout-data-resolver',
'Magento_Checkout/js/model/quote'
], function ($, Component,registry,checkoutDataResolver,quote) {
], function ($, ko, Component,registry,checkoutDataResolver,quote) {
'use strict';
var input_city = $('#co-shipping-form input[name="city"]');
......@@ -12,24 +13,38 @@ define([
input_city.attr('required',true);
input_city.attr('_required',true);
}
var addressOneVisible = ko.observable(true),
shippingTwoVisible = ko.observable(false),
paymentThreeVisible = ko.observable(false);
return Component.extend({
addressOneVisible: addressOneVisible,
shippingTwoVisible: shippingTwoVisible,
paymentThreeVisible: paymentThreeVisible,
initialize: function () {
this.initStep();
this.initStep(this);
this._super();
return this;
},
initStep: function () {
$(document).on('click', '#next-shipping>span', function () {
$('#next-shipping>span').addClass('pleaseWait');
setTimeout(function(){
$('#next-shipping>span').removeClass("pleaseWait");
}, 600);
initStep: function (obj) {
$(document).on('click','.continue-shipping',function(){
console.log('addressOneVisible',addressOneVisible());
if(shippingTwoVisible() || paymentThreeVisible())
{
obj.backToInformation();
return false;
}
var loginForm = $('.form.form-login');
var addressForm = $('#checkout-step-shipping>#co-shipping-form');
if (loginForm.length > 0 && !loginForm.validate().form()) {
return false;
}
var shippingString = '';
var email = '';
if (addressForm.length > 0) {
if (!$('#co-shipping-form input[name="region"]').closest('.field').hasClass('_required')) {
$('#co-shipping-form input[name="region"]').removeAttr('required');
......@@ -57,6 +72,10 @@ define([
$(selectInput[i]).removeAttr('name')
}
}
if ($(window).width() < 768) {
var scrollTop = $('#opc-shipping_method').offset().top - 100;
$('html,body').animate({scrollTop: scrollTop}, 'fast');
}
return false;
}
......@@ -65,12 +84,7 @@ define([
$(selectInput[i]).removeAttr('name')
}
}
var paymentMethodObj = $('.checkout-index-index .payment-method');
if(paymentMethodObj.length < 1)
{
return false;
}
var email = $('#customer-email').val() || '';
email = $('#customer-emails').val() || '';
var firstname = $('#co-shipping-form input[name="firstname"]').val();
var lastname = $('#co-shipping-form input[name="lastname"]').val();
var street = $('#co-shipping-form input[name="street[0]"]').val();
......@@ -84,120 +98,151 @@ define([
} else {
regin = region_select.find(":selected").text();
}
if(!registry.get('checkout.steps.shipping-step.shippingAddress.after-shipping-method-form.billing-address-form').isAddressSameAsShipping())
{
var billadressForm = $('.checkout-billing-address form');
shippingString = firstname + ' ' + lastname + ',' + street + ',' + city + ', ' + regin + ', ' + country + ',' + postcode + ', ' + telephone;
}
$('.address-one').hide();
$('.shipping-two').show();
$('#email-text').show();
$('#email-text .main-text').html(email);
$('#shipping-text').show();
$('.payment-content').show();
$('#shipping-text .main-text').html(shippingString);
$('#breadcrumb-fill-info').addClass('custom-link-color');
$('#breadcrumb-logistics').removeClass('trade_checkout_step_waiting');
addressOneVisible(false);
shippingTwoVisible(true);
//quote.billAddressMent(true);
});
if(billadressForm.length > 0)
{
if (!$('.checkout-billing-address input[name="region"]').closest('.field').hasClass('_required')) {
$('.checkout-billing-address input[name="region"]').removeAttr('required');
}
if (!$('.checkout-billing-address input[name="street[1]"]').closest('.field').hasClass('_required')) {
$('.checkout-billing-address input[name="street[1]"]').removeAttr('required');
}
if (!$('.checkout-billing-address input[name="company"]').closest('.field').hasClass('_required')) {
$('.checkout-billing-address input[name="company"]').removeAttr('required');
}
var region_select = $('.checkout-billing-address select[name="region_id"]');
if (region_select.is(':visible') && region_select.closest('.field').hasClass('_required')) {
region_select.attr('required',true);
}
$(document).on('click','.continue-payment',function() {
if(addressOneVisible() || !shippingTwoVisible())
{
obj.backToInformation();
return false;
}
var paymentMethodObj = $('.checkout-index-index .payment-method');
if(paymentMethodObj.length < 1)
{
return false;
}
var inputChecked = $('#checkout-shipping-method-load').find('input:radio:checked');
var shippingPrice = $(inputChecked).siblings('.col-amount').html();
var shipString = $(inputChecked).siblings('.col-carrier').html() +
' ' + '<span class="price">' + shippingPrice + '</span>';
$('#breadcrumb-logistics').addClass('custom-link-color');
$('#breadcrumb-payment').removeClass('trade_checkout_step_waiting');
var selectInput = $('.checkout-billing-address .select-input');
if(selectInput.length > 0){
for(var i=0;i<selectInput.length;i++){
var selectName = $(selectInput[i]).next('select').attr('name');
$(selectInput[i]).attr('name',selectName)
}
}
if (!billadressForm.validate().form()) {
if(selectInput.length > 0){
for(var i=0;i<selectInput.length;i++){
$(selectInput[i]).removeAttr('name')
}
}
return false;
}
$(paymentMethodObj[0]).find('input[type="radio"]').trigger('click');
$('#shipping-text .trade_info-preview-item').addClass('mian-text-line');
$('.shipping-two').hide();
$('.payment-three').show();
$('#method-text .main-text').html(shipString);
shippingTwoVisible(false);
paymentThreeVisible(true);
});
$(document).on('click','.complete-order',function() {
if(!paymentThreeVisible())
{
obj.backToInformation();
return false;
}
if(!registry.get('checkout.steps.shipping-step.shippingAddress.after-shipping-method-form.billing-address-form').isAddressSameAsShipping())
{
var billadressForm = $('.checkout-billing-address form');
if(billadressForm.length > 0)
{
if (!$('.checkout-billing-address input[name="region"]').closest('.field').hasClass('_required')) {
$('.checkout-billing-address input[name="region"]').removeAttr('required');
}
if (!$('.checkout-billing-address input[name="street[1]"]').closest('.field').hasClass('_required')) {
$('.checkout-billing-address input[name="street[1]"]').removeAttr('required');
}
if (!$('.checkout-billing-address input[name="company"]').closest('.field').hasClass('_required')) {
$('.checkout-billing-address input[name="company"]').removeAttr('required');
}
var region_select = $('.checkout-billing-address select[name="region_id"]');
if (region_select.is(':visible') && region_select.closest('.field').hasClass('_required')) {
region_select.attr('required',true);
}
var selectInput = $('.checkout-billing-address .select-input');
if(selectInput.length > 0){
for(var i=0;i<selectInput.length;i++){
var selectName = $(selectInput[i]).next('select').attr('name');
$(selectInput[i]).attr('name',selectName)
}
}
if (!billadressForm.validate().form()) {
if(selectInput.length > 0){
for(var i=0;i<selectInput.length;i++){
$(selectInput[i]).removeAttr('name')
}
}
}else {
return false;
}
$('#submitBill').trigger('click');
if(quote.responseBillStatus() == 400)
{
return false;
if(selectInput.length > 0){
for(var i=0;i<selectInput.length;i++){
$(selectInput[i]).removeAttr('name')
}
}
}else {
return false;
}
$('#checkout-step-shipping').hide();
$('#shipping-text').show();
$('#shipping-text .main-address.shipping-address').html(firstname + ' ' + lastname + '<br>' + street + '<br>' + city + ', ' + regin + ', ' + country + '<br>' + postcode + ', ' + telephone + '<br>' + email);
}
$(paymentMethodObj[0]).find('input[type="radio"]').trigger('click');
$('#next-shipping').hide();
$('#edit-shipping').show();
$('#checkout-step-shipping_method').show();
$('#checkout-payment-method-load').show();
$('#checkout-step-payment,#opc-shipping_method').find('.step-title').removeClass('no-border');
if ($(window).width() < 768) {
var scrollTop = $('#opc-shipping_method').offset().top - 100;
$('html,body').animate({scrollTop: scrollTop}, 'fast');
$('#submitBill').trigger('click');
if(quote.responseBillStatus() == 400)
{
return false;
}
}
checkoutDataResolver.resolveEstimationAddress();
quote.billAddressMent(true);
$('.checkout-index-index .payment-method._active').find('.actions-toolbar').find('button').trigger('click');
});
$(document).on('click', '#shipping-text .address-edit', function () {
$('#shipping-text .main-address.shipping-address').html('');
$('#checkout_place_order').removeClass('button-fix');
$('#shipping-text').hide();
$('#checkout-step-shipping').show();
$('#next-shipping').show();
$('#edit-shipping').hide();
$('#checkout-step-shipping_method').hide();
$('#checkout-payment-method-load').hide();
$('#checkout-step-payment,#opc-shipping_method').find('.step-title').addClass('no-border');
$(document).on('click','.back-to-information,.trade_checkout_step_doing.custom-link-color,.right-email,.right-address',function() {
obj.backToInformation();
});
$(document).on('click', '#billing-address-same-as-shipping-shared', function () {
if(!registry.get('checkout.steps.shipping-step.shippingAddress.after-shipping-method-form.billing-address-form').isAddressSameAsShipping())
$(document).on('click','.back-to-shipping,.shipping-btn.custom-link-color,.right-method',function() {
if(shippingTwoVisible() || !paymentThreeVisible())
{
$('#shipping-text .main-address.shipping-address').html('');
$('#checkout_place_order').removeClass('button-fix');
$('#shipping-text').hide();
$('#checkout-step-shipping').show();
$('#next-shipping').show();
$('#edit-shipping').hide();
$('#checkout-step-shipping_method').hide();
$('#checkout-payment-method-load').hide();
$('#checkout-step-payment,#opc-shipping_method').find('.step-title').addClass('no-border');
obj.backToInformation();
return false;
}
$('.shipping-two').show();
$('.payment-three').hide();
$('#method-text .main-text').html('');
$('#method-text').hide();
this.shippingTwoVisible(true);
this.paymentThreeVisible(false);
});
$(document).on('click', '#editLink', function () {
$('#shipping-text .main-address.shipping-address').html('');
$('#checkout_place_order').removeClass('button-fix');
$('#shipping-text').hide();
$('#checkout-step-shipping').show();
$('#next-shipping').show();
$('#edit-shipping').hide();
$('#checkout-step-shipping_method').hide();
$('#checkout-payment-method-load').hide();
$('#checkout-step-payment,#opc-shipping_method').find('.step-title').addClass('no-border');
if(!registry.get('checkout.steps.shipping-step.shippingAddress.after-shipping-method-form.billing-address-form').isAddressSameAsShipping())
{
$('#action-edit-address').trigger('click');
$(document).on('click','.mobile-control',function() {
var flag = $(this).parent().attr('aria-expanded');
if(flag == 'true') {
$('.opc-block-summary').show();
$('.items-in-cart').removeClass('bottom-border');
} else {
$('.opc-block-summary').hide();
$('.items-in-cart').addClass('bottom-border');
}
quote.billAddressMent(false);
});
});
},
backToInformation: function(){
$('.address-one').show();
$('.shipping-two').hide();
$('.payment-three').hide();
$('.checkout-top-page .main-text').html('');
$('.checkout-top-page').hide();
$('.payment-content').hide();
paymentThreeVisible(true);
shippingTwoVisible(false);
paymentThreeVisible(false);
}
});
}
......
app/code/Magento/Checkout/view/frontend/web/js/view/payment.js
......@@ -39,6 +39,8 @@ define([
activeMethod: ''
},
isVisible: ko.observable(quote.isVirtual()),
paymentVisible: ko.observable(window.checkoutConfig.paymentVisible),
isLoading: paymentService.isLoading,
quoteIsVirtual: quote.isVirtual(),
isPaymentMethodsAvailable: ko.computed(function () {
return paymentService.getAvailablePaymentMethods().length > 0;
......
app/code/Magento/Checkout/view/frontend/web/js/view/paypal.js 0 → 100644
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'uiComponent',
'mage/mage'
], function ($, Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Magento_Checkout/paypal'
},
paypalCheckout: function(){
var returnUrl = $('input[data-action="checkout-form-submit"]').attr('data-checkout-url');
var y=(window.screen.availHeight-657);
var x=(window.screen.availWidth-535);
var mywindow = window.open(returnUrl, "_blank", "height=657,width=535,scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
mywindow.moveTo(x/2,y/2);
}
});
});
app/code/Magento/Checkout/view/frontend/web/js/view/shipping.js
......@@ -73,7 +73,10 @@ define([
isNewAddressAdded: ko.observable(false),
saveInAddressBook: 1,
quoteIsVirtual: quote.isVirtual(),
addressVisible: ko.observable(!quote.isVirtual() && window.checkoutConfig.addressVisible),
shippingVisible: ko.observable(window.checkoutConfig.shippingVisible),
paymentVisible: ko.observable(window.checkoutConfig.paymentVisible),
textVisible: ko.observable(false),
/**
* @return {exports}
*/
......@@ -382,6 +385,9 @@ define([
if (this.source.get('shippingAddress.custom_attributes')) {
this.source.trigger('shippingAddress.custom_attributes.data.validate');
}
},
backToCart: function(){
$.mage.redirect(window.checkoutConfig.cartUrl);
}
});
});
app/code/Magento/Checkout/view/frontend/web/js/view/summary/cart-items.js
......@@ -72,7 +72,7 @@ define([
return priceUtils.formatPrice(price, quote.getPriceFormat());
},
getGrandTotal:function(){
return this.getFormattedPrice(this.totals['subtotal']);
return this.getFormattedPrice(this.totals['base_grand_total']);
},
/**
* Set items to observable field
......@@ -93,6 +93,9 @@ define([
*/
isItemsBlockExpanded: function () {
return quote.isVirtual() || stepNavigator.isProcessed('shipping');
},
isMobile: function(){
return window.checkoutConfig.isMobile;
}
});
});
app/code/Magento/Checkout/view/frontend/web/js/view/summary/shipping.js
......@@ -51,11 +51,10 @@ define([
}
if (typeof shippingMethod['method_title'] !== 'undefined') {
shippingMethodTitle = ' - ' + shippingMethod['method_title'];
shippingMethodTitle = shippingMethod['method_title'];
}
return shippingMethodTitle ?
shippingMethod['carrier_title'] + shippingMethodTitle :
return shippingMethodTitle ? shippingMethodTitle :
shippingMethod['carrier_title'];
},
getShippingSaveMethodTitle: function () {
......
app/code/Magento/Checkout/view/frontend/web/template/billing-address/list.html
......@@ -5,7 +5,7 @@
*/
-->
<div class="field field-select-billing">
<label class="label"><span data-bind="i18n: 'Billing Address'"></span></label>
<label class="label-title step-title"><span data-bind="i18n: 'Billing Address'"></span></label>
<div class="control" data-bind="if: (addressOptions.length > 1)">
<select class="select" name="billing_address_id" data-bind="
options: addressOptions,
......
app/code/Magento/Checkout/view/frontend/web/template/checkout-index-footer.html 0 → 100644
<div class="trade-checkout-whole-footer__baseline sl_section--small"></div>
<div class="copyright_block" data-testid="checkout-ntfht">
<div id="shopline-section-trade/policy_description" class="shopline-section"><div class="checkout-description-footer ">
<footer id="policy-description" class="checkout_policy_description" trade-btn-event-name="trade:showPolicyModal" data-testid="checkout-dtv5i">
<ul>
<li class="custom-link-color">
<a href="/return-exchange-policy" target="_blank">Refund Policy</a>
</li>
<li class="custom-link-color">
<a href="/shipping-policy" target="_blank">Shipping policy</a>
</li>
<li class="custom-link-color">
<a href="/security-privacy-policy" target="_blank">Privacy Policy</a>
</li>
<li class="custom-link-color">
<a href="/terms-of-use" target="_blank">Terms of service</a>
</li>
</ul>
</footer>
</div>
</div>
<div id="shopline-section-trade/copy_rights" class="shopline-section"><footer class="checkout_copy_right primary-text hide" role="contentinfo">
© 2023 ChicCurve. All Rights Reserved.
</footer></div>
</div>
\ No newline at end of file
app/code/Magento/Checkout/view/frontend/web/template/logo-nav.html 0 → 100644
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<header class="pc_logo">
<div id="joshine-section-header_logo" class="joshine-section">
<h1 class="logo_container logo_container_checkout header_logo--img align-center pc can_click" data-logo="logo" id="trade_logo" data-testid="checkout-zhn03">
<div class="logo_inner size-medium">
<a title="" href="/" data-testid="checkout-syuyl"><img data-bind="attr: {'src': getLogoSrc()}" alt="JOSHINE"></a>
</div>
</h1>
</div>
</header>
<!-- ko if: isMobile() -->
<!-- ko foreach: getRegion('logo-nav-sidebar') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!--/ko-->
<header class="main__header" role="banner">
<div id="joshine-section-trade/checkout_breadcrumb" class="joshine-section"><div class="trade_checkout_breadcrumb trade_checkout_breadcrumb_checkout logo-align-center">
<button type="button" id="breadcrumb-return-to-cart"
data-step=""
trade-btn-event-name="trade:breadcrumb-return-to-cart"
class="trade_checkout_breadcrumb_button trade_checkout_step_done custom-link-color trade-checkout-btn"
data-bind="click: breadcrumbReturnToCart">
<div class="trade_checkout_steps_stepItem">
<span class="text">Cart</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.96967 12.0303C5.67678 11.7374 5.67678 11.2626 5.96967 10.9697L8.93934 8L5.96967 5.03033C5.67678 4.73744 5.67678 4.26256 5.96967 3.96967C6.26256 3.67678 6.73744 3.67678 7.03033 3.96967L10.5303 7.46967C10.8232 7.76256 10.8232 8.23744 10.5303 8.53033L7.03033 12.0303C6.73744 12.3232 6.26256 12.3232 5.96967 12.0303Z" fill="#959595"></path>
</svg>
</div>
</button>
<button type="button"
id="breadcrumb-fill-info"
data-step="contact_information"
trade-btn-event-name="trade:breadcrumb-fill-info"
class="trade_checkout_breadcrumb_button trade_checkout_step_doing primary-text trade-checkout-btn"
data-bind="css: { trade_checkout_step_waiting: !visible() }">
<div class="trade_checkout_steps_stepItem"><span class="text">Information</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.96967 12.0303C5.67678 11.7374 5.67678 11.2626 5.96967 10.9697L8.93934 8L5.96967 5.03033C5.67678 4.73744 5.67678 4.26256 5.96967 3.96967C6.26256 3.67678 6.73744 3.67678 7.03033 3.96967L10.5303 7.46967C10.8232 7.76256 10.8232 8.23744 10.5303 8.53033L7.03033 12.0303C6.73744 12.3232 6.26256 12.3232 5.96967 12.0303Z" fill="#959595"></path>
</svg>
</div>
</button>
<button type="button"
id="breadcrumb-logistics"
data-step="shipping_method"
trade-btn-event-name="trade:breadcrumb-logistics"
class="trade_checkout_breadcrumb_button shipping-btn primary-text trade-checkout-btn"
data-bind="css: { trade_checkout_step_waiting: !shippingVisible() }">
<div class="trade_checkout_steps_stepItem"><span class="text" data-text="Shipping">Shipping</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.96967 12.0303C5.67678 11.7374 5.67678 11.2626 5.96967 10.9697L8.93934 8L5.96967 5.03033C5.67678 4.73744 5.67678 4.26256 5.96967 3.96967C6.26256 3.67678 6.73744 3.67678 7.03033 3.96967L10.5303 7.46967C10.8232 7.76256 10.8232 8.23744 10.5303 8.53033L7.03033 12.0303C6.73744 12.3232 6.26256 12.3232 5.96967 12.0303Z" fill="#959595"></path>
</svg>
</div>
</button>
<button type="button"
id="breadcrumb-payment"
data-step="payment_method"
trade-btn-event-name="trade:breadcrumb-payment"
class="trade_checkout_breadcrumb_button primary-text trade-checkout-btn"
data-bind="css: { trade_checkout_step_waiting: !paymentVisible() }">
<div class="trade_checkout_steps_stepItem"><span class="text">Payment</span>
</div>
</button>
</div></div>
</header>
\ No newline at end of file
app/code/Magento/Checkout/view/frontend/web/template/payment-methods/list.html
......@@ -9,6 +9,16 @@
<div repeat="foreach: paymentGroupsList, item: '$group'"
class="payment-group">
<each args="data: getRegion($group().displayArea), as: 'method'" render=""></each>
<div class="group-item-body payment__body KlarnaBNPL has_content payment__body--online" ><div>
<svg width="143" height="100" viewBox="0 0 200 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M175 70V24C175 20.6863 172.314 18 169 18H15C11.6863 18 9 20.6863 9 24V116C9 119.314 11.6863 122 15 122H169C172.314 122 175 119.314 175 116V84.9259" stroke="currentColor" stroke-width="3"></path>
<path d="M9 36H175" stroke="currentColor" stroke-width="3"></path>
<circle cx="18" cy="27" r="3" fill="currentColor"></circle>
<circle cx="28" cy="27" r="3" fill="currentColor"></circle>
<circle cx="38" cy="27" r="3" fill="currentColor"></circle>
<path d="M146.5 77H197M197 77L189 69M197 77L189 85" stroke="currentColor" stroke-width="3"></path>
</svg>
<div>After clicking 'Complete Order', you will be redirected to the payment page to securely complete the payment.</div></div></div>
</div>
</div>
<div ifnot="isPaymentMethodsAvailable()"
......
app/code/Magento/Checkout/view/frontend/web/template/payment.html
......@@ -4,12 +4,12 @@
* See COPYING.txt for license details.
*/
-->
<li id="payment" role="presentation" class="checkout-payment-method">
<li id="payment" role="presentation" class="checkout-payment-method payment-three" data-bind="fadeVisible: paymentVisible(), blockLoader: isLoading" style="order:4;">
<div id="checkout-step-payment"
class="step-content"
data-role="content"
role="tabpanel"
aria-hidden="false">
aria-hidden="false" >
<!-- ko if: (quoteIsVirtual) -->
<!-- ko foreach: getRegion('customer-email') -->
<!-- ko template: getTemplate() --><!-- /ko -->
......@@ -18,15 +18,12 @@
<form id="co-payment-form" class="form payments" novalidate="novalidate">
<input data-bind='attr: {value: getFormKey()}' type="hidden" name="form_key"/>
<fieldset class="fieldset">
<p class="step-title no-border">
<!-- ko ifnot: (quoteIsVirtual) -->
<span class="number">
<span translate="'3'" />
</span>
<!--/ko-->
<span translate="'Payment Method'" />
<p class="step-title no-border label-title">
<span translate="'Payment Method'"/>
</p>
<h5 class="block-select-subtitle">
All transactions are secure and encrypted.
</h5>
<!-- ko foreach: getRegion('beforeMethods') -->
......@@ -42,7 +39,7 @@
</div>
<!--/ko-->
<!-- ko ifnot: (quoteIsVirtual) -->
<div id="checkout-payment-method-load" class="opc-payment dispay-solid" data-bind="visible: isPaymentMethodsAvailable">
<div id="checkout-payment-method-load" class="opc-payment" data-bind="visible: isPaymentMethodsAvailable">
<!-- ko foreach: getRegion('payment-methods-list') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
......
app/code/Magento/Checkout/view/frontend/web/template/paypal.html 0 → 100644
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div id="trade-checkout-smartpay" class="address-one">
<div id="trade-paypal-express">
<h2 class="trade_checkout__exp__title">
Express Checkout
</h2>
<div data-label="or" class="paypal checkout after paypal-logo">
<div class="checkout-logo-medium" data-bind="click: paypalCheckout">
<input type="image" data-action="checkout-form-submit" data-checkout-url="/paypal/express/start/button/1/" src="http://local.joshine.com/static/frontend/Joshine/breeze/en_US/Magento_Paypal/images/paypal.png" alt="Checkout with PayPal" title="Checkout with PayPal">
<div class="checkout-txt" style="display:contents;"></div>
</div>
</div>
<div class="trade_checkout__exp__line">
<span class="lineLeft"></span>
<span class="lineText">
OR
</span>
<span class="lineRight"></span>
</div>
</div>
</div>
\ No newline at end of file
app/code/Magento/Checkout/view/frontend/web/template/sidebar.html
......@@ -5,6 +5,9 @@
*/
-->
<div id="opc-sidebar">
<!-- ko foreach: getRegion('estimation') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!-- ko foreach: getRegion('summary') -->
<!-- ko template: getTemplate() --><!-- /ko -->
......
app/code/Magento/Checkout/view/frontend/web/template/summary.html
......@@ -5,7 +5,6 @@
*/
-->
<div class="opc-block-summary" data-bind="blockLoader: isLoading">
<span data-bind="i18n: 'Order Summary'" class="title"></span>
<!-- ko foreach: elems() -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
......
app/code/Magento/Paypal/view/frontend/web/js/paypal-checkout.js
......@@ -91,7 +91,11 @@ define([
$form.trigger('submit');
} else {
$.mage.redirect(returnUrl);
var y=(window.screen.availHeight-657);
var x=(window.screen.availWidth-535);
var mywindow = window.open(returnUrl, "_blank", "height=657,width=535,scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
mywindow.moveTo(x/2,y/2);
//$.mage.redirect(returnUrl);
}
}
});
......
app/code/Magento/SalesRule/view/frontend/layout/checkout_index_index.xml
......@@ -13,29 +13,29 @@
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<!--<item name="steps" xsi:type="array">
<item name="logo-nav" xsi:type="array">
<item name="children" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="logo-nav-sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="summary" xsi:type="array">
<item name="children" xsi:type="array">
<item name="afterMethods" xsi:type="array">
<item name="discount" xsi:type="array">
<item name="component" xsi:type="string">Magento_SalesRule/js/view/payment/discount</item>
<item name="children" xsi:type="array">
<item name="errors" xsi:type="array">
<item name="sortOrder" xsi:type="string">4</item>
<item name="component" xsi:type="string">Magento_SalesRule/js/view/payment/discount-messages</item>
<item name="displayArea" xsi:type="string">messages</item>
</item>
</item>
</item>
<item name="totals" xsi:type="array">
<item name="children" xsi:type="array">
<item name="discount" xsi:type="array">
<item name="component" xsi:type="string">Magento_SalesRule/js/view/payment/discount</item>
<item name="children" xsi:type="array">
<item name="errors" xsi:type="array">
<item name="sortOrder" xsi:type="string">0</item>
<item name="component" xsi:type="string">Magento_SalesRule/js/view/payment/discount-messages</item>
<item name="displayArea" xsi:type="string">messages</item>
</item>
<item name="captcha" xsi:type="array">
<item name="component" xsi:type="string">Magento_SalesRule/js/view/payment/captcha</item>
<item name="displayArea" xsi:type="string">captcha</item>
<item name="formId" xsi:type="string">sales_rule_coupon_request</item>
<item name="configSource" xsi:type="string">checkoutConfig</item>
</item>
<item name="component" xsi:type="string">Magento_SalesRule/js/view/summary/discount</item>
<item name="config" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Discount</item>
</item>
</item>
</item>
......@@ -45,7 +45,7 @@
</item>
</item>
</item>
</item>-->
</item>
<item name="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="summary" xsi:type="array">
......
app/code/Magento/Theme/view/base/templates/root.phtml
......@@ -12,7 +12,6 @@
<?= /* @noEscape */ $headAdditional ?>
</head>
<body data-container="body"
data-mage-init='{"loaderAjax": {}, "loader": { "icon": "<?= /* @noEscape */ $loaderIcon ?>"}}'
<?= /* @noEscape */ $bodyAttributes ?>>
<?= /* @noEscape */ $layoutContent ?>
</body>
......
app/code/Magento/Theme/view/frontend/requirejs-config.js
......@@ -16,14 +16,12 @@ var config = {
'dropdownDialog': 'mage/dropdown',
'dropdown': 'mage/dropdowns',
'accordion': 'mage/accordion',
'loader': 'mage/loader',
'tooltip': 'mage/tooltip',
'deletableItem': 'mage/deletable-item',
'itemTable': 'mage/item-table',
'fieldsetControls': 'mage/fieldset-controls',
'fieldsetResetControl': 'mage/fieldset-controls',
'redirectUrl': 'mage/redirect-url',
'loaderAjax': 'mage/loader',
'menu': 'mage/menu',
'popupWindow': 'mage/popup-window',
'validation': 'mage/validation/validation',
......
app/code/Magento/Ui/view/base/web/js/form/element/abstract.js
......@@ -491,5 +491,13 @@ define([
isCheckoutIndex: function () {
return $('body').hasClass('checkout-index-index');
}
,
isSelectIndex: function () {
if(this.elementTmpl.indexOf("select") != -1)
{
return true;
}
return false;
}
});
});
app/code/Magento/Ui/view/base/web/js/lib/core/collection.js
......@@ -343,6 +343,13 @@ define([
});
return _.flatten(result);
},
isMobile: function(){
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
return true;
} else {
return false;
}
}
});
});
app/code/Magento/Ui/view/frontend/web/templates/form/element/select.html
......@@ -4,7 +4,6 @@
* See COPYING.txt for license details.
*/
-->
<!-- ko ifnot: isCheckoutIndex() -->
<select class="select" data-bind="
attr: {
name: inputName,
......@@ -26,32 +25,4 @@
ko.applyBindingsToNode(option, {attr: {disabled: true}}, item);
}
}"
></select>
<!-- /ko -->
<!-- ko if: isCheckoutIndex() -->
<input class="input-text select-input" type="text" data-bind="value: getPreview(),attr: {
'aria-required': required
}" required readonly="readonly"/>
<select class="select check-select" data-bind="
attr: {
name: inputName,
id: uid,
disabled: disabled,
'aria-describedby': getDescriptionId(),
'aria-required': required,
'aria-invalid': error() ? true : 'false',
placeholder: placeholder
},
hasFocus: focused,
optgroup: options,
value: value,
optionsCaption: caption,
optionsValue: 'value',
optionsText: 'label',
optionsAfterRender: function(option, item) {
if (item && item.disabled) {
ko.applyBindingsToNode(option, {attr: {disabled: true}}, item);
}
}"></select>
<!-- /ko -->
\ No newline at end of file
></select>
\ No newline at end of file
app/code/Magento/Ui/view/frontend/web/templates/form/field.html
......@@ -13,43 +13,43 @@
<div class="control" data-bind="css: {'_with-tooltip': element.tooltip}">
<!-- ko ifnot: element.hasAddons() -->
<!-- ko template: element.elementTmpl --><!-- /ko -->
<!-- ko template: element.elementTmpl --><!-- /ko -->
<!-- /ko -->
<!-- ko if: element.hasAddons() -->
<div class="control-addon">
<!-- ko template: element.elementTmpl --><!-- /ko -->
<div class="control-addon">
<!-- ko template: element.elementTmpl --><!-- /ko -->
<!-- ko if: element.addbefore -->
<label class="addon-prefix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addbefore"></span></label>
<!-- /ko -->
<!-- ko if: element.addbefore -->
<label class="addon-prefix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addbefore"></span></label>
<!-- /ko -->
<!-- ko if: element.addafter -->
<label class="addon-suffix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addafter"></span></label>
<!-- /ko -->
</div>
<!-- ko if: element.addafter -->
<label class="addon-suffix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addafter"></span></label>
<!-- /ko -->
</div>
<!-- /ko -->
<!-- ko if: element.tooltip -->
<!-- ko template: element.tooltipTpl --><!-- /ko -->
<!-- ko template: element.tooltipTpl --><!-- /ko -->
<!-- /ko -->
<!-- ko if: element.notice -->
<div class="field-note" data-bind="attr: { id: element.noticeId }">
<span data-bind="text: element.notice"></span>
</div>
<div class="field-note" data-bind="attr: { id: element.noticeId }">
<span data-bind="text: element.notice"></span>
</div>
<!-- /ko -->
<!-- ko if: element.error() -->
<div class="field-error" data-bind="attr: { id: element.errorId }" generated="true">
<span data-bind="text: element.error"></span>
</div>
<div class="field-error" data-bind="attr: { id: element.errorId }" generated="true">
<span data-bind="text: element.error"></span>
</div>
<!-- /ko -->
<!-- ko if: element.warn() -->
<div role="alert" class="message warning" data-bind="attr: { id: element.warningId }" generated="true">
<span data-bind="text: element.warn"></span>
</div>
<div role="alert" class="message warning" data-bind="attr: { id: element.warningId }" generated="true">
<span data-bind="text: element.warn"></span>
</div>
<!-- /ko -->
</div>
</div>
......@@ -57,10 +57,16 @@
<!-- ko if: isCheckoutIndex() -->
<div class="field" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses">
<!-- ko if: isSelectIndex() -->
<label class="label" data-bind="attr: { for: element.uid },css: {'fouse-label':true}">
<!-- ko if: element.label --><span translate="element.label"></span><!-- /ko -->
</label>
<!-- /ko -->
<!-- ko ifnot: isSelectIndex() -->
<label class="label" data-bind="attr: { for: element.uid },css: {'fouse-label': element.value}">
<!-- ko if: element.label --><span translate="element.label"></span><!-- /ko -->
</label>
<!-- /ko -->
<div class="control" data-bind="css: {'_with-tooltip': element.tooltip}">
<!-- ko ifnot: element.hasAddons() -->
<!-- ko template: element.elementTmpl --><!-- /ko -->
......
app/design/frontend/Joshine/breeze/Magento_Checkout/layout/checkout_index_index.xml
......@@ -7,31 +7,13 @@
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="checkout.header.wrapper" remove="true"/>
<referenceContainer name="page.bottom.container" remove="true"/>
<referenceContainer name="footer-container" remove="true"/>
<referenceBlock name="catalog.topnav" remove="true" />
<referenceBlock name="top.search" remove="true" />
<referenceBlock name="sparsh.free-shipping.bar.top" remove="true" />
<referenceContainer name="checkout.header.container">
<block class="Magento\Cms\Block\Block" name="cart.payment.top">
<arguments>
<argument name="block_id" xsi:type="string">cart_payment_top</argument>
</arguments>
</block>
</referenceContainer>
<referenceContainer name="columns.top">
<block class="Magento\Cms\Block\Block" name="progress.bar" before="-">
<arguments>
<argument name="block_id" xsi:type="string">progress_bar</argument>
</arguments>
</block>
</referenceContainer>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="checkout.cart.footer" template="Magento_Checkout::footer.phtml" />
</referenceContainer>
<referenceBlock name="checkout.cart.addtocart" remove="true" />
<referenceBlock name="checkout.root">
<arguments>
......@@ -40,6 +22,122 @@
<item name="checkout" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-get</item>
<item name="children" xsi:type="array">
<item name="logo-nav" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/logo-nav</item>
<item name="displayArea" xsi:type="string">logo-nav</item>
<item name="children" xsi:type="array">
<item name="logo-nav-sidebar" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/sidebar</item>
<item name="displayArea" xsi:type="string">logo-nav-sidebar</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Magento_Checkout/sidebar</item>
<item name="deps" xsi:type="array">
<item name="0" xsi:type="string">checkout.steps</item>
</item>
</item>
<item name="children" xsi:type="array">
<item name="cart_items" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-items</item>
<item name="displayArea" xsi:type="string">estimation</item>
<item name="children" xsi:type="array">
<item name="details" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item>
<item name="children" xsi:type="array">
<item name="thumbnail" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
<item name="displayArea" xsi:type="string">before_details</item>
</item>
<item name="subtotal" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
<item name="displayArea" xsi:type="string">after_details</item>
</item>
<item name="message" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/message</item>
<item name="displayArea" xsi:type="string">item_message</item>
</item>
</item>
</item>
</item>
</item>
<item name="summary" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary</item>
<item name="displayArea" xsi:type="string">summary</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Magento_Checkout/summary</item>
</item>
<item name="children" xsi:type="array">
<item name="totals" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/totals</item>
<item name="displayArea" xsi:type="string">totals</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Magento_Checkout/summary/totals</item>
</item>
<item name="children" xsi:type="array">
<!-- sort order for this totals is configured on admin panel-->
<!-- Stores->Configuration->SALES->Sales->General->Checkout Totals Sort Order -->
<item name="subtotal" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/subtotal</item>
<item name="config" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Cart Subtotal</item>
</item>
</item>
<item name="shipping" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/shipping</item>
<item name="config" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Shipping</item>
<item name="notCalculatedMessage" xsi:type="string" translate="true">Not yet calculated</item>
</item>
</item>
<item name="grand-total" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/grand-total</item>
<item name="config" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Order Total</item>
</item>
</item>
</item>
</item>
<item name="itemsBefore" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
<!-- merge your components here -->
</item>
</item>
<item name="itemsAfter" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
<!-- merge your components here -->
</item>
</item>
</item>
</item>
<item name="shipping-information" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information</item>
<item name="config" xsi:type="array">
<item name="deps" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item>
</item>
<item name="displayArea" xsi:type="string">shipping-information</item>
<item name="children" xsi:type="array">
<item name="ship-to" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information/list</item>
<item name="displayArea" xsi:type="string">ship-to</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
<item name="paypal" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/paypal</item>
<item name="displayArea" xsi:type="string">paypal</item>
</item>
<item name="checkout-footer" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/checkout-footer</item>
<item name="displayArea" xsi:type="string">checkout-footer</item>
</item>
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
......@@ -59,18 +157,6 @@
</item>
</item>
</item>
<item name="placeOrder" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/place-order</item>
<item name="displayArea" xsi:type="string">placeOrder</item>
</item>
<item name="security" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/security</item>
<item name="displayArea" xsi:type="string">security</item>
</item>
<item name="addressGet" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/address-get</item>
<item name="displayArea" xsi:type="string">addressGet</item>
</item>
</item>
</item>
</item>
......
app/design/frontend/Joshine/breeze/Magento_Checkout/templates/onepage.phtml
......@@ -14,10 +14,27 @@ $full_free = $block->getFullFreeShip();
$_helper = $objectManager->get('Magento\Framework\Pricing\Helper\Data');
$full_free_ship = $_helper->currency($full_free, true, false);
$free_price = $_helper->currency(0, true, false);
$logoUrl = $block->getLogoUrl();
$mobileDetect = $objectManager->get(\Joshine\Common\Lib\MobileDetect\MobileDetect::class);
$isMobile = $mobileDetect->isMobile();
?>
<style type="text/css">
.payment-method._active{
border: 1px solid #1979c3 !important;
.trade_wrapper{
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size:14px;
}
.main__header{
text-align: center;
font-size: 12px;
}
.payment-method:not(:last-child){
border-bottom: 1px solid #C2C2C2;
}
.payment-group{
background-color: #FFFFFF;
border-radius: 6px;
padding:15px;
}
.checkout-index-index{
font-family: 'Outfit-Regular', sans-serif;
......@@ -80,15 +97,11 @@ $free_price = $_helper->currency(0, true, false);
.header.content .logo img{max-width: 60%;}
.payment-method-note{font-size: 12px;}
}
.opc>li{
padding: 0px !important;
}
.checkout-index-index #maincontent{background: #f2f2f2;}
.checkout-index-index #maincontent{background: #f2f2f2;margin:0 auto;padding:0;}
.page-title-wrapper{display: none;}
#opc-sidebar{
background: #fff;
font-size: 16px;
font-size: 14px;
}
.opc-block-summary{
padding: 15px;
......@@ -111,7 +124,6 @@ $free_price = $_helper->currency(0, true, false);
font-weight: 600;
font-size: 20px;
cursor: pointer;
background: #eeeeee;
padding:15px;
}
.label {
......@@ -119,13 +131,16 @@ $free_price = $_helper->currency(0, true, false);
font-size: 13px;
}
.table-checkout-shipping-method tr.row{
border: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
line-height: 10px;
display: block;
padding: 0 10px;
margin-bottom: 10px;
height: 50px;
}
.table-checkout-shipping-method tr.row:last-child{
border-bottom:none;
}
a[href^="tel:"]{
color: #666666;
......@@ -206,20 +221,23 @@ $free_price = $_helper->currency(0, true, false);
}
.opc-block-summary .payment-option .form-discount .actions-toolbar .action{
background: #000000;
background: #dbb893;
height: 38px;
}
.opc-block-summary .payment-option .form-discount .actions-toolbar span:first-child{
display: inline-block;
padding: 0px 10px;
}
.actions-toolbar .secondary a.action.remind span{
font-size: 14px;
font-family: Outfit-Regular;
color: #000000;
}
.opc .checkout-shipping-address{
padding-bottom: 20px;
}
table.table-checkout-shipping-method{
border-collapse: separate;
border-spacing: 5px 10px;
background-color: #FFFFFF;
border-radius: 6px;
}
.opc-summary-wrapper .shipping-information{
display: none;
......@@ -228,18 +246,15 @@ $free_price = $_helper->currency(0, true, false);
margin-top: 4px;
}
.payment-method{
padding: 10px 20px;
margin-bottom: 20px;
border: 1px solid #dcdcdc;
padding: 10px 0px;
height: 60px;
}
.payment-method ._active{
border: 1px solid #1979c3;
}
.checkout-billing-address{
font-size: 14px;
color: #666666;
margin-bottom: 10px;
}
.checkout-billing-address .field-select-billing .control{
display:none!important;
}
.authentication-wrapper{
float: none;
......@@ -275,12 +290,8 @@ $free_price = $_helper->currency(0, true, false);
}
/****************************************payment begin********************************************************/
#checkout-step-shipping_method,.dispay-solid{
display:none;
}
#shipping-text{
.dispay-solid{
display:none;
padding: 20px 0 25px;
}
.confirmed-address{
width: 50%;
......@@ -329,23 +340,6 @@ $free_price = $_helper->currency(0, true, false);
height: 12px;
fill: #666;
}
.opc .step-title, .opc .field-select-billing .label{
background: #ffffff;
border-bottom: 1px solid #dddddd;
}
.checkout-index-index .authentication-wrapper{
background: #ffffff;
padding:20px;
margin-bottom: 18px;
top:0;
}
.checkout-index-index .opc {
background-color: #f2f2f2;
}
.checkout-index-index .opc li {
background-color: #ffffff;
margin-bottom:1rem;
}
.no-border{
border-bottom:none!important;
}
......@@ -386,9 +380,6 @@ $free_price = $_helper->currency(0, true, false);
gap: 0rem;
position: relative;
}
.checkout-index-index .block.items-in-cart{
display: none;
}
.checkout-index-index table tr,.checkout-index-index table tr .mark .title{
border:none;
}
......@@ -419,6 +410,7 @@ $free_price = $_helper->currency(0, true, false);
.checkout-index-index .opc-block-summary .payment-option {
order:-7;
border-top:1px solid #ddd;
}
.checkout-index-index .opc-block-summary .payment-option .payment-option-content {
padding: 1rem 0px;
......@@ -444,6 +436,7 @@ $free_price = $_helper->currency(0, true, false);
}
.checkout-index-index .opc-block-summary .payment-option._active .payment-option-title {
border-bottom: none;
display:none;
}
.checkout-cart-index .opc-estimated-wrapper .minicart-wrapper {
display: none;
......@@ -463,6 +456,12 @@ $free_price = $_helper->currency(0, true, false);
margin-left: 5px;
}
/***************payment start******************/
.checkout-index-index .authentication-wrapper{
background: #ffffff;
padding:20px;
margin-bottom: 18px;
top:0;
}
.confirmed-address{
width: 100%;
border-bottom: none;
......@@ -473,31 +472,27 @@ $free_price = $_helper->currency(0, true, false);
bottom:0;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAGCAYAAACclRsMAAABWklEQVR4nO3aMUrEQBiG4VfxAnoHwWZ7e1GsrAQ9gkIKDxPQI2hrJSvb29sIXsBKLyAoWbbLDCZuZvlD3qfaIgn59vsnTDFbHzfnP5TxBVxWs3re8em7wD1wUuh9SlnmBOb1azWJnD3uGXVWZ7dlKrM7+pzVrO56j7Mb26Rm129ui/uF+DY+uzuF/pJ34Kya1W8dr98HHoGDQu9TyjInYM62UWd1dlvMGdvk1qidtvjNjc25zXN2e9geMsHKAjjsUdoR8DLCwsyZZ6exmTPNNRqfnaaZMzZz5tlpT0Nv3O+AU+Cz4/VXwBOwN/B7lGbOPDuNzZxprtH47DTNnLGZM89O/2Gojfs30BzYul79/ktzRKc5hHlb8LhOCebMs9PYzJnmGo3PTtPMGZs58+x0DUM8qDmYfwE8d7y+OZj/ABwPFWJDzJlnp7GZM801Gp+dppkzNnPm2ek6gF8O5wurSKfLHQAAAABJRU5ErkJggg==) repeat-x;
}
.checkout-index-index .opc-estimated-wrapper,.checkout-index-index .page-wrapper .page-header{background: #ffffff;}
.checkout-index-index .page-wrapper .page-header{
border-bottom:1px solid #ddd;
}
.checkout-index-index .opc>li{
padding: 5px !important;
padding: 0;
}
.checkout-index-index .opc .step-title, .checkout-index-index .opc .field-select-billing .label {
padding-left: 5px;
}
.checkout-index-index .opc .step-title {
padding: 1rem 0px;
}
.checkout-index-index #checkout-payment-method-load,.checkout-index-index #checkout-step-shipping
{
padding:1rem 0 0.5rem;
}
.checkout-index-index #checkout-step-shipping_method
{
padding-top:1rem;
padding:1rem 0px;
}
.checkout-index-index #opc-sidebar{
border:none;
margin-bottom: 0px;
font-size: 16px !important
font-size: 14px !important
}
.checkout-index-index .opc .actions-toolbar.action-update-cancel {
position: relative;
......@@ -514,9 +509,7 @@ $free_price = $_helper->currency(0, true, false);
.checkout-index-index .page-wrapper a.logo{
margin-left: 0px!important;
}
.checkout-index-index div#checkout {
margin-top: 1rem;
}
.checkout-index-index .authentication-wrapper{
padding: 5px 20px;
border-bottom: 1px solid #ddd;
......@@ -537,25 +530,28 @@ $free_price = $_helper->currency(0, true, false);
}
.checkout-index-index .block.items-in-cart{
border-bottom: 1px solid #ddd;
background-color: #fff;
margin-bottom: 1rem;
padding: 0.35rem 0rem;
border-top: 1px solid #ddd;
background-color: #FFFFFF;
display: block;
}
.checkout-index-index .block.items-in-cart .title{
padding-left:1rem;
background-color: #EBE5E1;
line-height: 2rem;
}
.checkout-index-index .block.items-in-cart .title strong{
width:100%;
font-size:14px;
font-weight: 400;
}
.checkout-index-index .block.items-in-cart .title strong .estimated-label{
width: 50%;
color:#276EAF;
}
.checkout-index-index .block.items-in-cart .title strong .estimated-label,.checkout-index-index .block.items-in-cart .title strong .estimated-price{
width: 42%;
display: inline-block;
}
.checkout-index-index .block.items-in-cart .title strong .estimated-price{
width: 45%;
display: inline-block;
text-align: right;
}
.checkout-index-index #opc-sidebar .table-totals .totals.discount .amount .price{
......@@ -573,38 +569,84 @@ $free_price = $_helper->currency(0, true, false);
.checkout-index-index .opc .actions-toolbar {
display:none!important;
}
.opc .step-title{
font-size: 25px;
padding: 0;
line-height: 1;
margin: 0;
font-weight:normal;
.opc .step-title,.contact-title{
font-size: 18px;
font-weight: 400;
line-height: 21px;
margin: 0.5rem 0px;
word-break: break-word;
color: #2c2c2c;
font-family: Helvetica Neue, Arial,sans-serif;
padding:0;
}
.actions-toolbar .font-action{
vertical-align: super;
}
@media(min-width:768px){
.authentication-wrapper .login-q-reg {
font-size: 16px;
color: #515151;
font-weight: 700;
.checkout-index-index #next-shipping > span{
font-size: 16px;
background: #dbb893;
color: rgb(44, 44, 44);
height: auto;
min-height: 40px;
padding: 10px 30px;
text-transform: none;
border-radius: 4px;
line-height: 40px;
}
.checkout-index-index #next-shipping{
position: relative;
min-height: 60px;
font-family: Helvetica Neue, Arial,sans-serif;
font-size: 14px;
}
.checkout-index-index .handle-btn{
position: absolute;
left:0;
top:30%;
color:#276EAF;
cursor: pointer;
background: none;
}
.checkout-index-index .handle-btn .svg-left{
display: inline-block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
@media(min-width:768px){
.opc {
background: none;
}
.action.action-auth-toggle {
text-transform: capitalize;
margin-left: 15px;
}
.opc>li{
padding: 20px !important;
padding:0;
}
.opc .checkout-shipping-address{
margin-top: 2rem;
}
#checkout .payment-left{
width:66%;
float:left;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-flex: 0;
display: flex;
flex: 0 0 58%;
flex-direction: column;
padding-right: 6%;
}
#checkout .payment-right{
width:31%;
float:right;
-webkit-box-flex: 0;
background-position: 0px 0px;
flex: 0 0 42%;
padding-left: 4%;
padding-top: 56px;
overflow: hidden;
z-index:1;
}
#checkout .opc-wrapper {
float: none;
......@@ -642,32 +684,95 @@ $free_price = $_helper->currency(0, true, false);
.checkout-index-index .payment-method._active .actions-toolbar .action span:last-child{
vertical-align: super;
}
.checkout-index-index .save-continue{
position: absolute;
right:0;
bottom:0;
}
.checkout-index-index #next-shipping > span:hover::before {
background: rgb(0, 0, 0);
border-radius: 4px;
content: "";
height: 100%;
left: 0px;
opacity: 0.2;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
}
}
@media (min-width: 1024px) {
main#maincontent {
width: 100% !important;
}
.checkout-container{
width: 65%;
margin: 0 auto;
/*background: #ffffff;
padding: 20px;*/
}
li#opc-shipping_method {
margin-top: 10px;
}
.payment-method-title.field.choice label.label span {
width: 40%;
float: right;
font-size: 18px;
font-size: 14px;
}
.payment-method-title.field.choice label.label {
width: 100%;
}
.content.content_wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.right-fill{
width: -webkit-calc(50% - 88px);
width: -moz-calc(50% - 88px);
width: calc(50% - 88px);
}
.trade_wrapper {
max-width: 1100px;
-webkit-box-flex: 1;
flex-grow: 1;
}
}
table tbody:last-child tr:last-child {
border-bottom: 1px solid #dcdcdc !important;
.checkout-container{
margin: 0 auto;
width:100%;
background: #EEE7E3;
min-height: 100vh;
}
.trade_checkout .content {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
font-size: 14px;
line-height: 1.4;
}
.right-fill{
background: #FAFAFA;
background-image: url();
border-left: 1px solid rgba(44, 44, 44, 0.04);
height: 100%;
position: fixed;
right: 0;
top: 0;
z-index: 0;
}
.trade_wrapper{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
zoom: 1;
display: flex;
flex-direction: row;
margin: 0px auto;
}
.teliphone_number{width:100% !important;}
#checkout_security_guarantee span{
......@@ -692,15 +797,83 @@ $free_price = $_helper->currency(0, true, false);
padding: 10px 0px;
transition: all .3s;
}
.checkout-index-index .trade_checkout__exp__title{
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
font-size: 14px;
font-weight: 400;
-webkit-justify-content: center;
justify-content: center;
margin: 0;
text-align: center;
width: 100%;
}
.checkout-index-index .trade_checkout__exp__line{
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
align-items: center;
color: #2c2c2c;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.trade-checkout-whole-footer__baseline,
.trade_checkout__exp__line .lineLeft,
.trade_checkout__exp__line .lineRight,
.trade_checkout__exp__title:after,
.trade_checkout__exp__title:before {
background: rgba(44, 44, 44, 0.15);
}
.trade_checkout__exp__title:before {
margin-right: 12px;
}
.trade_checkout__exp__title:after, .trade_checkout__exp__title:before {
-webkit-box-flex: 1;
-moz-box-flex: 1;
content: "";
-webkit-flex: 1 0 16px;
flex: 1 0 16px;
height: 1px;
min-width: 24px;
}
.trade_checkout__exp__line .lineLeft, .trade_checkout__exp__line .lineRight {
-webkit-box-flex: 1;
-moz-box-flex: 1;
display: inline-block;
-webkit-flex: 1 1 1%;
flex: 1 1 1%;
height: 1px;
min-width: 24px;
}
.checkout-index-index .checkout-logo-medium{
border-radius: 5px;
margin:5px 0px 10px;
}
.checkout-index-index .checkout-logo-medium a{
width:100%;
display: inline-block;
text-align: center;
}
@media(min-width: 1024px){
.opc .actions-toolbar{
position: absolute;
bottom: 0px;
margin-left: 30%;
}
div#checkout-payment-method-load{
margin-bottom: 100px;
}
.payment-method div.payment_logo_oceanpaymentklarna{
margin-top: -1% !important;
}
......@@ -816,8 +989,8 @@ $free_price = $_helper->currency(0, true, false);
.payment-method-title label.label {
width: 100%;
}
table tbody:last-child tr:last-child {
border-bottom: 1px solid #dcdcdc !important;
.checkout-index-index .opc-block-summary .payment-option {
border-top: none;
}
}
/************************************* top logo style start******************************************************/
......@@ -887,29 +1060,53 @@ $free_price = $_helper->currency(0, true, false);
.checkout-index-index .page-header .header.content .logo{
left:35%;
}
.checkout-index-index .form-shipping-address{
margin-top:2rem;
#opc-sidebar{
background: none;
}
.checkout-index-index .label-title{
position:relative;
margin:0.5rem 0px;
}
.checkout-index-index .contact-title{
line-height: 30px;
}
.checkout-index-index .authentication-wrapper{
position:absolute;
top:0;
right:0;
}
.checkout-index-index .login-q-reg{
font-size: 14px;
font-weight: 400;
color: #5d5b5a;
font-family: Helvetica Neue, Arial,sans-serif;
}
.checkout-index-index .authentication-wrapper .action.action-auth-toggle{
color:#0000ff!important;
}
}
.checkout-index-index #shipping .field.street {
.checkout-index-index #shipping .field.street,.checkout-index-index .billing-address-form .field.street {
min-height:7rem;
}
.checkout-index-index #shipping .field.street .field.additional .control input[type="text"] {
.checkout-index-index #shipping .field.street .field.additional .control input[type="text"],
.checkout-index-index .billing-address-form .field.street .field.additional .control input[type="text"]
{
padding:0;
}
.checkout-index-index #shipping .field.street .control{
.checkout-index-index #shipping .field.street .control,.checkout-index-index .billing-address-form .field.street .control{
border:none;
}
.checkout-index-index #shipping .field.street .control .field .control{
border: 1px solid #ddd;
}
.checkout-index-index #shipping .field.field-select-billing .control{
.checkout-index-index #shipping .field.field-select-billing .control，.checkout-index-index .billing-address-form .field.field-select-billing .control{
border:none;
}
.checkout-index-index .opc .field-select-billing .label{
border-bottom: none;
}
.checkout-index-index .select-style{
height:3rem;
z-index:2;
......@@ -922,10 +1119,6 @@ $free_price = $_helper->currency(0, true, false);
.checkout-index-index .select-input{
cursor: pointer;
}
.fieldset.address .check-select{
z-index:2;
display:none;
}
.checkout-index-index #customer-password{
height: 50px;
outline: none;
......@@ -933,16 +1126,15 @@ $free_price = $_helper->currency(0, true, false);
padding: 18px 0 0;
border: none;
color: #515151;
background: 0 0;
}
/************************************* top logo style end******************************************************/
/********************************************address from end****************************************************/
#shipping .field{
#shipping .field,.billing-address-form .field{
position: relative;
}
#shipping .field .label{
#shipping .field .label,.billing-address-form .field .label{
position: absolute;
z-index: 1;
top:15px;
......@@ -951,9 +1143,9 @@ $free_price = $_helper->currency(0, true, false);
margin-left:0.5rem;
}
#shipping .field .control {
height:50px;
border:1px solid #ddd;
#shipping .field .control,.billing-address-form .field .control{
height:48px;
background-color: #FFFFFF;
}
#shipping .field.required .label::before, #shipping .field._required .label::before {
content: '*';
......@@ -966,17 +1158,334 @@ $free_price = $_helper->currency(0, true, false);
/*position: static;*/
vertical-align: middle;
}
#shipping .field .control input[type="text"],#maincontent input[type="email"] {
height: 50px;
#shipping .field .control input[type="text"],#maincontent input[type="email"],.billing-address-form .field .control input[type="text"] {
height: 46px;
outline: none;
text-indent: 10px;
padding: 18px 0 0;
border: none;
color: #515151;
background: 0 0;
color: #2C2C2C;
background-color:#FFFFFF;
font-size: 14px;
}
.checkout-index-index #customer-email-fieldset .field{
position: relative;
}
.checkout-index-index #customer-email-fieldset .field .label{
position: absolute;
z-index: 1;
top:15px;
line-height: 18px;
transition: all .3s ease;
margin-left:0.5rem;
}
.checkout-index-index .pc_logo {
display: block;
}
.logo_container.align-center, .logo_container.align-right {
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
#shipping .fouse-label{
.logo_container.align-center {
margin-bottom: 24px;
}
.can_click {
cursor: pointer;
}
.logo_container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
font-size: 1rem;
margin: 56px 0 24px;
}
.logo_container .logo_inner {
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
align-items: center;
cursor: default;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
position: relative;
}
.logo_container .logo_inner.size-medium img {
height: 40px;
}
.logo_container .logo_inner img {
max-width: 100%;
object-fit: contain;
}
.trade_checkout .main .trade-checkout-btn {
max-width: 100%;
width: auto;
}
.trade_checkout_breadcrumb .trade_checkout_step_done {
color: rgb(39, 110, 175);
cursor: pointer;
font-weight: 400;
transition: color 0.2s ease-in-out 0s;
}
.trade_checkout_breadcrumb .trade_checkout_breadcrumb_button {
appearance: none;
background-color: transparent;
border: 0px;
padding: 0px;
}
[type="reset"], [type="submit"], button, html [type="button"] {
appearance: button;
}
.custom-link-color {
color: #276EAF;
transition: color 0.2s ease-in-out 0s;
opacity: 1 !important;
opacity: 1!important;
-webkit-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.trade_checkout_breadcrumb .trade_checkout_breadcrumb_button .trade_checkout_steps_stepItem {
-webkit-box-align: center;
align-items: center;
display: flex;
line-height: 18px;
}
.trade_checkout_breadcrumb .trade_checkout_breadcrumb_button .trade_checkout_steps_stepItem span {
-webkit-box-flex: 1;
flex: 1 1 0%;
text-align: left;
word-break: break-word;
}
.trade_checkout_breadcrumb .trade_checkout_step_waiting {
font-weight: 400;
opacity: 0.6;
color: rgb(93, 91, 90);
}
.trade_checkout__exp__line .lineText {
font-size: 12px;
padding: 0px 20px;
text-align: center;
word-break: break-word;
}
.checkout_policy_description {
margin-bottom: 24px;
background: none;
}
.checkout_policy_description ul {
list-style-type: none;
overflow: hidden;
}
.checkout_policy_description ul li {
cursor: pointer;
float: left;
font-size: 12px;
margin-bottom: 12px;
margin-right: 16px;
}
.trade-checkout-whole-footer__baseline {
height: 1px;
width: 100%;
}
.sl_section--small {
margin-bottom: 20px;
}
.trade_info-preview {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 0 16px;
border: 1px solid rgba(44, 44, 44, 0.15);
background: #fff;
color: #2c2c2c;
}
.confirmed-address{
width:100%;
padding: 20px 22px;
border: 1px solid #d6d6d6;
font-size: 14px;
/*min-height: 200px;*/
position: relative;
box-sizing: border-box;
}
.confirmed-address:before {
width: 0;
content: "";
}
.mian-text-line {
border-bottom: 1px solid rgba(44, 44, 44, 0.08);
}
.trade_info-preview-item {
-webkit-box-pack: justify;
-moz-box-pack: justify;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
padding: 12px 0;
}
.trade_info-preview-item_content {
-webkit-box-flex: 1;
-moz-box-flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-flex: 1;
flex: 1;
}
.trade_info-preview-item_label {
margin-right: 16px;
width: 80px;
}
.trade_info-preview-item_label, .trade_info-preview-item_text {
font-size: 14px;
word-break: break-word;
}
.trade_info-preview-item_button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 0;
cursor: pointer;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
font-size: 12px;
font-weight: 400;
line-height: 20px;
margin-left: 16px;
max-width: 100px;
outline: none;
padding: 0;
text-align: left;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
word-break: break-word;
justify-content: normal;
align-items: normal;
}
.trade_info-preview-item_button {
max-width: 120px;
}
.joshine-section{
margin-bottom: 20px;
}
.block-select-subtitle {
font-size: 14px;
font-weight: 400;
word-break: break-word;
color:#5D5B5A;
}
#checkoutSteps{
display: grid;
}
.trade_info-preview-item_text .price{
font-weight: 600;
margin-left: 10px;
}
.email-note{
display: inline-block;
margin-top:10px;
}
#customer-email-fieldset .field.required > .label::after,
.field._required > .label::after {
content: '';
}
#customer-email-fieldset .field.required > .label::before,
.field._required > .label::before {
content: '*';
color: rgba(var(--danger-color), var(--danger-alpha, 1));
}
.checkout-index-index .fieldset.address select{
position:absolute;
bottom: 0;
padding: 3px 2.5rem 3px 12px;
border: none
}
select:-internal-autofill-previewed,
select:-internal-autofill-selected {
transition: background-color 5000s ease-out 0.5s;
}
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
transition: background-color 5000s ease-out 0.5s;
}
.checkout-index-index .select{
height:28px;
}
.checkout-index-index .minicart-items-wrapper > .minicart-items {
max-height: 38rem;
padding-top:10px;
}
.checkout-index-index .minicart-items .product-image-container {
position: relative;
}
.checkout-index-index .minicart-items .details-qty {
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
position: absolute;
top: -10px;
right: -10px;
color: #FFFFFF;
background-color: #747474;
font-size: 12px;
}
.opc-block-summary{
padding:0;
}
.minicart-items li.product-item + li{
padding-top: 0;
border:none;
}
.checkout-index-index .minicart-items li.product-item > div.product{
height:auto;
}
.minicart-items .product-item-name-block{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow:hidden;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
}
.fouse-label{
top:5px!important;
font-size: 14px;
transform: scale(0.8);
}
.pleaseWait{
transition: all .3s ease;
......@@ -987,22 +1496,185 @@ $free_price = $_helper->currency(0, true, false);
padding: 0!important;
}
.checkout-index-index .table-totals td, .checkout-index-index .table-totals th {
padding: 0.1rem 0.5rem;
padding: 0.3rem 0.5rem;
}
.checkout-index-index .table-totals tr:nth-last-child(2) td,.checkout-index-index .table-totals tr:nth-last-child(2) th{
padding-bottom: 1rem;
}
.checkout-index-index .table-totals .totals td{
text-align: right;
}
.checkout-index-index .table-totals .grand.totals td.mark{
text-align: left;
}
.checkout-index-index .table-totals .grand.totals td{
padding:0.45rem;
padding:1rem 0.45rem 0.45rem;
}
.checkout-cart-index table .grand.totals strong, .checkout-index-index table .grand.totals strong{
font-weight: normal;
}
.checkout-index-index .table-totals .subtotal.totals td,.checkout-index-index .table-totals .subtotal.totals th{
padding-top:0.8rem;
}
.trade_checkout_steps_stepItem svg {
height: 16px;
margin: 0px 2px;
width: 16px;
}
@media(max-width:768px){
.trade_wrapper{
display: grid;
}
.checkout-index-index div#checkout{
margin-top: 0;
}
.right-fill{
display:none;
}
.logo_container {
-webkit-box-pack: center;
justify-content: center;
margin: 24px auto;
max-width: 568px;
cursor: pointer;
display: flex;
font-size: 1rem;
}
.logo_container .logo_inner.size-medium img{
width:120px;
}
.checkout-index-index .minicart-items-wrapper > .minicart-items{
overflow: visible;
}
.minicart-items li.product-item > div.product > :nth-child(2){
max-width: 60%;
}
#trade-checkout-smartpay,.email-box.address-one,.opc-wrapper,.copyright_block,.minicart-items,.opc-block-summary{
padding:0px 16px;
}
.checkout-index-index .checkout-logo-medium {
height: 55px;
}
.joshine-section {
margin-bottom: 5px;
margin-top: 20px;
}
.authentication-wrapper{
font-size: 14px;
}
.checkout-index-index .authentication-wrapper{
padding:0!important;
border:none;
background: none;
margin: 5px 0px 10px;
}
.action.action-auth-toggle {
line-height: 16px;
padding:0;
text-transform: none;
color:#276EAF;
font-size: 14px;
text-decoration:none;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.email-note{
margin-top:5px;
}
#checkoutSteps{
background: none;
}
.fieldset.address > .field {
width: 100%;
}
.field ._with-tooltip .field-tooltip{
top:30%;
}
.checkout-index-index #next-shipping {
display: grid;
margin:0 auto;
}
.checkout-index-index #next-shipping > span{
min-height: 68px;;
order:1;
margin-top:0px;
}
.checkout-index-index #next-shipping > span > span{
vertical-align: sub;
}
.checkout-index-index .handle-btn {
position: static;
order:2;
}
.checkout_policy_description {
margin:0 auto;
padding:0;
}
.sl_section--small {
margin-bottom: 10px;
padding:0px 16px;
}
.checkout-index-index .opc>li {
margin-top: 5px;
}
.opc .step-title{
margin:10px 0px 0px;
}
.trade_info-preview-item_content{
display: block;
width:100%;
}
.checkout-billing-address {
margin-top: 10px;
margin-bottom: 15px;
}
.opc-block-summary{
display:none;
}
.checkout-index-index .table-totals .grand.totals td{
padding:1rem 0.45rem 1rem;
}
.checkout-index-index table .grand.totals strong {
font-weight: 400;
font-size: 18px;
}
.checkout-index-index table .grand.totals,.checkout-index-index .opc-block-summary .payment-option{
border-top:1px solid #ddd;
}
#opc-sidebar {
box-shadow: none;
}
.checkout-index-index .bottom-border {
border-bottom: 1px solid #ddd;
}
}
#login-email{
border: 1px solid #ddd!important;
height: 40px!important;
padding: 5px!important;
}
.checkout-logo-medium input {
height: 40px;
}
.group-item-body{
padding: 16px;
border-top: 1px solid rgba(44, 44, 44, 0.08);
font-size: 14px;
padding-top: 30px;
text-align: center;
color: #969696;
}
/********************************************address from end****************************************************/
</style>
<div id="checkout" data-bind="scope:'checkout'" class="checkout-container">
<div id="checkout-loader" data-role="checkout-loader" class="loading-mask" data-mage-init='{"checkoutLoader": {}}'>
<div class="loader">
<img src="<?= $block->escapeUrl($block->getViewFileUrl('images/loader-1.gif')) ?>"
alt="<?= $block->escapeHtmlAttr(__('Loading...')) ?>">
</div>
</div>
<?= /* @noEscape */ $secureRenderer->renderStyleAsTag("position: absolute;", "#checkout-loader img") ?>
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
......@@ -1017,6 +1689,11 @@ $free_price = $_helper->currency(0, true, false);
window.checkoutConfig.flatrate_price = '{$flatraPrice}';
window.checkoutConfig.full_free_ship = '{$full_free_ship}';
window.checkoutConfig.free_price = '{$free_price}';
window.checkoutConfig.addressVisible = true;
window.checkoutConfig.shippingVisible = false;
window.checkoutConfig.paymentVisible = false;
window.checkoutConfig.logosrc = '{$logoUrl}';
window.checkoutConfig.isMobile = '{$isMobile}';
// Create aliases for customer.js model from customer module
window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;
window.customerData = window.checkoutConfig.customerData;
......@@ -1025,10 +1702,8 @@ script;
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
<?php $scriptString = <<<script
require([
'mage/url',
'Magento_Ui/js/block-loader'
], function(url, blockLoader) {
blockLoader("{$block->escapeJs($block->escapeUrl($block->getViewFileUrl('images/loader-1.gif')))}");
'mage/url'
], function(url) {
return url.setBaseUrl('{$block->escapeJs($block->escapeUrl($block->getBaseUrl()))}');
})
script;
......@@ -1038,6 +1713,7 @@ script;
<script>
require(['jquery'], function ($) {
var isMobile = window.matchMedia("(pointer:coarse)").matches;
/*
if (!isMobile) {
$(window).scroll(function () {
var scrollTop = $(document).scrollTop(),
......@@ -1072,7 +1748,12 @@ script;
});
}
$(document).on('focus', '#shipping input[type="email"],#shipping input[type="password"],#shipping input[type="text"]', function () {
*/
$(document).on('focus', '#customer-email-fieldset input[type="email"],' +
'#customer-email-fieldset input[type="password"],' +
'#shipping input[type="password"],' +
'#shipping input[type="text"],'+
'.checkout-billing-address input[type="text"]', function () {
if($(this).hasClass('select-input'))
{
return false;
......@@ -1082,7 +1763,11 @@ script;
}
});
$(document).on('blur', '#shipping input[type="email"],#shipping input[type="password"],#shipping input[type="text"]', function () {
$(document).on('blur', '#customer-email-fieldset input[type="email"],' +
'#customer-email-fieldset input[type="password"],' +
'#shipping input[type="password"],' +
'#shipping input[type="text"],' +
'.checkout-billing-address input[type="text"]', function () {
if($(this).hasClass('select-input'))
{
return false;
......@@ -1097,17 +1782,20 @@ script;
var thisVal = $(this).val();
if(thisVal === '' || thisVal == null || thisVal.length === 0 || /^\s+$/.test(thisVal))
{
$(this).addClass('error-border-style')
$(this).parent().addClass('error-border-style')
}
else if($(this).hasClass('error-border-style'))
else if($(this).parent().hasClass('error-border-style'))
{
$(this).removeClass('error-border-style')
$(this).parent().removeClass('error-border-style')
}
}
});
$(document).on('focus', '#shipping .field.street ._required input[type="text"]', function () {
$(document).on('focus',
'#shipping .field.street ._required input[type="text"],' +
'.checkout-billing-address .field.street ._required input[type="text"]',
function () {
if(!$(this).parent().parent().parent().prev('.label').hasClass('fouse-label')){
$(this).parent().parent().parent().prev('.label').addClass('fouse-label')
......@@ -1116,67 +1804,41 @@ script;
});
$(document).on('blur', '#shipping .field.street ._required input[type="text"]', function () {
$(document).on('blur',
'#shipping .field.street ._required input[type="text"],' +
'.checkout-billing-address .field.street ._required input[type="text"]',
function () {
if($(this).parent().parent().parent().prev('.label').hasClass('fouse-label')){
var thisVal = $(this).val();
if(thisVal === '' || thisVal == null || thisVal.length === 0 || /^\s+$/.test(thisVal))
{
$(this).addClass('error-border-style');
$(this).parent().addClass('error-border-style');
$(this).parent().parent().parent().prev('.label').removeClass('fouse-label')
}
else if($(this).hasClass('error-border-style'))
else if($(this).parent().hasClass('error-border-style'))
{
$(this).removeClass('error-border-style')
$(this).parent().removeClass('error-border-style')
}
}
});
//select-input
$(document).on('click', '#shipping .select-input', function () {
if($(this).next('.select').is(':visible'))
$(document).on('change', '#shipping .check-select,.checkout-billing-address .check-select', function () {
if($(this).val() != '')
{
$(this).next('.select').hide();
$(this).next('.select').removeClass('select-style')
if($(this).val() == '')
if($(this).val() == '-')
{
if($(this).parent().prev('.label').hasClass('fouse-label')){
$(this).parent().prev('.label').removeClass('fouse-label');
$(this).parent().addClass('error-border-style');
}else {
$(this).hide();
$(this).removeClass('select-style');
if($(this).parent().hasClass('error-border-style')){
$(this).parent().removeClass('error-border-style');
}
}
}
else
{
$(this).next('.select').show();
$(this).next('.select').addClass('select-style');
if($(this).val() == '')
{
$(this).parent().prev('.label').addClass('fouse-label');
}
$(this).parent().addClass('error-border-style');
}
});
//check-select
$(document).on('click', '#shipping .check-select', function () {
$(document).on('change', '#shipping .check-select', function () {
if($(this).val() != '')
{
if($(this).val() == '-')
{
$(this).prev('input').addClass('error-border-style');
}else {
$(this).hide();
$(this).removeClass('select-style');
if($(this).prev('input').hasClass('error-border-style')){
$(this).prev('input').removeClass('error-border-style');
}
}
}
else
{
$(this).prev('input').addClass('error-border-style');
}
});
});
......
app/design/frontend/Joshine/breeze/Magento_Checkout/templates/shipping.html
......@@ -7,10 +7,12 @@
<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
<!--<div class="step-title" translate="'Shipping Address'" data-role="title" />-->
<p class="step-title">
<!--
<span class="number">
<span translate="'1'" />
</span>
<span translate="'Delivery Details'" />
-->
<span translate="'Shipping address'" />
</p>
<div id="checkout-step-shipping"
class="step-content"
......
app/design/frontend/Joshine/breeze/Magento_Checkout/web/template/authentication.html
......@@ -12,12 +12,12 @@
}
</style>
<div class="authentication-wrapper" data-block="authentication" data-bind="visible: isActive()">
<span class="login-q-reg" data-bind="i18n: 'Already Registered?'"></span>
<span class="login-q-reg" data-bind="i18n: 'Already have an account?'"></span>
<button
type="button"
class="action action-auth-toggle"
data-trigger="authentication">
<span data-bind="i18n: 'Sign In'"></span>
<span data-bind="i18n: 'Log In'"></span>
</button>
<div class="block-authentication"
style="display: none"
......
app/design/frontend/Joshine/breeze/Magento_Checkout/web/template/form/element/email.html
......@@ -9,62 +9,73 @@
<!-- ko foreach: getRegion('before-login-form') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<form class="form form-login" data-role="email-with-possible-login"
data-bind="submit:login"
method="post">
<fieldset id="customer-email-fieldset" class="fieldset" data-bind="blockLoader: isLoading">
<div class="field required">
<label class="label" for="customer-email" data-bind="css:{'fouse-label': email}">
<span data-bind="i18n: 'Email Address'"></span>
<!-- ko template: 'ui/form/element/helper/tooltip' --><!-- /ko -->
</label>
<div class="control _with-tooltip">
<input class="input-text"
type="email"
data-bind="
textInput: email,
hasFocus: emailFocused,
afterRender: emailHasChanged,
mageInit: {'mage/trim-input':{}},
css:{'virtual-email': quoteIsVirtual}"
name="username"
data-validate="{required:true, 'validate-email':true}"
id="customer-email" />
<div class="email-box address-one" data-bind="fadeVisible:visible">
<div class="label-title">
<span data-bind="i18n: 'Contact information'" class="contact-title"></span>
<!-- ko foreach: getRegion('authentication') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<span class="note" data-bind="fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'You can create an account after checkout.'--><!-- /ko --></span>
</div>
</div>
</div>
<form class="form form-login" data-role="email-with-possible-login"
data-bind="submit:login"
method="post">
<fieldset id="customer-email-fieldset" class="fieldset" data-bind="blockLoader: isLoading">
<div class="field required">
<label class="label" for="customer-email" data-bind="css:{'fouse-label': email}">
<span data-bind="i18n: 'Email Address'"></span>
</label>
<!--Hidden fields -->
<fieldset class="fieldset hidden-fields" data-bind="fadeVisible: isPasswordVisible">
<div class="field">
<label class="label" for="customer-password"><span data-bind="i18n: 'Password'"></span></label>
<div class="control">
<div class="control _with-tooltip">
<input class="input-text"
type="password"
name="password"
id="customer-password"
data-validate="{required:true}" autocomplete="off"/>
<span class="note" data-bind="i18n: 'You already have an account with us. Sign in or continue as guest.'"></span>
</div>
type="email"
data-bind="
textInput: email,
hasFocus: emailFocused,
afterRender: emailHasChanged,
mageInit: {'mage/trim-input':{}},
css:{'virtual-email': quoteIsVirtual}"
name="username"
data-validate="{required:true, 'validate-email':true}"
id="customer-emails" />
</div>
<span class="note email-note" data-bind="fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'You can create an account after checkout.'--><!-- /ko --></span>
</div>
<!-- ko foreach: getRegion('additional-login-form-fields') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<div class="actions-toolbar">
<input name="context" type="hidden" value="checkout" />
<div class="primary">
<button type="submit" class="action login primary" data-action="checkout-method-login"><span data-bind="i18n: 'Login'"></span></button>
<!--Hidden fields -->
<fieldset class="fieldset hidden-fields" data-bind="fadeVisible: isPasswordVisible">
<div class="field">
<label class="label" for="customer-password"><span data-bind="i18n: 'Password'"></span></label>
<div class="control">
<input class="input-text"
type="password"
name="password"
id="customer-password"
data-validate="{required:true}" autocomplete="off"/>
<span class="note" data-bind="i18n: 'You already have an account with us. Sign in or continue as guest.'"></span>
</div>
</div>
<div class="secondary">
<a class="action remind" data-bind="attr: { href: forgotPasswordUrl }">
<span data-bind="i18n: 'Forgot Your Password?'"></span>
</a>
<!-- ko foreach: getRegion('additional-login-form-fields') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<div class="actions-toolbar">
<input name="context" type="hidden" value="checkout" />
<div class="primary">
<button type="submit" class="action login primary" data-action="checkout-method-login"><span data-bind="i18n: 'Login'"></span></button>
</div>
<div class="secondary">
<a class="action remind" data-bind="attr: { href: forgotPasswordUrl }">
<span data-bind="i18n: 'Forgot Your Password?'"></span>
</a>
</div>
</div>
</div>
</fieldset>
<!--Hidden fields -->
</fieldset>
<!--Hidden fields -->
</fieldset>
</form>
</form>
</div>
<!-- /ko -->
\ No newline at end of file
app/design/frontend/Joshine/breeze/Magento_Checkout/web/template/onepage.html
......@@ -4,46 +4,50 @@
* See COPYING.txt for license details.
*/
-->
<div class="right-fill"></div>
<div class="content content_wrapper">
<div class="trade_wrapper">
<div class="payment-left">
<!-- ko foreach: getRegion('progressBar') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<div class="payment-left">
<!-- ko foreach: getRegion('progressBar') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!-- ko foreach: getRegion('authentication') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!-- ko foreach: getRegion('estimation') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<div class="opc-wrapper">
<ol class="opc" id="checkoutSteps">
<!-- ko foreach: getRegion('steps') -->
<!-- ko foreach: getRegion('logo-nav') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</ol>
</div>
</div>
<div class="payment-right">
<div class="slip-div">
<!-- ko foreach: getRegion('sidebar') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!-- ko foreach: getRegion('placeOrder') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!-- ko foreach: getRegion('security') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!-- ko foreach: getRegion('paypal') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!-- ko foreach: getRegion('customer-email') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<div class="opc-wrapper">
<ol class="opc" id="checkoutSteps">
<!-- ko foreach: getRegion('steps') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</ol>
</div>
<!-- ko foreach: getRegion('checkout-footer') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<div class="payment-right">
<!-- ko ifnot: isMobile() -->
<!-- ko foreach: getRegion('sidebar') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!--/ko-->
</div>
</div>
</div>
app/design/frontend/Joshine/breeze/Magento_Checkout/web/template/shipping.html
......@@ -13,16 +13,18 @@
vertical-align: revert;
}
</style>
<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
<li id="shipping" class="checkout-shipping-address address-one" data-bind="fadeVisible: addressVisible" style="order:1;">
<!--<div class="step-title" translate="'Shipping Address'" data-role="title" />-->
<p class="step-title">
<!--
<span class="number">
<span translate="'1'" />
</span>
<span translate="'Delivery Details'" />
-->
<span translate="'Shipping address'" />
</p>
<div id="checkout-step-shipping"
class="step-content"
class="step-content address-one"
data-role="content" style="margin-bottom: 1rem;">
<each if="!quoteIsVirtual" args="getRegion('customer-email')" render="" />
......@@ -51,52 +53,82 @@
</div>
<div id="shipping-text">
<div class="confirmed-address">
<div class="main-address shipping-address">
</li>
<li style="order:2;" data-bind="fadeVisible: !addressVisible" class="payment-content">
<div class="trade_info-preview form-primary-text trade_info-preact-dom sl_section--normal show-text">
<div id="email-text" data-bind="fadeVisible: shippingVisible" class="checkout-top-page">
<div class="trade_info-preview-item mian-text-line">
<div class="trade_info-preview-item_content">
<span class="left-title left-email trade_info-preview-item_label">
<!-- ko i18n: 'Contact'--><!-- /ko -->
</span>
<div class="main-text main-email trade_info-preview-item_text">
</div>
</div>
<button class="right-handle right-email trade_info-preview-item_button custom-link-color">
<span data-bind="i18n: 'Modify'"></span>
</button>
</div>
</div>
</div>
<div class="billing-address-form">
<each args="getRegion('after-shipping-method-form')" render="" />
</div>
<div id="next-shipping">
<span><!-- ko i18n: 'Save & Continue'--><!-- /ko --></span>
</div>
<div id="edit-shipping" style="display:none;">
<a href="javascript:;" id="editLink" style="color:#000;">
<span><!-- ko i18n: 'Edit'--><!-- /ko --></span>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
<path d="M19.769 9.923l-12.642 12.639-7.127 1.438 1.438-7.128 12.641-12.64 5.69 5.691zm1.414-1.414l2.817-2.82-5.691-5.689-2.816 2.817 5.69 5.692z"></path>
</svg>
</a>
</div>
<div id="shipping-text" data-bind="fadeVisible: shippingVisible" class="checkout-top-page">
<div class="trade_info-preview-item">
<div class="trade_info-preview-item_content">
<span class="left-title left-address trade_info-preview-item_label">
<!-- ko i18n: 'Ship to'--><!-- /ko -->
</span>
<div class="main-text main-address shipping-address trade_info-preview-item_text">
</div>
</div>
<button class="right-handle right-address trade_info-preview-item_button custom-link-color">
<span data-bind="i18n: 'Modify'"></span>
</button>
</div>
</li>
</div>
<div id="method-text" data-bind="fadeVisible: paymentVisible" class="checkout-top-page payment-three">
<div class="trade_info-preview-item">
<div class="trade_info-preview-item_content">
<span class="left-title left-method trade_info-preview-item_label">
<!-- ko i18n: 'Method'--><!-- /ko -->
</span>
<div class="main-text main-method trade_info-preview-item_text">
</div>
</div>
<button class="right-handle right-method trade_info-preview-item_button custom-link-color">
<span data-bind="i18n: 'Modify'"></span>
</button>
</div>
</div>
</div>
</li>
<!--Shipping method template-->
<li id="opc-shipping_method"
class="checkout-shipping-method"
data-bind="fadeVisible: visible(), blockLoader: isLoading"
role="presentation">
class="checkout-shipping-method shipping-two"
data-bind="fadeVisible: shippingVisible, blockLoader: isLoading"
role="presentation" style="order:3;">
<div class="checkout-shipping-method">
<!--<div class="step-title"
translate="'Shipping Methods'"
data-role="title" />-->
<p class="step-title no-border">
<span class="number">
<span translate="'2'" />
</span>
<!--
<span class="number">
<span translate="'2'" />
</span>
-->
<span translate="'Shipping Methods'" />
</p>
<each args="getRegion('before-shipping-method-form')" render="" />
<div id="checkout-step-shipping_method"
class="step-content"
class="step-content shipping-two"
data-role="content"
role="tabpanel"
aria-hidden="false">
aria-hidden="shippingVisible()">
<form id="co-shipping-method-form"
class="form methods-shipping"
if="rates().length"
......@@ -127,3 +159,38 @@
</div>
</div>
</li>
<li class="billing-address-li payment-three" data-bind="fadeVisible: paymentVisible" style="order:5;">
<div class="billing-address-form">
<each args="getRegion('after-shipping-method-form')" render="" />
</div>
</li>
<li class="handle-line" style="order:6;">
<div id="next-shipping">
<button class="handle-btn custom-link-color">
<span>
<span class="svg-left" >
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.003 8.483L4.52 5.436l-.988 1.128 4.465 3.907 4.512-3.904-.982-1.134-3.524 3.05z" fill="currentColor"></path>
</svg>
</span>
<span data-bind="click: backToCart,fadeVisible: addressVisible" class="address-one">
<!-- ko i18n: 'Return to cart'--><!-- /ko -->
</span>
<span data-bind="fadeVisible: shippingVisible" class="shipping-two back-to-information">
<!-- ko i18n: 'Return to Information'--><!-- /ko -->
</span>
<span data-bind="fadeVisible: paymentVisible" class="payment-three back-to-shipping">
<!-- ko i18n: 'Return to Shipping'--><!-- /ko -->
</span>
</span>
</button>
<span class="save-continue continue-shipping address-one" data-bind="fadeVisible: addressVisible"><!-- ko i18n: 'Continue to Shipping'--><!-- /ko --></span>
<span class="save-continue continue-payment shipping-two" data-bind="fadeVisible: shippingVisible"><!-- ko i18n: 'Continue to Payment'--><!-- /ko --></span>
<span class="save-continue complete-order payment-three " data-bind="fadeVisible: paymentVisible"><!-- ko i18n: 'Complete Order'--><!-- /ko --></span>
</div>
</li>
app/design/frontend/Joshine/breeze/Magento_Checkout/web/template/summary/cart-items.html
......@@ -4,14 +4,24 @@
* See COPYING.txt for license details.
*/
-->
<div class="block items-in-cart" data-bind="mageInit: {'collapsible':{'closeOnOuter':false,'openedState': 'false', 'active': false}}">
<div class="block items-in-cart bottom-border" data-bind="mageInit: {'collapsible':{'closeOnOuter':false,'openedState': 'false', 'active': !isMobile()}}">
<!-- ko if: isMobile() -->
<div class="title" data-role="title">
<strong role="heading" aria-level="1">
<span class="estimated-label" data-bind="i18n: 'Order Summary'"></span>
<strong role="heading" aria-level="1" class="mobile-control">
<span class="cart-icon" style="display: inline-block;color:#276EAF;margin-right: 12px;">
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0001 13C14.5524 13 15.0001 12.5523 15.0001 12C15.0001 11.4477 14.5524 11 14.0001 11H8.00015C7.44786 11 7.00015 11.4477 7.00015 12C7.00015 12.5523 7.44786 13 8.00015 13H14.0001Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50504 11.0996L1.50644 11.1128L2.00512 16.0995C2.05624 16.6107 2.4864 17 3.00015 17H19.0002C19.5139 17 19.9441 16.6107 19.9952 16.0995L20.9952 6.0995C21.0233 5.81838 20.9312 5.53848 20.7416 5.329C20.552 5.11951 20.2827 5 20.0002 5H2.90505L2.49511 0.900571C2.44016 0.351027 1.95011 -0.0499167 1.40057 0.00503759C0.851027 0.0599919 0.450083 0.550035 0.505038 1.09958L1.50504 11.0996ZM3.10514 7L3.90514 15H18.0952L18.8952 7H3.10514Z" fill="currentColor"></path>
<path d="M8.00015 19.5C8.00015 20.3284 7.32858 21 6.50015 21C5.67172 21 5.00015 20.3284 5.00015 19.5C5.00015 18.6716 5.67172 18 6.50015 18C7.32858 18 8.00015 18.6716 8.00015 19.5Z" fill="currentColor"></path>
<path d="M15.5001 21C16.3286 21 17.0001 20.3284 17.0001 19.5C17.0001 18.6716 16.3286 18 15.5001 18C14.6717 18 14.0001 18.6716 14.0001 19.5C14.0001 20.3284 14.6717 21 15.5001 21Z" fill="currentColor"></path>
</svg>
</span>
<span class="estimated-label" data-bind="i18n: 'Order summary'"></span>
<span class="estimated-price" data-bind="text: getGrandTotal()"></span>
</strong>
</div>
<div class="content minicart-items" data-role="content">
<!-- /ko -->
<div class="content minicart-items" data-role="content" aria-hidden="false">
<div class="minicart-items-wrapper">
<ol class="minicart-items">
<each args="items()">
......
app/design/frontend/Joshine/breeze/Magento_Checkout/web/template/summary/item/details.html
......@@ -6,41 +6,36 @@
-->
<!-- ko foreach: getRegion('before_details') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<div class="product-item-details">
<div class="product-item-inner">
<div class="product-item-name-block">
<strong class="product-item-name" data-bind="html: getNameUnsanitizedHtml($parent)"></strong>
<div class="details-qty">
<span class="label"><!-- ko i18n: 'Qty' --><!-- /ko --></span>
<span class="value" data-bind="text: $parent.qty"></span>
</div>
</div>
<!-- ko foreach: getRegion('after_details') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: (JSON.parse($parent.options).length > 0)-->
<div class="product options" data-bind="mageInit: {'collapsible':{'openedState': 'active'}}">
<span data-role="title" class="toggle"><!-- ko i18n: 'View Details' --><!-- /ko --></span>
<div class="product options active">
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="item-options">
<!--ko foreach: JSON.parse($parent.options)-->
<dt class="label" data-bind="text: label"></dt>
<!-- ko if: ($data.full_view)-->
<!-- ko with: {full_viewUnsanitizedHtml: $data.full_view}-->
<dd class="values" data-bind="html: full_viewUnsanitizedHtml"></dd>
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: ($data.full_view)-->
<!-- ko with: {valueUnsanitizedHtml: $data.value}-->
<dd class="values" data-bind="html: valueUnsanitizedHtml"></dd>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: ($data.full_view)-->
<!-- ko with: {full_viewUnsanitizedHtml: $data.full_view}-->
<dd class="values" data-bind="html: full_viewUnsanitizedHtml"></dd>
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: ($data.full_view)-->
<!-- ko with: {valueUnsanitizedHtml: $data.value}-->
<dd class="values" data-bind="html: valueUnsanitizedHtml"></dd>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</dl>
</div>
......@@ -48,5 +43,5 @@
<!-- /ko -->
</div>
<!-- ko foreach: getRegion('item_message') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
app/design/frontend/Joshine/breeze/Magento_Checkout/web/template/summary/item/details/thumbnail.html
......@@ -7,7 +7,9 @@
<span class="product-image-container"
data-bind="attr: {'style': 'height: ' + getHeight($parents[1])/2 + 'px; width: ' + getWidth($parents[1])/2 + 'px;' }">
<span class="product-image-wrapper">
<img
data-bind="attr: {'src': getSrc($parents[1]), 'width': getWidth($parents[1]), 'height': getHeight($parents[1]), 'alt': getAlt($parents[1]), 'title': getAlt($parents[1]) }"/>
<img data-bind="attr: {'src': getSrc($parents[1]), 'width': getWidth($parents[1]), 'height': getHeight($parents[1]), 'alt': getAlt($parents[1]), 'title': getAlt($parents[1]) }"/>
</span>
<div class="details-qty">
<span class="value" data-bind="text: $parents[1].qty"></span>
</div>
</span>
app/design/frontend/Joshine/breeze/Magento_Checkout/web/template/summary/subtotal.html
......@@ -5,12 +5,12 @@
*/
-->
<tr class="totals">
<tr class="totals subtotal">
<th class="mark" scope="row" data-bind="text: title"></th>
<td class="amount">
<span class="price" data-bind ="text: getValue(), attr:{'data-label': title}"></span>
<!-- ko foreach: elems() -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</td>
</tr>
lib/web/jquery/jquery.validate.js
......@@ -697,11 +697,7 @@
showLabel: function (element, message) {
if($('body').hasClass('checkout-index-index'))
{
if($(element).is('select')){
$(element).prev('input').addClass('error-border-style');
}else if($(element).is('input')){
$(element).addClass('error-border-style');
}
$(element).parent().addClass('error-border-style');
this.toShow = this.toShow.add('');
}
else {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment