WBDSGNR - Real Life Implement

Thursday 25 January 2024

Woocommerce My Account Better Look

/* Change WC Acct Page Column Widths */

@media only screen and (min-width: 769px) {

.woocommerce-account .woocommerce-MyAccount-navigation {

width: 22%;

}

.woocommerce-account .woocommerce-MyAccount-content {

width: 75%;

}

/* Style WC Account Endpoint Links */

nav.woocommerce-MyAccount-navigation ul {

list-style-type: none;

padding-left: 0;

max-width:200px;

font-size: 17px;

line-height: 26px;

}

nav.woocommerce-MyAccount-navigation ul li {

padding: 8px 20px;

background-color: rgba(0,0,0,0.05);

border-bottom: 1px solid rgba(0,0,0,0.05);

}

nav.woocommerce-MyAccount-navigation ul li.is-active {

background-color: rgba(0,0,0,0.1);

}

nav.woocommerce-MyAccount-navigation ul li.is-active a {

color: rgba(0,0,0,0.8); cursor: default;

}

nav.woocommerce-MyAccount-navigation ul li.is-active:after {

content: "";

height: 0;

width: 0;

border-top: 20px solid transparent;

border-left: 14px solid rgba(0,0,0,0.1);

border-bottom: 20px solid transparent;

float: right;

margin-right: -34px;

margin-top: -7px;

}

nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover {

background-color: rgba(0,0,0,0.07);

}

nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover:after {

content: "";

height: 0;

width: 0;

border-top: 20px solid transparent;

border-left: 14px solid rgba(0,0,0,0.07);

border-bottom: 20px solid transparent;

float: right;

margin-right: -34px;

margin-top: -7px;

}

#left-area ul, .entry-content ul, .et-l--body ul, .et-l--footer ul, .et-l--header ul {

list-style-type: none;

padding: 0 0 0 0;

line-height: 26px;

}

Wednesday 6 December 2023

JS: TOGGLE HIDE + ARRAY

<style>

.ET1, .ET2, .ET3 {

display: none;

}

</style>

// Define an array of ID-class pairs

var idClassPairs = [

{ id: 'ET1', class: 'ET1' },

{ id: 'ET2', class: 'ET2' },

{ id: 'ET3', class: 'ET3' }

// Add more pairs as needed

];

// Add click event listeners dynamically based on the array

idClassPairs.forEach(function(pair) {

var triggerElement = document.getElementById(pair.id);

var hiddenElement = document.querySelector('.' + pair.class);

triggerElement.addEventListener('click', function() {

hiddenElement.classList.toggle(pair.class);

});

</script>

Friday 27 October 2023

CSS: display grid of card 3 in a row

.product-list-container {

display: grid;

grid-template-columns: repeat(3, 1fr); /* Three cards per row */

grid-gap: 20px; /* Adjust the gap between cards as needed */

}

SVG + JAVASCRIPT + CSS : CLICK AREA, OPEN CLOSE TOGGLE CLASS ELEMENT TO SHOW CONTENT

SVG TOGGLE OPEN AREA #SVG

<style>

.toggle-path.grayarea {

fill: purple !important; /* Add !important to override any inline styles */

}

.toggle-path.grayarea:hover {

fill: green !important; /* Add !important to override any inline styles */

}

</style>

</svg>

<p>Gray Area Content</p>

</div>

<p>Gray Area Content</p>

</div>

<p>Gray Area Content</p>

</div>

<p>Blue Area Content</p>

</div>

<p>Green Area Content 1</p>

</div>

</div>

const togglePaths = document.querySelectorAll(".toggle-path");

const toggleContents = document.querySelectorAll(".toggle-content");

togglePaths.forEach((path, index) => {

path.addEventListener("click", function () {

// Hide all content elements

toggleContents.forEach((content) => {

content.style.display = "none";

});

// Show the content associated with the clicked path

const contentClass = path.getAttribute("data-content");

const contentToShow = document.querySelectorAll(.${contentClass});

if (contentToShow) {

contentToShow.forEach((content) => {

content.style.display = "block";

});

}

});

</script>

WHAT WE TRY TO DO?

WE TRY TO MAKE SVG PATH AS A BUTTON TO OPEN ELEMENT WITH CLASSES TOGGLE

Friday 24 March 2023

Laravel Model CRUD

Step 1: Create the 'Task' model

Open your command prompt or terminal and navigate to your Laravel project's directory
Run the following command to create the 'Task' model:

arduino
php artisan make:model Task -m

This command will create a new model named 'Task' and also create a migration file for the 'tasks' table in the database.

Step 2: Define the 'tasks' table schema

Open the newly created migration file located in the 'database/migrations' directory and define the 'tasks' table schema:

php
public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('description')->nullable();
        $table->timestamps();
    });
}

This schema will create a 'tasks' table with an auto-incrementing 'id' column, a 'title' column of type string, a 'description' column of type text and nullable, and two timestamp columns named 'created_at' and 'updated_at'.

Step 3: Run the migration

Run the following command to run the migration:


php artisan migrate

This command will create the 'tasks' table in the database.

Step 4: Define the 'Task' model attributes

Open the 'Task' model located in the 'app' directory and define the attributes that correspond to the 'tasks' table columns:

php
namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    protected $fillable = ['title', 'description'];
}

This model defines two attributes, 'title' and 'description', that are fillable for mass assignment.

Step 5: Create the 'Task' controller

Run the following command to create a new controller named 'TaskController':

go
php artisan make:controller TaskController --resource

This command will create a new controller named 'TaskController' with all the necessary CRUD methods.

Step 6: Implement the 'Task' controller methods

Open the 'TaskController' located in the 'app/Http/Controllers' directory and implement the following methods:

php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Task;

class TaskController extends Controller
{
    public function index()
    {
        $tasks = Task::all();
        return view('tasks.index', compact('tasks'));
    }

    public function create()
    {
        return view('tasks.create');
    }

    public function store(Request $request)
    {
        $task = new Task();
        $task->title = $request->input('title');
        $task->description = $request->input('description');
        $task->save();

        return redirect()->route('tasks.index');
    }

    public function show(Task $task)
    {
        return view('tasks.show', compact('task'));
    }

    public function edit(Task $task)
    {
        return view('tasks.edit', compact('task'));
    }

    public function update(Request $request, Task $task)
    {
        $task->title = $request->input('title');
        $task->description = $request->input('description');
        $task->save();

        return redirect()->route('tasks.index');
    }

    public function destroy(Task $task)
    {
        $task->delete();

        return redirect()->route('tasks.index');
    }
}

These methods correspond to the CRUD operations for the 'Task' model.
The 'index' method retrieves all the tasks from the database

In Laravel, the view files are usually located in the 'resources/views' directory. You can create a subdirectory inside the 'resources/views' directory with the same name as your controller to organize your views for that controller. For example, if your controller is named 'TaskController', you can create a 'tasks' subdirectory inside the 'resources/views' directory and store all the view files for the 'TaskController' in that directory.

So, for example, you can create the following view files for the 'TaskController':

'index.blade.php' located in 'resources/views/tasks/'
'create.blade.php' located in 'resources/views/tasks/'
'edit.blade.php' located in 'resources/views/tasks/'
'show.blade.php' located in 'resources/views/tasks/'

Note that you can name your view files anything you want, as long as they end with '.blade.php' and are located in the 'resources/views' directory or one of its subdirectories. Also, remember to update the view file names in the 'TaskController' methods where necessary.

example of index.blade.php

here is an example of an 'index.blade.php' view file for the 'TaskController':

html
@extends('layouts.app')

@section('content')
    <h1>Tasks</h1>
    <a href="{{ route('tasks.create') }}" class="btn btn-primary mb-3">Create Task</a>
    <table class="table">
        <thead>
            <tr>
                <th>Title</th>
                <th>Description</th>
                <th>Created At</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($tasks as $task)
                <tr>
                    <td>{{ $task->title }}</td>
                    <td>{{ $task->description }}</td>
                    <td>{{ $task->created_at }}</td>
                    <td>
                        <a href="{{ route('tasks.show', $task) }}" class="btn btn-primary">Show</a>
                        <a href="{{ route('tasks.edit', $task) }}" class="btn btn-secondary">Edit</a>
                        <form action="{{ route('tasks.destroy', $task) }}" method="POST" class="d-inline-block">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this task?')">Delete</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

This view file displays a table of all the tasks with their title, description, and created_at date. It also includes buttons to show, edit, and delete each task, as well as a button to create a new task.

you can add the following route to your 'routes/web.php' file:

php
Route::resource('tasks', 'TaskController');

This route will create the necessary routes for the 'TaskController', including a route that points to the 'index' method.

here is an example of a 'create.blade.php' view file for the 'TaskController':

html
@extends('layouts.app')

@section('content')
    <h1>Create Task</h1>
    <form action="{{ route('tasks.store') }}" method="POST">
        @csrf
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" name="title" id="title" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="description">Description</label>
            <textarea name="description" id="description" class="form-control" rows="5" required></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Create</button>
    </form>
@endsection

here is an example of a 'show.blade.php' view file for the 'TaskController':

html
@extends('layouts.app')

@section('content')
    <h1>{{ $task->title }}</h1>
    <p>{{ $task->description }}</p>
    <p>Created At: {{ $task->created_at }}</p>
    <p>Updated At: {{ $task->updated_at }}</p>
    <a href="{{ route('tasks.edit', $task) }}" class="btn btn-secondary">Edit</a>
    <form action="{{ route('tasks.destroy', $task) }}" method="POST" class="d-inline-block">
        @csrf
        @method('DELETE')
        <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this task?')">Delete</button>
    </form>
@endsection

here is an example of an 'edit.blade.php' view file for the 'TaskController':

html
@extends('layouts.app')

@section('content')
    <h1>Edit Task</h1>
    <form action="{{ route('tasks.update', $task) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" name="title" id="title" class="form-control" value="{{ $task->title }}" required>
        </div>
        <div class="form-group">
            <label for="description">Description</label>
            <textarea name="description" id="description" class="form-control" rows="5" required>{{ $task->description }}</textarea>
        </div>
        <button type="submit" class="btn btn-primary">Update</button>
    </form>
@endsection

This view file displays a form with fields for editing a task's title and description. It also includes an 'Update' button to submit the form.