I want to add a link (Continue Shopping
) that takes me to the homepage, on the checkout step myshop.com/checkout
refer to image attached.
Magento 2.1 – How to Add a Custom Link in Checkout
checkout-pagemagento-2.1onepage-checkout
Related Solutions
Finally i got the answer for 1st qestion. But i want to add YOUR CHECKOUT PROGRESS
tab. 1st question answer is add new function in skin\frontend\base\default\js\opcheckout.js
After shipping method
line no - 550 to 600
add following code
var DeliveryinstructionsMethod = Class.create();
DeliveryinstructionsMethod.prototype = {
initialize: function(form, saveUrl){
this.form = form;
if ($(this.form)) {
$(this.form).observe('submit', function(event){this.save();Event.stop(event);}.bind(this));
}
this.saveUrl = saveUrl;
this.validator = new Validation(this.form);
this.onSave = this.nextStep.bindAsEventListener(this);
this.onComplete = this.resetLoadWaiting.bindAsEventListener(this);
},
validate: function() {
var methods = document.getElementsByName('deliveryinstructions');
if (methods.length==0) {
alert(Translator.translate('Your order cannot be completed at this time as there is no shipping methods available for it. Please make necessary changes in your shipping address.').stripTags());
return false;
}
if(!this.validator.validate()) {
return false;
}
for (var i=0; i<methods.length; i++) {
if (methods[i].checked) {
return true;
}
}
alert(Translator.translate('Please specify shipping method.').stripTags());
return false;
},
save: function(){
if (checkout.loadWaiting!=false) return;
if (this.validate()) {
checkout.setLoadWaiting('shipping-method');
new Ajax.Request(
this.saveUrl,
{
method:'post',
onComplete: this.onComplete,
onSuccess: this.onSave,
onFailure: checkout.ajaxFailure.bind(checkout),
parameters: Form.serialize(this.form)
}
);
}
},
resetLoadWaiting: function(transport){
checkout.setLoadWaiting(false);
},
nextStep: function(transport){
var response = transport.responseJSON || transport.responseText.evalJSON(true) || {};
if (response.error) {
alert(response.message.stripTags().toString());
return false;
}
if (response.update_section) {
$('checkout-'+response.update_section.name+'-load').update(response.update_section.html);
}
payment.initWhatIsCvvListeners();
if (response.goto_section) {
checkout.gotoSection(response.goto_section, true);
checkout.reloadProgressBlock();
return;
}
if (response.payment_methods_html) {
$('checkout-payment-method-load').update(response.payment_methods_html);
}
checkout.setShippingMethod();
}
};
And deliveryinstructions.phtml
<form id="co-deliveryinstructions-form" action="">
<div id="checkout-deliveryinstructions-load">
<!-- Content loaded dynamically -->
</div>
<script type="text/javascript">
//<![CDATA[
var deliveryinstructionsMethod = new DeliveryinstructionsMethod('co-deliveryinstructions-form', "<?php echo $this->getUrl('checkout/onepage/saveDeliveryinstructions') ?>");
//]]>
</script>
<div id="onepage-checkout-deliveryinstructions-additional-load">
<?php echo $this->getChildHtml('additional') ?>
</div>
<div class="buttons-set" id="deliveryinstructions-buttons-container">
<p class="back-link"><a href="#" onclick="checkout.back(); return false;"><small>« </small><?php echo $this->__('Back') ?></a></p>
<button type="button" class="button" onclick="deliveryinstructionsMethod.save()"><span><span><?php echo $this->__('Continue') ?></span></span></button>
<span id="deliveryinstructions-please-wait" class="please-wait" style="display:none;">
<img src="<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif') ?>" alt="<?php echo Mage::helper('core')->quoteEscape($this->__('Loading next step...')) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Loading next step...')) ?>" class="v-middle" /> <?php echo $this->__('Loading next step...') ?>
</span>
</div>
</form>
There is some changes in below 2 files:
File-1: app/code/Dgs/DgsDealerStep/view/frontend/web/template/dealer-checkout-step.html
<!--The 'step_code' value from the .js file should be used-->
<li id="step_code" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Step Title'" data-role="title"></div>
<div id="checkout-step-title" class="step-content" data-role="content">
<!-- ko foreach: getRegion('custom-checkout-form-container') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
</li>
File-2: app/code/Dgs/DgsDealerStep/view/frontend/layout/checkout_index_index.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<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="children" xsi:type="array">
<!-- The new step you add -->
<item name="my-new-step" xsi:type="array">
<item name="component" xsi:type="string">Dgs_DealerStep/js/view/dealer-checkout-step</item>
<!--To display step content before shipping step "sortOrder" value should be < 1-->
<!--To display step content between shipping step and payment step 1 < "sortOrder" < 2 -->
<!--To display step content after payment step "sortOrder" > 2 -->
<item name="sortOrder" xsi:type="string">2</item>
<item name="children" xsi:type="array">
<!--add here child component declaration for your step-->
<!-- This is the form that I want show in my new step -->
<!-- Your form declaration here -->
<item name="custom-checkout-form-container" xsi:type="array">
<item name="component" xsi:type="string">Dgs_DealerStep/js/view/dealer</item>
<item name="displayArea" xsi:type="string">custom-checkout-form-container</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Dgs_DealerStep/dealer</item>
</item>
<item name="children" xsi:type="array">
<item name="custom-checkout-form-fieldset" xsi:type="array">
<!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
<item name="component" xsi:type="string">uiComponent</item>
<!-- the following display area is used in template (see below) -->
<item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
<item name="children" xsi:type="array">
<item name="text_field" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
<!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
<item name="customScope" xsi:type="string">customCheckoutForm</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">customCheckoutForm.text_field</item>
<item name="label" xsi:type="string">Text Field</item>
<item name="sortOrder" xsi:type="string">1</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="string">true</item>
</item>
</item>
<item name="checkbox_field" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
<item name="config" xsi:type="array">
<!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
<item name="customScope" xsi:type="string">customCheckoutForm</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
<item name="label" xsi:type="string">Checkbox Field</item>
<item name="sortOrder" xsi:type="string">3</item>
</item>
<item name="select_field" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
<item name="config" xsi:type="array">
<!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
<item name="customScope" xsi:type="string">customCheckoutForm</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
</item>
<item name="options" xsi:type="array">
<item name="0" xsi:type="array">
<item name="label" xsi:type="string">Please select value</item>
<item name="value" xsi:type="string"></item>
</item>
<item name="1" xsi:type="array">
<item name="label" xsi:type="string">Value 1</item>
<item name="value" xsi:type="string">value_1</item>
</item>
<item name="2" xsi:type="array">
<item name="label" xsi:type="string">Value 2</item>
<item name="value" xsi:type="string">value_2</item>
</item>
</item>
<!-- value element allows to specify default value of the form field -->
<item name="value" xsi:type="string">value_2</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">customCheckoutForm.select_field</item>
<item name="label" xsi:type="string">Select Field</item>
<item name="sortOrder" xsi:type="string">2</item>
</item>
<item name="date_field" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
<item name="config" xsi:type="array">
<!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
<item name="customScope" xsi:type="string">customCheckoutForm</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">customCheckoutForm.date_field</item>
<item name="label" xsi:type="string">Date Field</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="string">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Please Note Atfer This Need to run below commands;
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
Hope this helps....!
Best Answer
Override
/vendor/magento/module-checkout/view/frontend/web/template/shipping.html
in your custom themeOR If you have custom module Override
shipping.html
atNow add custom link before
<div class="actions-toolbar">
like thisNow deploy static files by
php bin/magento setup:static-content:deploy
and flush cacheOUTPUT: