장바구니 페이지 만들기 | Symfony로 쇼핑 카트 만들기

21468 단어 formsymfonyphptutorial

  • Building Forms
  • The CartItemType Form
  • The CartType Form

  • Creating the Controller

  • Rendering the Cart Page
  • List of items
  • The Cart summary

  • Handling the Form
  • Adding a Link to the Cart Page



    • 카트 페이지에서는 사용자가 구매하려는 제품을 관리할 수 있습니다. 사용자는 다음을 수행할 수 있습니다.
  • 카트의 제품 수량 업데이트,
  • 카트에서 제품 제거,
  • 장바구니 비우기,
  • 카트의 제품 목록 보기,
  • 장바구니에 담긴 제품의 수량 보기,
  • 카트 요약을 참조하십시오.

    • 건물 양식

    CartItemType 양식

    The CartItemType form will manage the form fields for an OrderItem object of an Order . It will contain the following fields:

    • quantity: the number of quantity of the product the customer wants to purchase,
    • remove: a submit button to remove the product from the cart.

    Use the Maker to generate the form:

    $ symfony console make:form CartItemType OrderItem

    Customize it to have the fields we need:

    <?php

namespace App\Form;

use App\Entity\OrderItem;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class CartItemType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('quantity')
            ->add('remove', SubmitType::class)
        ;
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => OrderItem::class
        ]);
    }
}

    CartType 양식

    The CartType form will be the main form and manage all items in the cart. It will contain the following fields:

    • items: a collection of CartItemType form type. It will allow us to modify all OrderItem items of an Order right inside the cart form itself,
    • save: a submit button to save the cart,
    • clear: a submit button to clear the cart.

    Use the Maker to generate this class:

    $ symfony console make:form CartType Order

    Customize it to have the fields we need:

    <?php

namespace App\Form;

use App\Entity\Order;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\CollectionType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class CartType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('items', CollectionType::class, [
                'entry_type' => CartItemType::class
            ])
            ->add('save', SubmitType::class)
            ->add('clear', SubmitType::class);
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Order::class,
        ]);
    }
}

    컨트롤러 만들기

    Create the CartController controller via the Maker:

    $ symfony console make:controller CartController

    The command creates a CartController class under the src/Controller/ directory and a template file to templates/cart/index.html.twig .

    <?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class CartController extends AbstractController
{
    /**
     * @Route("/cart", name="cart")
     */
    public function index(): Response
    {
        return $this->render('cart/index.html.twig', [
            'controller_name' => 'CartController',
        ]);
    }
}

    In the CartController controller, implement the index() method:

    • Get the current cart using the CartManager and,
    • Create the CartType form with the cart as form data and,
    • Pass the form view and the cart to the Twig template cart/index.html.twig 
    <?php

namespace App\Controller;

use App\Form\CartType;
use App\Manager\CartManager;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

/**
 * Class CartController
 * @package App\Controller
 */
class CartController extends AbstractController
{
    /**
     * @Route("/cart", name="cart")
     */
    public function index(CartManager $cartManager): Response
    {
        $cart = $cartManager->getCurrentCart();
        $form = $this->createForm(CartType::class, $cart);

        return $this->render('cart/index.html.twig', [
            'cart' => $cart,
            'form' => $form->createView()
        ]);
    }
}

    카트 페이지 렌더링

    104544410104446792410 10466464646464646464646466664646664666646666646464646710104444104446792410

    In the cart/index.html.twig file, add the two-column layout grid below:

    {% extends 'base.html.twig' %}

{% block title %}Cart{% endblock %}

{% block body %}
    <div class="container mt-4">
        <h1>Your Cart</h1>
        {% if cart.items.count > 0 %}
            <div class="row mt-4">
                <!-- List of items -->
                <div class="col-md-8"></div>
                <!-- Summary -->
                <div class="col-md-4"></div>
            </div>
        {% else %}
            <div class="alert alert-info">
                Your cart is empty. Go to the <a href="{{ path('home') }}">product list</a>.
            </div>
        {% endif %}
    </div>
{% endblock %}

    If the cart is empty, we add a link to the product list.



    양식 처리

    왼쪽 열에서 form_start() , form_end() , form_widget() 및 form_errors() Twig 함수를 사용하여 장바구니 양식(장바구니에 있는 항목 목록)을 렌더링합니다. <사업부 클래스="col-md-8"> {{ form_start(양식) }} <사업부 클래스="카드"> <div class="card-header bg-dark text-white d-flex"> <h5>항목</h5> <사업부 클래스="ml-자동"> {{ form_widget(form.save, {'attr': {'class': 'btn btn-warning'}}) }} {{ form_widget(form.clear, {'attr': {'class': 'btn btn-light'}}) }} </div> </div> <ul class="목록-그룹 목록-그룹-플러시"> {form.items %}의 항목에 대한 % <li class="목록-그룹-항목 d-flex"> <사업부 클래스="플렉스 채우기 mr-2"> <img src="https://via.placeholder.com/200x150" width="64" alt="제품 이미지"> </div> <사업부 클래스="플렉스 채우기 mr-2"> <h5 class="mt-0 mb-0">{{ item.vars.data.product.name }}</h5> <small>{{ item.vars.data.product.description[:50] }}...</small> <div class="form-inline mt-2"> <div class="form-group mb-0 mr-2"> {{ form_widget(항목.수량, { '특성': { 'class': 'form-control form-control-sm' ~ (item.quantity.vars.valid ? '': 'is-invalid') } }) }} <div class="invalid-feedback"> {{ form_errors(항목.수량) }} </div> </div> {{ form_widget(item.remove, {'attr': {'class': 'btn btn-dark btn-sm'}}) }} </div> </div> <div class="flex-fill mr-2 텍스트 오른쪽"> <b>{{ item.vars.data.product.price }} €</b> </div> </리> {% endfor %} </ul> </div> {{ form_end(form, {'render_rest': false}) }} </div> 우리는 Javascript를 사용하지 않기 때문에 고객이 Enter 키를 누를 때 다른 제출 버튼(예: 삭제 버튼)을 제출하지 않도록 양식 시작 부분에 저장 버튼을 배치해야 합니다. 제출 버튼이 여러 개 있을 때 Enter 키를 누르면 양식이 기본적으로 찾은 첫 번째 제출 버튼을 사용하기 때문입니다. 카트 페이지에 링크 추가

    In the right column, add the cart summary:

    <div class="col-md-4">
    <div class="card mt-4 mt-md-0">
        <h5 class="card-header bg-dark text-white">Summary</h5>
        <ul class="list-group list-group-flush">
            <li class="list-group-item d-flex justify-content-between">
                <div><b>Total</b></div>
                <span><b>{{ cart.total }} €</b></span>
            </li>
        </ul>
        <div class="card-body">
            <a href="#" class="btn btn-warning w-100">Checkout</a>
        </div>
    </div>
</div>
    You already can see the cart page on

    제거 및 지우기 버튼은 무엇입니까? 다음 두 단계에서 이를 관리할 것입니다.
    Firestore에 INQuery가 지원되었으므로 SDK, Ballcap에서 시도해보십시오.
    Cloud Firestore의 실시간 업데이트로 초기 상태의 added 이벤트 발화로 인한 요금 청구 방지

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage