Remove payment_address payment_method from checkout/checkout page Opencart 3.x - opencart

hi i need to remove payment_address payment_method from checkout/checkout page Opencart 3.x.
i donot want extension, please some body help on this.

Theoretically, you can activate a COD payment method and then simply hide this step with basic CSS and a bit of JS to open the final step in the default checkout.
But Opencart heavily relies on Payment_address. Payment Address has several fields that are required like country, zone and often postcode.
Removing the payment_address will break the whole system. What you can do is via simple HTML and CSS, populate the fields with default values and then hide with CSS.
for example in catalog/view/theme/default/template/checkout/payment_address.twig
...html
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-payment-firstname">{{ entry_firstname }}</label>
<div class="col-sm-10">
<input type="text" name="firstname" value="<MY_DEFAULT_FIRST_NAME>" placeholder="{{ entry_firstname }}" id="input-payment-firstname" class="form-control" />
</div>
</div>
...
do this for all the fields.
then in catalog/view/theme/default/template/checkout/checkout.twig do style="display:none'
<div class="panel panel-default" style="display:none">
<div class="panel-heading">
<h4 class="panel-title">{{ text_checkout_account }}</h4>
</div>
<div class="panel-collapse collapse" id="collapse-payment-address">
<div class="panel-body"></div>
</div>
</div>
{% else %}
<div class="panel panel-default" style="display:none">
<div class="panel-heading">
<h4 class="panel-title">{{ text_checkout_payment_address }}</h4>
</div>
<div class="panel-collapse collapse" id="collapse-payment-address">
<div class="panel-body"></div>
</div>
</div>
this will just hide the payment_address block but it will still be there.
and now you need to skip the payment address step by calling the Continue button via JavaScript
so in the same file catalog/view/theme/default/template/checkout/checkout.twig
after line 165
$('a[href=\'#collapse-payment-address\']').trigger('click');
//add this code to trigger continue button:
$('#button-payment-address').trigger('click');
You might need to wrap the trigger click action with setTimeout becuase you might trigger the click before the form is actually loaded.
I would also advise to do this in a CUSTOM theme folder, and not in the default opencart theme. this way you can do the modifications without touching the core file.

Related

How do I make my livewire store method send data using POST, seems it is using a GET method

public function storeProject()
{
$this->validate();
$fileName = $this->files->store('uploads');
Project::create([
'title' => $this->title,
'description' => $this->description,
'files' => $fileName,
'skills' => $this->skills,
]);
session()->flash('message', 'Your Project has been posted Successfully!');
}
My View
#section('title', 'Post a job')
<div>
<div class="py-12 font-sans">
<div class="max-w-5xl mx-auto sm:px-6 lg:px-8">
<div class="m-4 p-4 bg-gradient-to-r from-blue-800 via-blue-700 to-blue-600 text-white rounded-md">
<h2 class="text-4xl">Tell us what you need done!</h2>
<p class="break-words mt-5">Within minutes, get in touch with knowledgeable independent contractors. View
their profiles, give them feedback, look at their portfolios, and talk with them. Only pay the
freelancer once you are completely satisfied with their job.
</p>
</div>
<div>
{{-- Form is located here --}}
<form enctype="multipart/form-data">
<div class="mb-6">
<label for="title">Choose a Title for your Project</label>
<input type="title" id="title" name="title" wire:model.lazy="title"
placeholder="e.g. Build me a website">
</div>
<div class="mb-6">
<label for="message">Tells more about your project</label>
<textarea id="description" name="description" rows="4" wire:model.lazy="description"
placeholder="Describe your project here..." maxlength="4000"></textarea>
</div>
<div class="mb-6">
<label for="user_avatar">Upload file</label>
<input wire:model="files" aria-describedby="user_avatar_help" id="user_avatar" name="files"
type="file">
</div>
<div class="mb-6">
<label for="skills">
What skills are required</label>
<p class="break-words mt-2">Enter up to 5 skills that best describe your project. Freelancers
will use these skills to find projects they are most interested and experienced in.</p>
<input type="text" id="skills" name="skills" data-role="tags-input"
wire:model.lazy="skills" placeholder="Enter skills here separated by commas...">
</div>
<button type="submit" wire:click="storeProject">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. This is my blade code.
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
You need to change the form tag and the submit button:
<form wire:submit.prevent="storeProject">
<button type="submit">
Submit
</button>
This will take care of the page refresh and the GET call. You do not need enctype="multipart/form-data" when using Livewire.
I think that you have created a controller function storeProject() and a blade view with your <form enctype="multipart/form-data"> which is completely wrong. Check here how livewire should work https://laracasts.com/

Bootstrap Datepicker goes bottom

I am not an expert in Bootstrap 3. It was my first time to use the widget "datepicker". I have two date pickers that need to be displayed inline to each other. When I try a normal input it works but if it is a date picker it goes a little far at the bottom. I tried the position relative however it did not resolve the issue. See screen shot attached.Date picker goes at the bottom
Hope some one can give me some light. Below is my code.`
<div class="horiz-search-bar-wrapper">
<form class="form-inline">
<div class="form-group">
<label><strong>Search</strong></label>
</div>
<div class="input-daterange">
<div class="form-group rel-position-date">
<label>Check-In:</label>
<div class="input-group input-append date" id="from">
<input type="text" class="form-control">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
<div class="form-group rel-position-date">
<label>Check-Out</label>
<div class="input-group input-append date" id="to">
<input type="text" class="form-control">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<div class="form-group mar-left">
<button type="button" class="btn btn-primary">
Submit
</button>
</div>
</form>
</div>
`
Just an update to this, we were able to fixed the issue by replacing the <label></label> tag to <span></span>. The bootstrap datepicker adds top pixels when it sees more than 1 label.
Hope this could help the others.
I was also seeing issues with the Datepicker appearing too low. Whether the targeted element was toward the top or bottom of the viewport and the Datepicker was respectively orienting itself above or below the element, I was seeing a Datepicker appear "too-low."
Stumbled on to a fix with some JavaScript hackery bound to the DP's "show" event/hook.
Note the use of the native Boostrap CSS utility classes datepicker-orient-top and datepicker-orient-bottom.
$('#DateOfBirthForEditing').datepicker().on("show", function (e) {
var refDatePicker = $('div.datepicker.datepicker-dropdown');
var refDatePickerField = $('#DateOfBirthForEditing');
var fieldPositionTop = refDatePickerField.offset().top;
var dpModalTopOffset = 0;
if (refDatePicker.hasClass('datepicker-orient-top')) {
dpModalTopOffset = fieldPositionTop - 255;
} else if (refDatePicker.hasClass('datepicker-orient-bottom')) {
dpModalTopOffset = fieldPositionTop + 30;
}
refDatePicker.css({ "top": dpModalTopOffset });
});

Dropdown Trigger Visually "Active" Like "Hover" [Foundation 6]

See the below code for a basic hover dropdown-pane:
<button class="button" type="button" data-toggle="example">Toggle Dropdown</button>
<div class="dropdown-pane" id="example" data-dropdown data-dropdown data-hover="true" data-hover-pane="true">
<div class="row">
<div class="medium-12 columns">
<p>When I am hovering over any content in this dropdown-pane, how can I make the above button appear as "active" i.e. Same state as hovering over the button.</p>
</div>
</div>
</div>
Now what I'd like to have happen is that when the user is viewing any content within that dropdown-pane, the button that triggered the event has a visual indicator that it is the "active" trigger. Here's a picture example:
Any insight you can provide would be very much appreciated.
Foundation has you covered here.
When the .dropdown-pane (content wrapper) is active, the button is given the class .hover (not to be confused with :hover state).
So you can simply add specific styles to that class (relative to your button if you want multiple different types of effect in different scenarios). You would have to manually ensure that your Foundation :hover matched your new .hover state.
HTML (e.g.)
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
Example form in a dropdown.
<form>
<div class="row">
<div class="medium-6 columns">
<label>Name
<input type="text" placeholder="Kirk, James T.">
</label>
</div>
<div class="medium-6 columns">
<label>Rank
<input type="text" placeholder="Captain">
</label>
</div>
</div>
</form>
</div>
<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
Just some junk that needs to be said. Or not. Your choice.
</div>
CSS
.button.hover,
.button:hover{
background-color: green;
}
Working example: https://jsfiddle.net/tymothytym/8re4jcy0/ << in this example (and above) I'm manually setting :hover and .hover because I've used a default F6 CSS build which has a set :hover state but if you have already set :hover (e.g. to green) you don't need to re-set it.
Use css. Find the style of the hovered over button and either make an :hover pseudo class and apply the style that way or you can use javascript to add a class to the element that will have the exact css as the hovered over button.
.element:hover{
add styles here
}
or
var element=document.getElementByClassName('.className');
element.addClass('.classToAdd');

Can Foundation 4 have a scope?

Can Foundation 4 be initialized only in certain areas of the page?
For instance, if I have 2 divs, can I call foundation("#div2") and all CSS and javascript events are applied only within div#2?
Thanks a 1000!
Generally it won't affect you. The grid system for example is mainly controlled by CSS. For forms, unless you apply the custom class to your form the js for forms elements won't kick in. To illustrate that, one of the two forms below has the custom class and the other don't. Notice that Foundation will add two anchor tags and an unordered list for the form with custom class:
<form id="form1">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<form id="form2" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
Here's the fiddle to that to see it in action.
UPDATE: For general "section formatting" yes you can apply foundation to some sections of your page. But take note though that the grid system will still be applied even if the grid is outside the section you targeted. Again, that is because they are mainly controlled by CSS. Here's another illustration:
<h1>The Grid System will still be applied to this</h1>
<div class="row1">
<div class="large-5 large-centered columns">
<p class="panel">Centered Div</p>
</div>
</div>
<div id="foundationArea">
<h1>Only apply Foundation here</h1>
<form id="form1" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<div class="row">
<div class="large-6 columns panel">
<p>Test</p>
</div>
</div>
</div>
<h1>Foundation is not allowed here</h1>
<form id="form2" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
See this updated fiddle to show the updated example given here.

Display element in form using Zurb Foundation

I'm using the CSS Framework Foundation and when I write the following code:
<div class="row">
<div class="two mobile-one columns"><label for="invoiceterm-summary" class="right inline">Become late <span class="required">*</span></label></div>
<div class="ten mobile-three columns"><input class="one" id="invoiceterm-late" name="invoiceterm[late]" type="text" value=""> days after invoice sent</div>
</div>
​
I get this :
But I want to display the text "days after invoice sent" like this:
You should place all of these elements into a single:
<div class="row">
<div class="twelve mobile-four columns"></div>
</div>
Otherwise it is behaving correctly, stacking the columns as the screen size is reduced.
I had to remove the display: block property from the css definition of the input[type="text"] on the foundation.css file